一、HTML结构
1.1标签<head>
整个页面的头部分，定义不在页面中展示的部分，主要是定义一些配置信息。
1.1.1**<title>**定义标题
1.1.2<meta>元标签
html
<!DOCTYPE html>
<html lang="zh-CN">
<!--
meta标签
1.meta标签的编码集的设置
字符集：字符 和 二进制 的在计算机中的存储关系
ascii（英）
gbk（中）
utf-8（通用）
2.作者信息设置
name属性 author
content属性 作者信息
3.meta标签的关键词(keywords)设置
name属性 keywords
content属性 关键字，关键字...
4.meta标签的描述(description)设置
name属性 description
content属性 描述信息
-->
<head>
<meta charset="utf-8" />
<meta name="author" content="powernode" />
<meta name="keywords" content="Java,盐水冰,041107" />
<meta name="description" content="java前端技术：html" />
<title>这是标题</title>
</head>
<body>
<p>这是页面</p>
</body>
</html>1.2标签<body>
1.2.1标题标签 - <h1~6>
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>标题标签</title>
</head>
<body>
<h1>我是标题</h1>
<h2>我是标题</h2>
<h3>我是标题</h3>
<h4>我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>
</body>
</html>1.2.2段落标签 - <p>
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>段落标签</title>
</head>
<body>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
</body>
</html>1.2.3无序列表 - <ul>
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>段落标签</title>
</head>
<body>
<ul type="square">
<li>豆浆</li>
<li>鸡蛋</li>
<li>煎饼</li>
<li>油条</li>
</ul>
</body>
</html>1.2.4有序列表 - <ol>
无论有序无序都可以嵌套
1.2.5超链接 - <a>
通过将文本或其他内容包裹在 <a> 元素内，并给它一个包含网址的 href 属性（也称之为超文本引用 或目标，它将包含一个网址）来创建一个基本链接
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>超链接</title>
</head>
<body>
<!--
a标签
-->
<!-- <a href="https://www.baidu.com/">百度链接</a> -->
<!-- <a href="https://www.baidu.com/">
<h1>盐水冰学习java中</h1>
</a> -->
<a href="https://www.baidu.com/">
<img src="img.png">
</a>
</body>
</html>超链接的提示信息和跳转位置设置
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>超链接</title>
</head>
<body>
<!--
提示信息 title
跳转位置 target
属性值_self:当前页面加载。(默认)
_blank:通常在新标签页打开，但用户可以通过配置选择在新窗口打开
-->
<a href="https://www.baidu.com/" title="跳转百度" target="_blank">百度</a>
</body>
</html>1.2.5插入图片 - <img>
插入网络连接指向图片展示：
ps：尽可能不要使用网络连接这种形式渲染图片，会有版权问题，这里仅做展示。
图片属性设置 alt & title &width/heigth
属性
1.设置图片无法展示，设置显示的信息 alt
2.设置鼠标悬浮的提示信息 title
3.改变图片大小
宽度 width
高度 height
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>图片标签</title>
</head>
<body>
<!--
img标签
1.插入一张本地图片
2.插入一个来自于网络连接的图片
属性
1.设置图片无法展示，设置显示的信息 alt
2.设置鼠标悬浮的提示信息 title
3.改变图片大小
宽度 width
高度 height
-->
<img src="111.png" alt="饮料" title="这是饮料图片" width="500px">
<!-- <img
src="https://ts3.tc.mm.bing.net/th/id/OIP-C.ThRuhUBIyjg4RPQLDYBN2AHaHa?cb=thfc1falcon&rs=1&pid=ImgDetMain&o=7&rm=3"></img>
-->
</body>
</html>补充 - 路径引用
超链接标签 和图片标签 都可以引用网络资源 和本地资源
1.可以引用一个相对路径的资源
./ 代表当前目录（默认可省）
页面引用平级目录下的图片 或 平级文件夹下的图片
../ 代表上一级目录
页面引用上一级目录文件夹下的图片
2.可以引用一个绝对路径资源
1.3语义化
语义表示该标签的意义：<h1> 就表示标题 <p> 就表示段落 ....
标签效果：展示给用户看的效果，和语义无关。通过样式控制，任何标签都能达到一样的效果。只不过在语义标签化中，HTML默认设置了该语义化标签合适的标签效果。所以标签效果不能代表语义。
1.3.1 强调标签
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>语义化</title>
</head>
<body>
<!--
使用斜体
<em> 语义化标签
1.可读性强
2.被网络检索的时候检索到
3.阅读器会看到em标签，改变阅读器读音
4.以斜体的形式展示强调效果
<i> 斜体效果
使用加粗
<strong> 语义化
1.可读性强
2.被网络检索的时候检索到
3.阅读器会看到em标签，改变阅读器读音
4.以斜体的形式展示强调效果
<b> 加粗效果
-->
我很<em>庆幸</em>你没有<em>迟到</em><br>
我很<i>庆幸</i>你没有<i>迟到</i><br>
就指望你了，千万<strong>不要</strong>迟到<br>
就指望你了，千万<b>不要</b>迟到
</body>
</html>1.4表格
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>表格</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>所在地</td>
<td>职业</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>北京</td>
<td>实习生</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>天津</td>
<td>工人</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>天津</td>
<td>工程师</td>
</tr>
</table>
</body>
</html>表格美化
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>表格</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10" align="center">
<caption>用户信息表</caption>
<tr bgcolor="yellow">
<th>姓名</th>
<th>年龄</th>
<th>所在地</th>
<th>职业</th>
</tr>
<tr align="center">
<td>张三</td>
<td>23</td>
<td>北京</td>
<td>实习生</td>
</tr>
<tr align="center">
<td>李四</td>
<td>25</td>
<td>天津</td>
<td>工人</td>
</tr>
<tr align="center">
<td>王五</td>
<td>20</td>
<td>天津</td>
<td>工程师</td>
</tr>
</table>
</body>
</html>跨行跨列
例如：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>表格跨行跨列</title>
</head>
<body>
<!--
跨列操作:保留左边td,删掉右边的td,让左边td合并右边td
跨行操作:保留上面td,删掉下面的td,让上面td合并下面td
-->
<table border="1" cellspacing="0" cellpadding="10" align="center">
<tr>
<th>姓名</th>
<th colspan="2">手机号</th>
</tr>
<tr>
<td>张三</td>
<td>123xxxx</td>
<td>132xxxx</td>
</tr>
<tr>
<td>李四</td>
<td>123xxxx</td>
<td>132xxxx</td>
</tr>
</table>
<br>
<br>
<table border="1" cellspacing="0" cellpadding="10" align="center">
<tr>
<th>姓名</th>
<th>张三</th>
<th>李四</th>
</tr>
<tr>
<td rowspan="2">手机号</td>
<td>123xxxx</td>
<td>132xxxx</td>
</tr>
<tr>
<td>123xxxx</td>
<td>132xxxx</td>
</tr>
</table>
</body>
</html>1.5表单
表单多用于采集信息。
发给谁？
action：请求数据发往哪个服务器，提供服务器地址。
怎么发？
method ：请求的发送方式，常见的有get/post
get请求：请求的内容会在地址栏展示
post请求：请求的内容会在隐藏在请求体中
带什么数据？
value：表单项的输入数据，称为表单数据。
怎么带？
给每个表单项提供一个name 属性，让该表单项的name 和对应的值进行绑定 name=value
带过去以后谁接收？
服务器端会接收前端表单发出的请求数据
接收以后怎么处理数据？
服务器接收到了数据以后，进行该表单请求相关的业务处理。
1.5.1 输入控件 text&password&textarea
输入控价共有 文本框 密码框 文本域三样
文本框 - text
密码框 - password
文本域 - textarea
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>标题标签</title>
</head>
<body>
<form action="#" method="get">
用户名 <input type="text" name="username"><br>
密码<input type="password" name="password"><br>
自我介绍<textarea name="textarea" cols="50" rows="10"></textarea><br>
<input type="submit" value="提交数据">
</body>
</html>1.5.2 控制控件 radio&checkbox&option
控制控件有 单选 复选 下拉三样
1.5.2.1 单选 - radio
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>单选控件</title>
</head>
<body>
<form action="#" method="get">
性别：男<input name="sex" type="radio" value="1" checked>
女<input name="sex" type="radio" value="2">
<br>
<input type="submit" value="提交数据">
</body>
</html>1.5.2.2 复选 - checkbox
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>复选控件</title>
</head>
<body>
<form action="#" method="get">
爱好：读书<input type="checkbox" name="hobby" value="1">
赏花<input type="checkbox" name="hobby" value="2">
下棋<input type="checkbox" name="hobby" value="3">
<br>
阅读并同意规范<input type="checkbox" name="isAgree" value="100">
<br>
<input type="submit" value="提交数据">
</form>
</body>
</html>1.5.2.3 下拉 - option
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>下拉控件</title>
</head>
<body>
<form action="#">
<select name="sex">
<option value="1">男</option>
<option value="2">女</option>
</select>
<br>
<br>
<br>
<br>
<select name="hobby" size="3" multiple>
<option value="00">读书</option>
<option value="01">赏花</option>
<option value="10">下棋</option>
</select>
<input type="submit" value="提交数据">
</form>
</body>
</html>1.5.3文件上传控件 - file
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>文件上传控件</title>
</head>
<body>
<form action="#" method="post" enctype="multipart/form-data">
上传头像<input type="file" name="file">
<br>
<input type="submit" value="提交数据">
</form>
</body>
</html>1.5.4按钮控件 - submit&reset&button
按钮控件分为提交按钮 重置按钮 普通按钮三样
提交按钮 - submit
重置按钮 - reset
普通按钮 - button
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>按钮控件</title>
</head>
<body>
<form action="#">
用户名<input type="text" name="username">
<br>
提交<input type="submit" value="提交数据">
<br>
重置<input type="reset" value="重置数据">
<br>
普通按钮<input type="button" value="普通按钮">
</form>
</body>
</html>1.5.5控件禁用 - disabled
disabled禁用控件，不允许修改
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>禁用控件</title>
</head>
<body>
<form action="#">
用户名<input type="text" name="username" value="zhangsan" disabled>
<br>
密码<input type="password" name="password">
<br>
性别：男<input name="sex" type="radio" value="1" checked disabled>
女<input name="sex" type="radio" value="2" disabled>
<br>
爱好：读书<input type="checkbox" name="hobby" value="1" checked>
赏花<input type="checkbox" name="hobby" value="2">
下棋<input type="checkbox" name="hobby" value="3">
<input type="submit" value="提交数据">
<br>
</form>
</body>
</html>1.5.6 label标签
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>按钮控件</title>
</head>
<body>
<form action="#">
<label for="inputText">用户名</label>
<input id="inputText" type="text" name="username">
<br>
</form>
</body>
</html>