html标签
如果把网页比作洋葱，一层包一层，那<html>标签就是洋葱最外层的皮， <html> 元素是一张网页的根元素，所以其他所有元素都是是此元素的后代。
body标签
把一张网页比作一个人<body>标签就表示一个人所有的可见部分，如五官、四肢、痔疮... 对于真实存在的但是肉眼不可见的部分，如思想、人格、性取向等<body>标签是管不着的。 <body>包含着页面中所有的可见元素，比如链接、段落、图片... <body>是所有的可见元素的先人。
head标签
把一张网页比作一个人<head>标签就包含了一个人的基础信息，虽然无法直接观察到，但确实存在， 如姓名、人格、取向等等; <head>用于包含一张网页中抽象的基础信息（元信息）； <head>和<body>的区别在于<body>只想包含看得见摸得着的内容，如身材、长相、肤色等等； <head>中只能包含抽象的元信息，并不是说<body>不能包含抽象内容，它可以，只是它不想。你硬要把抽象内容写进去也勉强行，但它更在乎看得见摸得着的。<head>不要，但<body>很诚实。
title标签
<title>标签用于指定浏览器标签上显示的标题，是个概括整张网页的存在; <title>中只可包含文本，若是包含标签，则包含的任何标签都会按源代码显示（浏览器不解释）。 对搜索引擎来说<title>信息的重要性是无与伦比的，所以<title>中的信息要尽可能简洁准确。
h1-h6标签
<h1>，<h2>，<h3>，<h4>，<h5>，<h6>都是标题标签，用于概括页面中不同主题的内容，其中<h1>最大，<h2>其次，依次类推，没有<h7>。
p标签
<p>是段落标签（paragraph的缩写），用于给文字划分段落，一组<p>元素为一个段落 一张网页可有多个<p>标签。 <p>中可以存在子元素。
div标签
- 是用于在网页中划分区域的（division的缩写），通常作为容器而存在，用于包含网页中的内容, 是最常用的网页元素之一。
- div>的特点是非常纯粹，在没有明确指定的情况下没有边框，没有填充，没有边距，完全透明，在标签中没有内容的情况下高度为零，完全不可见，它的高度随身体里的内容而定，内容多就高内容少就低，可以说是个完美的容器，想象一个完全透明、没有质量、体积为零但容积自由伸缩无限、质量还极好的塑料袋，就是个这样的存在
-
： 只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
： 表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现. - 块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
a标签
<a>用于定义网页中的链接，链接也叫做锚或锚链接，而<a>即是anchor（锚）的缩写。 所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序;
```
‘‘‘
<a href="" target="_blank" >click</a>
href属性指定目标网页地址。该地址可以有几种类型：
绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
相对 URL - 指当前站点中确切的路径（href="index.htm"）
锚 URL - 指向页面中的锚（href="#top"）
‘‘‘
```img标签
<img>用于定义网页中的图片。我们平常在网页中见到的大部分图片都是用这个标签定义的。 其中src（source）是<img>标签的一个属性，用于指定图片的地址。 没有结束标签， 只有结束标签； `<img src="img/1.gif" alt="你好世界">` alt属性是在不能加载图片时候显示的内容，介绍图片；
列表标签
```
‘‘‘
<ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
<ol>: 有序列表
<li>:列表中的每一项.
<dl> 定义列表
<dt> 列表标题
<dd> 列表项
‘‘‘
```table标签
<table>标签用于定义表格，单独出现并没有什么用，它需要和他专有的子标签在一起才有意义。 <table>的子标签有： <tr>（table row）：定义行，出现一组就是一行，出现多组就是多行。 <td> （table data）：定义单元格，一般包含在<tr>中。 <th> （table head cell）：定义表头单元格，一般包含在<thead>中。 <thead> （table head）：定义表头，见例子。 <tbody> （table body）：定义表身，见例子。
```
<table border="1"> <!--表格开始-->
<tr> <!--第一行开始-->
<td>王花花</td>
<td>21岁</td>
</tr> <!--第一行结束-->
<tr> <!--第二行开始-->
<td>李拴蛋</td>
<td>19岁</td>
</tr> <!--第二行结束-->
</table> <!--表格结束-->
```
```
<table border="1">
<thead> <!--表头开始-->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>取向</th>
</tr>
</thead> <!--表头结束-->
<tbody> <!--表身开始-->
<tr>
<td>王花花</td>
<td>21</td>
<td>拴蛋</td>
</tr>
<tr>
<td>李拴蛋</td>
<td>19</td>
<td>花花</td>
</tr>
</tbody> <!--表身结束-->
</table>
```
header标签
<header>和<footer>本身和<div>没有任何区别，仅仅是字面上的区别，但使用它们可以让浏览器和搜索引擎更好的解读你的网页，同时也更有利于维护（一看就知道是页头页脚。
标签用于定义页头，也就是页面中的引导性内容
link和script标签
<link>标签用于加载外部资源（也就是不属于本页面的资源，比如样式表、雪碧图之类），<script>标签用于加载脚本（一般为JavaScript）。
```
<head>
<link href="base.css">
<script src="base.js"></script>
</head>
```button标签
提交时用 还是
abbr标签
缩写
<abbr title="Mother Money Payment">mmp</abbr>
code和pre标签
<code>一般用于小段代码。 <pre>用于表示文字在编辑时的状态，比如在编辑器里的状态，所以一般被用于大段代码的展示，因为“所见即所得”。
input标签
<input>的类型比较多，每一种侧重于不同的数据类型和结构： <input type="text"> 默认值（可以不填type属性），用于输入文字，如用户名，昵称等等。 <input type="password"> 密码输入，我们平时输密码时的小黑点就是这么来的。 <input type="radio"> 单选框，在需要用到单选但选项少的情况下使用。如性别（只有两个选项）。 <input type="checkbox">多选框（复选框），在需要用到多选但选项少时使用，多选，但是选项少的情况下使用。如性取向。 <input type="file"> 选择文件，上传文件必用。 <input type="reset"> 重置表单。 <input type="hidden" value="秘密">隐形输入框，一般用于在表单提交时回传重要的令牌（就是一串自产自销的无序字符）来验证用户是真的或状态是对的。 <input type="button" value="点我">按钮，不推荐，正常情况下使用<button>即可，因为<button>可以包含子元素，而<input>不行，灵活度的问题
```
# 单选框
<label>
<input type="radio" name="sex" value="male">
男
</label>
<label>
<input type="radio" name="sex" value="female">
女
</label>
# 多选框
<p>请选择你的性取向<p>
<label>
<input type="checkbox" name="sex" value="male">
男
</label>
<label>
<input type="checkbox" name="sex" value="female">
女
</label>
# 选择文件
<p>请选择文件<p>
<input type="file" name="avatar">
# 表单提交， 最好用buton标签
<form>
姓名：<input>
<br>
年龄：<input>
<input type="reset" value="点我重置">
</form>
```