参考：菜鸟教程-HTML
目录
一、HTML简介
1.什么是HTML
HTML，即超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。
- HTML 是用来描述网页的一种语言。
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML 文档也叫做 web 页面
- HTML 文件后缀可以是 .html 或者 .htm，二者没有区别，都可以使用
2.HTML标签
HTML 标记标签通常被称为 HTML 标签（HTML Tag）。HTML 标签是由尖括号包围的关键字，比如<html>；HTML 标签通常是成对出现的，标签中的第一个标签叫做开始标签（也叫开放标签），第二个标签被叫做结束标签（也叫闭合标签）。比如<b></b>
"HTML 元素"和“HTML 标签”通常描述的是同样的意思，但是严格来讲，一个 HTML 元素包含了开始标签与结束标签，如下示例：
<p>这是一个段落</p>3.WEB浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户。
浏览器的内核分类如下：
- Trident——IE/Edge浏览器使用
- Gecko——火狐浏览器使用
- Webkit——safari浏览器使用
- Chromium/Blink——Chrome浏览器使用
- Presto——Opera浏览器使用（新版Opera已经使用Blink内核）
4.HTML实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML实例</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>实例解析：
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
5.通用说明
HTML5
<!DOCTYPE html>
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">6.中文编码
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>7.HTML编辑器推荐
可以使用专业的 HTML 编辑器来编辑 HTML，菜鸟教程为大家推荐几款常用的编辑器：
- Notepad++：https://notepad-plus-plus.org/
- Sublime Text：http://www.sublimetext.com/
- VS Code：https://code.visualstudio.com/
- WebStorm
二、HTML属性
属性是HTML元素提供的附加信息
注意：HTML属性对大写不明感，但是一般的约定使用小写
1.HTML属性简介
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"。
比如：
<a href="http://www.runoob.com">这是一个链接</a>其中，HTML 链接有<a>标签定义，链接的地址在 href 属性中指定。
2.适用于大多数标签的属性
| 属性 | 描述 |
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
3.HTML全局属性
| 属性 | 描述 |
|---|---|
| accesskey | 设置访问元素的键盘快捷键。 |
| class | 规定元素的类名（classname） |
| contenteditable （New） | 规定是否可编辑元素的内容。 |
| contextmenu （New） | 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 |
| data-* （New） | 用于存储页面的自定义数据 |
| dir | 设置元素中内容的文本方向。 |
| draggable （New） | 指定某个元素是否可以拖动 |
| dropzone （New） | 指定是否将数据复制，移动，或链接，或删除 |
| hidden （New） | hidden 属性规定对元素进行隐藏。 |
| id | 规定元素的唯一 id |
| lang | 设置元素中内容的语言代码。 |
| spellcheck （New） | 检测元素是否拼写错误 |
| style | 规定元素的行内样式（inline style） |
| tabindex | 设置元素的 Tab 键控制次序。 |
| title | 规定元素的额外信息（可在工具提示中显示） |
| translate （New） | 指定是否一个元素的值在页面载入时是否需要翻译 |
（New）标注HTML5的新属性
三、HTML样式
style属性用于改变 HTML 元素的样式
1.HTML的style属性
style属性的作用：提供了一种作用改变所有 HTML 元素的样式的通用方法
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
常用的style属性：
background-color 属性为元素定义了背景颜色，
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸
text-align 属性规定了元素中文本的水平对齐方式
比如：
<html>
<body style="background-color:yellow">
<h1 style="text-align:center; font-family:verdana; background-color:red">heading</h1>
</body>
</html>2.不赞成使用的标签和属性
在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。
尽量避免使用这些被废弃的标签和属性，如果需要使用到下面的这些标签或属性，请使用style属性代替。
| 标签 | 描述 |
|---|---|
| <center> | 定义居中的内容。 |
| <font> 和 <basefont> | 定义 HTML 字体。 |
| <s> 和 <strike> | 定义删除线文本 |
| <u> | 定义下划线文本 |
| 属性 | 描述 |
| align | 定义文本的对齐方式 |
| bgcolor | 定义背景颜色 |
| color | 定义文本颜色 |
四、HTML注释
注释标签 <!-- 与 --> 用于在 HTML 插入注释。
HTML注释 ：
- 在开始标签中有一个感叹号，但是结束标签中没有
- 浏览器中不会显示注释，但是能够记录您的 HTML 文档
- 可以利用 HTML 注释放置通知或提示信息
- HTML注释不直接显示在浏览器上，但是通过开发者工具可以看到，所以不应该放置敏感信息
<!-- 此刻不显示图片：
<img border="0" src="/i/tulip_ballade.jpg" alt="Tulip">
-->五、HTML头部
1.HTML头部元素
| 标签 | 描述 |
|---|---|
| <head> | 定义关于文档的信息。 |
| <title> | 定义文档标题。 |
| <base> | 定义页面上所有链接的默认地址或默认目标。 |
| <link> | 定义文档与外部资源之间的关系。 |
| <meta> | 定义关于 HTML 文档的元数据。 |
| <script> | 定义客户端脚本。 |
| <style> | 定义文档的样式信息。 |
2.HTML head元素
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
3.HTML title元素
<title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时显示的标题
- 显示在搜索引擎结果中的页面标题
一个简化的 HTML 文档：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>4.HTML base元素
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<base target="_blank" />
</head>
<body>
<p>
<a href="http://www.w3school.com.cn" target="_blank">这个连接</a> 将在新窗口中加载，因为 target 属性被设置为 "_blank"。
</p>
<p>
<a href="http://www.w3school.com.cn">这个连接</a> 也将在新窗口中加载，即使没有 target 属性。
</p>
</body>
</html>
5.HTML link元素
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>6.HTML style元素
<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>7.HTML meta元素
- 元数据（metadata）是关于数据的信息。
- <meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
- 典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
- <meta> 标签始终位于 head 元素中。
- 元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述：
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />下面的 meta 元素定义页面的关键词：
<meta name="keywords" content="HTML, CSS, XML" />name 和 content 属性的作用是描述页面的内容。
8.HTML script元素
<script> 标签用于定义客户端脚本，比如 JavaScript。
（第九部分详细说明）
六、HTML字符实体
HTML中的预留字段必须被替换成字符实体
在 HTML 中，某些字符是预留的。
比如，在 HTML 中不能使用大于号(<)和大于号(>)，这是因为浏览器会误认为它们是标签，必须使用<或>代替
另外，浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。
HTML 中有用的字符实体（注意：实体名称对大小写敏感！）
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | € | € |
| § | 小节 | § | § |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
七、HTML颜色
颜色由红色、绿色、蓝色混合而成。
1.颜色值
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
这个表格给出了由三种颜色混合而成的具体效果：
2.颜色名
大多数的浏览器都支持颜色名集合。
提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的颜色，需要使用十六进制的颜色值。
八、HTML URL
1.统一资源定位符(URL)
当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。
统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。
网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：
scheme://host.domain:port/path/filename
解释：
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 w3school.com.cn
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称
2.主流的协议
| Scheme | 访问 | 用于... |
|---|---|---|
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页。加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | 您计算机上的文件。 |
3.相对路径
- 图像文件和HTML文件位于同一文件夹中，只需要输入图像文件的名称即可，<img src="logo.gif"/>
- 图像文件位于Html文件的下一级文件夹，输入文件夹名和文件名，二者之间用“/” 隔开，<img src="image/logo.gif"/>
- 图像文件位于HTML文件的上一级，在文件名之前加 " ../ ", 上两级则使用 " ../../ ",依次类推。<img src="../image/logo.gif"/>
4.绝对路径
- 本地绝对路径： D:\web\img\logo.gif
- 网络绝对路径：https://upload-images.jianshu.io/upload_images/2551993-7b4cba4929e08d7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700
九、HTML脚本
1.HTML script元素
- <script> 标签用于定义客户端脚本，比如 JavaScript。
- script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
- 必需的 type 属性规定脚本的 MIME 类型。
- JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出“Hello World!”：
<script type="text/javascript">
document.write("Hello World!")
</script>2.noscript标签
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>