DOCTYPE
用来声明文档类型，作用就是告诉浏览器使用那种 HTML 版本来显示网页，必须写在文件第一行
<!DOCTYPE html>
html 标签
属性 lang 用来定义当前文档的语言
<html lang="zh-CN"</html>
meta 元数据
页面字符集编码
<meta charset="UTF-8"/>
标题标签 h1~h6
文字加粗，一行显示，依次变小
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
段落标签 P
分段显示，会根据浏览器大小自动换行，段落之间有空隙
<p>这是一段文字</p>
<p>这是另一段文字</p>
换行标签 br
强制换行，单标签，行之间没有缝隙
<br/>
文字加粗标签
strong 和 b 标签都是加粗的样式，建议使用 strong 标签，语义更强
<strong>文字加粗</strong>
<b>文字加粗</b>
文字斜体
em 和 i 标签都是倾斜的样式，建议使用 em 标签，语义更强
<em>文字倾斜</em>
<i>文字倾斜</i>
文字删除线
del 和 s 标签都是文字删除样式，建议使用 del 标签，语义更强
<del>文字删除线</del>
<s>文字删除线</s>
文字下划线
ins 和 u 标签都是文字下划线样式，建议使用 ins 标签，语义更强
<ins>文字下划线</ins>
<u>文字下划线</u>
div 和 span 标签
都是盒子标签，没有语义，div 为块标签，单独占一行，span 为行内块，不会另起一行
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
图像标签 img
img 标签用来显示图片
- src 属性用来指定图片的路径，可以是网络路径，可以是本地路径
- alt 属性为替换文本，图片失效的时候显示这个文字
- title 属性为提示文本，鼠标放到图片上的时候显示文字
- width 属性为图片的宽度
- height 属性为图片的高度
- border 属性设置图片的边框粗细
<img src="./img/head.jpg" alt="图片找不到显示的文字" title="提示文字" width="200" height="200" border="10px">
链接标签 a
- href 属性设置链接的路径，可以是网络路径，也可以是本地的其他页面
- target 属性设置链接打开的方式
- _self 为默认值，直接在当前页面打开
- _blank 在新窗口中打开
<a href="https://baidu.com" target="_blank">Go Baidu</a>
锚点链接
跳到 id 为 test 的地方
<a href="#test">跳到ID为test的地方</a>
<a id="test" href="https://baidu.com" target="_blank">Go Baidu</a>
注释标签
<!-注释里面的内容不会显示到网页上-->
表格标签 table
table 标签定义表格
thead 标签定义表头部区域
tbody 标签定义表格的主体区域
tr 标签定义表格的一行
th 标签定义表头，里面的文字会加粗
td 标签定义一行中的单元格
table 标签的属性
- cellspacing: 单元格之间的距离
- cellpadding: 单元格的内边距
<table border="1" cellspacing="0" cellpadding="10" align="center">
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</tbody>
</table>
合并单元格
rowspan：跨行合并
colspan：跨列合并
<table>
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">占两列</td>
<td>123</td>
</tr>
<tr>
<td rowspan="2">占两行</td>
<td>22</td>
<td>22</td>
</tr>
<tr>
<td>22</td>
<td>22</td>
</tr>
</tbody>
</table>
无序列表 ul
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
有序列表 ol
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ol>
自定义列表 td
dl：自定义列表
dt：列名
dd：描述每一列
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信公众号</dd>
<dd>联系我们</dd>
</dl>
表单
一个完整的表单通常由 表单域、表单控件和提示信息 三个部分构成
表单域 form
包含表单元素的区域
form 会把它范围内的表单元素信息交给服务器
<form action="" method="post" name="">
</form>
form 标签有三个属性：
- action：用于指定接收并处理表单数据的服务器的 url 地址
- method：用于设置表单数据的提交方式，其取值为
get或post - name：用于指定表单的名称，以区分同一个页面中的多个表单域
表单控件
表单控件分三种：
- input 输入表单控件
- select 下拉表单控件
- textarea 文本域控件
input 输入表单控件
input 表单的 type 属性是必须的，用来指定输入框的类型
点击按钮 button
点击按钮： <input type="button" value=""> <br>
复选框 checkbox
同一组需要有相同的 name 属性
复选框：<input type="checkbox" name="v1" value="v1"> v1 <br>
<input type="checkbox" name="v1" id="" value="v2"> v2 <br>
文件上传 file
文件上传：<input type="file" name="" id="">
隐藏的输入字段 hidden
隐藏的输入字段：<input type="hidden" name="">
图像形式的提交按钮 image
图片形式的提交按钮：<input type="image" src="./head.jpg" alt="">
密码字段 password
密码字段：<input type="password" name="" id="">
单选按钮
同一组的 name 属性需要相同
单选按钮：男<input type="radio" name="sex" id=""> 女 <input type="radio" name="sex" id="">
重置按钮 reset
重置按钮：<input type="reset" value="">
提交按钮 submit
提交按钮：<input type="submit" value="提交">
单行输入字段 text
单行输入字段：<input type="text" name="" id="">
下拉列表 select
<select name="" id="">
<option value="">成都</option>
<option value="" selected>重庆</option>
</select>
selected 用来定义下拉列表的默认选中项
文本域 textarea
当用户输入内容较多的情况下使用
<textarea name="" id="" cols="30" rows="10"></textarea>
cols：定义表单的宽度
rows：定义表单的高度
绑定 input 输入字段 label
label 标签用于绑定一个表单元素，当点击 <label> 标签内的文本的时候，浏览器会自动将焦点转到对应的表单元素上，用来增加用户体验
<form action="#">
<label for="userName">userName</label> <input type="text" name="" id="userName">
</form>
for 属性里面的值和 input 的 id 属性相对应