1.文档结构标签
主要用来标识文档的基本结构
<html></html>:标识HTML文档的起始和终止
<head></head>:标识HTML文档的头部区域
<body></body>:标识HTML文档的主体区域
在head中添加<base>标签，对整体设置所有链接的打开模式 <base target='_blank'>
1、target="_self"表示：将链接的画面内容，显示在目前的视窗中。(内定值) 。 即：同(自己)窗口打开,别的数据还存在，相当于在一个页面里中又打开一个页面。
2、target="_parent"表示：将链接的画面内容，当成文件的上一个画面。即：当前窗口打开,但以前当前窗口数据没有。
3、target="_top"表示：将框架中链接的画面内容，显示在没有框架的视窗中（即除去了框架)。即：顶端打开窗口。
4、target="_blank"表示：将链接的画面内容，在新的浏览视窗中打开。即：打开新窗口。
注意：当网页没有框架时，target="_self"和target="_parent"以及target="_top"三种方式的显示方式几乎相同。
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开 |
| _self | 默认，在相同框架中打开 |
| _parent | 在父框架集中打开 |
| _top | 在整个窗口中打开 |
| _framename | 在指定的框架中打开 |
2.文本格式标签
<title></title>:标识网页标题(也就是浏览器每个tab的名字)
<hi></hi>:标识标题文本（包含h1,h2,h3,h4,h5,h6）
<p></p>:标识段落文本
<pre></pre>:标识预定义文本
<blockquote></blockquote>:标识引用文本
注意：
1．任何块级元素（常见为可以导致段落断开的标签）都不能位于pre元素中,比如<h1>、<p> 和 <address> 标签．浏览器能运行，但代码编译会报错
2．制表符tab在<pre>标签定义的块当中可以起到应有的作用，每个制表符占据8个字符的位置，但并不推荐使用tab，因为在不同的浏览器中，tab的表现形式各不相同。在用<pre>标签格式化的文档段中使用空格，可以确保文本正确的水平位置
3.字符格式标签
<b></b>:加粗（推荐使用加重文本<strong></strong>因为语义化）
<i></i>:斜体（推荐使用加重文本<em></em>，因为语义化）
<blink></blink>:闪烁(IE不支持)
<big></big>:放大文本
<small></small>:缩小文本
注意：
使用 <big> 标签的时候还是要小心，因为浏览器总是很宽大地试图去理解各种标签，对于那些不支持 <big> 标签的浏览器来说，它经常将其认为是粗体字标签
--主要是用来写一些下标之类的标签--
<bdo dir="rtl"></bdo>
**rtl，文本是在左侧最先出来；ltr，文本是在右侧(正常输入位置)出来
<cite></cite>标识引用文本，以引用效果显示
sup标签标识上标文本，以上标效果显示
sub标签标识下标文本，以下标效果显示
4.列表标签
<ul></ul>:无需列表
<ol></ol>:有序列表
<li></li>:标识列表项目
li包含在ul/ol中
5.定义列表(包含词条和解释两块内容)
<dl></dl>:标识定义列表
<dt></dt>:标识词条
<dd></dd>:标识解释
dt,dl包含在dd中
6.链接标签
<a href=" "></a>
<a href="#botm">:跳转到底部</a>
<span id="botm">:底部锚点位置</span>
href还可以设置id(唯一)/class(非唯一)作为锚点来实现当前页面的位置跳转(顶部到底部)
7.多媒体标签
<img></img>:嵌入图像
必需的属性：src；alt属性，当图片没法显示时，提示其中文字；title是提示信息；longdesc属性用来提供链接到一个包含图片描述信息的单独页面，值一般为文本
src后跟图片路径，一定要能访问到，不能则需要添加../来让文件能找到图片路径
<embed></embed>:嵌入多媒体
属性src, 定义了一个容器，用来嵌入外部应用或者互动程序（插件）
<object></object>:嵌入多媒体
<object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash．据说是用来代替 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<embed src="helloworld.swf" tppabs="http://www.runoob.com//try/demo_source/helloworld.swf">
</body>
</html>
<canvas id="myCanvas" width="200" height="200"></canvas>图形容器，可使用脚本来绘制图形
map映射标签
定义一个客户端图像映射，指带有可点击区域的一幅图像，area 元素永远嵌套在 map 元素内部。通俗地讲，即usermap的值要和map的id一样
<html>
<body>
<p>请点击图像上的星球，把它们放大。</p>
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
</map>
<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
</body>
</html>
8.表格标签
<table></table>:定义表格结构
<caption></caption>:定义表格标题
<th></th>:定义表头
<tr></tr>:定义表格行
<td></td>:定义表格单元格
<table>
<caption></caption>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</table>
**9.表单标签**
<form></form>定义表单结构
<input></input>定义文本域,按钮,复选框
input标签的三个关键属性
id属性：是唯一标识符，不允许有重复值可以通过它的值来获得对应的html标签对象。相当于人的身份证具有唯一性
name属性：控件的名字，一个控件是否设置它的 name 属性是不会影响到这个网页的功能实现的。但是，当我们需要把这个控件所关联的数据传递到数据库时，就必须要设置 name 属性。相当于人的姓名，可以重名
value属性：控件的值
<textarea></textarea>:定义多行文本区域
<select></select>:定义下拉列表
<option><option>:定义下拉列表的选项项目
<label></label>（不是一定要用）
<label> 标签为 input 元素定义标注（标记），<label> 标签的 for 属性应当与相关元素的 id 属性相同
<html>
<body>
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" /><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
</body>
</html>
3333.png
label标签和for的两种表现形式：
<!--显示形式上面已经了解了，这里介绍一个隐式形式，通过在 <label> 标签中放入 <input> 标签来隐式地连接起来的-->
<label>Date of Birth: <input type="text" name="DofB" /></label>
<fieldset> 标签可以将表单内的相关元素分组。<fieldset> 标签会在相关表单元素周围绘制边框（一定要记忆的话可以理解为场地设置）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form>行内元素和快元素
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text">
Email: <input type="text">
Date of birth: <input type="text">
</fieldset>
</form>
</body>
</html>
*legend 元素为 fieldset 元素定义标题（caption）
<optgroup> 标签经常用于把相关的选项组合在一起，需要与<option>合用
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
网友评论