235.HTML
本文为RUNOOB.COM、尚学堂网络课程和W3school个人笔记，其中有大量内容原引自他们，只做个人学习交流之用，文章组织方式为排版加原理的标题顺序，并不是新学者的学习过程，如是新学者，可参考上面进行学习。
1.WebStorm的使用
当打开了一个项目的时候，WebStorm会显示主窗口，包含有六个部分，分别是菜单栏 、工具栏 、导航栏、状态栏 、编辑器、WebStorm 工具窗口，如下图所示，图中已用红色标示
1.1常用操作
- 1.创建项目
file-->new project-->指定路径-->点击上面的新建按钮创建一个文件夹，然后ok，创建好项目后，项目文件夹中会带有.idea这样一个文件
- 2.创建文件
右击项目-->new-->html file-->输入文件名-->下面的下拉框可以选择h5还是h4或是xhtml类型的文档，我们选择h5，也就是默认的。写名字的时候不用加html后缀，webstrom会自动为我们加。
- 3.重命名
右击html文件-->refactor-->rename---改好后回车
- 4.删除文件
右击html文件-->delete-->ok（或者直接按电脑上的del键，回车）
1.2菜单栏常用
FILE下（通常操作关于文件、工程）
- New Project创建工程
- New 会弹出一个列表供选择要创建的类型
- Open 打开一个项目
- Save As 将当前页面另存为
- Reopen Project 近几次打开的项目列表
- Close Project 点击后回到欢迎页面上
- Rename Project 它修改的不是当前项目的文件夹名，而是文件夹目录下.idea的以iml结尾的文件，这个是项目的名字。rename后观察iml文件名的变化。
- settings 常用设置
- Exit 退出Webstorm
1.3常用操作
- 鼠标滑到编辑区的右上角，会显示出一排浏览器的图标，如果你电脑中安装了相应浏览器，webstorm会自动关联它，在你想看当前文档的效果时，点击浏览器按钮即会打开
- 右击编辑区的左边栏，点击show Line Number，可以显示出行号，帮助我们快速定位代码
- 点击状态栏右下角的click to go to line 可以快速跳到你要找到行，当代码量过千时，这个功能非常有用
1.4外观
- 1.如何更改主题（字体&配色）
file->setting->editor->colors&fonts->scheme选择你的主题（darcula）
- 2.如何让webstorm启动的时候不打开工程文件
file->settings->Appearance&Behavior->System settings 去掉reopen last project on startup（在启动的时候总是打开最后的工程）
- 3.如何完美显示中文
file->settings->appearance中勾选override default fonts by(not recommended)，设置name:NsimSum,Size:12
(appearance外观选项，选中“重写默认字体”，设置名字为NsimSum，它是windows下的宋体字，字号12)。这里设置的是整个IDE显示的文字，包括菜单列表的字。你可以试着把它改成英文，那样再在菜单项中看，中文有的会不正常显示，变成小方块了。
- 4.如何显示行号
在代码显示区的左边右击选择“show line number”。
- 5.如何代码自动换行
file-settings-editor->general-> "use soft wraps in editor" 打上钩，代码就自动换行了。
2.HTML简介
2.1HTML
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言，不区分大小写，建议小写
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容，HTML文档的后缀名以 .html或 .htm为后缀两种后缀名没有区别，都可以使用
- HTML文档也叫做 web 页面，由浏览器解释执行
2.2标签
1.HTML用于描述功能的符号成为“标签”
<标签>内容</标签>
2.标签都封装在一对尖括号“<...>”之中，由尖括号包围的关键词,如<html>就是一个标签
3.封闭类型标记（也叫双标记），必须成对出现,如<p></p>，标签对中的第一个标签是开始标签/开放标签，第二个标签是结束标签/闭合标签
4.非封闭类型标记，也叫作空标记，或者单标记，如<br/>
5.Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
6.使用小写标签
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
7.标签可嵌套，标签之间可以相互嵌套，但要注意嵌套顺序
8.语义化标签语义化：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上文章的标题就可以用标题标签 h1-h6,段落用p,地址用address等
好处：1. 更容易被搜索引擎收录 2. 更容易让屏幕阅读器读出网页内容
2.3元素
- 指的是从开始标签（start tag）到结束标签（end tag）的所有代码，元素=标签+标签里内容，文档有一个个HTML元素构成
- HTML 元素语法
-
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
- 可嵌套的HTML，HTML 文档由嵌套的 HTML 元素构成
2.4属性与值
2.4.1属性的位置
- 属性是用来修饰元素的，是 HTML 元素提供的附加信息
-
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定： <a href="http://www.runoob.com">这是一个链接</a>
-
- 属性必须位于开始标签里
- 一个元素的属性可能不止一个，多个属性之间用空格隔开
- 多个属性之间不区分先后顺序
-
使用小写 属性和属性值对大小写不敏感
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。
2.4.2属性的值
- 每个属性都有值
-
<p align = "center">段落一</P> <!-- 属性 属性值-->
-
- 属性和属性的值之间用等号连接
- 属性的值包含在引号当中
- HTML 属性常用引用属性值
- 双引号是最常用的，不过使用单引号也没有问题
- 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'
- HTML 属性常用引用属性值
- 属性总是以名称/值对的形式出现
2.4.3常用的HTML属性
| 属性 | 描述 |
|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id，
class 属性可以多用 class=" " （引号里面可以填入多个class属性） |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
2.5注释
- 1.为代码添加适当的注释是一种良好的编程习惯
- 2.注释只在编辑文本情况下可见，在浏览器展示页面是并不会显示
- 3.注释标签不支持任何属性
- 4.注释不可以位于嵌在<>中
- 5.注释不可以嵌套在其他注释中
- 6.语法：
<!-- 注释的文本内容 -->
2.6版本
从初期的网络诞生后，已经出现了许多HTML版本:
| 版本 | 发布时间 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
3.HTML总体结构
3.1可视化页面结构
下面是一个可视化的HTML页面结构：
只有 <body> 区域 (白色部分) 才会在浏览器中显示
3.2HTML的基本结构
<!DOCTYPE html> <!--文档类型声明--> <html lang="en"> <head> <meta charset="utf-8"> <title>网页标题</title> <!--文档标题，一个网页只能有一个标题--> </head> <body> <h1>第一个标题</h1> <p>第一个段落</p> </body> </html>
3.2.1<!DOCTYPE> 声明
例子
-
<!DOCTYPE html>
定义
什么是DTD文档模型，为什么写在HTML当中？
DTD文档模型也称DOCTYPE文档声明，它是Document Type Definition的英文缩写，意思是文档类型定义，在HTML文档中，用来指定页面所使用的HTML（或者XHTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就 是DOCTYPE声明。只有确定了一个正确的DOCTYPE，HTML里的标识和CSS才能正常生效。它一般被定义在页面的第一行，html标签之前。
DTD文档模型=DOCTYPE=DOCTYPE文档声明
作用
<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
<!DOCTYPE> 声明不是一个 HTML 标签；但是是一个标签，标签保护HTML标签和其他标签，<!DOCTYPE> 标签没有结束标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
位置
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。
写法
doctype 声明是不区分大小写
通用声明
- HTML5
<!DOCTYPE html> T
<!DOCTYPE html> T <!DOCTYPE HTML> T <!doctype html> T <!Doctype Html> T
- HTML 4.01 Transitional 过渡
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。
- HTML 4.01 Strict 严格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。
- HTML 4.01 Frameset 框架
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。
- XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
- XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
- XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容。
- XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
这个 DTD 与 XHTML 1.0 Strict 相同，但是允许您添加模块（例如为东亚语言提供 ruby 支持）。
xhtml和html的区别
XHTML是HTML向XML的一个过渡语言，在最初W3C组织希望把HTML变成更为严谨的标记语言（比如XML），但HTML的已经应用的太为广泛，全部换掉不太现实。因此产生了XHTML这样一种过度形式。它比HTML更严谨，基本标签都还是沿用了HTML，但废除了“表现层”的标签，同时要求标签的严格嵌套，标签结束等等。
3.2.2<html>简介
定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
<html> <head> <title>我的第一个 HTML 页面</title> </head> <body> <p>body 元素的内容会显示在浏览器中。</p> </body> </html>
3.2.2.1<head>简介
标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<html> <head> <title>我的第一个 HTML 页面</title> </head> <body> <p>body 元素的内容会显示在浏览器中。</p> </body> </html>
位置
- 应该把 <head> 标签放在文档的开始处，紧跟在 <html> 后面，并处于 <body> 标签之前。
文档的头部经常会包含一些 <meta> 标签，用来告诉浏览器关于文档的附加信息。
成分
- 下面这些标签可用在 head 部分：
<title>、<meta>、<link>、<style>、 <script>。
3.2.2.2<body>简介
<body> 元素包含了可见的页面内容
<html> <head> <title>我的第一个 HTML 页面</title> </head> <body> <p>body 元素的内容会显示在浏览器中。</p> </body> </html>
4.< html>内标签
4.1 <lang>介绍
- <head lang="en">
lang是language的意思，lang=”en”属性对每张页面中的主要语言进行声明，en代表了英文，只是个声明，声明了它，对搜索引擎和浏览器更友好，并不会更改显示内容。它还有常见的值是zh-CN，代表了中文。（搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你的站点是中文站，这些都是html规范，越规范，越容易被收录）
5.< head>内标签
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
| 标签 | 描述 |
|---|---|
| <head> | 定义了文档的信息 |
| <title> | 定义了文档的标题 |
| <base> | 定义了页面链接标签的默认链接地址 |
| <link> | 定义了一个文档和外部资源之间的关系 |
| <meta> | 定义了HTML文档中的元数据 |
| <script> | 定义了客户端的脚本文件 |
| <style> | 定义了HTML文档的样式文件 |
5.1 <title>介绍（必有）
1.可定义文档的标题。
2.它显示在浏览器窗口的标题栏或状态栏上。
3.当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称。
4.<title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写head一定要写title，不是说其它的不加，而是title一定要加。
5.title写和你网页相关的关键词有利于SEO优化
<html> <head> <title>我会显示标题栏状态栏收藏栏里</title> </head> <body> ... </body> </html>
*SEO是搜索引擎优化的英文缩写。
通过对网站内容调整，满足搜索引擎的排名需求，从而提高自己网站被搜索引擎平台录取的几率，从而把精准用户带到网站。
网站都有目标群体，通过title、meta标签可以让目标群体通过关键词找到你的网站，所以你定义的关键词决定了会吸引什么样的群体。
HTML<title>元素不仅可以显示文本，也可以在左侧显示logo等图片。
显示时，要将<link>标签放入<head>里。
举例：
<!doctype HTML> <html> <head> <link rel="shortcut icon" href="图片url"> <title>这是一个带图片的标签</title> </head> <body> …… …… …… </body> </html>
5.2 <meta>介绍
5.2.1定义
- 元素可提供有关页面的元信息（meta-information）
用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。
5.2.2常见的meta属性
5.2.2.1 charset属性
<meta charset="UTF-8">
META标签用来描述一个HTML网页文档的属性，此处的charset=”utf-8”是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式。国外一般会用gbk、gb2312，国内通常使用utf-8。
5.2.2.2 name属性
属性值有
- Keywords(关键字)
keywords用来告诉搜索引擎你网页的关键字是什么。
<meta name="keywords" content="个人,博客">
- description(网站内容描述)
description用来告诉搜索引擎你的网站主要内容。
<meta name="description" content="web学习,经验分享">
- author作者
标注网页的作者
<meta name="author" content="xxxx,xxxx@xxxx.com">
5.3 <base>介绍
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<head> <base href="http://www.cmaker.tech/images/" target="_blank"> </head>
5.4 <link>介绍
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
5.5 <style>介绍
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
5.6 <script>介绍
<script>标签用于加载脚本文件，如： JavaScript。
6.< body>内标签
6.1大纲标签
--6.1.1标题<h1>
HTML 标题（Heading）是通过 <h1> - <h6> 标签进行定义的
<h1> 定义最大的标题 <h6> 定义最小的标题 <h7>按照正文显示
<h1>这是一级标题。</h1> <h2>这是二级标题。</h2> <h3>这是三级标题。</h3> <h4>这是四级标题。</h4> <h5>这是五级标题。</h5> <h6>这是六级标题。</h6>
注意：浏览器会自动地在标题的前后添加空行
标题很重要
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
--6.1.2段落
段落是通过 <p> 标签定义的。
<p>这是一个段落 </p> <p>这是另一个段落</p>
浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）
使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它
6.2排版基础标签（链图表）
--6.2.1换行
<p>这个<br>段落<br>演示了分行的效果</p>
<br> 是没有关闭标签的空元素（<br> 标签定义换行）。
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。空元素在开始标签中进行关闭（以开始标签的结束而结束）
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
br区分相关
不产生一个新段落的情况下进行换行（新行），使用 <br /> 标签
--6.2.2水平线
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
<p>这是一个段落。</p> <hr /> <p>这是一个段落。</p> <hr /> <p>这是一个段落。</p>
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
--6.2.3空格
对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
| HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（ ）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（ ）在不同浏览器中宽度各异。 | |
| | 它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。 |
|   | 它叫“半角空格”，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。两个普通空格 |
|   | 它叫“全角空格”，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。四个普通空格 |
|   | 它叫窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。 |
| 以上表格内容引自坐在那边看天空 | |
--6.2.4链接
1.简介
HTML使用标签 <a>来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时，链接显示为红色并带有下划线。
注意：
- 如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
- "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接
2.属性
href属性
在标签<a> 中使用了href属性来描述链接的地址。
<a href="url">链接文本</a>
href 属性描述了链接的目标。
实例
<a href="https://www.cnblogs.com/ZanderZhao/">我的主页</a>
<a href="https://www.cnblogs.com/ZanderZhao/">我的主页</a>
target属性
<a> 标签的 target 属性规定在何处打开链接文档。
<a target="value">
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
如果在一个 <a> 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。
- 打开新窗口
被指向的超链接使得创建高效的浏览工具变得很容易。例如，一个简单的内容文档的列表，可以将文档重定向到一个单独的窗口：
<h3>Table of Contents</h3> <ul> <li><a href="pref.html" target="view_window">Preface</a></li> <li><a href="chap1.html" target="view_window">Chapter 1</a></li> <li><a href="chap2.html" target="view_window">Chapter 2</a></li> <li><a href="chap3.html" target="view_window">Chapter 3</a></li> </ul>
当用户第一次选择内容列表中的某个链接时，浏览器将打开一个新的窗口，将它标记为 "view_window"，然后在其中显示希望显示的文档内容。如果用户从这个内容列表中选择另一个链接，且这个 "view_window" 仍处于打开状态，浏览器就会再次将选定的文档载入那个窗口，取代刚才的那些文档。
在整个过程中，这个包含了内容列表的窗口是用户可以访问的。通过单击窗口中的一个连接，可使另一个窗口的内容发生变化。
- 在框架中打开窗口
不用打开一个完整的浏览器窗口，使用 target 更通常的方法是在一个 <frameset> 显示中将超链接内容定向到一个或者多个框架中。可以将这个内容列表放入一个带有两个框架的文档的其中一个框架中，并用这个相邻的框架来显示选定的文档：
<frameset cols="100,*"> <frame src="toc.html"> <frame src="pref.html" name="view_frame"> </frameset>
当浏览器最初显示这两个框架的时候，左边这个框架包含目录，右边这个框架包含前言。
这是 "toc.html" 的源代码：
<h3>Table of Contents</h3> <ul> <li><a href="pref.html" target="view_frame">Preface</a></li> <li><a href="chap1.html" target="view_frame">Chapter 1</a></li> <li><a href="chap2.html" target="view_frame">Chapter 2</a></li> <li><a href="chap3.html" target="view_frame">Chapter 3</a></li> </ul>
请注意，在文档 "toc.html" 中，每个链接的目标都是 "view_frame"，也就是右边的框架。
当用户从左边框架中的目录中选择一个链接时，浏览器会将这个关联的文档载入并显示在右边这个 "view_frame" 框架中。当其他链接被选中时，右边这个框架中的内容也会发生变化，而左边这个框架始终保持不变。
- 特殊的目标
有 4 个保留的目标名称用作特殊的文档重定向操作：
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
提示：这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。
id属性
id属性可用于创建在一个HTML文档书签标记。
提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。
实例
<!--在HTML文档中插入ID:--> <a id="tips">有用的提示部分</a> <!--在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：--> <a href="#tips">访问有用的提示部分</a> <!--或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：--> <a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>
基本的注意事项
注释： 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://i.cnblogs.com"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://i.cnblogs.com/"。
--6.2.5图像
| 标签 | 描述 |
|---|---|
| <img> | 定义图像 |
| <map> | 定义图像地图 |
| <area> | 定义图像地图中的可点击区域 |
<img>
在 HTML 中，图像由<img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
<img src="url" alt="some_text">
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
--6.2.6表格
1.简介
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <caption> | 定义表格标题 |
| <colgroup> | 定义表格列的组 |
| <col> | 定义用于表格列的属性 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
--6.2.7列表
| html列表标签 | |
|---|---|
| 标签 | 描述 |
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
| <dl> | 定义列表 |
| <dt> | 自定义列表项目 |
| <dd> | 定义自定列表项的描述 |
----6.2.7.1无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签
<ul> <li>Coffee</li> <li>Milk</li> </ul>
----6.2.7.2有序列表
有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记
<ol> <li>Coffee</li> <li>Milk</li> </ol>
----6.2.7.3自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
6.3文本格式标签（粗斜）
HTML 文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub> | 定义下标字 |
| <sup> | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
HTML "计算机输出" 标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <var> | 定义变量 |
| <pre> | 定义预格式文本 |
HTML 引文, 引用, 及标签定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用 |
| <q> | 定义短的引用语 |
| <cite> | 定义引用、引证 |
| <dfn> | 定义一个定义项目。 |
6.4功能拓展标签
--6.4.1多媒体
----6.4.1.1音频
HTML5 Audio 标签
| 标签 | 描述 |
|---|---|
| <audio> | 定义了声音内容 |
| <source> | 规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用 |
音频格式的MIME类型
| Format | MIME-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio>
----6.4.1.2视频
| HTML5 Video 标签 | |
|---|---|
| 标签 | 描述 |
| <video> | 定义一个视频 |
| <source> | 定义多种媒体资源,比如 <video> 和<audio> |
| <track> | 定义在媒体播放器文本轨迹 |
<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持Video标签。 </video>
视频格式
| 格式 | MIME-type | |
|---|---|---|
| MP4 |
MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 |
video/mp4 |
| WebM |
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 |
video/webm |
| Ogg |
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 |
video/ogg |
----6.4.1.3动画
--6.4.2功能实现型
----6.4.2.1表单
HTML 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
<form> . input 元素 . </form>
HTML 表单用于收集不同类型的用户输入。
| html表单标签 | |
|---|---|
| 标签 | 描述 |
| <form> | 定义供用户输入的表单 |
| <input> | 定义输入域 |
| <textarea> | 定义文本域 (一个多行的输入控件) |
| <label> | 定义了 <input> 元素的标签，一般为输入标题 |
| <fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
| <legend> | 定义了 <fieldset> 元素的标题 |
| <select> | 定义了下拉选项列表 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉列表中的选项 |
| <button> | 定义一个点击按钮 |
| <datalist>New | 指定一个预先定义的输入控件选项列表 |
| <keygen>New | 定义了表单的密钥对生成器字段 |
| <output>New | 定义一个计算结果 |
----6.4.2.2浮动与定位
--6.4.3接口型
----6.4.3.1CSS样式
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.
----6.4.3.2脚本
| HTML 脚本标签 | |
|---|---|
| 标签 | 描述 |
| <script> | 定义了客户端脚本 |
| <noscript> | 定义了不支持脚本浏览器输出的文本 |
<script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
HTML<noscript> 标签
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：
<script> document.write("Hello World!") </script> <noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
----6.4.3.3web存储
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
localStorage 和 sessionStorage
客户端存储数据的两个对象为：
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}
localStorage 对象
localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
localStorage.sitename="我的主页";
document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;
实例解析：
使用 key="sitename" 和 value="菜鸟教程" 创建一个 localStorage 键/值对。
检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。
以上实例也可以这么写：
// 存储
localStorage.sitename = "我的主页";
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;
移除 localStorage 中的 "sitename" :
localStorage.removeItem("sitename");
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。
下面的实例展示了用户点击按钮的次数。
代码中的字符串值转换为数字类型:
实例
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
sessionStorage 对象
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
如何创建并访问一个 sessionStorage：
实例
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
6.5布局型标签（布局框架）
--6.5.1区块
1.定义
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
2.例子
| html分组标签 | |
|---|---|
| 标签 | 描述 |
| <div> | 定义了文档的区域，块级 (block-level) |
| <span> | 用来组合文档中的行内元素， 内联元素(inline) |
HTML <div> 元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
--6.5.2布局
| 标签 | 描述 |
|---|---|
| <div> | 定义文档区块，块级(block-level) |
| <span> | 定义 span，用来组合文档中的行内元素。 |
HTML 布局 - 使用<div> 元素
div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的主页</title> </head> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">主要的网页标题</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> 内容在这里</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 版权 © cmaker.tech</div> </div> </body> </html>
HTML 布局 - 使用表格
使用 HTML <table> 标签是创建布局的一种简单的方式。
大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
lamp 即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具。
下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的主页</title> </head> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>主要的网页标题</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#eeeeee;height:200px;width:400px;"> 内容在这里</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> 版权 © cmaker.tech</td> </tr> </table> </body> </html>
HTML 布局 - 有用的提示
Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识
Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）
--6.5.3框架
1.简介
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
iframe语法:
<iframe src="URL"></iframe>
该URL指向不同的网页。
| HTML iframe 标签 | |
|---|---|
| 标签 | 说明 |
| <iframe> | 定义一个内联的iframe |
2.属性
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
使用iframe来显示目标链接页面
iframe可以显示一个目标链接的页面
目标链接的属性必须使用iframe的属性，如下实例:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.baidu.com" target="iframe_a">Baidu.COM</a></p>
--6.5.4容器
7.概念
7.1颜色
HTML 颜色由红色、绿色、蓝色混合而成。
7.1.1颜色值
HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
1600万种不同颜色，三种颜色 红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。
7.1.2Web安全色
数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。
我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。
最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
7.1.3RGBA
RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。
div {
background:rgba(255,0,0,0.5);
}
相对于使用 rgb(255,255,0)，使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能，这里的 0.5 表示透明度，范围 0~1，0 表示全透明。
通常我们为了省略一个 0:
div {
background:rgba(255,0,0,.5);
}
实例：
<p style="background-color:rgb(255,255,0)"> 通过 rbg 值设置背景颜色 </p> <p style="background-color:rgba(255,255,0,0.25)"> 通过 rbg 值设置背景颜色 </p> <p style="background-color:rgba(255,255,0,0.5)"> 通过 rbg 值设置背景颜色 </p> <p style="background-color:rgba(255,255,0,0.75)"> 通过 rbg 值设置背景颜色 </p>
7.1.4颜色名
- HTML 颜色名，目前所有浏览器都支持以下颜色名
- 141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。下表列出了所有颜色的值，包括十六进制值。
- 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。
按颜色名排序
单击一个颜色名或者 16 进制值，就可以查看与不同文字颜色搭配的背景颜色。
7.1.5HTML颜色值
颜色由红(R)、绿(G)、蓝(B)组成。
颜色值
颜色值由十六进制来表示红、绿、蓝（RGB）。
每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。
十六进制值的写法为 # 号后跟三个或六个十六进制字符。
三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。
颜色实例
| 颜色 | 3位十六进制颜色值 | 6位十六进制颜色值 | RGB |
|---|---|---|---|
| #000 | #000000 | rgb(0,0,0) | |
| #F00 | #FF0000 | rgb(255,0,0) | |
| #0F0 | #00FF00 | rgb(0,255,0) | |
| #00F | #0000FF | rgb(0,0,255) | |
| #FF0 | #FFFF00 | rgb(255,255,0) | |
| #0FF | #00FFFF | rgb(0,255,255) | |
| #F0F | #FF00FF | rgb(255,0,255) | |
| #888 | #888888 | rgb(136,136,136) | |
| #FFF | #FFFFFF | rgb(255,255,255) |
通过十六进制（Hex）的颜色值排序
7.2字符实体
简介：
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：
&entity_name; 或 &#entity_number;
如需显示小于号，我们必须这样写：< 或 < 或 <
提示： 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
应用场景：
HTML 中的预留字符必须被替换为字符实体。一些在键盘上找不到的字符也可以使用字符实体来替换。
结合音标符
发音符号是加到字母上的一个"glyph(字形)"。
一些变音符号, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。
变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。
变音符号可以与字母、数字字符的组合来使用。
以下是一些实例:
| 音标符 | 字符 | Construct | 输出结果 |
|---|---|---|---|
| ̀ | a | à | à |
| ́ | a | á | á |
| ̂ | a | â | â |
| ̃ | a | ã | ã |
| ̀ | O | Ò | Ò |
| ́ | O | Ó | Ó |
| ̂ | O | Ô | Ô |
| ̃ | O | Õ | Õ |
HTML字符实体
实体名称对大小写敏感，虽然 html 不区分大小写，但实体字符对大小写敏感。
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 人民币/日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
现代的浏览器支持的字符集：
ISO-8859-1
ISO-8859-1 是大多数浏览器默认的字符集。
ISO-8859-1 的较低部分（从 1 到 127 之间的代码）是最初的 ASCII 字符集（0-9 的数字，大写和小写英文字母表，以及一些特殊字符）。
ISO-8859-1 的较高部分（从 160 到 255 之间的代码）包含了一些西欧国家使用的字符和一些被广泛使用的特殊字符，它们全都有实体名称。
这些符号中的大多数都可以在不进行实体引用的情况下使用，但是实体名称或实体编号为那些不容易通过键盘键入的符号提供了表达的方法。
HTML 预留字符
HTML and XHTML 预留了一些字符。比如，您不能使用包含这些字符的文本，因为浏览器可能会误以为是 HTML 标签。
HTML and XHTML 中央处理器必须识别以下表格所列举的五种特殊字符：
| 字符 | 实体编号 | 实体名称 | 描述 |
|---|---|---|---|
|   | | 非间断空格（non-breaking space） | |
| ¡ | ¡ | ¡ | 倒置感叹号（inverted exclamation mark） |
| ¢ | ¢ | ¢ | 美分符号（cent） |
| £ | £ | £ | 英镑符号（pound） |
| ¤ | ¤ | ¤ | 货币符号（currency） |
| ¥ | ¥ | ¥ | 日元符号（yen） |
| ¦ | ¦ | ¦ | 间断的竖杠（broken vertical bar） |
| § | § | § | 小节号（section） |
| ¨ | ¨ | ¨ | 分音符号（spacing diaeresis） |
| © | © | © | 版权所有（copyright） |
| ª | ª | ª | 阴性序数记号（feminine ordinal indicator） |
| « | « | « | 左双角引号（angle quotation mark (left)） |
| ¬ | ¬ | ¬ | 否定符号（negation） |
| | ­ | ­ | 软连字符（soft hyphen） |
| ® | ® | ® | 注册商标（registered trademark) |
| ¯ | ¯ | ¯ | 长音符号（spacing macron） |
| ° | ° | ° | 度符号（degree） |
| ± | ± | ± | 加减号/正负号（plus-or-minus） |
| ² | ² | ² | 上标 2（superscript 2） |
| ³ | ³ | ³ | 上标 3（superscript 3） |
| ´ | ´ | ´ | 尖音符号（spacing acute） |
| µ | µ | µ | 微米符号（micro） |
| ¶ | ¶ | ¶ | 段落符号（paragraph） |
| · | · | · | 中间点（middle dot） |
| ¸ | ¸ | ¸ | 变音符号（spacing cedilla） |
| ¹ | ¹ | ¹ | 上标 1（superscript 1） |
| º | º | º | 阳性序数记号（masculine ordinal indicator） |
| » | » | » | 右双角引号（angle quotation mark (right)） |
| ¼ | ¼ | ¼ | 1/4 分数（fraction 1/4） |
| ½ | ½ | ½ | 1/2 分数（fraction 1/2） |
| ¾ | ¾ | ¾ | 3/4 分数（fraction 3/4） |
| ¿ | ¿ | ¿ | 倒置问号（inverted question mark） |
ISO 8859-1 字符实体
| 字符 | 实体编号 | 实体名称 | 描述 |
|---|---|---|---|
| À | À | À | 大写字母 A，重音（grave accent） |
| Á | Á | Á | 大写字母 A，尖音（acute accent） |
| Â | Â | Â | 大写字母 A，抑扬音（circumflex accent） |
| Ã | Ã | Ã | 大写字母 A，腭化（tilde） |
| Ä | Ä | Ä | 大写字母 A，带有变音符号标记（umlaut mark） |
| Å | Å | Å | 大写字母 A，带有上圆圈（ring） |
| Æ | Æ | Æ | 大写字母 AE |
| Ç | Ç | Ç | 大写字母 C，变音（cedilla） |
| È | È | È | 大写字母 E，重音（grave accent） |
| É | É | É | 大写字母 E，尖音（acute accent） |
| Ê | Ê | Ê | 大写字母 E，抑扬音（circumflex accent） |
| Ë | Ë | Ë | 大写字母 E，带有变音符号标记（umlaut mark） |
| Ì | Ì | Ì | 大写字母 I，重音（grave accent） |
| Í | Í | Í | 大写字母 I，尖音（acute accent） |
| Î | Î | Î | 大写字母 I，抑扬音（circumflex accent） |
| Ï | Ï | Ï | 大写字母 I，带有变音符号标记（umlaut mark） |
| Ð | Ð | Ð | 冰岛语大写字母 eth |
| Ñ | Ñ | Ñ | 大写字母 N，腭化（tilde） |
| Ò | Ò | Ò | 大写字母 O，重音（grave accent） |
| Ó | Ó | Ó | 大写字母 O，尖音（acute accent） |
| Ô | Ô | Ô | 大写字母 O，抑扬音（circumflex accent） |
| Õ | Õ | Õ | 大写字母 O，腭化（tilde） |
| Ö | Ö | Ö | 大写字母 O，带有变音符号标记（umlaut mark） |
| × | × | × | 乘号（multiplication） |
| Ø | Ø | Ø | 大写字母 O，带有斜线（slash） |
| Ù | Ù | Ù | 大写字母 U，重音（grave accent） |
| Ú | Ú | Ú | 大写字母 U，尖音（acute accent） |
| Û | Û | Û | 大写字母 U，抑扬音（circumflex accent） |
| Ü | Ü | Ü | 大写字母 U，带有变音符号标记（umlaut mark） |
| Ý | Ý | Ý | 大写字母 Y，尖音（acute accent） |
| Þ | Þ | Þ | 冰岛语大写字母 THORN |
| ß | ß | ß | 德语小写字母 sharp s |
| à | à | à | 小写字母 a，重音（grave accent） |
| á | á | á | 小写字母 a，尖音（acute accent） |
| â | â | â | 小写字母 a，抑扬音（circumflex accent） |
| ã | ã | ã | 小写字母 a，腭化（tilde） |
| ä | ä | ä | 小写字母 a，带有变音符号标记（umlaut mark） |
| å | å | å | 小写字母 a，带有上圆圈（ring） |
| æ | æ | æ | 小写字母 ae |
| ç | ç | ç | 小写字母 c，变音（cedilla） |
| è | è | è | 小写字母 e，重音（grave accent） |
| é | é | é | 小写字母 e，尖音（acute accent） |
| ê | ê | ê | 小写字母 e，抑扬音（circumflex accent） |
| ë | ë | ë | 小写字母 e，带有变音符号标记（umlaut mark） |
| ì | ì | ì | 小写字母 i，重音（grave accent） |
| í | í | í | 小写字母 i，尖音（acute accent） |
| î | î | î | 小写字母 i，抑扬音（circumflex accent） |
| ï | ï | ï | 小写字母 i，带有变音符号标记（umlaut mark） |
| ð | ð | ð | 冰岛语小写字母 eth |
| ñ | ñ | ñ | 小写字母 n，腭化（tilde） |
| ò | ò | ò | 小写字母 o，重音（grave accent） |
| ó | ó | ó | 小写字母 o，尖音（acute accent） |
| ô | ô | ô | 小写字母 o，抑扬音（circumflex accent） |
| õ | õ | õ | 小写字母 o，腭化（tilde） |
| ö | ö | ö | 小写字母 o，带有变音符号标记（umlaut mark） |
| ÷ | ÷ | ÷ | 除号（division） |
| ø | ø | ø | 小写字母 o，带有斜线（slash） |
| ù | ù | ù | 小写字母 u，重音（grave accent） |
| ú | ú | ú | 小写字母 u，尖音（acute accent） |
| û | û | û | 小写字母 u，抑扬音（circumflex accent） |
| ü | ü | ü | 小写字母 u，带有变音符号标记（umlaut mark） |
| ý | ý | ý | 小写字母 y，尖音（acute accent） |
| þ | þ | þ | 冰岛语小写字母 thorn |
| ÿ | ÿ | ÿ | 小写字母 y，带有变音符号标记（umlaut mark） |
8.完善
8.1hack
<!DOCTYPE html> 是 HTML5 中唯一的 doctype，也被视作将网页 "升级" 到 HTML5 的第一步。
很多国外网站的 <!DOCTYPE html> 和 <HEAD> 之间都会有一段注释,如:
<!—[if IE 6 ]><html class="ie ielt9 ielt8 ielt7 ie6" lang="en-US"><![endif]—> <!—[if IE 7 ]><html class="ie ielt9 ielt8 ie7" lang="en-US"><![endif]—> <!—[if IE 8 ]><html class="ie ielt9 ie8" lang="en-US"><![endif]—> <!—[if IE 9 ]><html class="ie ie9" lang="en-US"><![endif]—> <!—[if (gt IE 9)|!(IE)]><!—><html lang="en-US"><!—<![endif]—>
改代码作用于 css，来写一些针对 IE 各版本的样式差异。
先判断用户用的哪个 IE 版本，然后在标签上加上该版本的 class，这样可以方便 hack。
css 文件是这样写的：
.ie6 xxx {};
.ie7 xxx {};
这是目前最好的 hack 方式之一。
附录
1.HTML5新标签字母排列
| 标签 | 描述 |
|---|---|
| <!--...--> | 定义注释 |
| <!DOCTYPE> | 定义文档类型 |
| <a> | 定义超文本链接 |
| <abbr> | 定义缩写 |
| <acronym> | 定义只取首字母的缩写，不支持HTML5 |
| <address> | 定义文档作者或拥有者的联系信息 |
| <applet> | HTML5中不赞成使用。定义嵌入的 applet。 |
| <area> | 定义图像映射内部的区域 |
| <article>New | 定义一个文章区域 |
| <aside>New | 定义页面的侧边栏内容 |
| <audio>New | 定义音频内容 |
| <b> | 定义文本粗体 |
| <base> | 定义页面中所有链接的默认地址或默认目标。 |
| <basefont> | HTML5不支持，不赞成使用。定义页面中文本的默认字体、颜色或尺寸。 |
| <bdi>New | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| <bdo> | 定义文字方向 |
| <big> | 定义大号文本，HTML5不支持 |
| <blockquote> | 定义长的引用 |
| <body> | 定义文档的主体 |
| <br> | 定义换行 |
| <button> | 定义一个点击按钮 |
| <canvas>New | 定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形 |
| <caption> | 定义表格标题 |
| <center> | HTML5不支持，不赞成使用。定义居中文本。 |
| <cite> | 定义引用(citation) |
| <code> | 定义计算机代码文本 |
| <col> | 定义表格中一个或多个列的属性值 |
| <colgroup> | 定义表格中供格式化的列组 |
| <command>New | 定义命令按钮，比如单选按钮、复选框或按钮 |
| <datalist>New | 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 |
| <dd> | 定义定义列表中项目的描述 |
| <del> | 定义被删除文本 |
| <details>New | 用于描述文档或文档某个部分的细节 |
| <dfn> | 定义定义项目 |
| <dialog>New | 定义对话框，比如提示框 |
| <dir> | HTML5不支持，不赞成使用。定义目录列表。 |
| <div> | 定义文档中的节 |
| <dl> | 定义列表详情 |
| <dt> | 定义列表中的项目 |
| <em> | 定义强调文本 |
| <embed>New | 定义嵌入的内容，比如插件。 |
| <fieldset> | 定义围绕表单中元素的边框 |
| <figcaption>New | 定义<figure> 元素的标题 |
| <figure>New | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| <font> | HTML5不支持，不赞成使用。定义文字的字体、尺寸和颜色。 |
| <footer>New | 定义 section 或 document 的页脚。 |
| <form> | 定义了HTML文档的表单 |
| <frame> | 定义框架集的窗口或框架 |
| <frameset> | 定义框架集 |
| <h1> to <h6> | 定义 HTML 标题 |
| <head> | 定义关于文档的信息 |
| <header>New | 定义了文档的头部区域 |
| <hr> | 定义水平线 |
| <html> | 定义 HTML 文档 |
| <i> | 定义斜体字 |
| <iframe> | 定义内联框架 |
| <img> | 定义图像 |
| <input> | 定义输入控件 |
| <ins> | 定义被插入文本 |
| <kbd> | 定义键盘文本 |
| <keygen>New | 规定用于表单的密钥对生成器字段。 |
| <label> | 定义 input 元素的标注 |
| <legend> | 定义 fieldset 元素的标题。 |
| <li> | 定义列表的项目 |
| <link> | 定义文档与外部资源的关系 |
| <map> | 定义图像映射 |
| <mark>New | 定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。 |
| <menu> | 不赞成使用。定义菜单列表。 |
| <meta> | 定义关于 HTML 文档的元信息。 |
| <meter>New | 定义度量衡。仅用于已知最大和最小值的度量。 |
| <nav>New | 定义导航链接的部分 |
| <noframes> | 定义针对不支持框架的用户的替代内容。HTML5不支持 |
| <noscript> | 定义针对不支持客户端脚本的用户的替代内容。 |
| <object> | 定义内嵌对象 |
| <ol> | 定义有序列表。 |
| <optgroup> | 定义选择列表中相关选项的组合。 |
| <option> | 定义选择列表中的选项。 |
| <output>New | 定义不同类型的输出，比如脚本的输出。 |
| <p> | 定义段落。 |
| <param> | 定义对象的参数。 |
| <pre> | 定义预格式文本。 |
| <progress>New | 定义运行中的进度（进程）。 |
| <q> | 定义短的引用。 |
| <rp>New | <rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。 |
| <rt>New | <rt> 标签定义字符（中文注音或字符）的解释或发音。 |
| <ruby>New | <ruby> 标签定义 ruby 注释（中文注音或字符）。 |
| <s> | 不赞成使用。定义加删除线的文本。 |
| <samp> | 定义计算机代码样本。 |
| <script> | 定义客户端脚本。 |
| <section>New | <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 |
| <select> | 定义选择列表（下拉列表）。 |
| <small> | 定义小号文本。 |
| <source>New | <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。 |
| <span> | 定义文档中的节。 |
| <strike> | HTML5不支持，不赞成使用。定义加删除线文本。 |
| <strong> | 定义强调文本。 |
| <style> | 定义文档的样式信息。 |
| <sub> | 定义下标文本。 |
| <summary>New | <summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。 |
| <sup> | 定义上标文本。 |
| <table> | 定义表格。 |
| <tbody> | 定义表格中的主体内容。 |
| <td> | 定义表格中的单元。 |
| <textarea> | 定义多行的文本输入控件。 |
| <tfoot> | 定义表格中的表注内容（脚注）。 |
| <th> | 定义表格中的表头单元格。 |
| <thead> | 定义表格中的表头内容。 |
| <time>New | 定义日期或时间，或者两者。 |
| <title> | 定义文档的标题。 |
| <tr> | 定义表格中的行。 |
| <track>New | <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。 |
| <tt> | 定义打字机文本。 |
| <u> | 不赞成使用。定义下划线文本。 |
| <ul> | 定义无序列表。 |
| <var> | 定义文本的变量部分。 |
| <video>New | <video> 标签定义视频，比如电影片段或其他视频流。 |
| <wbr>New | 规定在文本中的何处适合添加换行符。 |
2.HTML5 新标签功能排序
| 标签 | 描述 |
|---|---|
| 基础 | |
| <!DOCTYPE> | 定义文档类型。 |
| <html> | 定义一个 HTML 文档 |
| <title> | 为文档定义一个标题 |
| <body> | 定义文档的主体 |
| <h1> to <h6> | 定义 HTML 标题 |
| <p> | 定义一个段落 |
| <br> | 定义简单的折行。 |
| <hr> | 定义水平线。 |
| <!--...--> | 定义一个注释 |
| 格式 | |
| <acronym> | HTML5不再支持。 定义只取首字母的缩写。 |
| <abbr> | 定义一个缩写。 |
| <address> | 定义文档作者或拥有者的联系信息。 |
| <b> | 定义粗体文本。 |
| <bdi>New | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| <bdo> | 定义文本的方向。 |
| <big> | HTML5不再支持。 定义大号文本。 |
| <blockquote> | 定义块引用。 |
| <center> | HTML5不再支持。 HTML 4.01 已废弃。定义居中文本。 |
| <cite> | 定义引用(citation)。 |
| <code> | 定义计算机代码文本。 |
| <del> | 定义被删除文本。 |
| <dfn> | 定义定义项目。 |
| <em> | 定义强调文本。 |
| <font> | HTML5不再支持。 HTML 4.01 已废弃。 定义文本的字体、尺寸和颜色 |
| <i> | 定义斜体文本。 |
| <ins> | 定义被插入文本。 |
| <kbd> | 定义键盘文本。 |
| <mark>New | 定义带有记号的文本。 |
| <meter>New | 定义度量衡。仅用于已知最大和最小值的度量。 |
| <pre> | 定义预格式文本 |
| <progress>New | 定义运行中的任务进度（进程）。 |
| <q> | 定义短的引用。 |
| <rp>New | 定义不支持 ruby 元素的浏览器所显示的内容。 |
| <rt>New | 定义字符（中文注音或字符）的解释或发音。 |
| <ruby>New | 定义 ruby 注释（中文注音或字符）。 |
| <s> | 定义加删除线的文本。 |
| <samp> | 定义计算机代码样本。 |
| <small> | 定义小号文本。 |
| <strike> | HTML5不再支持。 HTML 4.01 已废弃。 定义加删除线的文本。 |
| <strong> | 定义语气更为强烈的强调文本。 |
| <sub> | 定义下标文本。 |
| <sup> | 定义上标文本。 |
| <time>New | 定义一个日期/时间 |
| <tt> | HTML5不再支持。 定义打字机文本。 |
| <u> | 定义下划线文本。 |
| <var> | 定义文本的变量部分。 |
| <wbr>New | 规定在文本中的何处适合添加换行符。 |
| 表单 | |
| <form> | 定义一个 HTML 表单，用于用户输入。 |
| <input> | 定义一个输入控件 |
| <textarea> | 定义多行的文本输入控件。 |
| <button> | 定义按钮。 |
| <select> | 定义选择列表（下拉列表）。 |
| <optgroup> | 定义选择列表中相关选项的组合。 |
| <option> | 定义选择列表中的选项。 |
| <label> | 定义 input 元素的标注。 |
| <fieldset> | 定义围绕表单中元素的边框。 |
| <legend> | 定义 fieldset 元素的标题。 |
| <datalist>New | 规定了 input 元素可能的选项列表。 |
| <keygen>New | 规定用于表单的密钥对生成器字段。 |
| <output>New | 定义一个计算的结果 |
| 框架 | |
| <frame> | HTML5不再支持。 定义框架集的窗口或框架。 |
| <frameset> | HTML5不再支持。定义框架集。 |
| <noframes> | HTML5不再支持。 定义针对不支持框架的用户的替代内容。 |
| <iframe> | 定义内联框架。 |
| 图像 | |
| <img> | 定义图像。 |
| <map> | 定义图像映射。 |
| <area> | 定义图像地图内部的区域。 |
| <canvas>New | 通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。 |
| <figcaption>New | 定义一个 caption for a <figure> element |
| <figure>New | figure 标签用于对元素进行组合。 |
| Audio/Video | |
| <audio>New | 定义声音，比如音乐或其他音频流。 |
| <source>New | 定义media元素 (<video> 和 <audio>)的媒体资源。media |
| <track>New | 为媒体(<video> 和 <audio>)元素定义外部文本轨道。 |
| <video>New | 定义一个音频或者视频 |
| 链接 | |
| <a> | 定义一个链接 |
| <link> | 定义文档与外部资源的关系。 |
| <nav>New | 定义导航链接 |
| 列表 | |
| <ul> | 定义一个无序列表 |
| <ol> | 定义一个有序列表 |
| <li> | 定义一个列表项 |
| <dir> | HTML5不再支持。 HTML 4.01 已废弃。 定义目录列表。 |
| <dl> | 定义一个定义列表 |
| <dt> | 定义一个定义定义列表中的项目。 |
| <dd> | 定义定义列表中项目的描述。 |
| <menu> | 定义菜单列表。 |
| <command>New | 定义用户可能调用的命令（比如单选按钮、复选框或按钮）。 |
| 表格 | |
| <table> | 定义一个表格 |
| <caption> | 定义表格标题。 |
| <th> | 定义表格中的表头单元格。 |
| <tr> | 定义表格中的行。 |
| <td> | 定义表格中的单元。 |
| <thead> | 定义表格中的表头内容。 |
| <tbody> | 定义表格中的主体内容。 |
| <tfoot> | 定义表格中的表注内容（脚注）。 |
| <col> | 定义表格中一个或多个列的属性值。 |
| <colgroup> | 定义表格中供格式化的列组。 |
| 样式/节 | |
| <style> | 定义文档的样式信息。 |
| <div> | 定义文档中的节。 |
| <span> | 定义文档中的节。 |
| <header>New | 定义一个文档头部部分 |
| <footer>New | 定义一个文档底部 |
| <section>New | 定义了文档的某个区域 |
| <article>New | 定义一个文章内容 |
| <aside>New | 定义其所处内容之外的内容。 |
| <details>New | 定义了用户可见的或者隐藏的需求的补充细节。 |
| <dialog>New | 定义一个对话框或者窗口 |
| <summary>New | 定义一个可见的标题。 当用户点击标题时会显示出详细信息。 |
| 元信息 | |
| <head> | 定义关于文档的信息 |
| <meta> | 定义关于 HTML 文档的元信息。 |
| <base> | 定义页面中所有链接的默认地址或默认目标。 |
| <basefont> | HTML5不再支持。 HTML 4.01 已废弃。 定义页面中文本的默认字体、颜色或尺寸。 |
| 程序 | |
| <script> | 定义客户端脚本。 |
| <noscript> | 定义针对不支持客户端脚本的用户的替代内容。 |
| <applet> | HTML5不再支持。 HTML 4.01 已废弃。 定义嵌入的 applet。 |
| <embed>New | 定义了一个容器，用来嵌入外部应用或者互动程序（插件）。 |
| <object> | 定义嵌入的对象。 |
| <param> | 定义对象的参数。 |
3.HTML5 新属性全局属性
| 属性 | 描述 |
|---|---|
| accesskey | 设置访问元素的键盘快捷键。 |
| class | 规定元素的类名（classname） |
| contenteditableNew | 规定是否可编辑元素的内容。 |
| contextmenuNew | 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 |
| data-*New | 用于存储页面的自定义数据 |
| dir | 设置元素中内容的文本方向。 |
| draggableNew | 指定某个元素是否可以拖动 |
| dropzoneNew | 指定是否将数据复制，移动，或链接，或删除 |
| hiddenNew | hidden 属性规定对元素进行隐藏。 |
| id | 规定元素的唯一 id |
| lang | 设置元素中内容的语言代码。 |
| spellcheckNew | 检测元素是否拼写错误 |
| style | 规定元素的行内样式（inline style） |
| tabindex | 设置元素的 Tab 键控制次序。 |
| title | 规定元素的额外信息（可在工具提示中显示） |
| translateNew | 指定是否一个元素的值在页面载入时是否需要翻译 |
