W3C HTML5标准阅读笔记 – p、hr、pre、blockquote

标准原文:http://www.w3.org/TR/html5/grouping-content.html#the-p-element

p

在HTML中,p元素用于表示段落;而对于p元素的子元素,HTML5标准规定,p元素内只能出现Phrasing元素 -- 所以,列表元素ol和ul不能成为p元素的子元素。对于p元素本身的使用,标准规定:当有更切近语义的元素标签时(如footer、address等),不应使用相对而言更加通用的p标签。

默认情况下,浏览器会给p标签上方和下方添加外边距(margin)。

hr

当段落之间因为内容差异而需要分隔符时,可以使用hr标签。默认情况下,浏览器会把hr标签显示为宽度100%的水平细线,从而对不同内容的段落进行分隔。

在使用hr标签时,与meta标签一样,只需要开始标签而不需要结束标签;但与meta标签不同,hr标签内部不需要任何内容。一般来说hr标签都是放置在几个p标签之间使用的;由于section标签和h1-h6标签自身已经包含了一定的分隔语义,因此不建议在section标签或h1-h6标签之间使用hr。

pre

使用pre标签可以在页面上显示一段已经格式化好后的文本,也即与其它标签不同,在HTML源代码中pre标签内的所有空格和换行符都会原封不动的直接显示在页面上。使用pre标签的场景有:

  • 在页面上显示有一定格式的email内容。
  • 在页面上显示程序代码。
  • 在页面上显示用字符绘制的图案。

对于在pre标签内出现的其它HTML标签,浏览器会按照该HTML标签的正常逻辑来渲染显示(如,对于在pre标签内出现的h1标签,浏览器依然会把它加粗并添加上下方向的外边距)。一般来说,在pre标签内经常出现的其它标签有3个:code、samp和kbd:

  • code。用于包含程序代码文本。
  • samp。用于包含计算机程序的显示结果。
  • kbd。用于包含用户的输入文本。

blockquote

blockquote标签可用于显示从别处所引用的一段内容(可以使用p标签来包裹这段内容,也可以不使用p标签而直接在blockquote中进行放置),而浏览器则会在blockquote标签四周添加外边距(margin)将其与其它文字段落区别开来。在使用blockquote标签的同时,一般会在blockquote标签的外部或者内部使用footer标签或cite标签来显示该引用内容的出处。因为个人对语义的理解,我更倾向于在blockquote标签的内部使用footer/cite来添加引用出处。

对于blockquote元素而言,除了通用的全局属性,它还有一个特有属性:cite,可以在cite属性中定义所引用内容的出处链接。虽然浏览器可以根据这个cite属性值来给blockquote元素添加链接效果(目前尚没有浏览器这么做),但实际上该cite属性的主要目的并不是给页面浏览者增加浏览体验,而是增加语义从而给文档处理者(搜索引擎、后端处理脚本等)增加便利。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!