一、HTML 简介
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML复习</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
标签解析
1、<!DOCTYPE html> 声明为 HTML5 文档
2、<html> 元素是 HTML 页面的根元素
3、<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
4、<title> 元素描述了文档的标题
5、<body> 元素包含了可见的页面内容
6、<h1> 元素定义一个大标题
7、<p> 元素定义一个段落
什么是HTML?
- HTML 指的是超文本标记语言: Hyper Text Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
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
<!DOCTYPE> 声明
<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
通用声明
HTML5
<!DOCTYPE html>
HTML 4.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">
笔记
1. doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。
在HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML（Standard Generalized Markup Language 标准通用标记语言）。
HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。
HTML5 不是基于 SGML，因此不要求引用 DTD。
2. 对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。
二、基础
标题标签： h1 h2 h3 h4 h5 h6
段落标签：p
html超链接：a
图像：img
三、HTML元素
html元素语法：
1、HTML元素以开始标签开始。
2、HTML元素以结束标签终止。
3、元素内容是开始标签和结束标签之间的内容。
4、某些HTML元素具有 空内容 。
5、空元素在开始标签中进行关闭。
6、大多数HTML元素都拥有属性。
HTML 嵌套
大多数HTML元素可以互相嵌套或包含其他HTML元素。
HTML文档也是相互嵌套的。
<!DOCTYPE html>
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
就是没有关闭标签的空元素（标签定义 br 换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 br 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障
HTML 提示：使用小写标签
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
笔记
1. 一些标签的使用，切记所有标签都需要闭合，不管是单体标签还是成对标签。（尽管目前浏览器是识别有些标签不闭合的情况，但是取的最好的保证兼容性，使用闭合）
2. 标签写法要用小写字母（有些版本对大小写可认为相同，而xhtml中强制使用小写）
四、属性
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"。
HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。
提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'
HTML 提示：使用小写属性
属性和属性值对大小写不敏感。
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。
属性描述
- class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
- id 定义元素的唯一id
- style 规定元素的行内样式（inline style）
- title 描述了元素的额外信息 (作为工具条使用)
笔记
属性和属性值，尽量小写，本来这样做也方便些。
class 属性可以多用 class=" " （引号里面可以填入多个class属性）
id 属性只能单独设置 id=" "（只能填写一个，多个无效）
五、标题
笔记
标题很重要
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推
<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>
<h2>这是2号标题</h2>
<font size="5">这是5号字体文本</font>
<h3>这是3号标题</h3>
<font size="4">这是4号字体文本</font>
<h4>这是4号标题</h4>
<font size="3">这是3号字体文本</font>
<h5>这是5号标题</h5>
<font size="2">这是2号字体文本</font>
<h6>这是6号标题</h6>
<font size="1">这是1号字体文本</font>
六、段落
- p 定义一个段落 是块级元素
- br 插入单个折行（换行）
笔记
区分一下： <br>, <br/> 以及 <br />（带有空格）
<br> 是 HTML 写法。
是 XHTML1.1 的写法, 也是 XML 写法。<br/> 是 XHTML 为兼容 HTML 的写法,也是 XML 写法。HTML5 因为兼容 XHTML，所以三种写法都可以使用。
早期发布的 HTML 规范当中，<br> 与 <img> 等元素是不用封闭自身的，但是这种元素造成了 HTML 规范的不严谨，于是在之后发布的 XHTML 语言中，参考了更为严谨的 XML 规范，在这些不用自身封闭的元素后加 / 来表示自行封闭，在逻辑上来讲等同于<br>....</br>（但是没有 </br> 这种写法），这样一来保证了较少的代码量，二来保证了规范的严谨。
七、HTML 文本格式化
HTML 文本格式化标签
标签 |描述
- <b> | 定义粗体文本
- <em> | 定义着重文字
- <i> | 定义斜体字
- <small> | 定义小号字
- <strong> | 定义加重语气
- sub 定义下标字
- sup定义上标字
- <ins> | 定义插入字
- <del> | 定义删除字
HTML "计算机输出" 标签
标签 | 描述
HTML 引文, 引用, 及标签定义
- 标签 | 描述 |
- <abbr> | 定义缩写
- <address> | 定义地址
- <bdo> | 定义文字方向
- <blockquote> | 定义长的引用
- <q> | 定义短的引用语
- <cite> | 定义引用、引证
- <dfn> | 定义一个定义项目。
八、HTML 链接
HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时，链接显示为红色并带有下划线。
HTML 链接语法
链接的 HTML 代码很简单。它类似这样：
<a href="url">链接文本</a>
href 属性描述了链接的目标。
HTML 链接 - target 属性
使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="https://www.baidu.com/" target="_blank" rel="noopener noreferrer"超链接</a>
HTML 链接- 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>
九、HTML <head>
HTML <head> 元素
- <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
- 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
HTML head 元素
| 标签 | 描述
- <head> | 定义了文档的信息
- <title> | 定义了文档的标题
- <base> | 定义了页面链接标签的默认链接地址
- <link> | 定义了一个文档和外部资源之间的关系
- <meta> | 定义了HTML文档中的元数据
- <script> | 定义了客户端的脚本文件
- <style> | 定义了HTML文档的样式文件
笔记
HTML<title>元素不仅可以显示文本，也可以在左侧显示logo等图片。
显示时，要将<link>标签放入<head>里。
举例：
<!doctype HTML>
<html>
<head>
<link rel="shortcut icon" href="图片url">
<title>这是一个带图片的标签</title>
</head>
<body>
……
……
……
</body>
</html>
head 标签和 header 标签的不同
head 标签用于定义文档头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
如：
<html>
<head>
<title>文档标题</title>
</head>
</html>
header 标签用于定义文档的页眉（介绍信息）。
如：
<html>
<body>
<header>
<p>段落</p>
<h1>一级标题</h1>
</header>
</body>
</html>
注意千万不要弄混。
十、css
笔记
CSS修饰标签的样式，有 "内联" 和 "外引" 两种方式。
对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。
实例：
<a href="#" style="color:red;" rel="nofollow">只能使用"内联"方式</a>
十一、图像
HTML 图像标签
｜标签 | 描述 |
笔记
示例"[创建图像映射](https://www.runoob.com/try/try.php?filename=tryhtml_areamap)"中的代码：
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
该段代码中的shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）
1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圆形：(圆心坐标为(X1,y1)，半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
十二、
HTML 表格
- <table> | 定义表格
- <th> | 定义表格的表头
- <tr> | 定义表格的行
- <td> | 定义表格单元
- <caption> | 定义表格标题
- <colgroup> | 定义表格列的组
- <col> | 定义用于表格列的属性
- <thead> | 定义表格的页眉
- <tbody> | 定义表格的主体
- <tfoot> | 定义表格的页脚
十三、HTML 列表
HTML 列表标签
| 标签 | 描述 |
笔记
ul是unordered lists的缩写 (无序列表)
li是list item的缩写 （列表项目）
ol是ordered lists的缩写（有序列表）
dl是definition lists的英文缩写 (自定义列表)
dt是definition term的缩写 (自定义列表组)
dd是definition description的缩写（自定义列表描述）
nl是navigation lists的英文缩写 （导航列表）
tr是table row的缩写 （表格中的一行）
th是table header cell的缩写 （表格中的表头）
td是table data cell的缩写 （表格中的一个单元格）
十四、区块
我们在面试的时候经常会被问到块状元素和行内元素，而且在应用中，也会经常用到，很实用，因此在这里对这俩个元素做了下简单的总结：
一：块状元素
（1）块元素，比如div，在没有任何布局属性作用时，默认排列方式为换行排列
（2）高度，宽度以及外边距和内边距都可以进行控制
（3）宽度始终与浏览器宽度一样，与内容无关
（4）可以容纳内联元素和其他块元素
- 常用的块状元素有：div ul ol form h1-h6 menu p table dl dt dd 等
二：行内元素
（1）在没有任何布局属性作用时，默认同行排列方式，直到宽度超出包含它容器的宽度才会自动换行
（2）设置宽度无效
（3）设置高度无效，可以通过line-height设置
（4）设置marging 只有左右marging有效，上下无效
（5）设置padding 上下左右都有效，会撑大空间但是不会产生边距效果
- 常用的行内元素有：span a b i em img lable input sub sup u br 等
三：行内块状元素
行内块状元素综合了行内元素和块状元素的特性，在日常使用中，由于其特性，使用还是比较多
（1）默认不会自动换行
（2）可以对宽度 高度进行设置
（3）默认排列方式为从左到右
- 常用的可变元素有：button del iframe ins插入的文本 等，可以根据环境去改变其元素
综上所述，HTML可以将元素分为三大块：块状元素，行内元素，行内块状元素，并且这三者可以互相转换，需要使用display属性
(1) display:inline; 转换为行内元素
(2) display:block; 转换为块状元素
(3) display:inline-block; 转换为行内块状元素
十五、布局
div布局
表格布局
十六、表单
HTML 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
<form>
.
input 元素
.
</form>
| 标签 | 描述 |
- <form> | 定义供用户输入的表单
- <input> | 定义输入域
- <textarea> | 定义文本域 (一个多行的输入控件)
- <label> | 定义了 <input> 元素的标签，一般为输入标题
- <fieldset> | 定义了一组相关的表单元素，并使用外框包含起来
- <legend> | 定义了 <fieldset> 元素的标题
- <select> | 定义了下拉选项列表
- <optgroup> | 定义选项组
- <option> | 定义下拉列表中的选项
- <button> | 定义一个点击按钮
- <datalist>New | 指定一个预先定义的输入控件选项列表
- <keygen>New | 定义了表单的密钥对生成器字段
- <output>New | 定义一个计算结果
十七、颜色
颜色值
HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
这个表格给出了由三种颜色混合而成的具体效果：
颜色值
颜色(Color) 颜色十六进制(Color HEX) 颜色RGB(Color RGB)
#000000 rgb(0,0,0)
笔记
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>
十八、url
HTML 统一资源定位器(Uniform Resource Locators)
URL 是一个网页地址。
URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为 名字比数字更容易记住。
URL - 统一资源定位器
Web浏览器通过URL从Web服务器请求页面。
当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。
一个统一资源定位器(URL) 用于定位万维网上的文档。
一个网页地址实例: http://www.runoob.com/html/html-tutorial.html 语法规则:
scheme<tt>://</tt>host.domain<tt>:</tt>port<tt>/</tt>path<tt>/</tt>filename
说明:
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 runoob.com
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称
常见的 URL Scheme
以下是一些URL scheme：
｜Scheme | 访问 | 用于... ｜
- http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。
- https | 安全超文本传输协议 | 安全网页，加密所有信息交换。
- ftp | 文件传输协议 | 用于将文件下载或上传至网站。
- file | | 您计算机上的文件。
URL 字符编码
URL 只能使用 ASCII 字符集.
来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
十九、HTML 速查列表
HTML 速查列表. 你可以打印它，以备日常使用。
HTML 基本文档
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>
基本标签（Basic Tags）
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->
文本格式化（Formatting）
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）
链接（Links）
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
图片（Images）
<img loading="lazy" src="URL" alt="替换文本" height="42" width="42">
样式/区块（Styles/Sections）
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>
无序列表
<ul>
<li>项目</li>
<li>项目</li>
</ul>
有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
自定义列表
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>
表格（Tables）
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
框架（Iframe）
<iframe src="demo_iframe.htm"></iframe>
表单（Forms）
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
实体（Entities）
< 等同于 <
> 等同于 >
© 等同于 ©
二十、HTML 标签简写及全称
下表列出了 HTML 标签简写及全称：
标签 英文全称 中文说明
- a Anchor 锚
- abbr Abbreviation 缩写词
- acronym Acronym 取首字母的缩写词
- address Address 地址
- alt alter 替用(一般是图片显示不出的提示)
- b Bold 粗体（文本）
- bdo Direction of Text Display 文本显示方向
- big Big 变大（文本）
- blockquote Block Quotation 区块引用语
- br Break 换行
- cell cell 巢
- cellpadding cellpadding 巢补白
- cellspacing cellspacing 巢空间
- center Centered 居中（文本）
- cite Citation 引用
- code Code 源代码（文本）
- dd Definition Description 定义描述
- del Deleted 删除（的文本）
- dfn Defines a Definition Term 定义定义条目
- div Division 分隔
- dl Definition List 定义列表
- dt Definition Term 定义术语
- em Emphasized 加重（文本）
- font Font 字体
- h1~h6 Header 1 to Header 6 标题1到标题6
- hr Horizontal Rule 水平尺
- href hypertext reference 超文本引用
- i Italic 斜体（文本）
- iframe Inline frame 定义内联框架
- ins Inserted 插入（的文本）
- kbd Keyboard 键盘（文本）
- li List Item 列表项目
- nl navigation lists 导航列表
- ol Ordered List 排序列表
- optgroup Option group 定义选项组
- p Paragraph 段落
- pre Preformatted 预定义格式（文本 ）
- q Quotation 引用语
- rel Reload 加载
- s/ strike Strikethrough 删除线
- samp Sample 示例（文本
- small Small 变小（文本）
- span Span 范围
- src Source 源文件链接
- strong Strong 加重（文本）
- sub Subscripted 下标（文本）
- sup Superscripted 上标（文本）
- td table data cell 表格中的一个单元格
- th table header cell 表格中的表头
- tr table row 表格中的一行
- tt Teletype 打印机（文本）
- u Underlined 下划线（文本）
- ul Unordered List 不排序列表
- var Variable 变量（文本）
