html 相关标准

1.元数据：`<meta>` 元素

元数据就是描述数据的数据，而 HTML 有一个“官方的”方式来为一个文档添加元数据——<meta> 元素。当然，其他在这篇文章中提到的东西也可以被当作元数据。有很多不同种类的 <meta> 元素可以被包含进你的页面的 <head> 元素，但是现在我们还不会尝试去解释所有类型，这只会引起混乱。我们会解释一些你常会看到的类型，先让你有个概念。

1.1 指定文档中的字符编码

<meta charset="utf-8" />

这个元素简单的指定了文档的字符编码——在这个文档中被允许使用的字符集。utf-8 是一个通用的字符集，它包含了任何人类语言中的大部分的字符，意味着该 web 页面可以显示任意的语言；所以对于你的每一个页面都使用这个设置会是一个好主意！比如说，你的页面可以很好的处理英文和日文

<meta charset="ISO-8859-1" />

假如你将字符集设置为 ISO-8859-1（拉丁字母表的字符集），那么页面将出现乱码

1.2 添加作者和描述

许多元素包含了 name 和 content 属性：

name 指定了 meta 元素的类型；说明该元素包含了什么类型的信息。
content 指定了实际的元数据内容。

<meta name="author" content="Chris Mills" />
<meta
  name="description"
  content="The MDN Web Docs Learning Area aims to provide complete beginners to the Web with
   all they need to know to get started with developing web sites and applications."
/>

1.3 主动学习：在搜索引擎中 description 的使用

<meta
  name="description"
  content="The MDN Web Docs site
  provides information about Open Web technologies
  including HTML, CSS, and APIs for both Web sites and
  progressive web apps."
/>

1.4 其他类型的元数据

Facebook 编写的元数据协议 Open Graph Data 为网站提供了更丰富的元数据。在 MDN Web 文档源代码中，你会发现：

<meta
  property="og:image"
  content="https://developer.mozilla.org/mdn-social-share.png"
/>
<meta
  property="og:description"
  content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML Apps."
/>
<meta property="og:title" content="Mozilla Developer Network" />

Twitter 还拥有自己的类型的专有元数据协议（称为 Twitter Cards），当网站的 URL 显示在 twitter.com 上时，它具有相似的效果。

<meta name="twitter:title" content="Mozilla Developer Network" />

2. 在你的站点增加自定义图标

页面添加网页图标的方式有：

将其保存在与网站的索引页面相同的目录中，以 .ico 格式保存（大多数浏览器支持更通用的格式，如 .gif 或 .png）
将以下行添加到 HTML 的 <head> 块中以引用它：

<link rel="icon" href="favicon.ico" type="image/x-icon" />

如今还有很多其他的图标类型可以考虑:

<!-- 含有高分辨率 Retina 显示屏的第三代 iPad：-->
<link
  rel="apple-touch-icon-precomposed"
  sizes="144x144"
  href="https://developer.mozilla.org/static/img/favicon144.png"
/>
<!-- 含有高分辨率 Retina 显示屏的 iPhone：-->
<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="https://developer.mozilla.org/static/img/favicon114.png"
/>
<!-- 第一代和第二代 iPad：-->
<link
  rel="apple-touch-icon-precomposed"
  sizes="72x72"
  href="https://developer.mozilla.org/static/img/favicon72.png"
/>
<!-- 不含高分辨率 Retina 显示的 iPhone、iPod Touch 和 Android 2.1+ 设备：-->
<link
  rel="apple-touch-icon-precomposed"
  href="https://developer.mozilla.org/static/img/favicon57.png"
/>
<!-- 基本 favicon -->
<link
  rel="icon"
  href="https://developer.mozilla.org/static/img/favicon32.png"
/>

3. `script`标签

<script> 元素也应当放在文档的头部，并包含 src 属性来指向需要加载的 JavaScript 文件路径，同时最好加上 defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容。这样你就不会因为 JavaScript 试图访问页面上不存在的 HTML 元素而产生错误。实际上有很多方法来处理在你的页面上加载 JavaScript，但对于现代浏览器来说，这是最可靠的方法（对于其他方法，请阅读脚本加载策略）。

<script src="my-js-file.js" defer></script>

4. 为文档设定主语言

可以为站点设定语言，这个可以通过添加 lang 属性到 HTML 开始的标签中来实现:

<html lang="zh-CN">
  …
</html>

你还可以将文档的分段设置为不同的语言。例如，我们可以把日语部分设置为日语，如下所示：

<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

5. html 语义化

在我们身边的任何地方都要依赖语义——我们依靠以前的经验来告诉我们一个日常物品的功能是什么；当我们看到某个东西时，我们知道它的功能是什么。举个例子，我们知道红色交通灯表示“停止”，绿色交通灯表示“通行”。如果运用了错误的语义，事情会迅速地变得非常棘手（难道有某个国家使用红色代表通行？我不希望如此）

同样的道理，我们需要确保使用了正确的元素来给予内容正确的含义、作用以及外形。在这里，h1 元素也是一个语义元素，它所包裹的文本具有“页面上的顶级标题”的作用（或意义）。

为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：

<header>：页眉。
<nav>：导航栏。
<main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。
<aside>：侧边栏，经常嵌套在 <main> 中。
<footer>：页脚。
<br>：换行元素
<hr>：主题性中断元素

6. 绝对 URL 和相对 URL

绝对 URL：指向由其在 Web 上的绝对位置定义的位置，包括协议和域名。像下面的例子，如果 index.html 页面上传到了 projects 这一个目录。并且 projects 目录位于 web 服务站点的根目录，web 站点的域名为 https://www.example.com，那么这个页面就可以通过 https://www.example.com/projects/index.html 访问（或者通过 https://www.example.com/projects/ 来访问，因为在没有指定特定的 URL 的情况下，大多数 web 服务器会默认访问加载 index.html 这类页面）,不管绝对 URL 在哪里使用，它总是指向确定的相同位置。
相对 URL：指向与你链接的文件相关的位置，更像我们在前面一节中所看到的位置。例如，如果我们想从示例文件链接 https://www.example.com/projects/index.html 转到相同目录下的一个 PDF 文件，URL 就是文件名（例如 project-brief.pdf），没有其他的信息要求。如果 PDF 文件能够在 projects 的子目录 pdfs 中访问到，相对路径就是 pdfs/project-brief.pdf（对应的绝对 URL 是 https://www.example.com/projects/pdfs/project-brief.pdf）,一个相对的 URL 将指向不同的位置，这取决于引用的文件的实际位置——例如，如果我们把 index.html 文件从 projects 目录移动到 Web 站点的根目录（最高级别，而不是任何目录中），里面的 pdfs/project-brief.pdf 相对 URL 将会指向 https://www.example.com/pdfs/project-brief.pdf，而不是 https://www.example.com/projects/pdfs/project-brief.pdf

7.上标和下标

你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标，以确保它们的正确含义。<sup> 和 <sub> 元素可以解决这样的问题。例如：

<p>
  咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。
</p>
<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

实际效果：

---------------------------------

咖啡因的化学方程式是 C₈H₁₀N₄O₂。

如果 x² 的值为 9，那么 x 的值必为 3 或 -3。

---------------------------------

8. 展示计算机代码

有大量的 HTML 元素可以来标记计算机代码：

<code>：用于标记计算机通用代码。
<pre>：用于保留空白字符（通常用于代码块）——如果文本中使用了缩进或多余的空白，浏览器将忽略它，你将不会在呈现的页面上看到它。但是，如果你将文本包含在 - <pre></pre> 标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
<var>：用于标记具体变量名。
<kbd>：用于标记输入电脑的键盘（或其他类型）输入。
<samp>：用于标记计算机程序的输出。

<pre><code>const para = document.querySelector('p');

para.onclick = function() {
  alert('噢，噢，噢，别点我了。');
}</code></pre>

<p>
  请不要使用 <code>&lt;font&gt;</code> 、
  <code>&lt;center&gt;</code> 等表象元素。
</p>

<p>在上述的 JavaScript 示例中，<var>para</var> 表示一个段落元素。</p>

<p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

实际效果：

---------------------------------


const para = document.querySelector('p');
para.onclick = function() {
  alert('噢，噢，噢，别点我了。');
}

请不要使用 <font> 、 <center> 等表象元素。

在上述的 JavaScript 示例中，para 表示一个段落元素。

按 Ctrl/Cmd + A 选择全部内容。

$ ping mozilla.org
PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms

---------------------------------

9. 从 object 到 iframe——其他嵌入技术

来看一些能让你在网页中嵌入各种内容类型的元素：<iframe>, <embed> 和 <object> 元素。

<iframe>用于嵌入其他网页，另外两个元素则允许你嵌入 PDF，SVG，甚至 Flash——一种正在被淘汰的技术，但你仍然会时不时的看到它。

9.1 Iframe 详解

<iframe> 元素旨在允许你将其他 Web 文档嵌入到当前文档中。

这很适合将第三方内容嵌入你的网站，你可能无法直接控制，也不希望实现自己的版本——例如来自在线视频提供商的视频，Disqus 等评论系统

，在线地图提供商，广告横幅等。你通过本课程使用的实时可编辑示例就是使用 <iframe> 实现的。

<iframe
  src="https://developer.mozilla.org/zh-CN/docs/Glossary"
  width="100%"
  height="500"
  frameborder="0"
  allowfullscreen
  sandbox
>
  <p>
    <a href="https://developer.mozilla.org/zh-CN/docs/Glossary">
      Fallback link for browsers that don't support iframes
    </a>
  </p>
</iframe>

使用以下所需的 <iframe> 基本要素：

allowfullscreen:

如果设置，<iframe>则可以通过全屏 API 设置为全屏模式（稍微超出本文的范围）。

frameborder:

如果设置为 1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0 删除边框。不推荐这样设置，因为在 CSS 中可以更好地实现相同的效果。border: none;

src:

该属性与 <video>元素表示文档中的图像。<img>一样包含指向要嵌入文档的 URL 路径。

width 和 height:

这些属性指定你想要的 iframe 的宽度和高度。

sandbox:

该属性需要在已经支持其他 <iframe> 功能（例如 IE 10 及更高版本）但稍微更现代的浏览器上才能工作，该属性可以提高安全性设置；我们将在下一节中更加详细地谈到。

10. 响应式图片

响应式图片——在不同的屏幕尺寸、分辨率或具有其他类似特性的设备上都呈现良好的图片——并且探究 HTML 提供了什么工具来帮助实现它们，这有助于提升（网页在）不同设备上的性能

一个典型的网站头部可能会有一张图片，图片下面可能会有一些内容的图片。头部图片很可能会横跨整个头部的宽度，而内容图片会适应某个内容区块的宽度，以下是个简单的例子

我们可以使用两个新的属性——srcset 和 sizes——来提供更多额外的资源图像和提示，帮助浏览器选择合适的一个资源。你可以从 Github 上的 responsive.html 中查看示例（也可以查看它的源代码）：

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy"
/>

srcset 和 sizes 属性看起来很复杂，但是如果你按照上图所示进行格式化，那么他们并不是很难理解，每一行有不同的属性值。

每个值都包含逗号分隔的列表，列表的每一部分由三个子部分组成。让我们来看看每一个内容：

srcset 定义了浏览器可选择的图片设置以及每个图片的大小，每张图片信息的设置和前一个用逗号隔开，每个设置要写：
一个文件名（elva-fairy-480w.jpg）
一个空格
图片的固有宽度（以像素为单位）（480w）。

注意，这里使用宽度描述符 w，而非你可能期望的 px。

11. px,inch,ppi,dpi,w 等单位描述

11.1 宽度描述符 w

srcset 中的单位 w 表示图片的宽度描述符，用于告诉浏览器每个图片的实际宽度。这个宽度描述符是一个以像素为单位的整数，表示图片在实际渲染时的宽度。

在 srcset 属性中，每个图片 URL 后面跟着一个宽度描述符，例如：

<img
  srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x"
  alt="Responsive Images"
/>

上面的代码中，srcset 属性包含了三个图片 URL，并且每个图片 URL 后面跟着一个宽度描述符（1x、2x、3x）。这些描述符表示图片的实际宽度相对于视觉显示的宽度，比如 1x 表示图片的实际宽度和视觉宽度相同，2x 表示图片的实际宽度是视觉宽度的两倍，3x 表示图片的实际宽度是视觉宽度的三倍，依此类推。

通过使用 w 单位，可以让浏览器根据设备的像素密度（DPI，Dots Per Inch）来选择合适的图片。例如，对于 Retina 屏幕设备，像素密度通常是普通屏幕的两倍，因此浏览器会选择加载宽度描述符为 2x 的图片，以保持图片在 Retina 屏幕上的清晰度。

综上所述，srcset 中的单位 w 表示宽度描述符，用于告诉浏览器每个图片的实际宽度相对于视觉宽度的倍数，从而根据设备的像素密度来选择合适的图片。

11.2 设备的像素密度 DPI/PPI

设备的像素密度（DPI，Dots Per Inch）是指在设备上每英寸的物理像素数。它用于衡量设备屏幕或打印机等输出设备的像素密度，即在一个线性英寸（1 英寸）的距离上有多少个像素点。

设备的像素密度通常用 dpi 或 ppi（Pixels Per Inch）来表示，它表示每英寸有多少个像素点。较高的像素密度意味着在相同尺寸的屏幕或打印纸上，有更多的像素点，从而显示图像或文本更加细腻和清晰。

例如，一台分辨率为 1920x1080 的电脑显示器，它的水平和垂直方向上分别有 1920 个像素和 1080 个像素。如果这个显示器的尺寸是 15 英寸（对角线），那么它的像素密度就是：

水平像素密度 = 1920 像素 / 15 英寸 ≈ 128 dpi 垂直像素密度 = 1080 像素 / 15 英寸 ≈ 72 dpi

同样地，在移动设备中，比如手机或平板电脑，由于它们的屏幕尺寸相对较小，所以通常有更高的像素密度。这样可以使图像和文本在相同尺寸的屏幕上更加清晰和锐利。

在 Web 开发中，了解设备的像素密度很重要，特别是在处理响应式设计和高清（Retina）图像时。通过使用 srcset 属性和像素密度描述符（如 1x、2x、3x 等），可以让网页在不同像素密度的设备上显示合适大小和清晰度的图像。

iPhone 6 的像素密度为 326 dpi（Dots Per Inch），或者以像素密度单位 ppi（Pixels Per Inch）来表示，即 326 ppi。这意味着在 iPhone 6 的屏幕上，每英寸的距离上有 326 个像素点。

iPhone 6 的屏幕分辨率为 750x1334 像素，如果将水平像素数除以屏幕宽度（4.7 英寸），垂直像素数除以屏幕高度（5.44 英寸），都可以得到大约 326 ppi 的结果

11.3 英寸，像素，mm 的关系

英寸（inch）、像素（pixel）和毫米（mm）是用于测量长度和距离的单位，它们之间的关系是：

1 英寸（inch） = 25.4 毫米（mm） 1 像素（pixel）= 1/96 英寸（inch）

根据上述关系，我们可以进行一些换算：

英寸转换为毫米：将英寸数目乘以 25.4，即 1 英寸 = 25.4 毫米。像素转换为毫米：将像素数目除以 96，再乘以 25.4，即 1 像素 ≈ 0.264583333 毫米。毫米转换为英寸：将毫米数目除以 25.4，即 1 毫米 ≈ 0.0393701 英寸。

11.4 vw

vw 是 CSS 中的一个长度单位，表示视窗宽度的百分比。vw 单位是相对于视窗宽度的长度单位，1vw 等于视窗宽度的 1%。

使用 vw 单位可以使元素的大小和视窗宽度成比例，并且可以实现响应式布局。当视窗的宽度发生变化时，使用 vw 单位定义的元素大小也会自动调整，以适应不同的屏幕尺寸。

例如，如果你想让一个元素的宽度占据视窗宽度的 50%，你可以使用 width: 50vw; 这样的 CSS 规则。

/* CSS代码 */
.element {
  width: 50vw; /* 宽度为视窗宽度的 50% */
}

通过使用 vw 单位，你可以更加灵活地控制元素在不同屏幕尺寸下的大小，从而实现更好的响应式效果。

需要注意的是，vw 单位的兼容性较好，但在一些较老的浏览器中可能不完全支持。因此，在使用 vw 单位时，建议进行测试和兼容性检查，以确保在目标浏览器中正常工作。

11.5 vh

vh 是 CSS3 中用于表示视口高度（Viewport Height）的单位。视口是指浏览器窗口的可视区域，即用户可以看到的网页部分。vh 单位表示视口高度的百分比，其中 1vh 等于视口高度的 1%。

使用 vh 单位可以使元素的高度相对于视口大小自适应调整，从而实现响应式设计。例如，如果一个元素的高度设置为 50vh，则该元素的高度将等于视口高度的 50%。无论视口的实际高度是多少，该元素的高度都会随之调整。

在移动端开发和响应式网页设计中，vh 单位经常被用来设置全屏背景、自适应容器或其他需要根据视口大小进行自动调整的元素尺寸。

注意：vh 单位在某些旧版本的浏览器中可能不被完全支持，特别是 IE9 及更早版本的浏览器。在使用 vh 单位时，最好进行测试以确保在目标浏览器中能够正常工作。

# html 相关标准

# 1.元数据：<meta> 元素

# 1.1 指定文档中的字符编码

# 1.2 添加作者和描述

# 1.3 主动学习：在搜索引擎中 description 的使用

# 1.4 其他类型的元数据

# 2. 在你的站点增加自定义图标

# 3. script标签

# 4. 为文档设定主语言

# 5. html 语义化

# 6. 绝对 URL 和相对 URL

# 7.上标和下标

实际效果：

# 8. 展示计算机代码

实际效果：

# 9. 从 object 到 iframe——其他嵌入技术

# 9.1 Iframe 详解

# 10. 响应式图片

# 11. px,inch,ppi,dpi,w 等单位描述

# 11.1 宽度描述符 w

# 11.2 设备的像素密度 DPI/PPI

# 11.3 英寸，像素，mm 的关系

# 11.4 vw

# 11.5 vh

html 相关标准

1.元数据：`<meta>` 元素

1.1 指定文档中的字符编码

1.2 添加作者和描述

1.3 主动学习：在搜索引擎中 description 的使用

1.4 其他类型的元数据

2. 在你的站点增加自定义图标

3. `script`标签

4. 为文档设定主语言

5. html 语义化

6. 绝对 URL 和相对 URL

7.上标和下标

8. 展示计算机代码

9. 从 object 到 iframe——其他嵌入技术

9.1 Iframe 详解

10. 响应式图片

11. px,inch,ppi,dpi,w 等单位描述

11.1 宽度描述符 w

11.2 设备的像素密度 DPI/PPI

11.3 英寸，像素，mm 的关系

11.4 vw

11.5 vh