java开发工程师入门第二阶段(05-web前端(HTML))
文章目录
一.HTML
1.HTML概述
HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美，网站开发它却是霸主。
2.结构
1.文档声明，用来声明HTML文档所遵循的HTML规范。
2.头部分，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。
3.体部分，用来存放网页要显示的数据。
4.声明网页标题
5.用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。
入门案例:
<!doctype html><html><head><title>quickstart</title><meta charset="UTF-8"/></head><body>hello html ~你好呀</body></html>3.语法
1. HTML标签
HTML是一门标记语言，标签分为开始标签和结束标签，如。
如果开始和结束中间没有内容，可以合并成一个自闭标签
2. HTML属性&注释&空格&换行
HTML标签都可以具有属性，属性包括属性名和属性值，如果有多个属性，要以空格隔开。属性的值要用单引号或者双引号引起来。
如：<a href="" target="" name="" id=""></a>格式：换行：<br/>空格：在HTML中，多个空格会被当成一个空格来显示。3.常用标签
1.标题标签(H1—H6 越来越小)
<!DOCTYPE html><html><head><meta charset="utf-8"><title>常用标签</title></head><body><h1>31省份新增本土确诊41例 陕西35例</h1><h2>31省份新增本土确诊41例 陕西35例</h2><h3>31省份新增本土确诊41例 陕西35例</h3><h4>31省份新增本土确诊41例 陕西35例</h4><h5>31省份新增本土确诊41例 陕西35例</h5><h6>31省份新增本土确诊41例 陕西35例</h6></body></html>2.列表标签( 在网页中加入列表效果 )
<!DOCTYPE html><html><head><meta charset="utf-8"><title>常用标签</title></head><body><h3>热搜榜</h3><ul> <li>31省份新增本土确诊41例 陕西35例</li><li>稳住农业基本盘做好三农工作</li></ul><ol> <li>31省份新增本土确诊41例 陕西35例</li><li>稳住农业基本盘做好三农工作</li></ol></body></html>3.图片标签 & 超链接标签
<!DOCTYPE html><html><head><meta charset="utf-8"><title>常用标签</title></head><body><a href="https://www.baidu.com"> <img src="3.jpg"/> </a><br /><a href="#">百度一下</a> <br /><a href="https://www.baidu.com/" target="_blank">百度一下</a> <br /><a name="top">我是顶部</a><h1>北京富婆通讯录</h1><h1>北京富婆通讯录</h1><h1>北京富婆通讯录</h1><h1>北京富婆通讯录</h1><h1>北京富婆通讯录</h1><a href="#top"> ^ </a> <br /><img src="3.jpg" width="30%" height="800px"/><img src="3.jpg"/><img src="3.jpg"/></body></html>4.Input标签
<!DOCTYPE html><html><head><meta charset="utf-8"><title>常用标签</title></head><body>普通的输入框: <input type="text"/> <br />密码输入框: <input type="password"/><br />数字输入框: <input type="number"/><br />日期输入框: <input type="date"/><br />星期输入框: <input type="week"/><br />单选框: <input type="radio"/>男 <br />多选框: <input type="checkbox"/>吃饭 <br />普通按钮:<input type="button" value="保存"/><button>注册</button><br />提交按钮:把用户在浏览器输入的数据,提交给后端的java程序来处理<input type="submit" value="保存"/><button type="submit">保存</button></body></html>5.表格标签( 通常用来展示数据 )
<!DOCTYPE html><html><head><meta charset="utf-8"><title>常用标签</title></head><body><h3>流量调查表</h3><table bgcolor="lightblue" border="1px"><tr><th>总页面流量</th><th>共计来访</th><th>会员</th><th>游客</th></tr><tr><td>平均每人浏览</td><td colspan="3">1.58</td></tr></table><table bgcolor="pink" width="500px" border="1px" cellspacing="0"><tr><td colspan="2">11</td><td>13</td></tr><tr><td>21</td><td>22</td><td rowspan="2">23</td></tr><tr><td>31</td><td>32</td></tr></table></body></html>6.表单标签
只有表单标签,才能提交数据(是指 把前端输入的数据 提交给 java程序 的过程),表单标签本质上就是一个特殊的表格
<!DOCTYPE html><html><head><meta charset="utf-8"><title>常用标签</title></head><body><form><h1>注册表单</h1><table bgcolor="lightgray" border="1px" width="500px" cellspacing="0"><tr><td>用户名:</td><td><input type="text" name="user"/></td></tr><tr><td>密码:</td><td><input type="password" name="pwd"/></td></tr><tr><td>确认密码:</td><td><input type="password" /></td></tr><tr><td>昵称:</td><td><input type="text" /></td></tr><tr><td>邮箱:</td><td><input type="email" /></td></tr><tr><td>性别:</td><td><input type="radio" />男<input type="radio" />女</td></tr><tr><td>爱好:</td><td><input type="checkbox"/>篮球<input type="checkbox"/>足球<input type="checkbox"/>乒乓球</td></tr><tr><td>城市:</td><td><select><option>请选择</option><option>北京</option><option>广州</option><option>深圳</option></select></td></tr><tr><td>头像:</td><td><input type="file"/></td></tr><tr><td>验证码:</td><td><input type="text" /><img src="a.png" /><button>点我换一张</button></td></tr><tr><td>自我描述:</td><td><textarea>请在这里写...</textarea></td></tr><tr><td colspan="2"><button type="submit">提交</button><button type="reset">重置</button></td></tr></table></form></body></html>
