失望的石榴

Appearance

HTML ​

HTML 头部 ​

HTML 头部包含 HTML<head>元素的内容，它的作用是保存页面的一些元数据。

常见头部元素：

  1. 标题<title>

    用于设置网页标题

    html
    <head>
  <meta charset="utf-8" />
  <title>我的测试页面</title>
</head>

  2. 元数据：<meta> 元素

    指定文档字符编码

    html
    <meta charset="utf-8" />

  3. 网页增加自定义图标

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

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

    以 .ico 格式保存（大多数浏览器支持更通用的格式，如 .gif 或 .png）

  4. 在 HTML 中应用 CSS 和 JavaScript

    • <link> 元素经常位于文档的头部，它有 2 个属性，rel="stylesheet" 表明这是文档的样式表，而 href 包含了样式表文件的路径：

      html
      <link rel="stylesheet" href="my-css-file.css" />

    • <script>元素用于加载js文件，src用于指向js文件的加载路径，defer用于告诉浏览器html解析完了再加载js文件，这样你就不会因为 JavaScript 试图访问页面上不存在的 HTML 元素而产生错误：

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

  5. 为文档设定主语言

    可以（而且有必要）为站点设定语言，这个可以通过添加lang 属性到 HTML 开始的标签中来实现

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

块级元素和内联元素 ​

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

块级元素：

块级元素以块的形式展现，一个块级元素出现在前面内容的新行上，一个块级元素不会嵌套在一个内联样式中，但可以嵌套在其他块级元素中

内联样式：

内联元素通常出现在块级元素中并环绕文档内容的一小部分，内联元素不会导致文本换行。它通常与文本一起使用

文本处理 ​

段落和标题 ​

在 HTML 中，每个段落是通过 <p>元素标签进行定义的：

html
<p>我是一个段落，千真万确。</p>

每个标题（Heading）都必须被包裹在一个标题元素中：

html
<h1>我是文章的标题</h1>

共有六种标题元素标签——h1、h2、h3、h4、h5 和 h6。每个元素代表文档中不同级别的内容：<h1> 表示主标题，<h2> 表示二级子标题，<h3> 表示三级子标题，依此类推

编辑结构层次 ​

在一个故事中，<h1> 表示故事的名字，<h2> 表示每个章节的标题，<h3> 表示每个章节下的子标题，以此类推。

html
<h1>三国演义</h1>

<p>罗贯中</p>

<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>

<p>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉……</p>

<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>

<p>且说董卓字仲颖，陇西临洮人也，官拜河东太守，自来骄傲。当日怠慢了玄德，张飞性发，便欲杀之……</p>

<h3>却说张飞</h3>

<p>却说张飞饮了数杯闷酒，乘马从馆驿前过，见五六十个老人，皆在门前痛哭。飞问其故，众老人答曰：“督邮逼勒县吏，欲害刘公；我等皆来苦告，不得放入，反遭把门人赶打！”……</p>

所涉及的元素具体代表什么，完全取决于作者编辑的内容，只要层次结构是合理的。在创建此类结构时，只需要记住一些最佳实践：

  • 最好只对每个页面使用一次 <h1>——这是顶级标题，所有其他标题位于层次结构中的下方。
  • 请确保在层次结构中以正确的顺序使用标题。不要使用 <h3> 来表示副标题，后面再跟 <h2> 来表示二级副标题——这是没有意义的，会导致奇怪的结果。
  • 在现有的六个标题层次中，除非觉得有必要，否则应该争取每页使用不超过三个。有很多层次的文件（例如，深层次的标题层次）会变得笨重，难以浏览。在这种情况下，如果可能的话，建议将内容分散到多个页面。

列表 ​

无序列表 ​

无序列表用于标记列表项目顺序无关紧要的列表

html
<ul>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ul>

输出：

  • 豆浆

  • 油条

  • 豆汁

  • 焦圈

有序列表 ​

有序列表需要按照项目的顺序列出来

html
<ol>
  <li>沿这条路走到头</li>
  <li>右转</li>
  <li>直行穿过第一个十字路口</li>
  <li>在第三个十字路口处左转</li>
  <li>继续走 300 米，学校就在你的右手边</li>
</ol>

输出：

  1. 沿着条路走到头

  2. 右转

  3. 直行穿过第一个十字路口

  4. 在第三个十字路口处左转

  5. 继续走 300 米，学校就在你的右手边

嵌套列表 ​

将一个列表嵌入到另一个列表是完全可以的。

html
<ol>
  <li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀，调成“腌料”，鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀，腌渍半小时。</li>
  <li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀，调成“综合调味料”。</li>
  <li>鸡丁腌好以后，色拉油下锅烧热，先将鸡丁倒入锅内，用大火快炸半分钟，炸到变色之后，捞出来沥干油汁备用。</li>
  <li>在锅里留下约两大匙油，烧热后将切好的干辣椒下锅，用小火炒香后，再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅，用大火快炒片刻后，再倒入“综合调味料”继续快炒。
    <ul>
      <li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。</li>
      <li>如果你在北方，可加入黄瓜丁、胡萝卜丁和花生米，翻炒后起锅。</li>
    </ul>
  </li>
</ol>

输出：

  1. 先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀，调成“腌料”，鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀，腌渍半小时。
  2. 用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀，调成“综合调味料”。
  3. 鸡丁腌好以后，色拉油下锅烧热，先将鸡丁倒入锅内，用大火快炸半分钟，炸到变色之后，捞出来沥干油汁备用。
  4. 在锅里留下约两大匙油，烧热后将切好的干辣椒下锅，用小火炒香后，再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅，用大火快炒片刻后，再倒入“综合调味料”继续快炒。
    • 如果你采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。
    • 如果你在北方，可加入黄瓜丁、胡萝卜丁和花生米，翻炒后起锅。

描述列表 ​

这种列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等。

重点强调 ​

在日常用语中，我们常常会加重某个字的读音，或者用加粗等方式突出某句话的重点。与此类似，HTML 也提供了相应的标签，用于标记某些文本，使其具有加粗、倾斜、下划线等效果。

html
<dl>
  <dt>内心独白</dt>
    <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
  <dt>语言独白</dt>
    <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
  <dt>旁白</dt>
    <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

输出：

内心独白

​ 戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。

语言独白

​ 戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。

旁白

​ 戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、 以及一些背景信息等。

请注意：一个术语可以同时有多个描述，比如说：

html
<dl>
  <dt>旁白</dt>
  <dd>
    戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。
  </dd>
  <dd>
    写作中，指与当前主题相关的一段内容，通常不适于直接置于内容主线中，因此置于附近的其他位置（通常位于主线内容旁边一个文本框内）。
  </dd>
</dl>

输出：

旁白

​ 戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以 及一些背景信息等。

​ 写作中，指与当前主题相关的一段内容，通常不适于直接置于内容主线中，因此置于附近的其他位置（通常位于主线内容 旁边一个文本框内）。

强调 ​

在 HTML 中我们用 <em>（emphasis）元素来标记这样的情况。这样做既可以让文档读起来更有趣，**也可以被屏幕阅读器识别，并以不同的语调发出。**浏览器默认样式为斜体，但你不应该纯粹为了获得斜体风格而使用这个标签。

html
<p>我很<em>庆幸</em>你没有<em>迟到</em>。</p>

输出：

​ 我很庆幸你没有迟到。

强烈的重要性 ​

为了强调重要的词，在口语方面我们往往用重音强调，在书面用语中则是用粗体字来达到强调的效果。

html
<p>这杯液体<strong>毒性很大</strong>。</p>

<p>就指望你了，千万<strong>不要</strong>迟到！</p>

输出：

​ 这杯液体毒性很大。

​ 就指望你了，千万不要迟到！

超链接 ​

通过将文本或其他内容包裹在 <a>元素内，并给它一个包含网址的 href 属性（也称为超文本引用或目标，它将包含一个网址）来创建一个基本链接。

块级链接 ​

就像之前提到的那样，任何内容，甚至块级内容都可以作为链接出现。如果想让标题元素变为链接，就把它包裹在锚点元素（<a>）内，像这个代码段一样：

html
<a href="https://developer.mozilla.org/zh-CN/"><h1>MDN Web 文档</h1></a>
<p>自从 2005 年起，就开始记载包括 CSS、HTML、JavaScript 等网络技术。</p>

图片链接 ​

如果有需要作为链接的图片，使用 <a> 元素来包裹要引用图片的 <img> 元素。

html
<a href="https://developer.mozilla.org/zh-CN/">
  <img src="mdn_logo.svg" alt="MDN Web 文档主页" />
</a>

使用 title 属性添加支持信息 ​

你可能要添加到你的链接的另一个属性是 title。这旨在包含关于链接的补充信息，当鼠标指针悬停在链接上时，标题将作为提示信息出现

html
<p>
  我创建了一个指向<a href="https://www.mozilla.org/zh-CN/"
   title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">Mozilla 主页</a>的超链接。
</p>

文档片段 ​

超链接除了可以链接到文档外，也可以链接到 HTML 文档的特定部分（被称为文档片段）。

你必须首先给要链接到的元素分配一个 id 属性。

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

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

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

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

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

在下载链接时使用 download 属性 ​

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

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

文档与网站架构 ​

HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧义地表示上文所讲的内容区段，屏幕阅读器等辅助技术可以识别这些元素，并帮助执行“找到主导航“或”找到主内容“等任务。

用于构建内容的 HTML ​

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

html
<header>：页眉。
<nav>：导航栏。
<main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。存放每个页面独有的内容。每个页面只能拥有一个		    <main>，放在<body>中，最好不要把它嵌套在其他元素中
<aside>：侧边栏，经常嵌套在 <main> 中。
<footer>：页脚。

无语义元素 ​

对于那些语义元素无法满足得内容，HTML提供了无语义元素：<div>和 <span>。应配合使用 class 属性提供一些标签，使这些元素能易于查询。

换行与水平分割线 ​

<br>：换行元素 ​

<br> 可在段落中进行换行；<br> 是唯一能够生成多个短行结构

<hr>：换行元素 ​

<hr> 元素在文档中生成一条水平分割线，表示文本中主题的变化

多媒体与嵌入 ​

图片 ​

路径 ​

我们可以用 <img>元素来把图片放到网页上。它是一个空元素（它不需要包含文本内容或闭合标签），最少只需要一个 src

举个例子来看，如果你有一幅文件名为 dinosaur.jpg 的图片，且它与你的 HTML 页面存放在相同路径下，那么你可以这样嵌入它：

html
<img src="dinosaur.jpg">

如果这张图片存储在和 HTML 页面同路径的 images 文件夹下（这也是 Google 推荐的做法，利于SEO/索引），那么你可以采用如下形式：

html
<img src="images/dinosaur.jpg">

备注： 搜索引擎也读取图像的文件名并把它们计入 SEO。因此你应该给你的图片取一个描述性的文件名

备选文本 ​

下一个我们讨论的属性是 alt ，它的值应该是对图片的文字描述，用于在图片无法显示或不能被看到的情况。

html
<img src="images/dinosaur.jpg" alt="恐龙骨架:恐龙骨架的头部和躯干;它有一个大脑袋和长而锋利的牙齿">

那么，为什么我们需要备选文本呢？它可以派上用场的原因有很多：

  • 用户有视力障碍，通过屏幕阅读器来浏览网页。事实上，给图片一个备选的描述文本对大多数用户都是很有用的。
  • 就像上面所说的，你也许会把图片的路径或文件名拼错。
  • 浏览器不支持该图片类型。某些用户仍在使用纯文本的浏览器，例如 Lynx，这些浏览器会把图片替换为描述文本。
  • 你会想提供一些文字描述来给搜索引擎使用，例如搜索引擎可能会将图片的文字描述和查询条件进行匹配。
  • 用户关闭的图片显示以减少数据的传输，这在手机上是十分普遍的，并且在一些国家带宽有限且昂贵。

宽度和高度 ​

你可以用宽度和高度属性来指定你的图片的高度和宽度

html
<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">

在正常的情况下，这不会对显示产生很大的影响，但是如果图片没有显示，你会注意到浏览器会为要显示的图片留下一定的空间：

Image titles 图片标题 ​

这会给我们一个鼠标悬停提示，看起来就像链接标题：

html
<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

与CSS背景图片的区别 ​

css插入的图片完全没有语义上的意义，它们不能有任何备选文本，也不能被屏幕阅读器识别。这就是 HTML 图片有用的地方了。

视频和音频内容 ​

视频 ​

<video>允许你轻松地嵌入一段视频。一个简单的例子如下：

html
<video src="rabbit320.webm" controls>
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

当中的一些属性如下：

  • src：src 属性指向你想要嵌入网页当中的视频资源
  • controls：浏览器提供的控件界面，用户能够控制视频和音频的回放功能。
  • </video>标签内的内容：这个叫做后备内容 — 当浏览器不支持 <video> 标签的时候，就会显示这段内容

使用多个播放源以提高兼容性 ​

html
<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

现在我们将 src 属性从 <video> 标签中移除，转而将它放在几个单独的标签<source> 当中。在这个例子当中，浏览器将会检查 <source> 标签，并且播放第一个与其自身 codec 相匹配的媒体。你的视频应当包括 WebM 和 MP4 两种格式，这两种在目前已经足够支持大多数平台和浏览器。

其他 <video> 特性 ​

  • width 和 height：你可以用属性控制视频的尺寸，视频会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸
  • autoplay：这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。
  • loop：这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。
  • muted：这个属性会导致媒体播放时，默认关闭声音。
  • poster：视频播放前封面
  • preload：这个属性被用来缓冲较大的文件，有 3 个值可选："none" ：不缓冲、"auto" ：页面加载后缓存媒体文件、"metadata" ：仅缓冲文件的元数据

显示音轨文本 ​

现在，我们将讨论一个略微先进的概念，这个概念将会十分的有用。许多人不想（或者不能）听到 Web 上的音频/视频内容，至少在某些情况下是这样的，比如：

  • 许多人患有听觉障碍（通常来说是很难听清声音的人，或者聋人），所以他们不能听见音频中的声音。
  • 另外的情况可能是由于人们并不能听音频，可能是因为他们在一个非常嘈杂的环境当中（比如在一个拥挤的酒吧内恰好赶上了球赛），也可能是由于他们并不想打扰到其他人（比如在一个十分安静的地方，例如图书馆）。
  • 有一些人他们不说音频当中的语言，所以他们听不懂，因此他们想要一个副本或者是翻译来帮助他们理解媒体内容。

一个典型的 WebVTT 文件如下：

WEBVTT

1
00:00:22.230 --> 00:00:24.606
第一段字幕

2
00:00:30.739 --> 00:00:34.074
第二段

  ...

Copy to Clipboard

让其与 HTML 媒体一起显示，你需要做如下工作：

  1. 以 .vtt 后缀名保存文件。
  2. 用 <track> 标签链接 .vtt 文件， <track> 标签需放在 <audio> 或 <video> 标签当中，同时需要放在所有 <source> 标签之后。使用 kind 属性来指明是哪一种类型，如 subtitles、captions、descriptions。然后，使用 srclang 来告诉浏览器你是用什么语言来编写的 subtitles。

如下：

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

Copy to Clipboard

上面这串代码会显示一段带有字幕的视频