# HTML

链接

# HTML 是什么？

HTML 是用来描述网页的一种语言，其目的是描述网页的内容，HTML 文件 = 网页，文件包含 HTML 标签和纯文本，文件的后缀名为.html 或.htm

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
HTML 使用像<p>的标签来描述网页，这些标签构成了网页最基本的内容

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

HTML 标签是由尖括号包围的关键词，比如<html>
HTML 标签通常是成对出现的，比如<b>和</b>，也有单独出现的，例如<img/>
标签对中的开头标签是开始标签，结尾标签是结束标签(也被称为开放标签和闭合标签)

网站推荐

MDN Web Docs - Web 开发技术文档查询 (opens new window)

Web.dev - Chrome 团队的 Web 开发学习平台 (opens new window)

web.dev for China - 国内镜像（web.dev无法使用时用这个） (opens new window)

W3School - Web 技术教程与参考手册 (opens new window)

网道- 我觉得比较好的互联网开发文档 (opens new window)

# 声明

<!DOCTYPE> 是 HTML 文档的第一行代码，用于声明该文档是按照 HTML5 规范编写的，当然现在的网页都是 HTML5 规范。在 HTML 发展的过程中有许多版本，发展过程中也要考虑对旧网站的兼容，所以由于历史遗留的原因，<!DOCTYPE> 是必需的！如果省略，浏览器可能会以其他渲染模式进行渲染

<!DOCTYPE html>

<!DOCTYPE> 声明有助于浏览器正确显示网页，用来告知 Web 浏览器页面使用了哪种 HTML 版本

<!DOCTYPE> 声明是不区分大小写
<!DOCTYPE> 标签没有结束标签

# 网页编码

为了正确显示 HTML 页面，浏览器必须知道要使用的编码标准

计算机数据以二进制代码（01000101）存储在电子设备中。

为了使文本的存储标准化，人们创建了 ASCII ，它为每个可存储字符定义了一个唯一的二进制数字，以支持 0-9 之间的数字、大写和小写字母 a-z，A-Z 以及特殊字符，比如 ! $ + - ( ) @ < > ,由于 ASCII 使用 7 位或 8 位二进制数来组合表示，因此它只能表示 128 或 256 种不同的字符。ASCII 的最大缺点是它不支持了非英文以外的字符。为了解决这一问题人们发明了 Unicode ，这是一个字符集，里面包含了世界上几乎所有的字符，每个字符都有一个唯一的编号表示，而 UTF-8 就是实现 Unicode 的其中一种编码规则，除此之外还有 UTF-16 和 UTF-32

对于中文网页需要使用 UTF-8 编码，否则会出现乱码。

<meta charset="utf-8" />

若你的文件是使用的是 GBK 编码，则你需要将<meta>的 charset属性也设置 gbk

<meta charset="gbk" />

总而言之，html 文档的编码格式和 meta 设置的编码格式一定要相同，只要不相同就一定会出现乱码

GBK 主要针对中文字符进行编码，而 Unicode 为全世界所有的字符编码，所以一般情况下都应该统一使用 UTF-8 编码

# 注释

在 HTML 中注释用表示

但在<script>标签中不能用 HTML 的注释方式，要用/*注释内容*/表示。因为<script>标签中的内容是 JavaScript 代码，所以注释的格式也得是 JavaScript 的注释格式

注释是用于解释代码的，并不会被浏览器当作标签，除了备注信息外起不了任何效果。

# 头部

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>

<body>
文档内容......
</body>

</html>

这是一个 html 最基本的结构，其中<head> 标签包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种关于 html 文件的基本信息信息。

可以添加在头部区域的元素标签为:

<title>, <style>, <meta>, <link>, <script>，<noscript>，<base>

这些标签内容不会直接显示在网页上，它们用于定义网页的基本信息，例如图标，标题，样式，网页的描述，关键词，文件的最后修改时间，作者等

# `<body>`

HTML 文档的元数据和文档信息写在 <head> 元素中，文档的内容则写在 <body> 元素中
<body> 元素总是紧跟在 <head> 元素之后，它是 html 元素的第二个子元素
<body> 是 HTML 的主体，包含着 HTML 文档中的所有内容
一个 HTML 文档中只能有一个 <body> 元素

<html>
  <head> </head>

  <body>
    ...
  </body>
</html>

# `<title>`

<title>标签定义了不同文档的标题。

定义了网页在浏览器标签页上的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

示例：

<title>文档标题</title>

# `<base>`

<base>标签描述了基本的链接地址/链接目标，该标签作为 HTML 文档中所有的链接标签的默认链接

一个页面最多只能使用一个 base 元素,用来提供一个指定的默认目标
如果 base 标签指定了目标,浏览器将通过这个目标来解析当前文档中的所有相对路径,包括的标签有(a、img、link、form),也就是说,浏览器解析时会在路径前加上 base 给的目标而页面中的相对路径也都转换成了绝对路径。
使用了 base 标签就应带上 href 属性和 target 属性。

示例：

<base href="http://www.yoseya.top" target="_blank" />

# `<link>`

<link>标签定义了文档与外部资源之间的关系。

<link>标签通常用于链接到样式表(CSS):

<link rel="stylesheet" type="text/css" href="stylename.css" />

我们还可以通过<link>标签定义网页的 logo

<link rel="shortcut icon" href="图片的url" />

详情

# `<style>`

<style> 标签可以用来定义 HTML 文档的样式文件引用地址，你也可以把网页样式(CSS 代码)直接写在<style>标签里

示例：

<style type="text/css">
  body {
    background-color: yellow;
  }
  p {
    color: blue;
  }
</style>

# `<meta>`

<meta> 标签通常用于指定网页的描述，关键词，文件的最后修改时间，作者等信息，它可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务。

关键词：（关键词之间用,隔开）

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

描述网页：

<meta name="description" content="这是一个很好的网页" />

作者：

<meta name="author" content="钢铁直男釉色鸭" />

每 30 秒钟刷新当前页面:

<meta http-equiv="refresh" content="30" />

# `<script>`

我们可以通过<script>标签为网页编写程序

<script>
  document.write("Hello World!");
</script>

我们还可以通过它来引入外部的 javascript 程序

<script type="text/javascript" src="aidea/js/aidea.js"></script>

# `<noscript>`

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

<noscript> 您的浏览器不能执行 JavaScript 语言，页面无法正常显示。 </noscript>

<noscript> 中的内容只有浏览器不能执行 JavaScript 代码时才会显示，否则就不会显示

通过这种方式可以告诉用户网页中的某些功能不能正常使用的原因（JavaScrip 被禁用或者浏览器不支持）

( •̀ ω •́ )✧

# 元素

HTML 元素是构成网页结构的基本组成部分，一个 HTML 元素包括开始标签，结束标签，元素内容。例如：

<开始标签>元素内容</结束标签>

# 嵌套元素

元素可以包含其他元素，形成层次结构,例如

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>文档标题</title>
</head>

<body>
	<div>
		<h1></h1>
		<p></p>
	</div>
</body>

</html>

元素 <div> 包含一个 <p> 和一个 <h1>，其中 <div> 是父元素，而 <p> 和 <h1> 是子元素。而 <div>又是 <body> 的子元素。

在一个 HTML 文档中, <html> 标签是文档的根元素，它包含所有的其他元素。

# 空元素

有些元素没有内容，被称为空元素或自闭合元素，它们在开始标签中就完成了关闭，通常会以 /> 结束。例如，<img /> 是一个图像元素，它没有结束标签。但现在 <img /> 并不能直接显示图像，你需要告诉它要显示的图像在哪里，通过 src 属性来指定图像的位置。

# 属性

HTML 属性是用来进一步规定或设置 HTML 元素的。例如

<img src="image.jpg" />

这是一个图片元素，我们通过它的 src 属性来规定所显示的图像的位置。

<a href="http://yoseya.top">这是一个链接</a>

这是一个超链接标签，也称为锚点标签，用于从一张页面链接到另一张页面，或者说是链接到某个指定的 URL ,它最重要的属性是 href 属性，它规定了所指向的页面或链接，比如说在这个例子中它所指向的 URL 是 http://yoseya.top

注意

属性一般写在开始标签中
若元素为自闭合元素则属性直接写在这个元素标签中，如<img src="image.jpg" />
属性编写格式，属性名 = "属性值"
属性值需要被引号""括起来

# 全局属性

属性包含全局属性和专有属性，全局属性是所有 HTML 元素的通用属性，而专有属性是部分 HTML 元素特有的属性。

例如，<img> 元素的 src 属性：用于指定图像文件的 URL；<a> 元素的 href 属性：用于指向特定的链接；<input> 元素的 type 属性等，这些都是专有属性

以下是 HTML 中所有的全局属性

# `class`

class 属性是给元素做标记的，使用它的目的是为了方便我们使用 CSS 样式，通过 CSS 我们可以为同一个类名的元素设置相同的样式，从而减少重复的代码。

举个形象的例子，假设你面前有一只鸭子，你要给它分类，你可以说它是动物，也可以说它是禽类，还可以说它是鸟，你甚至可以随便给它起个名字，比如釉色鸭。你给它贴的这些标签就是它的 class，class 并不是某个元素特有的，比如你面前有两只鸭子，一只黑鸭和一只黄鸭，它们都可以叫做鸭子，class 也是一样，相同的class，可以放在不同的元素上。例如

<body>
	<P class="yoseya">我是yoseya</P>
	<p class="yoseya">我也是yoseya</p>
	<a class="yoseya">我也可以是yoseya</a>
</body>

也可以同时给一个元素设置多个 class

<div class="class1 class2 class3"></div>

设置class 属性的最终目的是为了更好的给元素设置样式。现在给所有具有 class1 这个类的元素设置样式，例如

.class1 {
  color: blue;
}

这时所有具有 class1 这个类的元素都会变成蓝色。

但这并不是使用 class 的真正精髓，class 真正的精髓在于对于样式的按需分配。

例如，我有三个元素

元素 1 说：“我要变成蓝色，而且我的字体大小是 20px”
元素 2 说：“我要变成蓝色但我的背景得是黄色”
元素 3 说：“我想要一个黄色的背景但我的字体大小是 20px”

它们不同的元素需求不同，我们可以先提取出它们共同的需求，蓝色字体，黄色背景，字体大小 20px，然后分别给它们设置不同的 class，然后再根据元素的需求来给这些元素分配不同的 class，这样我们就不用为每一个元素都写一遍相同的样式，而是只需要写一遍即可。例如

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      .class1 {
        color: blue; /*字体颜色为蓝色*/
      }
      .class2 {
        font-size: 20px; /*字体大小20px*/
      }
      .class3 {
        background-color: yellow; /*背景颜色为黄色*/
      }
    </style>
  </head>
  <body>
    <p class="class1 class2">我是yoseya</p>
    <!--蓝色 字体大小20px-->
    <p class="class1 class3">我也是yoseya</p>
    <!--蓝色 黄色背景-->
    <p class="class2 class3">我也可以是yoseya</p>
    <!--字体大小20px 黄色背景-->
  </body>
</html>

# `id`

id 是每个元素的唯一标识符，就像我们的身份证号一样，是每个元素特有的，一个元素只能有一个 id，一个 id 只能对应一个元素

语法：

<a id="id"></a>

一些特殊的用法：

使用锚点链接直接链接该页面中指定的 id 元素，当点击该链接时浏览器会自动跳转到该元素处

<html>
  <body>
    <h2><a id="title">标题</a></h2>
    ....
    <a href="#title">回到标题</a>
  </body>
</html>

这里的锚点链接是 #title

通过 css 给 id="a" 的元素设置样式，注意这里的 CSS 选择器需要在 id 前加上 #

<html>
  <head>
    <style>
      #a {
        color: red;
      }
    </style>
  </head>
  <body>
    <p id="a">内容</p>
  </body>
</html>

# `title`

title 属性是给元素添加一个描述性文本，当鼠标悬停在元素上时，会显示该描述，例如

<p title="一个安静的美男子">釉色鸭</p>

显示效果

釉色鸭

# `style`

style 属性是直接在元素上通过内联样式的方法给元素设定样式。内联样式是直接在元素上设置样式，而不是在 CSS 文件中设置，内联样式的优点是方便，缺点是无法复用。使用方法如下

<p style="color:green;">这是一个段落</p>

style 属性中也可以放多个样式,每个样式用;分隔

<p style="color:green; font-size: 20px; background-color: yellow;">
  这是一个段落
</p>

# `lang`

lang 属性用于规定元素的语言

例如，在 HTML 中可以通过如下方式告诉浏览器该网页所使用的语言

<!DOCTYPE html>
<html lang="zh-CN">

</html>

也可以用这样的方式告诉浏览器某个段落所用的语言

<p lang="en">An English quote here.</p>

lang 属性中要填写的是语言代码

# `tabindex`

tabindex 属性规定元素的 Tab 键次序。当按动 Tab 键时，浏览器会按照tabindex 规定的次序依次选中元素

<a tabindex="2">a</a>
<a tabindex="1">b</a>
<a tabindex="3">c</a>

根据这里例子，按动 Tab 键时，浏览器会依次选中 b、c、a

# `dir`

dir 属性用于规定元素内容的文本方向

语法：

<element dir="ltr"></element>

属性值：

值	描述
ltr	文本方向从左向右（默认）
rtl	文本方向从右向左
auto	让浏览器根据内容来确定文本方向

# `hidden`

hidden 属性规定元素不可见。

当在标签中中添加hidden属性时，该元素将不会被显示。

<p hidden>这段文本将被隐藏</p>

hidden 属性是布尔属性

当在 HTML 中使用时不需要填写该属性的值，直接在标签里填写 hidden 后该元素将不会被显示。

若是在 JavaScript 中使用该性质时，则需要在属性值中填写布尔值（true或false）

<p id="myParagraph">这段文本将被隐藏</p>

<script>
  document.getElementById("myParagraph").hidden = true;
</script>

# `contenteditable`

contenteditable 属性规定元素内容是否可编辑。

<p contenteditable="true">这是一个可编辑的段落</p>

属性值：

值	描述
true	元素可编辑
false	元素不可编辑

注意

如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。

<div contenteditable="true">
  <p>这是一个可编辑的段落</p>
</div>

这里 <p> 也是一个可以编辑的元素，它的 contenteditable 属性继承自它的父元素 <div>

# `translate`

translate 属性规定元素内容是否翻译。

如果不想让浏览器翻译某些元素内容，请使用 translate="no" 属性。

<p translate="no">Don't translate this!</p>

属性值：

值	描述
yes	可以翻译该元素内容
no	不可以翻译该元素内容

# `draggable`

draggable 属性规定元素是否可拖动。

<p draggable="true">这是一段可拖动的段落</p>

属性值：

值	描述
ture	规定元素可拖动
false	规定元素是不可拖动
auto	让浏览器自己判断元素是否可拖动

# `data-*`

data-* 属性可以在 HTML 元素上存储自定义数据。这些数据可以被 CSS 和 JavaScript 访问和使用

使用规则：

data-* 属性由前缀和命名两部分组成，data- 是前缀，* 是命名，命名是自定义的，命名不能包含大写字母，如果命名中有空格，则用连字符 - 代替
属性值：可以是任何字符串

访问 data-* 属性:

在 JavaScript 中，你可以通过以下两种方式访问 data-* 属性的值

使用 getAttribute() 方法

<body>
  <!-- 在元素上添加命名为 mydata 的 data-* 属性 -->
  <div id="example" data-mydata="some value"></div>
  <script>
    var element = document.getElementById("example"); //获取id为example的元素
    var dataValue = element.getAttribute("data-mydata"); //获取data-mydata属性的值
    console.log(dataValue); //输出data-mydata中储存的数据，输出结果为 some value
  </script>
</body>

使用 dataset，dataset 可以让你像访问对象一样访问 data-* 属性

<body>
  <!-- 在元素上添加命名为 mydata 的 data-* 属性 -->
  <div id="example" data-mydata="some value"></div>
  <script>
    var element = document.getElementById("example"); //获取id为example的元素
    var dataValue = element.dataset.mydata; //获取 data-mydata 的值
    console.log(dataValue); //输出结果为 some value
  </script>
</body>

注意

当属性名为 data-my-data 时，dataset.mydata 属性无法访问到该属性，需要使用 dataset.myData ，这两者的区别在于一个是小写 d ，另一个是大写 D ,因为属性的命名 my-data 中有 -，所以 dataset.myData 中的date被转换成了大写字母开头的 Data。总而言之，只要data-* 属性的命名中有 -，则使用 dataset 时，- 后的第一个字母就要大写。这里使用的是一种叫做驼峰式命名的方法，示例如下

<div id="example" data-my-data="some value"></div>

var dataValue = element.dataset.myData;

设置 data-* 属性：

1.使用 setAttribute() 方法

<body>
  <!-- 在元素上添加命名为 mydata 的 data-* 属性 -->
  <div id="example" data-my-data="some value"></div>
  <script>
    var element = document.getElementById("example"); //获取 id 为 example 的元素
    element.setAttribute("data-my-data", "new value"); //把 data-my-data 属性的值设置为 new value
  </script>
</body>

2.使用 dataset 属性来设置 data-* 属性的值

<body>
  <div id="example" data-my-data="some value"></div>
  <script>
    var element = document.getElementById("example"); //获取 id 为 example 的元素
    element.dataset.myData = "new value"; //把 data-my-data 属性的值设置为 new value
  </script>
</body>

在 CSS 中使用 data-* 属性：

在这个 HTML 文档中有两个文本，这里通过 CSS 修改它们的颜色，当元素的 data-my-custom-data="abc" 时，文本颜色将变为红色。因为文本一的 data-my-custom-data 属性值为 abc 所以文本一被修改成了红色，而文本二的data-my-custom-data 属性值不是 abc，所以文本二没有被修改

<body>
  <p data-my-custom-data="abc">文本一</p>
  <p data-my-custom-data="bcd">文本二</p>
  <style>
    [data-my-custom-data="abc"] {
      color: red;
    }
  </style>
</body>

# `accesskey`

accesskey 属性用于规定快捷键。accesskey 可以给元素设置快捷键，快捷键一般为键盘上的某一个键，当按下 Alt 键并键入快捷键时，会聚焦并触发该元素。

注意

accesskey 属性的值必须是单字符（一个字母或一个数字）

由于快捷键可能会与浏览器中的其他快捷键相冲突，为了避免这个问题，大多数浏览器只有在与 Alt 键一起按下时才会使用快捷键。

<a href="http://yoseya.top" accesskey="c">网站一</a>

比如这个链接的快捷键为 c，在网页中我需要按下 Alt + C 键，才能聚焦并打开该链接。

# 标题

HTML 提供了 6 个标题标签，标题标签有 <h1>，<h2>，<h3>，<h4>，<h5>，<h6>，共六个，按照标题的等级，一共分成六级，按照顺序从 <h1> 到 <h6> 等级依次递减，标题的字号大小也依次递减。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

这些标题一般都会以粗体的形式显示
使用标题是一定要注意等级，下一级标题都是上一级标题的子标题，比如，一个<h1>后面可以有多个<h2>，每个<h2>后面又可以有多个<h3>
标题不应该越级，比如 <h1> 下面直接写 <h3>

如果不遵循这种规则也不会报错，遵循规则更能清晰地表明了文章的主体结构

# 段落

<p> 是 HTML 中用于表示文本的一个段落的标签，如果你现在页面中写一段话时就需要这个标签。

<p>这是一个段落</p>

一个完整的 <p> 标签表示一个段落，当页面有两个或多个 <p> 标签时，每个<p> 后都会自动的换行显示，而不是紧随其后。例如

<p>这是第一个段落</p>
<p>这是第二个段落</p>

显示效果

这是第一个段落

这是第二个段落

当我们在写一个段落的内容时或许会遇见许多的问题，例如，换行，粗体，上标，下标，对特定文本重点标记等，这时就需要使用 HTML 的一些特定标签来处理这些问题。这个表格中列举了在以上不同情况下所要使用的对应的标签

标题	标题
`<br>`	换行，相当于一个换行符
`<wbr>`	根据实际情况选择性换行，相当于一个换行符
`<b>`	粗体，对文本内容加粗
`<strong>`	粗体，强调该文本的重要性
`<i>`	斜体
`<em>`	斜体，强调该文本的重要性
`<small>`	较小的文本
`<ins>`	带有下划线的文本
`<del>`	被划掉的文本
`<sup>`	文本上标
`<sub>`	文本下标
`<pre>`	文本显示时保留原有的空格，换行和其他空白字符
`<q>`	用于引用短句或片段，通常会有引号
`<blockquote>`	用于引用较长的段落，通常会有缩进
`<hr>`	水平线
`<kbd>`	有键盘按键样式的文本，用于在段落中表示键盘按键

使用这些标签时，应优先考虑语义化标签，如 <strong> 和 <em>，而不是仅基于视觉效果的标签，如 <b> 和 <i> ，以提高网页的可访问性和 SEO 优化。

# 换行

<br> 元素相当于一个换行符，它可以让你在 <p> 元素中也可以完成换行

<p>
  人有悲欢离合，<br />月有阴晴圆缺，<br />
  此事古难全。<br />
  但愿人长久，<br />
  千里共婵娟。
</p>

显示效果

人有悲欢离合，
月有阴晴圆缺，
此事古难全。
但愿人长久，
千里共婵娟。

注意

由于 <br> 标签没有结束标签所以一般在使用时请写作 <br/> 而不是 <br> </br>

除 <br> 外还有一个叫 <wbr> 的标签

我们编写的网页常常并不能按照我们所想象的样子去显示，这受制于不能设备的屏幕大小，比例等因素的影响。例如，一段长句在宽一些的屏幕上可以完全显示，而在窄一些的屏幕上则会被迫需要换行，尤其内容是英文的时候，有可能出现一个单词由于换行被拆成了两个部分的情况，为了解决这个问题，于是就有了 <wbr> 标签

<wbr> 用于表示选择性的换行，为了防止浏览器在一个很长的单词中间不正确地换行或者不换行，所以需要事先标明可以换行的位置，如果一行的宽度足够，则不换行；如果宽度不够，就在 <wbr> 的位置换行，主要用于欧洲一些单词很长的语言或者 URL 的换行

# 粗体

为了使网页阅读更加方便，我们经常要对一些重点内容进行加粗来，这时就可以使用 <b> 和 <strong> 标签

<b>这时一段加粗的文本</b>

显示效果

这时一段加粗的文本

在段落中对文本加粗

<p>
  The two most popular science courses offered by the school are
  <b>chemistry</b>
  (the study of chemicals and the composition of substances) and
  <b>physics</b>
  (the study of the nature and properties of matter and energy).
</p>

显示效果

The two most popular science courses offered by the school are chemistry (the study of chemicals and the composition of substances) and physics (the study of the nature and properties of matter and energy).

<strong> 和 <b> 一样都是对文本进行加粗，但是 <strong> 除了加粗外还会强调该文本的重要性，而 <b> 则是单纯的对文本进行加粗，如果你想告诉浏览器这段文本是重要的，就应该使用 <strong> 标签；如果是普通的强调，就应该使用 <b> 标签。

<strong>这时一段重要的文本</strong>

显示效果

这时一段重要的文本

# 斜体

如果你想让某段文本斜体的形式显示，那你就应该使用 <i> 和 <em> 标签，<i> 一般用于需要与普通文本进行区分的文本，例如，技术术语、外文短语，著作名称等

<i> 和 <em> 都能让文本以斜体的方式显示，但是 <i> 和 <em> 的区别在于，<i> 只对文本进行斜体，而 <em> 不仅对文本进行斜体，还表明该文本是重要的

<p>
  I have a book called
  <i>Jerusalem: The Biography</i>
</p>

显示效果

I have a book called Jerusalem: The Biography

<p>
  I have a book called
  <em>Jerusalem: The Biography</em>
</p>

显示效果

I have a book called Jerusalem: The Biography

# 下划线

<ins> 标签用于在文本上添加下划线

<ins>这是一段有下划线的文本</ins>

显示效果

这是一段有下划线的文本

如果某个段落被 <ins> 包裹，这个段落中的文本也会有下划线

<ins>
  <p>这是一段有下划线的文本</p>
</ins>

显示效果

这是一段有下划线的文本

注意

这并不表示子元素继承了父元素的语义和样式，这时特殊情况，只针对特定的元素生效，如 <p>

当然， <ins> 元素也可以包含在段落中

<p>这是一段包含<ins>下划线</ins>的文本</p>

显示效果

这是一段包含下划线的文本

# 划掉文本

<del> 标签用于表示一些被从文档中删除的文字内容

<p>真正的幕后黑手是 <del>此文本已删除</del></p>

显示效果

真正的幕后黑手是 ~~此文本已删除~~

也可以把段落放在 <del> 标签中，这样就方便对段落进行其他的操作比如换行，加粗等

<del
  ><p>此文本<br />已删除</p></del
>

显示效果

此文本
已删除

# 上下标

<sup> 用于表示上标 <sub> 用于表示下标

我有一个区分这两个标签的方法，sup 和 sub，最大的区别在于最后的字母 p 和 b ，p 字母圆的部分是朝上的，所以 sup 表示上标；b 字母圆的部分是朝下的，所以 sub 表示下标

<p>乙醇的化学式是 C<sub>2</sub>H<sub>5</sub>OH</p>

显示效果

乙醇的化学式是 C₂H₅OH

<p>毕达哥拉斯定理的数学公式表示为 a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>

显示效果

毕达哥拉斯定理的数学公式表示为 a²+b²=c²

# 引用

<q> 和 <blockquote> 是引用标签，实际上它的 <q> 作用是给引用的文本加上引号

<p>Bro, <q>Oh my God.</q> Since you're a woman</p>

显示效果

Bro, Oh my God. Since you're a woman

也可以通过 cite 属性给所引用的内容提供一个 URL，指向引用的原始出处

<p>
  Everytime Kenny is killed, Stan will announce
  <q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact">
    Oh my God, you/they killed Kenny!
  </q>
</p>

显示效果

Everytime Kenny is killed, Stan will announce Oh my God,
you/they killed Kenny!

<blockquote> 一般用于长文的引用，它的效果是缩进文本

<blockquote>
  <p>假设我是一段长文</p>
</blockquote>

# 水平线

<hr/> 表示一段水平线，它可以把两端内容分隔开，<hr> 没有结束标签，所以使用时写作 <hr/>

<p>第一部分的内容</p>
<hr />
<p>第二部分的内容</p>

显示效果

第一部分的内容

第二部分的内容

# 预定义格式

<pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)

# 高亮

<mark> 是一个行内标签，表示突出显示的内容，就像做笔记时用马克笔标记内容一样，<mark> 中的内容会被高亮显示

<p>俱怀逸兴壮思飞，<mark>欲上青天览明月</mark>。——李白</p>

显示效果

俱怀逸兴壮思飞，欲上青天览明月。——李白

# `<kbd>`

<kbd> 用于表示键盘输入的内容，<kbd> 中的内容会有键盘按键的样式

<p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

显示效果

Save the document by pressing Ctrl + S

# 语义结构

HTML 标签的一个重要作用，就是声明网页元素的性质，使得用户只看标签，就能了解这个元素的意义，阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。

下面就是一个典型的语义结构的网页

<body>
  <header>页眉</header>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>文章内容</p>
    </article>
  </main>
  <footer>页尾</footer>
</body>

只看上面的代码，就可以知道，页面分成页眉（<header>）、主体（<main>）、页尾（<footer>）三个部分。编写 HTML 网页，第一步就是写出语义结构的网页骨架。

注意

以下这些标签并不具备特殊的功能，之所以按照语义结构来使用这些标签，是因为这样可以提高网页的可读性，让浏览器能够对网页结构更加清晰，使网页更加标准化，规范化，便于后期维护

# `<header>`

<header> 标签是一个网页的头部，网站的导航栏和搜索栏通常会放在<header>里面，如果用在文章上，可以把文章标题和作者信息写进来。

# `<main>`

<main> 标签表示页面的主体内容，一个页面只能有一个 <main>

<main> 标签中放的应该是一个页面中所要展示的最主要的内容，例如一篇文章中，除了标题，作者信息，还有文章的正文，而文章的正文才是这个页面的主体内容。

<body>
  <header>页眉</header>
  <main>
    <article>文章</article>
  </main>
  <footer>页尾</footer>
</body>

# `<footer>`

<footer> 标签是一个页面的尾部也可以称作页脚，这里通常包括版权信息，联系方式，网站地图等信息

这些标签并不具备特殊的功能，按照语义结构来使用这些标签，可以提高网页的可读性，让浏览器能够对网页结构更加清晰，使网页更加标准化，规范化，便于后期维护

# `<article>`

<article> 标签表示页面里的一篇文章或者一段完整的内容，通常用来表示一篇文章或者一个论坛帖子，一个网页可以包含一个或多个 <article>，比如包含多篇文章。

# `<aside>`

<aside> 标签用来放置网页或文章主要内容之外的东西。通常用来放置网页侧边栏，文章的补充信息、评论或注释等。

<body>
  <main>主体内容</main>
  <aside>侧边栏</aside>
</body>

# `<section>`

<section> 标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节，比如 <article> 可以包含多个 <section>。<section> 总是多个一起使用，一个页面不能只有一个<section>。

<article>
  <h1>文章标题</h1>

  <section>
    <h2>第一章</h2>
    <p>...</p>
  </section>

  <section>
    <h2>第二章</h2>
    <p>...</p>
  </section>
</article>

# `<nav>`

<nav> 标签通常用于放置页面或文档的导航信息，例如菜单，目录和索引一般来说，<nav> 往往放置在 <header> 里面。一个页面可以有多个 <nav>

<nav>里面通常是列表，但也可以放置其他标签

<nav>
  <ol>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ol>
</nav>

# `<hgroup>`

<hgroup> 元素允许将一个标题与任意次要内容（例如子标题、副标题或口号）组合在一起，例如

<hgroup>
  <h1>HTML现行标准</h1>
  <p>更新于 2024 年 7 月 14 日</p>
</hgroup>

# 页面布局

# 行级元素

特点

行级元素是横向排列的
- 行级元素会从左向右紧跟在前一个元素后面
- 多个行级元素可以在同一行显示，直到这一行的空间被占满
行级元素的宽度和高度通常是由内容决定的，不能直接设置
行级元素只能控制水平方向上的间距

常见的行级元素

<a>，<span>，<strong>，<em>，<b>，<i>，<u>，<mark>，<code>，<var>，<samp>，<sub>，<sup>，<q>，<cite>，<data>，<wbr>，<input>，<button>，<label>，<select>，<textarea>

# 块级元素

特点

块级元素是纵向排列的
- 每个块级元素单独占一行
- 块级元素会跟在上一个元素的下方
块级元素的宽度，高度，元素间距都可以自由控制

常见的块级元素

<div>，<p>，<h1>~<h6>，<ul>，<ol>，<li>，<dl>，<dt>，<dd>，<form>，<table>，<tr>，<th>，<td>，<thead>，<tbody>，<tfoot>，<address>，<blockquote>，<pre>，<hr>，<figure>，<figcaption>，<article>，<aside>，<details>，<summary>，<dialog>，<main>，<nav>，<section>

# 行内块级元素

行内块级元素既可以像行级元素那样在同一行内与其他元素并排显示，又可以像块级元素那样自由设置宽度，高度，内边距，外边距

通过以下方式可以实现行级元素和块级元素的相互转换

将行级元素转化为块级元素

<span style="display: block;"></span>

将块级元素转化为行级元素

<div style="display: inline;"></div>

将元素设置为行内块级元素

<div style="display: inline-block;"></div>

# `<div>`

<div> 是一个块级的通用标签，通常被用于内容的划分和区块的样式化
<div> 没有语义，如果网页需要一个块级元素容器，又没有其他合适的标签，就可以使用这个标签
<div> 在网页中默认对内容或布局是没有任何影响的，但我们可以通过 CSS 给 <div> 添加样式，如背景色、边框、阴影、定位等，从而影响页面的视觉效果
<div> 可以将相关的元素分组在一起，便于选择和操作这一组元素，例如，可以为一组元素添加共同的样式或行为

<div>···</div>

# `<span>`

<span> 是一个通用的行级元素，不带有任何语义

<span> 和 <div> 一样，是一个容器，不同的是<span> 是行级的容器，<div> 是一个块级的容器

它通常用作 CSS 样式的钩子，如果要对某些行内内容进行样式化，就可以把它们放置在 <span> 中，

通过 <span> 标签可以对这个部分进行特殊标记（例如添加 class 或者 id，也可以直接对 <span> 元素进行操作），以便 CSS 能够定位到这个地方，对它进行修改

<p>雪岸丛梅发，<span>春泥</span>百草生。</p>

对 <span> 中的内容进行 CSS 样式化

span {
  color: red;
}

显示效果

雪岸丛梅发，春泥百草生。

# 超链接

<a> 是一个超链接标签。用于链接到其他网页，文件，电子邮箱或者同一页面的某个位置

这是一个典型的链接

<a href="https://yoseya.top">釉色鸭的主页</a>

显示效果

釉色鸭的主页

<a href="https://yoseya.top">
  <img src="/img/logo.png" />
</a>

也可以把其他的元素放在 <a> 标签中，这相当于给这部分元素添加了一个超链接

显示效果

点击图片试试看

<a> 除全局属性外还有一些专有属性

属性	描述
`href`	规定链接的 URL
`target`	规定在何处打开链接
`rel`	说明该链接和当前页面的关系（语义化）
`type`	规定链接的类型
`download`	规定浏览器下载链接
`hreflang`	说明链接所指页面的内容使用的是哪种语言（语义化）
`ping`	规定在点击链接时向指定的 URL 发送一个 HTTP POST 请求
`referrerpolicy`	规定在获取链接时使用的 HTTP 头

# href

href 属性用于规定超链接所指向的 URL，它可以使用浏览器支持的任何 URL 协议，例如 http、https、ftp、mailto、tel、file 等查看浏览器支持的 URL 协议

锚点

所有具有 id 属性的元素都可以作为锚点

例如在这个页面中有一个 id 为 class 的元素，把它作为锚点

<h3 id="class"></h3>

使用 <a> 链接到这个锚点

<a href="#class">跳转到class</a>

显示效果

跳转到 class

除了 id 还可以使用 name 来当作锚点但这种方法仅限 <a> 如果锚点是其他元素则不适用

我在之前的内容其实以及悄悄设置了一个锚点，每次就是这个

<a name="mao1">( •̀ ω •́ )✧</a>

现在通过链接去找到那个锚点

<a href="#mao1">去找锚点</a>

试一试

去找锚点

跳转到其他页面的锚点

例如，要跳到 page.html 页面 id 为 mao 的锚点（需要在锚点前加上该页面的路径）

<a href="page.html#mao"></a>

空锚点会让浏览器回到页面顶部

<a href="#">回到顶部</a>

查看 href 属性的更多的使用方法

# target

target 属性指定打开链接的方式

它可以指定某链接在的某个窗口打开，也可以在<iframe> 里面打开 (<iframe> 是网页中嵌套的页面)

如果没有 target 则链接会默认在当前的窗口打开，类似于覆盖在原来的页面上，而如果指定了 target 则会在指定的窗口打开页面，如果当前浏览器没有这个窗口，则会新开一个窗口打开

查看效果

有 target 属性

无 target 属性

target 属性的值为浏览器窗口的名称

<a href="https://yoseya.top" target="tab1"></a>

target 属性的值还可以是一些特殊的关键词

关键词	说明
`_self`	在当前页面加载
`_blank`	在新标签页打开
`_parent`	在父级窗口打开
`_top`	在根级窗口打开

假如页面 a中嵌套了一个页面 b，页面 b中又嵌套了一个页面 c，它们的关系如下

.
└─页面a
  └─页面b
    └─ 页面c

页面 a是这个结构中最顶层的页面，页面 b是页面 a的子页面，页面 c是页面 b的子页面

_parent 表示在当前页面的父页面打开链接，假如我在页面 c中打开了具有关键词 _parent 的链接，那么这个链接会在他的父页面——页面 b中打开

_top 表示在当前窗口的根页面打开链接，假如我在页面 c中打开了具有关键词 _top 的链接，那么这个链接会在他的根页面——页面 a中打开

# rel

rel 属性说明链接与当前页面的关系（是个语义化的属性）

例如，rel="next" 说明这个链接指向该文档的下一篇内容

<a href="page2.html" rel="next">下一篇</a>

rel 属性可以同时包含多个值，用空格隔开

<a rel="author external" href="https://example.com/about/john-doe">Yoseya</a>

下面是一些常见的 rel 属性的值

值	说明
alternate	当前页面的另一个版本，例如另一种语言的版本
author	指向介绍该页面作者的链接
bookmark	该链接为可以作为书签的永久地址
help	该网站的帮助链接
license	所用许可证的链接
next	该文档的下篇
prev	该文档的上一篇
nofollow	告诉搜索引擎忽略该链接
noreferrer	告诉浏览器不要在请求的 HTTP 头部中发送 Referer 信息
noopener	告诉浏览器拒绝该链接所指的网页使用`window.opener`访问打开该链接的窗口的全局对象
search	指向该网站的搜索功能链接
tag	文档的标签链接

注意

在没有 rel="noopener" 的情况下，如果一个链接在新窗口中打开，新窗口可以使用 window.opener 属性访问到打开它的窗口的全局对象，进而可能访问到敏感信息或执行恶意操作。例如，攻击者可以构造一个恶意链接，当用户点击时，在新窗口中打开一个看似无害的页面，但实际上该页面可以通过 window.opener 访问到用户在主窗口中登录的网站的 DOM，从而可能窃取用户数据

# type

type 属性用于说明链接的 MIME 类型，例如该链接所指向的内容是网页或者图片等

如果链接指向的是一个图片，那么 type 属性可以指定图片的格式，例如 type="image/png"

<a href="/img/logo.png" type="image/png">logo</a>

# download

download 属性表明当前链接用于下载，而不是在窗口中打开链接所指的内容

<a href="/img/logo.png" download>点击下载</a>

结果

点击下载

给download 属性指定下载的文件名

<a href="/img/logo.png" download="test.jpg">点击下载</a>

结果

点击下载

# ping

ping 属性指定一个 URL，用户点击的时候，会向该 URL 发出一个 POST 请求，通常用于跟踪用户的行为。

<a href="http://localhost:8080/other" ping="http://localhost:8080/log"> </a>

用户点击链接后，网页会跳转到http://localhost:8080/other，并向http://localhost:8080/log发送一个 POST 请求,服务端收到这个请求以后，就会知道用户点击了这个链接。

这是请求的 HTTP 标头，这里包含了发送 POST 请求的页面地址和跳转的页面地址

headers: {
  'ping-from': 'http://localhost:8080/',
  'ping-to': 'http://localhost:8080/other'
  'content-type': 'text/ping'
  // ...other headers
},

# referrerpolicy

referrerpolicy 属性用于设定点击链接后，浏览器发送的 HTTP 头部中有关 Referer 的值的行为

值	说明
`no-referrer`	Referer 标头将不会被发送
`no-referrer-when-downgrade`	如果没有 TLS（HTTPS），Referer 头将不会被发送到源上
`origin`	发送的 referrer 将被限制在其页面的来源：协议、主机和端口
`origin-when-cross-origin`	发送到其他源的 referrer 将只包含协议、主机和端口，而导航到相同的源仍将包括路径
`same-origin`	将向同源地址发送 referrer，但跨源请求不包含 referrer 信息
`strict-origin`	当协议安全级别保持不变（HTTPS→HTTPS）时，只将文档的来源作为 referrer 发送，但不要将其发送到安全性较低的目的地（HTTPS→HTTP）
`strict-origin-when-cross-origin`（默认）	在执行同源请求时发送完整的 URL，在协议安全级别保持不变时只发送源（HTTPS→HTTPS），对安全性较低的目的地不发送标头（HTTPS→HTTP）
`unsafe-url`	表示 referrer 将会包含源和路径（但是不包含片段、密码或用户名）

# 图片

<img> 标签用于插入图片，没有闭合标签

<img src="/img/logo.png"/>

# src

src 属性用于规定图片的 URL

URL 可以分为两种，相对路径和绝对路径

绝对路径是以根目录作为参考的路径，在 Web 端中，绝对路径是一个完整的网络地址，例如 https://www.example.com/img/logo.png

相对路径是以当前页面为参考的路径，例如 /img/logo.png

在相对路径中，/ 表示根目录，./ 表示当前目录，../ 表示上一级目录，../../ 表示上一级目录的再上一级目录

以如下结构为例：

root
├─ beta
│  ├─ folder
│  │  ├─ img.png
│  |  └─ index.html
│  └─ file
│     └─ paper.jpg
└─ package.json

root 是根目录，假设我在文件 index.html 中

我想引用文件 img.png，我的相对路径就是 ./img.png，因为 index.html和img.png 在同一目录下

如果我想引用 paper.jpg，那么相对路径就是 ../file/paper.jpg，因为folder 和 file 同在 index.html 的上一级目录 beta 中，而paper.jpg 是 file 的子文件

如果我想打开 package.json，那么相对路径就是 /package.json，因为它在根目录下

当把 <img> 放在段落中时，它会表现的像一个行内元素，以其他的文本在同一行显示

<p>这是一个<img src="/img/logo.png"/> logo</p>

显示效果

这是一个 logo

<img> 可以放在 <a> 内部，使图片变成一个可点击的链接

<a href="https://yoseya.top">
  <img src="/img/logo.png" />
</a>

显示效果

# alt

alt 属性用来设定图片的文字说明，图片不显示时（例如加载失败，或浏览器为无图模式时），图片的位置上就会显示该文本

<img src="test.jpg" alt="示例图片">

显示效果

# width 和 height

width 用于指定图片显示时的宽度
height 用于指定图片的显示时的高度
width 和 height 属性值的单位为像素（px）也可以用百分比表示

<img src="/img/logo.png" width="50%" height="200px"/>

显示效果

根据显示的效果来看，图片被拉长了，因为<img>设置的长宽比例与图片原始比例是不同的，如果要保持图片的原始比例，可以只设置 width 和 height 其中一个，浏览器会根据图片原始比例自动设定另一个属性

注意

一旦设置了这两个属性，浏览器会在网页中预先留出这个大小的空间，不管图片有没有加载成功

# loading

loading 属性用于设定图片的加载模式

一般情况下，浏览器只要解析到<img>标签就会默认加载图片，如果网页内容很多，这样的加载行为很浪费宽带，用户不一定会看完网页的全部内容，那么那些没有被翻倒的图片就浪费了加载的流量，可以通过 loading 属性来改变加载方式，让被用户看到的图片加载，没有被看到的图片就不加载了，这种加载模式就叫作懒加载

值	说明
`auto`	按照浏览器默认的加载方式
`lazy`	启用懒加载
`eager`	立即加载资源，无论它在页面上的哪个位置

注意

行内图片的懒加载可能会导致页面布局重排，所以使用这个属性的时候最好指定图片的高和宽

# referrerpolicy

<img> 加载图片所产生的 HTTP 请求，默认会带有Referer的头信息,referrerpolicy 属性可以对这个行为进行设置

referrerpolicy 的值具体参考这里

# crossorigin

加载的图片和前期网页属于不同的网站时会导致跨域请求，对方服务器可能要求跨域认证。通过crossorigin 属性来告诉浏览器是否采用跨域的形式加载图片，默认是不采用

只要打开了这个属性，HTTP 请求的头信息里面，就会加入origin字段，给出请求发出的域名，不打开这个属性就不加

一旦打开该属性，它可以设为两个值

值	说明
`anonymous`	跨域请求不带有用户凭证（通常是 Cookie）
`use-credentials`	跨域请求带有用户凭证

# 响应式图像

由于使用不同设备对于网页的显示效果是不同的，针对不同的设备就需要显示不同尺寸的图片，这就是响应式图片

srcset 属性可以指定多个图片，浏览器会根据屏幕的宽度自动选择最合适的图片

<img srcset="img-320w.jpg,
             img-480w.jpg 1.5x,
             img-640w.jpg 2x"
     src="img-640w.jpg">

这里的 src 属性指定了一个默认的图片源，如果 srcset 中的图片无法加载或不适用，浏览器将尝试加载这个默认图片

图像 URL 后面的像素密度描述符，格式是像素密度倍数 + x

像素密度的适配，只适合显示区域一样大小的图像。如果希望不同尺寸的屏幕，显示不同大小的图像，srcset 属性就不够用了，必须搭配 sizes 属性

<img srcset="img-160.jpg 160w,
             img-320.jpg 320w,
             img-640.jpg 640w,
             img-1280.jpg 1280w"
     sizes="(max-width: 440px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     src="img-1280.jpg">

URL 后面像 640w 这样的字符为宽度描述符，格式为 图像原始宽度 + w

宽度描述符的作用是告诉浏览器每个图片的宽度，这样浏览器就可以根据用户的屏幕宽度或设备像素密度选择最佳的图片

sizes 属性设定了不同屏幕大小的设备显示图像的宽度

上面代码中，sizes 属性给出了三种屏幕条件，以及对应的图像显示宽度

宽度不超过 440 像素的设备，图像显示宽度为 100%
宽度 441 像素到 900 像素的设备，图像显示宽度为 33%
宽度 900 像素以上的设备，图像显示宽度为 254px

假定当前设备的屏幕宽度是 480px，浏览器从 sizes 属性查询得到，图片的显示宽度是 33vw， $480 \times 0.33 \approx 160$ ，srcset 属性里面，正好有宽度等于 160px 的图片，于是加载 img-160.jpg

sizes 必须和 srcset 属性一起使用

# `<picture>`

<picture> 是一个容器，用来存放 <img> 和 <source> 标签

<picture> 一般用于根据屏幕大小的不同，加载不同尺寸的图片，例如

<picture>
  <source media="(max-width: 300px)" srcset="a.jpg">
  <source media="(max-width: 500px)" srcset="b.jpg">
  <img src="c.jpg">
</picture>

浏览器按照 <source> 标签出现的顺序，依次判断当前设备是否满足该标签的 media属性的值，如果满足就加载 srcset 属性指定的图片文件，并且不再执行后面的 <source> 标签和 <img> 标签，如果 <source> 的media属性的值都不满足，就默认加载 <img> 标签指定的图片文件

# `<figure>` `<figcaption>`

<figure> 标签可以理解为一个图像区块，将图像和相关信息封装在一起

<figcaption>是它的可选子元素，表示图像的文本描述，通常用于放置标题，可以放置多个 `

<figure>
  <img src="xxx.jpg" />
  <figcaption>这时一张xx的图片</figcaption>
</figure>

使用 <figure> 的优势：

语义化：使用 <figure> 和 <figcaption> 可以提高网页的语义化水平，使得内容对于屏幕阅读器和搜索引擎更加友好。
布局灵活性：<figure> 元素可以使用 CSS 进行样式设置和布局控制，如浮动、定位等，以便更好地融入页面设计中。

总之，<figure> 标签提供了一种将多媒体内容及其标题或说明整合在一起的标准化方式，增强了网页的结构和可访问性。

# 列表

列表分为两类，有序列表和无序列表

有序列表就是有编号的列表，用 <ol> 标签表示

<ol>
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>

显示效果

列表项 A
列表项 B
列表项 C

无序列表是没有编号的列表，用 <ul> 标签表示

<ul>
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ul>

显示效果

列表项 A
列表项 B
列表项 C

<li> 表示列表项，用在 <ol> 或 <ul> 之中

<ul> 标签内部可以嵌套 <ul> 或 <ol>，形成多级列表

# `<ol>`

<ol> 标签有以下属性

属性	描述
`reversed`	使用倒序的方式为列表排序
`start`	表示数字列表的起始编号
`type`	指定数字编号的样式

reversed

列表以倒序的方式编号

<ol reversed>
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>

显示效果

列表项 A
列表项 B
列表项 C

start

列表从 5 开始编号

<ol start="5">
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>

显示效果

列表项 A
列表项 B
列表项 C

type

值	说明
a	小写字母
A	大写字母
i	小写罗马数字
I	大写罗马数字
1	阿拉伯数字（默认）

<ol type="I">
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>

显示效果

列表项 A
列表项 B
列表项 C

# `<link>`

# 属性

属性	说明
`href`	指定 `<link>` 标签所链接资源的URL
`rel`	表示外部资源与当前文档之间的关系
`hreflang`	表示链接页面所用的语言，通常在链接当前页面的其他语言版本时使用
`media`	规定所链接资源生效的条件
`type`	规定所链接资源的 MIME 类型
`sizes`	声明图标文件的尺寸参考
`crossorigin`	规定外部资源跨域请求的方法参考
`referrerpolicy`	规定加载链接时 Referer 头信息字段的处理方法参考

# rel

rel 属性用于说明外部资源与当前文档之间的关系，是 <link> 标签的必需属性

值	说明
alternate	该页面的另一个版本
author	文档作者的链接
dns-prefetch	要求浏览器提前执行指定网址的 DNS 查询
help	帮助文档的链接
icon	文档的图标文件
license	许可证链接
next	系列文档下一篇的链接
pingback	接收当前文档 pingback 请求的网址
preconnect	要求浏览器提前与指定的服务器建立 TCP 链接
prefetch	要求浏览器提前下载并缓存指定资源，供之后使用（低优先级）
preload	要求浏览器提前下载并缓存指定资源，供当下使用（高优先级）
prerender	要求浏览器提前渲染指定的网页
prev	系列文档上一篇的链接
search	当前网页的搜索链接
stylesheet	加载样式表（CSS文件）

# `rel="preload"`

rel="preload" 一般用于优化资源加载策略，使浏览器预先加载特定的资源，提高页面加载速度和性能，优先级高，浏览肯定会执行

通常用于加载样式表和脚本文件

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">

在使用 rel="preload" 时，需要使用 as 属性指定资源的类型，这样可以增加资源加载的优先级

常用的 as 属性的值

值	说明
style	CSS样式表（高优先级）
script	JavaScript文件（高优先级）
font	字体文件（高优先级）
image	图片资源
document	Html文档（高优先级）
fetch	API响应或动态资源（低优先级）

# `rel="prefetch"`

与 rel="preload" 不同，prefetch 用于预加载之后会用到，但当前网页渲染时不需要的资源，例如图片，音频，视频，HTML页面等，rel="preload" 优先级低，当网络状况不好是浏览器会选择忽略它

<link rel="prefetch" href="img.jpg" as="image">

# `rel="dns-prefetch"`

rel="dns-prefetch" 用于对特定网址进行提前进行DNS查询，以减少DNS解析的延迟

dns-prefetch 只进行DNS查询，不建立TCP连接或执行TLS握手
preconnect 不仅进行DNS查询，还建立TCP连接和TLS握手
如果资源来自同一域名的不同子域，可能需要为每个子域分别使用 dns-prefetch

<link rel="dns-prefetch" href="https://yoseya.com">

# media

media 属性用于规定 <link> 所链接资源时的生效条件，当满足该条件时，浏览器才会加载该资源

media 属性的值是媒体类型或媒体查询表达式

媒体类型	说明
all	所有媒介类型
screen	计算机屏幕、平板电脑和智能手机等显示设备
print	打印或预览打印样式
speech	语音合成设备

当在打印时加载样式表 print.css

通过 media 属性可以对页面进行响应式设计

以下 <link> 标签使用了媒体查询表达式来指定样式表仅在屏幕宽度至少为 600px 时应用

<link rel="stylesheet" href="styles.css" media="(min-width: 600px)">

# 表格

<table> 是表格容器标签，所有表格内容都要放在这个标签里面

<caption> 是 <table> 里面的第一个子元素，表示表格的标题

# 表格结构

<thead>，<tbody>，<tfoot> 分别表示表头，表体，表尾

都是块级容器元素，且都是 <table> 的一级子元素
都是语义化的标签，用来表示表格的各个部分的含义，不具有功能性

<table>
  <thead> ... </thead>
  <tbody> ... </tbody>
  <tfoot> ... </tfoot>
</table>

# 行

<tr> 标签表示表格的一行

<table>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
</table>

如果表格中有 <thead>，<tbody>，<tfoot> 这样用于表示表格结构的元素则可以把 <tr> 放在里面

# 单元格

单元格有两种，<th> 是标题单元格，<td> 是数据单元格

<table>
  <!--标题单元格-->
  <tr>
    <th>编号</th><th>姓名</th>
  </tr>
  <!--数据单元格-->
  <tr>
    <td>001</td><td>张三</td>
  </tr>
  <tr>
    <td>002</td><td>李四</td>
  </tr>
  <tr>
    <td>003</td><td>王五</td>
  </tr>
</table>

编号	姓名
001	张三
002	李四
003	王五

# colspan

colspan 属性用于设置单元所占的列数，默认为 1

<table>
  <tr>
    <td colspan="2">A</td><td>B</td>
  </tr>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
</table>

A		B
C	D	E

# rowspan

rowspan 属性用于设置单元所占的行数，默认为 1

<table>
  <tr>
    <td rowspan="2">A</td>
    <td>B</td><td>C</td><td>D</td>
  </tr>
  <tr>
    <td>E</td><td>F</td><td>G</td>
  </tr>
</table>

A	B	C	D
A	E	F	G

# headers

headers 属性用于关联数据单元格和表头单元格，数据单元格 headers 对应着表头单元格的 id

<table>
  <tr>
    <th id="no">学号</th><th id="names">姓名</th>
  </tr>
  <tr>
    <td headers="no">001</td><td headers="names">张三</td>
  </tr>
  <tr>
    <td headers="no">002</td><td headers="names">李四</td>
  </tr>
</table>

学号	姓名
001	张三
002	李四

一个 headers 可以对于多个 id，例如单元格跨行的情况，每个值用空格隔开

# scope

有的表格有行标题也有有列标题，在编写html的时候为了方便分清楚行标题和列标题，可以使用 scope 属性。这个属性有两个值，col 表示表示列标题，row 表示行标题

<table>
  <tr>
    <th scope="col">姓名</th>
    <th scope="col">学号</th>
    <th scope="col">性别</th>
  </tr>
  <tr>
    <th scope="row">张三</th>
    <td>001</td>
    <td>男</td>
  </tr>
  <tr>
    <th scope="row">李四</th>
    <td>002</td>
    <td>男</td>
  </tr>
</table>

姓名	学号	性别
张三	001	男
李四	002	男

# 列

<colgroup> 标签表示表格中的一组列，<col> 是它的子元素，表示一个列

使用时，把 <colgroup> 直接放在 <table> 中

<table>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
</table>

<col> 标签不包含内容，一般用于对表格中的列进行样式化，通过 class 属性统一给表格的列设定样式

<table>
  <colgroup>
    <col class="a">
    <col class="b">
    <col class="a">
  </colgroup>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

# 表单

<form> 标签用于定义一个表单，表单中的所有内容都放在这个容器元素中

这时一个简单的表单，<form> 包含着 <label> 和 <input> 还有<button>

<label> 用于给表单控件添加说明，<input> 用作输入表单内容输入框，<button> 作为表单的提交按钮

<form action="https://example.com/api" method="get">
  <label for="user">用户名：</label>
  <input type="text" id="user" name="user" required>
  <button type="submit">提交</button>
</form>

用户在输入框输入内容，比如foobar，然后点击提交按钮，浏览器就会向地址为https://example.com/api的服务器端发送 user=foobar 的数据（POST请求）

显示效果

<form> 的属性

属性	说明
`action`	规定服务器接收数据的 URL
`method`	规定提交数据的 HTTP 方法
`enctype`	定义了当表单数据被提交时，数据应该如何被编码，适用于 POST 方法提交表单的时候，该属性可以指定提交数据的 MIME 类型
`name`	表单的名称，在网面中是唯一的
`target`	指定展示服务器返回数据的窗口
`autocomplete`	输入元素的值为空时，浏览器是否可以自动填充建议 `off`（不自动填写）`on`（自动填写）
`novalidate`	是否取消表单提交时的验证（布尔属性）
`accept-charset`	声明服务器可以接受的字符集，例如 UTF-8 或 ISO-8859-1

# `<label>`

<label> 标签是一个行级元素，用于对控件提供文字说明，文字说明会以文本的形式在页面上显示出来

属性	说明
`for`	指定 `<label>` 元素与哪个表单控件关联，`for` 属性的值应该与目标控件的 `id` 属性值相同
`form`	指定 `<label>` 元素与哪个表单关联，`for` 属性的值应该与目标表单的 `id` 属性值相同

<label for="user">用户名：</label>
<input type="text" name="user" id="user">

这里的 <label> 与 id="user" 的控件进行了关联

也可以把控件放在 <label> 标签中，这时就不需要用 for 属性和 id 属性把 <label> 和控件相关联

<label>用户名：
  <input type="text" name="user">
</label>

# `<input>`

<input> 是一个用于表单输入的元素，是行级元素

  <input type="text">

type 属性是 <input> 必须有的属性，用于设定 <input> 的类型

# 类型

<input> 有许多种类型，如下

值	样式	说明
`button`	没有默认行为的按钮
`checkbox`	复选框，可将其值设为选中或未选中
`color`	颜色选择器
`date`	日期选择器（年、月、日）
`datetime-local`	日期选择器（年、月、日、时）
`email`	电子邮箱地址输入框
`file`	选择文件，使用 `accept` 属性规定控件能选择的文件类型
`hidden`	不显示的控件，但它的值仍会提交到服务器
`image`	图像提交按钮，图像路径用 `src`属性指定，如果图像不显示时，会显示 `alt` 属性指定的文本
`month`	日期选择器（年、月）
`number`	数字输入框，只能输入数字
`password`	密码输入框，输入值内容会被遮盖
`radio`	单选按钮，允许在多个 `name` 值相同的选项中选中其中一个
`range`	范围拖动条，默认值为正中间的值，使用 `min` 和 `max` 来规定范围
`reset`	此按钮将表单的所有内容重置为默认值，不推荐使用该类型
`search`	用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标
`submit`	用于提交表单的按钮
`tel`	用于输入电话号码的输入框
`text`	文本输入框，单行输入，输入值中的换行会被自动去除
`time`	时间选择器（时、分）
`url`	用于输入 URL 的输入框
`week`	周数选择器（年、周）

# 属性

<input> 有许多类型，有些属性是某个类型专用的，有些属性是所有类型通用的，以下是 <input> 的通用属性

属性	说明
`value`	`<input>` 的初始值
`type`	规定`<input>` 的类型
`form`	用于关联表单 `<form>`，值与所关联的表单 `id` 相同，关联表单后，控件可以放置在页面的任何位置，否则只能放在表单 `<form>` 内部
`name`	表单控件的名称，提交表单时，数据将以 `name=value`（键对值）的形式，随表单提交到服务器
`list`	用于关联数据列表 `<datalist>` ，值与所关联的数据列表的 `id` 相同
`readonly`	设置 `<input>` 内容是否为只读（布尔属性）
`required`	设置 `<input>` 内容是否为必填（布尔属性）
`autofocus`	打开页面后是否聚焦在这个 `<input>`，一个页面只能有一个元素具有此属性（布尔属性）
`disabled`	是否禁用该控件，禁用后，用户无法操作该控件（布尔属性）

以下是 <input> 不同类型下的特有属性

# text

<input type="text"> 是普通的文本输入框，单行输入，输入值中的换行会被自动去除

属性	说明
`maxlength`	可以输入的最大字符数
`minlength`	可以输入的最小字符数
`pattern`	定义输入数据的合法格式，值是一个正则表达式，如果输入的数据不符合正则表达式定义的格式，则输入框会提示错误
`placeholder`	用于设置当输入框为空时，在框中显示的提示文本
`readonly`	设置输入框为只读，只能看，不能输入内容（布尔属性）
`size`	设置输入框的显示长度为多少个字符宽，默认为20，超过设定的数目的字符，需要移动光标查看
`spellcheck`	是否对输入内容拼写检查，值为`true`或`false`

# search

<input type="search"> 是一个用于搜索的文本输入

属性	说明
`autocomplete`	是否允许浏览器进行内容的自动补全，这个属性有许多值，一般填写`on`（启用）或`off`（禁用），默认为`on`
`pattern`	定义输入数据的合法格式，值是一个正则表达式，如果输入的数据不符合正则表达式定义的格式，则输入框会提示错误
`placeholder`	用于设置当输入框为空时，在框中显示的提示文本

# button

<input type="button"> 是没有默认行为的按钮，常用于触发自定义的点击事件，按下后可执行预先定义的函数

属性	说明
`onclick`	定义点击按钮时触发的事件（JavaScript函数）

在HTML元素上，事件处理器可以作为属性直接定义，除了 onclick 外，还有 ondblclick，onmousedown，onmouseup，onmouseover等其他事件处理器

# submit

<input type="submit"> 是用于提交表单的按钮，用户点击这个按钮，就会把表单提交给服务器

<input type="submit" value="提交">

在使用 submit 类型时需要设置 value 属性，这个属性的值会作为文本显示在按钮上，如果不指定 value 属性，浏览器会在提交按钮上显示默认的文字，通常是 Submit

属性	说明
`formaction`	规定提交表单数据的服务器 URL
`formenctype`	规定表单数据的编码类型
`formmethod`	规定提交表单使用的 HTTP 方法（get或post）
`formnovalidate`	数据提交服务器时是否忽略表单验证（布尔属性）
`formtarget`	规定服务器响应将在哪个窗口或框架中打开，值为浏览器窗口名称或关键词：`_self`（当前窗口），`_blank`（新窗口），`_parent`（父窗口），`_top`（顶层窗口）

# image

<input type="image"> 是图像提交按钮，行为和用法与 <input type="submit"> 一致

属性	说明
`alt`	图像无法加载时显示的替代文本
`src`	按钮的图片 URL
`height`	按钮的显示高度，单位为像素
`width`	按钮的显示宽度，单位为像素
`formaction`	规定提交表单数据的服务器 URL
`formenctype`	规定表单数据的编码类型
`formmethod`	规定提交表单使用的 HTTP 方法（get或post）
`formnovalidate`	数据提交服务器时是否忽略表单验证（布尔属性）
`formtarget`	规定服务器响应将在哪个窗口或框架中打开，值为浏览器窗口名称或关键词：`_self`（当前窗口），`_blank`（新窗口），`_parent`（父窗口），`_top`（顶层窗口）

# reset

<input type="reset"> 是用于重置表单的按钮，用户点击这个按钮，就会把表单重置为初始值，重置表单时，会触发 onreset 事件

在使用 reset 类型时需要设置value 属性，这个属性的值会作为文本显示在按钮上，如果不指定 value 属性，浏览器会在提交按钮上显示默认的文字，通常是 Reset

# checkbox

<input type="checkbox"> 是复选框，可以选中或取消选中

<input type="checkbox" id="agreement" name="agreement">
<label for="agreement">是否同意</label>

显示效果

是否同意

在使用 checkbox 类型时需要设置 name 和 value 属性，在提交表单时会以 name=value 的形式提交到服务器，如果不指定 value 属性，value 属性的默认值是 on

在一个表单中同时选中多个复选框提交时，提交时就会以name1=value1&name2=value2的形式提交到服务器

属性	说明
`checked`	设置复选框是否被选中，值为`true`或`false`，默认为`false`（布尔属性）
`tabindex`	规定元素的 Tab 键次序。当按动 Tab 键时，浏览器会按照`tabindex` 规定的次序依次选中复选框
`formaction`	规定提交表单数据的服务器 URL
`formenctype`	规定表单数据的编码类型
`formmethod`	规定提交表单使用的 HTTP 方法（get或post）
`formnovalidate`	数据提交服务器时是否忽略表单验证（布尔属性）
`formtarget`	规定服务器响应将在哪个窗口或框架中打开，值为浏览器窗口名称或关键词：`_self`（当前窗口），`_blank`（新窗口），`_parent`（父窗口），`_top`（顶层窗口）

# radio

<input type="radio"> 是单选框，只能选中一个，选中一个按钮，其他按钮会自动取消选中（前提是单选框 name 属性的值相同）

<fieldset>
  <legend>性别</legend>
  <div>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label>
  </div>
  <div>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>
  </div>
</fieldset>

显示效果

性别

男

女

属性	说明
`checked`	复选框是否默认被选中，值为`true`或`false`，默认为`false`（布尔属性）
`value`	默认为on，选中该单选框后，提交表单，数据以`name=value`的形式提交到服务器

# email

<input type="email"> 是用于输入电子邮件地址的输入框，浏览器会根据输入的内容进行验证，如果输入的内容不符合电子邮件地址的格式，浏览器会提示错误

属性	说明
`maxlength`	规定可以输入的最大字符数
`minlength`	规定可以输入的最少字符数
`multiple`	是否允许输入多个以逗号分隔的电子邮箱
`pattern`	定义输入数据的合法格式，值是一个正则表达式，如果输入的数据不符合正则表达式定义的格式，则输入框会提示错误
`placeholder`	用于设置当输入框为空时，在框中显示的提示文本
`readonly`	该输入框是否只读（布尔属性）
`size`	表示输入框的显示长度为多少个字符
`spellcheck`	是否对输入内容启用拼写检查，值为 `true` 或 `false`

# password

<input type="password"> 是用于输入密码的输入框，浏览器会根据输入的内容进行验证，如果输入的内容不符合密码的格式，浏览器会提示错误，输入会被遮挡，字符通常显示 * 或 ·，输入框中不能输入空格和换行

属性	说明
`maxlength`	规定可以输入的最大字符数
`minlength`	规定可以输入的最少字符数
`pattern`	定义输入数据的合法格式，值是一个正则表达式，如果输入的数据不符合正则表达式定义的格式，则输入框会提示错误
`placeholder`	用于设置当输入框为空时，在框中显示的提示文本
`readonly`	该输入框是否只读（布尔属性）
`size`	表示输入框的显示长度为多少个字符
`autocomplete`	是否允许自动填充，值为 `on`（允许自动填充）`off`（不允许自动填充）`current-password`（填入当前网站保存的密码）`new-password`（自动生成一个随机密码）
`inputmode`	允许用户输入的数据类型值为 `none`（不使用系统输入法）``text`（标准文本输入）`decimal`（数字，包含小数）`numeric`（数字0-9）

# file

<input type="file"> 是一个文件选择框，允许用户选择一个或多个文件，常用于文件上传功能

属性	说明
`accept`	规定允许选择的文件类型，多个类型之间使用`,`分隔，可以是 MIME 类型也可以是
`capture`	直接从设备（如摄像头或麦克风）获取媒体数据，值为 `user`（前置摄像和内置麦克风）`environment`（后置摄像头和外接设备）
`multiple`	是否允许用户选择多个文件（布尔属性）

# hidden

<input type="hidden"> 是隐藏的，不会在页面显示，主要用来向服务器传递一些隐藏信息

<input id="prodId" name="prodId" type="hidden" value="yoseya2410">

提交表单的时，浏览器会将 prodId=yoseya2410 发给服务器

# number

<input type="number"> 是用于输入数字的输入框，只能输入数字

属性	说明
`max`	允许输入的最大数值
`min`	允许输入的最小数值
`placeholder`	用于设置当输入框为空时，在框中显示的提示文本
`readonly`	该输入框是否只读（布尔属性）
`step`	用于设置数据的增量，默认为 1

<input type="number"> 右侧默认有两个按钮，点击按钮可以增加或减少数值，默认增量为1 可以通过 step 属性设置增量倍数

为了方便理解，可以通过以下示例进行尝试

示例

增量为1时：

增量为0.1时：

该滑块的 value 属性表示当前输入框中用户输入的数字值

# range

<input type="range"> 是一个滑块，可以拖动滑块来改变数值

属性	说明
`max`	设定的最大值
`min`	设定的最小值
`step`	增量，拖动条拖动滑块的基本单位，默认为1

该滑块的 value 属性表示当前滑块的位置所对应的数值

# url

<input type="url"> 是用于输入 URL 地址的输入框，在提交表单时，浏览器会根据输入的内容进行验证，如果输入的内容不符合 URL 地址的格式，就无法提交表单（URL必须带有协议头）

属性	说明
`maxlength`	规定的最多字符数
`minlength`	规定最少字符串数
`pattern`	定义输入数据的合法格式，值是一个正则表达式，如果输入的数据不符合正则表达式定义的格式，则输入框会提示错误
`placeholder`	当输入框为空时，在框中显示的提示文本
`readonly`	设置输入框为只读，只能看，不能输入内容（布尔属性）
`size`	设置输入框的显示长度为多少个字符宽，默认为20，超过设定的数目的字符，需要移动光标查看
`spellcheck`	是否对输入内容拼写检查，值为true或false

# tel

<input type="tel"> 是用于输入电话号码的输入框，由于全世界的电话号码格式都不相同，因此浏览器没有默认的验证模式，大多数时候需要自定义验证

当输入的内容不符号输入框要求的格式时，点击提交，输入框会弹出不符合格式之类的提示，这时输入框的 title 属性中的内容会与提示一同显示

属性	说明
`maxlength`	规定的最多字符数
`minlength`	规定最少字符串数
`pattern`	定义输入数据的合法格式，值是一个正则表达式，如果输入的数据不符合正则表达式定义的格式，则输入框会提示错误
`placeholder`	当输入框为空时，在框中显示的提示文本
`readonly`	设置输入框为只读，只能看，不能输入内容（布尔属性）
`size`	设置输入框的显示长度为多少个字符宽，默认为20，超过设定的数目的字符，需要移动光标查看
`spellcheck`	是否对输入内容拼写检查，值为true或false

# color

<input type="color"> 是一个颜色选择器

value 属性的值默认值为 #000000（黑色），可以通过设定 value 的值来改变颜色选择器的初始颜色

# date

<input type="date"> 是一个日期选择器，用于选择日期

可以通过value 属性来设置初始日期

属性	说明
`max`	可选择的最晚的日期，格式为 `yyyy-MM-dd`
`min`	可选择的最早的日期，格式为 `yyyy-MM-dd`
`step`	规定可选日期的间隔，默认为 1，就是每天都可选，如果为 2 时，就表示隔两天可选，例如可选日期为 7 号和 9 号，8 号不可选

# time

<input type="time"> 是一个时间选择器，用于选择时间

属性	说明
`max`	可选择的最晚的日期，格式为 `hh:mm:ss`
`min`	可选择的最早的日期，格式为 `hh:mm:ss`
`readonly`	设置为只读，不能编辑时间（布尔属性）

# month

<input type="month"> 是一个日期选择器，用于选择月份

属性	说明
`max`	可选择的最晚的日期，格式为 `yyyy-MM`
`min`	可选择的最早的日期，格式为 `yyyy-MM`
`step`	规定可选日期的间隔，默认为 1，就是每个月都可选，如果为 2 时，就表示隔两个月可选，例如可选日期为 7 月和 9 月，8 月不可选
`readonly`	设置为只读，不能编辑时间（布尔属性）

# week

<input type="week"> 是一个日期选择器，用于选择周，格式为yyyy-Www，比如2024-W30表示2024年第30周

属性	说明
`max`	可选择的最晚的日期，格式为 `yyyy-Www`
`min`	可选择的最早的日期，格式为 `yyyy-Www`
`step`	规定可选日期的间隔，默认为 1，就是每周都可选，如果为 2 时，就表示隔两周可选，例如可选日期为第 7 周和第 9 周，第 8 周不可选
`readonly`	设置为只读，不能编辑时间（布尔属性）

# datetime-local

<input type="datetime-local"> 是一个日期选择器，用于选择日期和时间，格式为 yyyy-MM-ddThh:mm:ss，例如2024-07-24T13:16

属性	说明
`max`	可选择的最晚的日期
`min`	可选择的最早的日期
`readonly`	设置为只读，不能编辑时间（布尔属性）

# 媒体

# 视频

<video> 是一个块级元素，用于放置视频，如果浏览器支持该元素，就会显示一个播放器，否则显示 <video> 中的子元素，

<video src="/video/flower.mp4" controls>
  <p>浏览器不支持 HTML5 视频</p>
</video>

显示效果

可以使用 <source> 元素来指定多个视频源，默认播放第一个视频源，如果浏览器不支持播放第一个视频的格式，就会尝试播放第二个视频源，以此类推

<video controls>
  <source src="/video/flower.webm" type="video/webm" />
  <source src="/video/flower.mp4" type="video/mp4" />
   <p>浏览器不支持 HTML5 视频</p>
</video>

使用 <source> 提供多种格式的视频源，增加了跨浏览器和跨设备的兼容性

属性	说明
`src`	视频文件的 URL
`controls`	播放器是否显示控制栏（布尔属性）使用自定义播放器时，就不要使用该属性
`width`	视频播放器的宽度
`height`	视频播放器的高度
`autoplay`	视频是否自动播放（布尔属性）
`loop`	视频是否循环播放（布尔属性）
`muted`	是否默认静音（布尔属性）
`poster`	规定视频播放器的封面图片的 URL
`preload`	是否缓冲视频文件，值为 `none`（不缓冲），`metadata`（仅缓冲视频文件的元数据），`auto`（缓冲整个文件，默认）
`playsinline`	指明视频将内嵌播放，Safari 浏览器播放视频时会自动全屏，该属性可以禁止这种行为（布尔属性）
`crossorigin`	是否采用跨域的方式加载视频，值为 `anonymous`（跨域请求但不发送用户凭证，如cookie、X.509 证书，也不会执行任何 HTTP 基本身份验证），`use-credentials`（跨域时发送用户凭证）
`controlslist`	设置在控制栏中不显示哪些控件，值为 `nodownload`（不显示下载按钮），`nofullscreen`（不显示全屏按钮），`noremoteplayback`（不显示远程播放按钮）
`disablepictureinpicture`	禁用画中画模式（布尔属性）
`disableremoteplayback`	禁用远程播放功能，针对（Miracast、Chromecast、DLNA、AirPlay 等）网络协议进行的播放（布尔属性）

以下属性需要通过 JavaScript 访问

属性	说明
`currentTime`	指定视频播放开始播放的位置（双精度浮点数，单位为秒）
`duration`	表示视频的总时长，值为一个单位为秒的双精度浮点数

currentTime 属性使用示例

<video id="myVideo" src="/video/flower.mp4" controls></video>
<p id="videoDuration"></p>
<script>
  const video = document.getElementById('myVideo');
  const time = document.getElementById('videoDuration');
  //当加载视频文件元数据时，获取 duration 的值并处理
  video.onloadedmetadata = function() {
    const duration = video.duration;
    const minutes = Math.floor(duration / 60);
    const seconds = Math.floor(duration % 60);
    //把处理后的数据以文本的形式显示在 id 为 videoDuration 的元素上
    time.textContent = `${minutes}:${seconds <10?'0':''}${seconds}`;
  };
</script>

duration 属性使用示例

<video id="myVideo" src="/video/flower.mp4" controls></video>
<script>
  const videoElement = document.getElementById('myVideo');
  videoElement.currentTime = 3;//将视频播放位置设置为3秒
</script>

# 音频

<audio> 是一个块级元素，用于放置音频，和 <video> 使用方法类似

如果浏览器不支持该元素时，就会显示 <audio> 中的子元素

<audio src="/audio/roar.mp3" controls>
  <p>不支持播放 HTML5 音频</p>
</audio>

可以使用 <source> 元素来指定多个音频源，默认播放第一个音频源，如果浏览器不支持播放第一个音频的格式，就会尝试播放第二个音频，以此类推

<audio controls>
  <source src="/audio/roar.mp3" type="audio/mp3">
  <source src="/audio/roar.ogg" type="audio/ogg">
  <p>不支持播放 HTML5 音频</p>
</audio>

属性	说明
`src`	音频文件的 URL
`autoplay`	是否自动播放（布尔属性）
`loop`	是否循环播放（布尔属性）
`muted`	是否默认静音（布尔属性）
`controls`	播放器是否显示控制栏（布尔属性）如果没有这个属性，页面上就不显示 `<audio>` 元素
`crossorigin`	是否采用跨域的方式加载音频，值为 `anonymous`（跨域请求但不发送用户凭证，如cookie、X.509 证书，也不会执行任何 HTTP 基本身份验证），`use-credentials`（跨域时发送用户凭证）

以下属性需要通过 JavaScript 访问

属性	说明
`currentTime`	指定音频播放开始播放的位置（双精度浮点数，单位为秒）
`duration`	表示音频的总时长，值为一个单位为秒的双精度浮点数，如果元素上没有媒体或者媒体是不可用时，返回的值为`NaN`，如果媒体找不到确切的结尾（比如不确定长度的直播，网络电台，或者是通过 WebRTC 连接的流），那么这个值将返回 `+Infinity`

currentTime 属性使用示例

<audio id="myAudio" src="/audio/roar.mp3" controls></audio>
<p id="audioDuration"></p>
<script>
  const audio = document.getElementById('myAudio');
  const time = document.getElementById('audioDuration');
  //当加载音频文件元数据时，获取 duration 的值并处理
  audio.onloadedmetadata = function () {
    const duration = audio.duration;
    const minutes = Math.floor(duration / 60);
    const seconds = Math.floor(duration % 60);
    //把处理后的数据以文本的形式显示在 id 为 audioDuration 的元素上
    time.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
  };
</script>

duration 属性使用示例

<audio id="myAudio" src="/audio/roar.mp3" controls></audio>
<script>
  const videoElement = document.getElementById('myAudio');
  videoElement.currentTime = 1;//将音频播放位置设置到1秒
</script>

# 字幕

<track> 用于为媒体元素提供字幕，作为 <audio> 和 <video> 的子元素来使用，通常使用 WebVTT格式的文件（.vtt文件）

<video controls src="/video/friday.mp4">
  <track default kind="captions" srclang="en" src="/video/friday.vtt" />
</video>

属性	说明
`src`	字幕的 URL
`default`	是否默认打开字幕（布尔属性）
`srclang`	字幕的语言，值为语言代码
`label`	播放器显示的字幕名称，供用户选择
`kind`	字幕的类型，该属性的值 (opens new window)

# 嵌入页面

<iframe> 用于在页面中嵌入另一个页面

<iframe src="https://yoseya.top"></iframe>

显示效果

<iframe> 还是一个容器元素，如果浏览器不支持 <iframe>，就会显示内部的子元素，但现在的浏览器都普遍支持 <iframe>

# 属性

属性	说明
`src`	嵌入页面的URL
`width`	显示区域的宽度
`height`	显示区域的高度
`sandbox`	设置嵌入的页面的权限
`loading`	设置嵌入的页面的加载模式，`lazy` 为懒加载，`eager` 为立即加载
`importance`	浏览器加载嵌入的页面的优先级，`high` 表示高优先级，`low` 表示低优先级，`auto` 表示由浏览器自行决定
`name`	内嵌窗口的名称
`allowfullscreen`	允许嵌入的页面全屏显示
`frameborder`	是否绘制边框，0为不绘制，1为绘制（默认值）
`referrerpolicy`	请求嵌入页面时，HTTP 请求的Referer字段的设置

# sandbox

嵌入的网页默认具有正常权限，比如执行脚本、提交表单、弹出窗口等。如果嵌入的是其他网站的页面，你不了解对方会执行什么操作，因此就存在安全风险。为了限制<iframe> 的风险，HTML 提供了 sandbox 属性，允许设置嵌入的网页的权限

<iframe src="https://yoseya.top" sandbox> </iframe>

值	说明
`allow-form`	允许提交表单
`allow-modals`	允许提示框，即允许执行`window.alert()`等弹出提示框的方法
`allow-popups`	允许嵌入的网页使用`window.open()`方法弹出窗口
`allow-popups-to-escape-sandbox`	允许弹出窗口不受限制
`allow-orientation-lock`	允许嵌入的网页用脚本锁定屏幕的方向，即横屏或竖屏
`allow-pointer-lock`	允许嵌入的网页使用 Pointer Lock API，锁定鼠标的移动
`allow-presentation`	允许嵌入的网页使用 Presentation API
`allow-same-origin`	不打开该项限制，将使得所有加载的网页都视为跨域
`allow-scripts`	允许嵌入的网页运行脚本（但不创建弹出窗口）
`allow-top-navigation`	允许嵌入的网页对顶级窗口进行导航
`allow-top-navigation-by-user-activation`	允许嵌入的网页对顶级窗口进行导航，但必须由用户激活
`allow-downloads-without-user-activation`	允许在没有用户激活的情况下，嵌入的网页启动下载
`allow-storage-access-by-user-activation`	`sandbox` 属性同时设置了这个值和`allow-same-origin`的情况下，允许 `<iframe>` 嵌入的第三方网页通过用户发起`document.requestStorageAccess()`请求，经由 `Storage Access API` 访问父窗口的 Cookie

# 控件

# 按钮

<button> 标签用于创建按钮，就像这样

<input type="button"> 也可以创建一个这样的按钮，但<button> 和 <input> 的区别在于：

<input> 通常用于表单，而<button> 可以任意使用
<button> 更加灵活，可以包含文本、图片等其他 HTML 元素，而<input> 不能包含其他元素
<input type="button"> 在某些老旧的浏览器中可能有更好的兼容性

<button> 在内部放置图片可以形成图像按键

<button>
 <img src="/img/icon/BULBASAUR.png">
</button>

属性

属性	说明
`autofocus`	打开页面后是否聚焦在这个按钮，一个页面只能有一个元素具有此属性（布尔属性）
`disabled`	禁用该按钮，无法选中和按下（布尔属性）
`name`	按钮的名称
`value`	按钮的值，与 `name` 属性一起使用，将以 `name=value` 的形式，随表单提交到服务器
`type`	按钮的类型，`submit`（用于提交表单的按钮），`reset`（将所有控件的值重置为初始值），`button`（表示为普通按钮）
`form`	指定按钮关联的 `<form>` 表单，值为 `<form>` 的 `id` 属性。如果省略该属性，默认关联按钮所在父表单
`formaction`	数据提交到服务器的目标 URL，会覆盖 `<form>` 元素的 `action` 属性
`formenctype`	数据提交到服务器的编码方式，会覆盖 `<form>` 元素的 `enctype` 属性。可能的值有三种：`application/x-www-form-urlencoded`（默认值），`multipart/form-data`（只用于文件上传），`text/plain`
`formmethod`	数据提交到服务器使用的 HTTP 方法，会覆盖 `<form>` 元素的`method` 属性，可能的值为 post 或 get
`formnovalidate`	布尔属性，数据提交到服务器时关闭本地验证，会覆盖 `<form>` 元素的 `novalidate` 属性
`formtarget`	数据提交到服务器后，展示服务器返回数据的窗口，会覆盖 `<form>` 元素的 `target` 属性。可能的值有`_self`（当前窗口），`_blank`（新的空窗口）、`_parent`（父窗口）、`_top`（顶层窗口）

# 进度条

<progress> 是行级元素，用于显示一个任务的完成程度

<progress id="file" max="100" value="70"> 70% </progress>

显示效果

70%

属性	说明
`max`	进度条的最大值，默认值为 1
`value`	进度条的值，这个值必须大于 0，小于等于 `max`

# 指示器

<meter> 是行级元素，用于显示一定范围内的程度

<meter min="0" max="100" high="90" low="80" value="60"></meter>

显示效果

属性	说明
`min`	最小值，默认为0
`max`	最大值，默认为1
`value`	指示条的值，必须在 `min` 和 `max` 之间，则默认为 0
`low`	低门槛，当值超过这个门槛是指示器会显示黄色
`high`	高门槛，当值超过这个门槛是指示器会显示红色
`optimum`	最佳值，如果在 `low` 和 `high`之间，则表示“中间地带”是最佳范围这时，低于 `low` 和高于 `high` 都会显示为黄色
`form`	用于关联表单 `<from>`，值与表单的 `id` 相同

# 文本框

<textarea> 是块级元素，用于多行文本编辑的文本框

<textarea rows="5" cols="30">
这是一个可以自由编辑的文本框
</textarea>

显示效果

属性	说明
`cols`	文本框的宽度，一个字符宽度为单位，默认值为20
`rows`	文本框的高度，以行为单位
`dir`	设定文本方向，默认值为 `ltr`（从左到右），`rtl`（从右到左），`auto`（根据用户输入自动调整）
`disabled`	是否禁用该控件（布尔属性）
`form`	用于关联表单 `<from>`，值与所关联表单的 `id` 相同
`maxlength`	允许输入的最大字符数，默认可以输入无限数量的字符
`minlength`	允许输入的最小字符数
`name`	控件的名称
`placeholder`	当文本框为空时，文本框中所显示的同于提示的文本
`readonly`	内容是否为只读（布尔属性）
`required`	内容是否为必填（布尔属性）
`spellcheck`	是否对输入内容拼写检查，值为true或false
`wrap`	内容超出一行的宽度时输入的文本是否自动换行，值为 `hard` （自动插入回车换行，默认）`soft`（自动换行但不加入换行符）`off`（关闭自动换行，当文本长度超过宽度是会出现水平滚动条）
`autofocus`	打开网页后自动选中该文本框（布尔属性）

# 数据列表

<datalist> 是一个容器，用于为指定控件提供数据，<option> 是这个容器中的菜单项

这是一个输入提示的示例，<datalist> 为 <input> 提供数据，<datalist> 要与<input> 元素关联，<input> 的 list 属性值要与<datalist> 的 id 相同

<input type="text" list="browser">
<datalist id="browser">
  <option value="Chrome">
  <option value="Edge">
  <option value="Firefox">
  <option value="Safari">
</datalist>

<option>没有闭合标签
label 属性可以为 <option> 元素提供说明，以小字的形式显示在菜单选项中

为了更直观的了解，可以看下面这个Dome

# 下拉列表

<select> 是一个下拉菜单，<option> 是菜单项

<select name="pet">
  <option value="">--请选择一项--</option>
  <option value="dog">狗</option>
  <option value="cat">猫</option>
  <option value="others">其他</option>
</select>

显示效果

每个 <option> 都有value 属性，当用户选择某选项时，该选项<option>的value 属性值会作为值，<select> 的name属性值作为键，以键值对的形式提交给服务器

以上面的代码为例，当选中狗时，会以pet=dog的形式提交给服务器

<option> 有一个布尔属性 selected，一旦设置，就表示该项是默认选中的菜单项

属性	说明
`autofocus`	打开网页后自动选中该下拉菜单（布尔属性）
`disabled`	是否禁用该下拉菜单（布尔属性）
`form`	用于与表单关联，值为所关联表单的 `id`
`multiple`	是否可以选择多个菜单项。默认情况下，只能选择一项。一旦设置，多数浏览器会显示一个滚动列表框。用户可能需要按住 `Shift` 或其他功能键，选中多项（布尔属性）
`required`	是否为必填控件（布尔属性）
`name`	下拉菜单的名称，在作为表单提交时作为键，与选项`<option>`的值一同构成键值对提交给服务器
`size`	设置下拉菜单的控件的长度为多少个字符宽

# 折叠内容

<details> 是一个折叠框，可以把 <details> 中的子元素折叠起来，默认是折叠状态

<summary> 是折叠栏的标题

<details>
  <summary>详细信息</summary>
  这里是被折叠的详细信息
</details>

显示效果：

详细信息

这里是被折叠的详细信息

属性	说明
`open`	是否展开（布尔值）

# 对话框

<dialog> 是一个对话框，可以作为提示弹窗或者交互窗口

<dialog> 只有一个属性 open，这是个布尔属性，如果没有这个属性，对话框默认不显示

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

显示效果

# 画布

<canvas> 用于网页图像渲染，开发这可以用 JavaScript（Canvas API 或 WebGL API）绘制图形及和动画

<canvas id="myCanvas" width="500" height="500"></canvas>

除了全局属性外，<canvas> 还支持的属性有

标题	标题
`width`	设置或返回画布的宽度，单位为 px（像素）
`height`	设置或返回画布的高度，单位为 px（像素）

# HTML

# HTML 是什么？

# 声明

# 网页编码

# 注释

# 头部

# <body>

# <title>

# <base>

# <link>

# <style>

# <meta>

# <script>

# <noscript>

# 元素

# 嵌套元素

# 空元素

# 属性

# 全局属性

# class

# id

# title

# style

# lang

# tabindex

# dir

# hidden

# contenteditable

# translate

# draggable

# data-*

# accesskey

# 标题

# 段落

# 换行

# 粗体

# 斜体

# 下划线

# 划掉文本

# 上下标

# 引用

# 水平线

# 预定义格式

# 高亮

# <kbd>

# 语义结构

# <header>

# <main>

# <footer>

# <article>

# <aside>

# <section>

# <nav>

# <hgroup>

# 页面布局

# 行级元素

# 块级元素

# 行内块级元素

# <div>

# <span>

# 超链接

# href

# target

# rel

# type

# download

# ping

# referrerpolicy

# 图片

# src

# alt

# width 和 height

# loading

# referrerpolicy

# crossorigin

# 响应式图像

# <picture>

# <figure> <figcaption>

# 列表

# <ol>

# `<body>`

# `<title>`

# `<base>`

# `<link>`

# `<style>`

# `<meta>`

# `<script>`

# `<noscript>`

# `class`

# `id`

# `title`

# `style`

# `lang`

# `tabindex`

# `dir`

# `hidden`

# `contenteditable`

# `translate`

# `draggable`

# `data-*`

# `accesskey`

# `<kbd>`

# `<header>`

# `<main>`

# `<footer>`

# `<article>`

# `<aside>`

# `<section>`

# `<nav>`

# `<hgroup>`

# `<div>`

# `<span>`

# `<picture>`

# `<figure>` `<figcaption>`

# `<ol>`

# `<link>`

# `rel="preload"`

# `rel="prefetch"`

# `rel="dns-prefetch"`

# `<label>`

# `<input>`