HTML学习

一、高阶文字排版

1.描述列表

描述列表使用与其他列表类型不同的闭合标签—

; 此外，每一项都用

(description term) 元素闭合。每个描述都用

(description description) 元素闭合。让我们来完成下面的标记例子:

 

内心独白

   

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

 

语言独白

   

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

浏览器的默认样式会在描述列表的描述部分（description description）和描述术语（description terms）之间产生缩进。MDN非常严密地遵循这一惯例，同时也鼓励关于术语的其他更多的定义（but also embolden the terms for extra definition）。

下面是前述代码的显示结果：

内心独白

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

语言独白

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

2.引用

块引用

如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用

元素包裹起来表示，并且在cite属性里用URL来指向引用的资源。例如，下面的例子就是引用的MDN的

元素页面：

The HTML <blockquote> Element (or HTML Block

Quotation Element) indicates that the enclosed text is an extended quotation.

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

 

The HTML <blockquote> Element (or HTML Block

  Quotation Element) indicates that the enclosed text is an extended quotation.

浏览器在渲染块引用时默认会增加缩进，作为引用的一个指示符；MDN是这样做的，但是也增加了额外的样式：

The HTML

Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

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

The quote element — <q> — is intended
for short quotations that don't require paragraph breaks.

浏览器默认将其作为普通文本放入引号内表示引用，就像下面：
The quote element — — is "intended for short quotations that don't require paragraph breaks."(元素旨在用于不需要分段的短引用)

引文
cite属性内容不会被浏览器显示、屏幕阅读器阅读，需使用 JavaScript 或 CSS，浏览器才会显示cite的内容。如果你想要确保引用的来源在页面上是可显示的，更好的方法使用元素：

According to the
MDN blockquote page:

 

The HTML <blockquote> Element (or HTML Block
  Quotation Element) indicates that the enclosed text is an extended quotation.

The quote element — <q> — is intended
for short quotations that don't require paragraph breaks. --
MDN q page.

3.缩略语

另一个你在web上看到的相当常见的元素是——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）。让我们看看下面两个例子：

我们使用 HTML 来组织网页文档。

第 33 届 奥运会 将于 2024 年 8 月在法国巴黎举行。

这些代码的显示效果如下（当光标移动到项目上时会出现提示）：

我们使用HTML来组织网页文档。

第 33 届奥运会将于 2024 年 8 月在法国巴黎举行。

4.标记联系方式

HTML有个用于标记联系方式的元素——

。它仅仅包含你的联系方式，例如：

 

Chris Mills, Manchester, The Grim North, UK

但要记住的一点是，

元素是为了标记编写HTML文档的人的联系方式，而不是任何其他的内容。因此，如果这是Chris写的文档，上面的内容将会很好。注意，下面的内容也是可以的：

 

Page written by Chris Mills.

5.上标和下标

当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。^{和_{元素可以解决这样的问题。例如：}}

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

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

这些代码输出的结果是：

6.展示计算机代码

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

: 用于标记计算机通用代码。

: 用于保留空白字符（通常用于代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在
标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
 
 
: 用于标记具体变量名。
 
 
: 用于标记输入电脑的键盘（或其他类型）输入。
 
 
: 用于标记计算机程序的输出。
 
 
让我们看看一些例子。你应该尝试运行一下（尝试运行一下other-semantics.html样例文件的拷贝）：
 
 
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
 
 
上面的代码显示效果如下：
 
 
 
  
 
   
  
   
 
  
 
  
 
 
 
 
7.标记时间和日期
 
 
HTML 还支持将时间和日期标记为可供机器识别的格式的元素。例如：
 
 
2016年1月20日
 
 
为什么需要这样做？因为世界上有许多种书写日期的格式，上边的日期可能被写成：
 
 
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日
 
 
And so on
 
 
但是这些不同的格式不容易被电脑识别 — 假如你想自动抓取页面上所有事件的日期并将它们插入到日历中，元素允许你附上清晰的、可被机器识别的 时间/日期来实现这种需求。
 
 
上述基本的例子仅仅提供了一种简单的可被机器识别的日期格式，这里还有许多其他支持的格式，例如：
 
 

20 January 2016

January 2016

20 January

19:30

19:30:01.856

7.30pm, 20 January 2016

7.30pm, 20 January 2016 is 8.30pm in France

The fourth week of 2016
 
 
8.电子邮件链接
 
 
 
当点击一个链接或按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或页面，这种情况是可能做到的。这样做是使用元素和mailto：URL的方案。
 
 
其最基本和最常用的使用形式为一个mailto:link （链接），链接简单说明收件人的电子邮件地址。例如:
 
 
Send email to nowhere
 
 
这会创建一个链接，看起来像这样：Send email to nowhere.
 
 
实际上，邮件地址甚至是可选的。如果你忘记了（也就是说，你的href仅仅只是简单的"mailto:"），一个新的发送电子邮件的窗口也会被用户的邮件客户端打开，只是没有收件人的地址信息，这通常在“分享”链接是很有用的，用户可以发送给他们选择的地址邮件
 
 
除了电子邮件地址，您还可以提供其他信息。事实上，任何标准的邮件头字段可以被添加到你提供的邮件URL。
 
 
其中最常用的是主题(subject)、抄送(cc)和主体(body) (这不是一个真正的头字段，但允许您为新邮件指定一个短内容消息)。 每个字段及其值被指定为查询项。
 
 
下面是一个包含cc、bcc、主题和主体的示例：
 
 

  Send mail with cc, bcc, subject and body
 
 
 9.HTML
元素
 
 
 
代表一段独立的内容, 经常与说明（caption）
配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。
 
 
使用说明
 
 
通常，
是图像，插图，图表，代码片段等，在文档的主流程中引用，但可以移动到文档的另一部分或附录而不影响主流程。
 
 
作为sectioning root，
元素的内容轮廓将从文档的主要轮廓中排除。
 
 
通过在其中插入
（作为第一个或最后一个子元素），可以将标题与
元素相关联。图中找到的第一个
元素显示为图的标题。
 
 


    src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
  alt="A robotic monster over the letters MDN.">




    src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
  alt="A robotic monster over the letters MDN.">    
  
MDN Logo
 
 
10.显示音轨文本
 
 
给那些听不懂音频语言的人们提供一个音频内容的副本岂不是一件很棒的事情吗？所以，感谢 HTML5
 
 
Note: “副本”的意思是指，用文本记录下音频的内容。
 
 
WebVTT 是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息。这些字符串叫做cues ，你可以根据不同的需求来显示不同的样式，最常见的如下：
 
 
subtitles
 
 
通过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容。
 
 
captions
 
 
同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内容。
 
 
timed descriptions
 
 
将文字转换为音频，用于服务那些有视觉障碍的人。
 
 
一个典型的 WebVTT 文件如下：
 
 
WEBVTT
 
 
1
 
 
00:00:22.230 --> 00:00:24.606
 
 
第一段字幕
 
 
2
 
 
00:00:30.739 --> 00:00:34.074
 
 
第二段
 
 
  ...
 
 
让其与 HTML 媒体一起显示，你需要做如下工作：
 
 
以 .vtt 后缀名保存文件。
 
 
用标签链接 .vtt 文件，标签需放在
 
 
 
 
上面这串代码会显示一段带有字幕的视频
 
 

 
 
11、表格元素
 
 
1.为表格中的列提供共同的样式
 
 
在我们继续介绍之前，我们将介绍本文中的最后一个功能。HTML有一种方法可以定义整列数据的样式信息：就是和元素。 它们存在是因为如果你想让一列中的每个数据的样式都一样，那么你就要为每个数据都添加一个样式，这样的做法是令人厌烦和低效的。你通常需要在列中的每个或上定义样式，或者使用一个复杂的选择器，比如:nth-child()。
 
 

  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  
Data 1
Data 2
Calcutta
Orange
Robots
Jazz
 
 
效果如下
 
 
 
  
 
   
  
   
 
  
 
  
 
 
 
 
2.使用  为你的表格增加一个标题
 
 
你可以为你的表格增加一个标题，通过元素，再把元素放入
元素中. 你应该把它放在标签的下面。

  

  ...
Dinosaurs in the Jurassic period
 
 
3.使用，，
 
 
需要嵌套在 table 元素中，放置在头部的位置，因为它通常代表第一行，第一行中往往都是每列的标题，但是不是每种情况都是这样的。如果你使用了/元素，那么元素就需要放在它们的下面。
 
 
需要嵌套在 table 元素中，放置在底部 (页脚)的位置，一般是最后一行，往往是对前面所有行的总结，比如，你可以按照预想的方式将放在表格的底部，或者就放在的下面。(浏览器仍将它呈现在表格的底部)
 
 
需要嵌套在 table 元素中，放置在的下面或者是的下面，这取决于你如何设计你的结构。(放在下面也可以生效.)
 
 
4.scope属性
 
 
可以添加在元素中，用来帮助屏幕阅读设备更好地理解那些标题单元格，这个标题单元格到底是列标题呢，还是行标题。比如： 回顾我们之前的支出记录示例，你可以明确地将列标题这样定义：
 
 

  
    Purchase
    Location
    Date
    Evaluation
    Cost (€)
  
 
 
以及每一行都可以这样定义一个行标题 (如果我们已经使用了 th 和 td 元素):
 
 

  Haircut
  Hairdresser
  12/09
  Great idea
  30
 
 
屏幕阅读设备会识别这种结构化的标记，并一次读出整列或整行，比如：
 
 
scope还有两个可选的值 ：colgroup和rowgroup。这些用于位于多个列或行的顶部的标题。 如果你回顾这部分文章开始部分的 "Items Sold August 2016" 表格。你会看到 "Clothes" 单元格在"Trousers", "Skirts", 和 "Dresses" 单元格的上面。这几个单元格都应该被标记为 ()，但是 "Clothes" 是一个位于顶部且定义了其他三个子标题的标题。 因此 "Clothes" 应该有一个scope="colgroup"属性，而另外三个子标题应该有scope="col"属性。
 
 
 
  
 
   
  
   
 
  
 
  
 
 
 
 
5.id 和标题属性
 
 
 
如果要替代scope属性，可以使用id和headers属性来创造标题与单元格之间的联系。使用方法如下:
 
 
为每个元素添加一个唯一的id。
 
 
为每个元素添加一个headers属性。每个单元格的headers属性需要包含它从属于的所有标题的id，之间用空格分隔开。
 
 
这会给你的HTML表格中每个单元格的位置一个明确的定义。像一个电子表格一样，通过 headers 属性来定义属于哪些行或列。为了让它工作良好，表格同时需要列和行标题。
 
 
回到我们的花费成本示例，前两个片段可以重写为：
 
 

  
    Purchase
    Location
    Date
    Evaluation
    Cost (€)
  



  Haircut
  Hairdresser
  12/09
  Great idea
  30

  ...