本篇文章我们来共同学习下HTML文档中的常用标签及其使用方法；下图为简写内容的HTML文档：
第一部分：文档结构
1、文档声明：<!DOCTYPE html>，声明该文档为HTML文档，告知浏览器文本的解读方式。
2、HTML页面：表示HTML页面的开始与结束
语法：<html></html>
位于<!doctype html>之下;
3、页面头部：定义页面全局信息
<head></head>
紧跟在html之后，是html中的首个子元素
头部所包含的内容（子元素）
（1）网页标题：<title>标题内容</title>
（2）定义网页的编码格式,关键字，描述
网页的编码格式：<meta charset="utf-8">(utf-8:支持中英文、标点、符号)
关键字：<meta name="keywords" content="关键字">
描述：<meta name="description" content="描述内容">
（ 3）定义或引用javascript：<script></script>
（4）<style></style>定义内部样式
（5）<link>引入外部样式
4、页面主体：网页显示的主体内容中包含大量的标签如下：
（1）链接 a标签
（2）文本样式
斜体：<i></i>
粗体：<b></b>
删除线：<s></s>
下划线：<u></u>
上标：<sup></sup>
下标：<sub></sub>
（3）以标题的形式来显示文本内容
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
【特点】
- 改变字号（一级最大，六级最小）
- 加粗显示
- 上下有垂直的空白距离
- 独立成行
（4）段落元素
【标签】<p></p>【特点】- 默认文字大小- 独立成行- 上下垂直空白
（5） 换行元素
【标签】<br>
（6）分隔线元素
【标签】<hr>
【属性】
size：尺寸，取值单位为 px（像素），可以省略
width：宽度，取值单位为px（像素）可以省略或百分比
color：颜色，取值自然颜色值
align：水平对齐方式，取值：left/center/right
分区元素
（7）块分区元素：<div></div>
【特点】独立成行
【作用】页面布局
（8）行内分区元素：<span></span>
【特点】多个元素在一行内显示
【作用】设置同一行文字内的不同格式
（9）- 图像
路径
URL：Uniform Resource Locator（统一资源定位器，俗称：路径）
作用：标识网络任何资源的位置
绝对路径：从文件所在的最高级目录下开始查找资源文件所经过的路径
-包括网络资源&本地资源（如：E:\mmper\练习\img\flower.jpg）
相对路径：从当前文件位置处开始，查找资源文件所经过的路径
- 同目录，直接用， 直接通过资源文件名称进行引用（a.jpg）
- 子目录，进入到子目录中，然后再对资源文件进行引用（img/a.jpg）
- 父目录，返回到父级目录再对资源文件进行引用（../a.jpg）
【标签】<img>
【属性】
src：图片地址（绝对/相对）
width：图像宽度
height：图像高度
（10）表格
由<table>元素定义。
【标签】<table></table>
【属性】
width ：设置表格的宽度
height：设置表格的高度
align：设置表格的对齐方式，取值: left/center/right
border：设置表格边框宽度
cellpadding：内边距（单元格边框与内容之间的距离）
cellspacing：外边距（单元格之间的距离）
bgcolor：设置表格的背景颜色
table中包含的子元素
<table></table>中包含的子元素：
【标签】<tr></tr> （创建表行）
【属性】
align：该行内容水平对齐方式，取值: left/center/right
valign：该行内容的垂直对齐方式，取值: top/middle/bottom
bgcolor：设置表格的背景颜色
【标签】<td></td> （创建单元格）
【属性】
align：内容水平对齐方式
valign：内容垂直对齐方式
width ：宽度
height ：高度
【标签】<caption></caption> （表格标题）
【标签】<th></th> （列标题）
行标题或列标题，字体有加粗的效果，放在tr中
【标签】<thead></thead> （表头）
【标签】<tbody></tbody> 表主体）
【标签】<tfoot></tfoot> （表尾）
一个完整的表格
有序列表
<ol>
<li></li>
</ol>
【属性】
type:指定列表项标志的类型，默认为数字排列
取值：1（默认值）/a/A/i/I
start:定义起始值(数字)，默认从1开始
取值：数字，如：start:1; start:i;等
无序列表
<ul>
<li></li>
</ul>
【属性】
type：指定无序列表的列表项标识
取值： disc,默认,实心圆/circle，空心圆/square，实心矩形none，不显示标识
自定义列表
<dl>
<dt>列表中的标题内容</dt>
<dd>列表中的数据</dd>
</dl>
使用场合：图文混排时使用
6- 表单
由<form>定义，将用户输入的数据提交给后台。
【常见属性】
action：提交的服务器地址
method：表单数据提交的方式，取值： get：明文提交/post：隐式提交
name：定义表单名称，JS用到的比较多
id： 独一无二的标识
如：<form action="url" method="get/post"> </form>
<input>元素
【主要属性】
type：根据不同的type属性值可以创建各种类型的输入字段
value：最终提交给服务器的值
name：控件的名称，提供给服务器使用，没有name，控件则无法提交
id：唯一标识，只能在当前页面使用，服务器不能用
disabled：禁用，不能被提交
常用的表单控件：
（1）文本框：<input type="text">
（2）密码框：<input type="password">
【专有属性】
maxlength：限制输入的字符数，取值：数字
readonly：设置文本控件只读
（3）单选按钮：<input type="radio">
（4）复选框：<input type="checkbox">
【专有属性】
checked，设置默认被选中
（5）提交按钮：<input type="submit">
（6）重置按钮：<input type="reset">
（7）普通按钮：<input type="button">
（8）图片按钮：<input type="image" src="">
（9）隐藏域：<input type="hidden">
（10）文件选择框：<input type="file">
按钮（提交按钮）
<button>内容</button>
下拉选择框select 和 option
<section name="">
<option value="" selected></option>
</section>
