阅读MDN发现的零碎知识笔记-Web开发基础（一）

跌倒的小黄瓜
62 阅读28分钟

平时光用react和封装好的工程化来开发，好多基础知识都忘了，快可以通过阅读MDN来回顾，发现Web开发的乐趣

关于大小写和空格的提示

你会注意到，在这篇文章中，我们要求你完全用小写字母命名文件夹和文件，没有空格。这是因为：

  1. 许多计算机，特别是网络服务器，是区分大小写的。因此，假如你把一张图片放在你的网站上 test-site/MyImage.jpg，然后在一个不同的文件中，你试图以 test-site/myimage.jpg 来调用该图片，它可能无法工作。
  2. 浏览器、网络服务器和编程语言对空格的处理并不一致。例如，如果你在文件名中使用空格，一些系统可能将其视为两个文件名。一些服务器会用“%20”（URL 中空格的字符代码）替换文件名中的区域，导致所有链接被破坏。最好用连字符而不是下划线来分隔单词。对比 my-file.html 与 my_file.html。

简言之，文件名中应使用连字符。谷歌搜索引擎把连字符当作单词的分隔符，但不会识别下划线。基于此，最好在一开始就养成习惯，文件夹和文件名使用小写，用短横线来分隔。这可以避免许多问题。

HTML 文档详解

以上介绍了一些基本的 HTML 元素，但孤木不成林。现在来看看单个元素如何彼此协同构成一个完整的 HTML 页面。回顾 文件处理 小节中创建的 index.html 示例：

HTMLCopy to Clipboard

<!doctype html<html lang="en-US"<head<meta charset="utf-8" /><meta name="viewport" content="width=device-width" /><titleMy test page</title</head<body<img src="images/firefox-icon.png" alt="My test image" /></body</html

这里有：

  • <!DOCTYPE html>——文档类型。这是必不可少的开头。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，这个元素用来关联 HTML 编写规范，以供自动查错等功能所用。而在当今，它作用有限，可以说仅用于保证文档正常读取。现在知道这些就足够了。
  • <html></html>——<html> 元素。该元素包含整个页面的所有内容，有时候也称作根元素。里面也包含了 lang 属性，写明了页面的主要语种。
  • <head></head>——<head> 元素。所有那些你加到页面中，且不向用户展示的页面内容，都以这个元素为容器。其中包含诸如提供给搜索引擎的关键字和页面描述、用于设置页面样式的 CSS、字符集声明等等。
  • <meta charset="utf-8">——该元素指明你的文档使用 UTF-8 字符编码，UTF-8 包括世界绝大多数书写语言的字符。它基本上可以处理任何文本内容。以它为编码还可以避免以后出现某些问题，没有理由再选用其他编码。
  • <meta name="viewport" content="width=device-width">——视口元素可以确保页面以视口宽度进行渲染，避免移动端浏览器上因页面过宽导致缩放。
  • <title></title>——<title> 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
  • <body></body>——<body> 元素。该元素包含期望让用户在访问页面时看到的全部内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

图像

重温一下 <img> 元素：

HTMLCopy to Clipboard

<img src="images/firefox-icon.png" alt="My test image" />

像之前所讲，该元素通过包含图像文件路径的地址属性 src，可在所在位置嵌入图像。

该元素还包括一个替换文字属性 alt，是图像的描述内容，用于当图像不能被用户看见时显示，不可见的原因可能是：

  1. 用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读 alt 属性的内容。
  2. 有些错误使图像无法显示。可以试着故意将 src 属性里的路径改错。保存并刷新页面就可以在图像位置看到：

alt 属性的关键字即“描述文本”。alt 文本应向用户完整地传递图像要表达的意思。用 "测试图片" 来描述 Firefox 标志并不合适，修改成 "Firefox 标志：一只盘旋在地球上的火狐" 就好多了。

可以试着为图像编写一些更好的 alt 文本。

引入css的原始方法

  1. 打开 index.html 文件，然后将下面一行粘贴到文档头部（也就是 <head> 和 </head> 标签之间）。
  2. HTMLCopy to Clipboard
<link href="styles/style.css" rel="stylesheet" />

css选择器

不同类型的选择器

选择器有许多不同的类型。上面只介绍了元素选择器，用来选择 HTML 文档中给定的元素。但是选择操作可以更加具体。下面是一些常用的选择器类型：

选择器名称选择的内容示例
元素选择器（也称作标签或类型选择器）所有指定类型的 HTML 元素p 选择

ID 选择器具有特定 ID 的元素。单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID#my-id 选择

或

类选择器具有特定类的元素。单一页面中，一个类可以有多个实例.my-class 选择

和

属性选择器拥有特定属性的元素img[src] 选择 但不是
伪类选择器特定状态下的特定元素（比如鼠标指针悬停于链接之上）a:hover 选择仅在鼠标指针悬停在链接上时的 元素

选择器的种类远不止于此，更多信息请参阅 MDN 的选择器指南。

字体是如何引入到页面中的

  1. 第一步，找到之前在你的网站会是什么样子？中保存的 Google Font 输出的地址。并以 <link> 元素的形式添加进 index.html 文档头部（ <head> 和 </head> 之间的任意位置）。代码如下：
  2. HTMLCopy to Clipboard
<linkhref="https://fonts.googleapis.com/css?family=Open+Sans"rel="stylesheet" />
  1. 这段代码将你的页面链接到一个样式表，该样式表将 Open Sans 字体家族与你的网页一起加载。
  2. 接下来，删除 style.css 文件中已有的规则。虽然测试是成功的，但是红字看起来并不太舒服。
  3. 添加以下几行（如下图所示），用你在你的网站会是什么样子？中选择的 font-family 替换 font-family。font-family 属性指的是你想用于文本的字体。这个规则为整个页面定义了一个全局的基本字体和字体大小。由于 <html> 是整个页面的父元素，它里面的所有元素都继承相同的 font-size 和 font-family。
  4. CSSCopy to Clipboard
html {font-size: 10px; /* px 表示“像素（pixel）”: 基础字号为 10 像素 */font-family: "Open Sans", sans-serif; /* 这应该是你从 Google Fonts 得到的其余输出。 */}

图像居中

CSSCopy to Clipboard

img {display: block;margin: 0 auto;}

最后，我们把图像居中来使页面更美观。可以复用 body 的 margin: 0 auto，但有一些差异，需要额外的设置来使 CSS 发挥作用。

<body> 元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是行级元素，不具备块级元素的一些功能。所以为了使图像有外边距，我们必须使用 display: block 给予其块级行为。

了解下javascript

JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括：

  • 浏览器应用程序接口（API）——浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成 3D 图像与音频样本等等。
  • 第三方 API——让开发者可以在自己的站点中整合其他内容提供者（Twitter、Facebook 等）提供的功能。
  • 第三方框架和库——用来快速构建网站和应用。

为什么将<script> 放在 HTML 文件的底部

我们将 <script> 放在 HTML 文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略。

prompt 都快忘了这个

运行示例代码，弹出输入用户名的对话框，试着按下 取消 按钮。此时标题会显示为“Mozilla 酷毙了，null”。这是因为取消提示对话框后值将设置为 null，这是 JavaScript 中的一个特殊值，表示引用不存在。

也可以不输入任何名字直接按 确认，你的标题会显示为“Mozilla 酷毙了，”，原因么显而易见。

要避免这些问题，应该更新 setUserName() 来检查用户是否输入了 null 或者空名字：

function setUserName() {
  let myName = prompt("请输入你的名字。");
  if (!myName) {
    setUserName();
  } else {
    localStorage.setItem("name", myName);
    myHeading.textContent = "Mozilla 酷毙了，" + myName;
  }
}

用人话说就是：如果 myName 没有值或值为 null，就再次从头运行setUserName()。如果有值（上面的表达式结果不为真），就把值存储到 localStorage 并且设置标题。

万维网是如何工作的

假如你生活在一个封闭的村子叫做“盘溪新村”，村子盛产苹果。

  • 互联网：好比地球上纵横交错的道路。

  • 网络连接：道路通到了村子路口。从此，村子里的苹果就可以运出去卖了。

  • TCP/IP：为了将村里的苹果能规范有效的运卖出去而不出问题，村长作出如下规定：“用规格刚好 20 cm * 20 cm * 20 cm 的泡沫箱来装，之后外面又用相应规格的纸箱包裹上，最后打上透明胶”。并且要求，对方收到时，一定要外包装完好，不然就会补发。而且还给对方发了一张发货单，明确说明了，苹果有多少，是用什么方法包装的，只有货和发货单对上了，对方才会确认收货。

  • DNS：突然一天，郭德纲想吃苹果，就跟于谦说，“我听说盘溪新村（域名）的苹果好，要他们那个套餐一选项啊！”，于谦一听，得，也不知道盘溪新村在哪，打开地图查（DNS）吧，一查，好嘛，江苏省苏州市（IP 地址），于是于谦去了苏州，找了村子，告诉村长，要套餐一，要用顺丰快递，并且留下了北京德云社的地址。

  • HTTP：过了几天，德云社的人一看，有快递来了，来了这么一句，“只收‘顺丰’，拒收其他快递”。司机忙说，“是顺丰，是顺丰”，这才对上暗号，德云社的人收下了货。

  • 组成文件：送来的货可不止一车，而且也不止一种苹果，这车是红富士，那车黄富士的。

    • 代码：有点像，村长事先安排的说明书，让司机到了地方，如何卸车，货放到什么位置，而德云社的看说明书，知道什么样的苹果放到什么位置上，什么样苹果如何食用最佳，等等。
    • 资源：不同种类的苹果。

一点拙见，在下抛砖引玉，希望有更好理解的比喻。

  • 网络连接: 允许你在互联网上发送和接受数据。基本上和你家到商店的街道差不多。

  • TCP/IP: 传输控制协议和因特网互连协议是定义数据如何传输的通信协议。这就像你去商店购物所使用的交通方式，比如汽车或自行车（或是你能想到的其他可能）。

  • DNS: 域名系统服务器像是一本网站通讯录。当你在浏览器内输入一个网址时，浏览器获取网页之前将会查看域名系统。浏览器需要找到存放你想要的网页的服务器，才能发送 HTTP 请求到正确的地方。就像你要知道商店的地址才能到达那。

  • HTTP: 超文本传输协议是一个定义客户端和服务器间交流的语言的协议（protocol ）。就像你下订单时所说的话一样。

  • 组成文件: 一个网页由许多文件组成，就像商店里不同的商品一样。这些文件有两种类型：

    • 代码 : 网页大体由 HTML、CSS、JavaScript 组成，不过你会在后面看到不同的技术。
    • 资源 : 这是其他组成网页的东西的集合，比如图像、音乐、视频、Word 文档、PDF 文件。

解析组成文件的顺序 ，浏览器解析文件

当浏览器向服务器发送请求获取 HTML 文件时，HTML 文件通常包含 <link> 和 <script> 元素，这些元素分别指向了外部的 CSS 样式表文件和 JavaScript 脚本文件。了解这些文件被浏览器解析的顺序是很重要的：

  • 浏览器首先解析 HTML 文件，并从中识别出所有的 <link> 和 <script> 元素，获取它们指向的外部文件的链接。
  • 继续解析 HTML 文件的同时，浏览器根据外部文件的链接向服务器发送请求，获取并解析 CSS 文件和 JavaScript 脚本文件。
  • 接着浏览器会给解析后的 HTML 文件生成一个 DOM 树（在内存中），会给解析后的 CSS 文件生成一个 CSSOM 树（在内存中），并且会编译和执行解析后的 JavaScript 脚本文件。
  • 伴随着构建 DOM 树、应用 CSSOM 树的样式、以及执行 JavaScript 脚本文件，浏览器会在屏幕上绘制出网页的界面；用户看到网页界面也就可以跟网页进行交互了。

块级元素和内联元素 官方概念

在 HTML 中有两种你需要知道的重要元素类别，块级元素和内联元素。

  • 块级元素在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新的行上。块级元素通常是页面上的结构元素。例如，一个块级元素可能代表标题、段落、列表、导航菜单或页脚。一个块级元素不会嵌套在一个内联元素里面，但它可能嵌套在另一个块级元素里面。
  • 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行。它通常与文本一起使用，例如，<a> 元素创建一个超链接，<em> 和 <strong> 等元素创建强调。

HTML5 重新定义了元素的类别：见元素内容分类。尽管这些新的定义更精确，但却比上述的“块级元素”和“内联元素”更难理解

在这篇文章中提到的“块”和“内联”，不应该与 CSS 盒子的类型中的同名术语相混淆。尽管它们默认是相关的，但改变 CSS 显示类型并不会改变元素的分类，也不会影响它可以包含和被包含于哪些元素。防止这种混淆也是 HTML5 摒弃这些术语的原因之一。

空元素

不是所有元素都拥有开始标签、内容和结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。这些元素被称为空元素。例如：元素 <img> 是用来在页面插入一张指定的图片。

布尔属性

有时你会看到没有值的属性，这也是完全可以接受的。这些属性被称为布尔属性。布尔属性只能有一个值，这个值一般与属性名称相同。例如，考虑 disabled 属性，你可以将其分配给表单输入元素。用它来禁用表单输入元素，这样用户就不能输入了。被禁用的元素通常有一个灰色的外观。示例如下：

HTMLPlayCopy to Clipboard

<input type="text" disabled="disabled" />

方便起见，我们完全可以将其写成以下形式：

HTMLPlayCopy to Clipboard

<!-- 使用 disabled 属性来防止终端用户输入文本到输入框中 --><input type="text" disabled /><!-- 下面这个输入框不包含 disabled 属性，所以用户可以向其中输入 --><input type="text" />

在搜索引擎中 description 的使用

description 也被使用在搜索引擎显示的结果页中。下面通过一个例子来说明：

  1. 访问 MDN Web 文档的首页。
  2. 查看网页源代码（通过鼠标右键点击网页在弹出的菜单中选择查看网页源代码）。
  3. 找到 description meta 标签。就和如下展示的这样（可能会时常改变）：
  4. HTMLCopy to Clipboard
<metaname="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. 现在，在你喜欢的搜索引擎里搜索“MDN Web Docs”（下图展示的是在谷歌搜索里的情况）。你会看到 description <meta> 和 <title> 元素如何在搜索结果里显示——很值得这样做哦！

备注： 在谷歌搜索里，在主页面链接下面，你将看到一些相关子页面——这些是站点链接，可以在 Google's webmaster tools 配置——这是一种可以使你的站点对搜索引擎更友好的方式。

备注： 许多 <meta> 特性已经不再使用。例如，keyword <meta> 元素（<meta name="keywords" content="fill, in, your, keywords, here">，为搜索引擎提供关键词，用于确定该页面与不同搜索词的相关性）已经被搜索引擎忽略了，因为作弊者填充了大量关键词到 keyword，错误地引导搜索结果。

其他类型的元数据

当你在网站上查看源码时，你也会发现其他类型的元数据。你在网站上看到的许多功能都是专有创作，旨在向某些网站（如社交网站）提供可使用的特定信息。

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

HTMLCopy to Clipboard

<metaproperty="og:image"content="https://developer.mozilla.org/mdn-social-share.png" /><metaproperty="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" />

上面代码展现的一个效果就是，当你在 Facebook 上链接到 MDN Web 文档时，该链接将显示一个图像和描述：这为用户提供更丰富的体验。

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

HTMLCopy to Clipboard

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

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

为了进一步丰富你的网站设计，你可以在元数据中添加对自定义图标的引用，它们会在某些场景下显示。最常见的用例为 favicon（为“favorites icon”的缩写，在浏览器的“收藏夹”及“书签”列表中显示）。

这个不起眼的图标已经存在很多年了，16 像素的方形图标是第一种类型。你可以看见（取决于浏览器）这些图标出现在浏览器每一个打开的标签页中以及书签面板中的书签页面旁边。

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

  1. 将其保存在与网站的索引页面相同的目录中，以 .ico 格式保存（大多数浏览器支持更通用的格式，如 .gif 或 .png）
  2. 将以下行添加到 HTML 的 <head> 块中以引用它：
  3. HTMLCopy to Clipboard
<link rel="icon" href="favicon.ico" type="image/x-icon" />

下面是一个 favicon 出现在书签面板中的例子：

如今还有很多其他的图标类型可以考虑。例如，你可以在 MDN Web 文档的源代码中找到它：

HTMLCopy to Clipboard

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

这些注释解释了每个图标的用途——这些元素涵盖的东西提供一个高分辨率图标，这些高分辨率图标当网站保存到 iPad 的主屏幕时使用。

不用担心现在实现所有这些类型的图标——这是一个相当先进的功能，不要求你有这方面的知识来通过课程的进展。这里的主要目的是让你提前了解有这一样东西，以防当你浏览其他网站的源代码时不理解源代码的含义。

为文档设定主语言

最后，值得一提的是可以（而且有必要）为站点设定语言，这个可以通过添加 lang 属性到 HTML 开始的标签中来实现（就像 meta-example.html 那样），如下所示：

HTMLCopy to Clipboard

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

这在很多方面都很有用。如果你的 HTML 文档的语言设置好了，那么你的 HTML 文档就会被搜索引擎更有效地索引（例如，允许它在特定于语言的结果中正确显示），对于那些使用屏幕阅读器的视障人士也很有用（例如，法语和英语中都有“six”这个单词，但是发音却完全不同）。

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

HTMLCopy to Clipboard

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

这些代码是根据 ISO 639-1 标准定义的。你可以在 HTML 和 XML 的语言标签找到更多相关内容。

文档片段

超链接除了可以链接到文档外，也可以链接到 HTML 文档的特定部分（被称为文档片段）。要做到这一点，你必须首先给要链接到的元素分配一个 id 属性。通常情况下，链接到一个特定的标题是有意义的，这看起来就像下面这样：

<h2 id="Mailing_address"邮寄地址</h2

为了链接到那个特定的 id，要将它放在 URL 的末尾，并在前面包含井号（），例如：

<p
  要提供意见和建议，请将信件邮寄至<a href="contacts.html#Mailing_address"我们的地址</a。
</p

你甚至可以在同一份文档下，通过链接文档片段，来链接到当前文档的另一部分：

<p本页面底部可以找到<a href="#Mailing_address"公司邮寄地址</a。</p

使用清晰的链接措辞

  • 不要重复 URL 作为链接文本的一部分——URL 看起来很丑，当屏幕阅读器一个字母一个字母的读出来的时候听起来就更丑了。
  • 不要在链接文本中说“链接”或“链接到”——它只是无用的内容。屏幕阅读器告诉人们有一个链接。可视化用户也会知道有一个链接，因为链接通常是用不同的颜色设计的，并且存在下划线（这个惯例一般不应该被打破，因为用户习惯了它）。
  • 保持你的链接标签尽可能短——这非常重要，因为屏幕阅读器需要解释整个链接文本。
  • 尽量减少相同文本的多个副本链接到不同地方的情况。如果存在标记为“单击此处”、“单击此处”、“单击此处”这样脱离上下文的链接文本，容易对使用屏幕阅读器的用户带来问题。

链接到非 HTML 资源——留下清晰的指示

当链接到一个需要下载的资源（如 PDF 或 Word 文档）或流媒体（如视频或音频）或有另一个潜在的意想不到的效果（打开一个弹出窗口），你应该添加明确的措辞，以减少混乱。

如下的例子会让人反感：

  • 你在使用低带宽连接的情况下，点击一个链接，意外地突然开始下载大文件。

让我们看看一些例子，看看在这里可以使用什么样的文本：

<p<a href="https://www.example.com/large-report.pdf"
    下载销售报告（PDF，大小为 10 MB）</a</p<p<a href="https://www.example.com/video-stream/" target="_blank"
    观看视频（将在新标签页中播放，HD 画质）</a</p

在下载链接时使用 download 属性

当你链接到要下载的资源而不是在浏览器中打开时，你可以使用 download 属性来提供一个默认的保存文件名。下面是一个 Firefox 的 Windows 最新版本下载链接的示例：

<ahref="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"download="firefox-latest-64bit-installer.exe"
  下载最新的 Firefox 中文版 - Windows（64 位）
</a

电子邮件链接

当点击一个链接或按钮时，可能会开启新的邮件的发送而不是连接到一个资源或页面。这种场景可以使用 <a> 元素和 mailto: URL 协议实现。

其最基本和最常用的使用形式为一个指明收件人电子邮件地址的 mailto: 链接。例如：

<a href="mailto:nowhere@mozilla.org"向 nowhere 发邮件</a

这会创建一个链接，看起来像这样：向 nowhere 发邮件。

实际上，电子邮件地址是可选的。如果你省略了它（也就是说，你的 href 属性仅仅只是简单的“mailto:”），发送新的电子邮件的窗口也会被用户的邮件客户端打开，只是没有收件人的地址信息，这通常在“分享”链接是很有用的，用户可以给他们选择的地址发送邮件。

除了电子邮件地址，你还可以提供其他信息。事实上，任何标准的邮件头字段可以被添加到你提供的 mailto URL 中。其中最常用的是主题（subject）、抄送（cc）和主体（body）（这不是一个真正的标头字段，但允许你为新邮件指定一个简短的内容消息）。每个字段及其值被指定为查询项。

下面是一个包含 cc、bcc、主题和主体的示例：

<ahref="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email"
  发送含有 cc、bcc、主题和主体的邮件
</a

备注： 每个字段的值必须使用 URL 编码，即使用百分号转义的非打印字符（不可见字符如制表符、换行符、分页符）和空格。同时注意使用问号（?）来分隔主 URL 与参数值，以及使用 & 符来分隔 mailto: URL 中的各个参数。这是标准的 URL 查询标记方法。阅读 GET 方法以了解哪种 URL 查询标记方法是更常用的。

引用

HTML 也有用于标记引用的特性，至于使用哪个元素标记，取决于你引用的是一块还是一行。

块引用

如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用 <blockquote> 元素包裹起来表示，并且在 cite 属性里用 URL 来指向引用的资源。例如，下面的示例代码就是引用的 MDN 的 <blockquote> 元素页面：

<p
  The <strongHTML <code<blockquote></code Element</strong (or<emHTML Block Quotation Element</em) indicates that the enclosed text is an
  extended quotation.
</p

要把这些转换为块引用，我们要这样做：

HTMLPlayCopy to Clipboard

<pHere is a blockquote:</p<blockquotecite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote"<p
    The <strongHTML <code<blockquote></code Element</strong (or<emHTML Block Quotation Element</em) indicates that the enclosed text is
    an extended quotation.</p</blockquote

浏览器的默认样式会将其呈现为缩进的段落，作为引用的指示；引号上面的段落是为了证明这一点。

行内引用

除了使用 <q> 元素以外，行内元素用同样的方式工作。例如，下面的标记包含了从 MDN <q> 页面的引用：

HTMLPlayCopy to Clipboard

<p
  The quote element — <code<q></code — is<q cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/q"intended for short quotations that don't require paragraph breaks.</q</p

浏览器默认将其作为普通文本放入引号内表示引用，就像下面：

引文

cite 属性的内容看起来很有用，但不幸的是，浏览器、屏幕阅读器并没有充分利用它。如果不使用 JavaScript 或 CSS 编写自己的解决方案，就没有办法让浏览器显示 cite 的内容。如果你想在页面上提供引文的来源，你需要在文本中通过链接或其他适当的方式来提供它。

这里有 <cite> 元素，但它是为了包含所引用资源的标题（如书名）。然而，你没有理由不把 <cite> 内的文字以某种方式链接到引用源。

HTMLPlayCopy to Clipboard

<p>
  According to the
  <a href="/zh-CN/docs/Web/HTML/Element/blockquote">
    <cite>MDN blockquote page</cite></a
  >:
</p>

<blockquote
  cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote">
  <p>
    The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
    an extended quotation.
  </p>
</blockquote>

<p>
  The quote element — <code>&lt;q&gt;</code> — is
  <q cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/q"
    >intended for short quotations that don't require paragraph breaks.</q
  >
  — <a href="/zh-CN/docs/Web/HTML/Element/q"> <cite>MDN q page</cite></a
  >.
</p>

引文默认的字体样式为斜体。

展示计算机代码

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

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

让我们看看一些例子。你应该尝试运行一下（尝试运行一下 other-semantics.html 样例文件的拷贝）：

标记时间和日期

HTML 还支持将时间和日期标记为可供机器识别的格式的 <time> 元素，例如：

HTMLCopy to Clipboard

<time datetime="2016-01-20"2016 年 1 月 20 日</time

为什么需要这样做？因为世界上有许多种书写日期的格式，上边的日期可能被写成：

  • 20 January 2016
  • 20th January 2016
  • Jan 20 2016
  • 20/06/16
  • 06/20/16
  • The 20th of next month
  • 20e Janvier 2016
  • 2016 年 1 月 20 日
  • 等等

但是这些不同的格式不容易被电脑识别——假如你想自动抓取页面上所有事件的日期并将它们插入到日历中，<time> 元素允许你附上清晰的、可被机器识别的时间或日期来实现这种需求。

上述基本的例子仅仅提供了一种简单的可被机器识别的日期格式，这里还有许多其他支持的格式，例如：

<!-- 标准简单日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含时间，小时和分钟数 -->
<time datetime="19:30">19:30</time>
<!-- 还可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和时间 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- 含有时区偏移值的日期时间 -->
<time datetime="2016-01-20T19:30+01:00"
  >7.30pm, 20 January 2016 is 8.30pm in France</time
>
<!-- 提及特定周 -->
<time datetime="2016-W04">The fourth week of 2016</time>

文本格式进阶，好多之前不知道的文本标记功能

实现语义化标记

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

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

HTML 布局元素细节

理解所有 HTML 区段元素具体含义是很有益处的，这一点将随着个人 web 开发经验的逐渐丰富日趋显现。更多细节请查阅 HTML 元素参考。现在，你只需要理解以下主要元素的意义：

  • <main> 存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body> 中。最好不要把它嵌套进其他元素。
  • <article> 包围的内容即一篇文章，与页面其他部分无关（比如一篇博文）。
  • <section> 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以 标题 作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。
  • <aside> 包含一些间接信息（术语条目、作者简介、相关链接，等等）。
  • <header> 是简介形式的内容。如果它是 <body> 的子元素，那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素，那么它是这些部分特有的页眉（此 <header> 非彼 标题）。
  • <nav> 包含页面主导航功能。其中不应包含二级链接等内容。
  • <footer> 包含了页面的页脚部分。

无语义元素

有时你会发现，对于一些要组织的项目或要包装的内容，现有的语义元素均不能很好对应。有时候你可能只想将一组元素作为一个单独的实体来修饰来响应单一的用 CSS 或 JavaScript。为了应对这种情况，HTML 提供了 <div> 和 <span> 元素。应配合使用 class 属性提供一些标签，使这些元素能易于查询。

<span> 是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时

<div> 是一个块级无语义元素，应仅用于找不到更好的块级元素时，或者不想增加特定的意义时。例如，一个电子商务网站页面上有一个一直显示的购物车组件

HTML调试

developer.mozilla.org/zh-CN/docs/…

avatar
文章
阅读
粉丝