【HTML5与CSS3基础教程】 第4章 文本

第4章 文本

本章内容
添加段落、指定细则、标记重要或强调的文本、创建图、指明引用或参考、引述文本、指定时间、解释缩写词、定义术语、创建上标和下标、添加作者联系信息、标注编辑和不准确的文本、标记代码、使用预格式化的文本、突出显示文本、创建换行、创建span、其他元素

添加段落
要在网页中开始一个新的段落，应该使用p元素。

指定细则
small表示细则一类的旁注，“通常包括免责声明、注意事项、法律限制、版权信息等。有时我们还可以用它来表示署名，或者满足许可要求。”通常是行内文本中的一小块，而不是包含多个段落或其他元素的大块文本。
<small>&copy; 2013 The Super Store</small>

标记重要和强调的文本
strong元素表示内容的重要性，而em则表示内容的着重点。可以单独使用，也可以一起使用。b和i是早期HTML的产物，只是在一些没有语义但是却需要特殊样式的地方使用，是其他元素（如strong、em、cite等）都不适用时的最后选择。b元素默认显示为粗体，i元素默认显示为斜体。

创建图
figure用于创建一个图。图可以是图表、照片、图形、插图、代码片段，以及其他类似的独立内容。figcaption是figure的标题，可选，出现在figure内容的开头或结尾处。
figure元素可以包含多个内容块。但是只允许有一个figcaption。figcaption可以是任意描述性的文本。
不要简单地将figure作为在文本中嵌入独立内容实例的方法。这种情况下，通常更适合用aside元素。

<figure>
	<figcaption><b>Figure 3:</b>Some text</figcaption>
	<img src="xxx" alt="images">
</figure>

指明引用或参考
使用cite元素可以指明对某内容源的引用或参考。例如，戏剧、脚本或图书的标题，歌曲、电影、照片或雕塑的名称等。
<p>...<cite>text</cite>...</p>

引述文本
blockquote元素表示单独存在的引述。而q元素则用于短的引述，如句子里面的引述。
可以对blockquote和q使用可选的cite属性，提供引述内容来源的URL。

指定时间
可以使用time元素标记时间、日期或时间段。
<time>16:20</time> <time datetime="2014-07-13">July 13</html>
如果忽略datetime属性，文本内容就必须是合法的日期或时间格式。如果包含了datetime，文本内容就可以按照你希望的任何形式表示日期、时间或时间段了。datetime属性不会产生单独任何效果，但它可以用于在web应用（如日历应用）之间同步日期和时间。
有效的时间格式：日期和时间 YYYY-MM-DDThh:mm:ss 时间段 nh nm ns 世界时在末尾加上字母Z，例如 2020-02-02T22:22:22Z 相对UTC时差在后面写上加或减及时差，例如 2020-02-02T22:22:22-03:30

解释缩写词
abbr元素标记缩写词并解释其含义。不必对每个缩写词都使用abbr，只在需要帮助访问者了解该词含义的时候使用。
通常，仅在缩写词第一次出现在屏幕上时给出其全称（通过title或括号的方式）。
<abbr title="Hypertext Markup Language">HTML</abbr>

定义术语
使用dfn来定义术语，仅用dfn包围要定义的术语，而不是包围定义。同印刷物的惯例一样，后续使用术语时不再需要使用dfn对其进行标记。
术语及其定义应位置相近。
dfn可以在适当的情况下包围住其他的短语元素，如abbr。
<p><dfn>warframe</dfn> is a game!</p>

创建上标和下标
使用sub创建下标，使用sup创建上标。
<p>y=x<sup>2</sup> water: H<sub>2</sub>O</p>
上标和下标字符会轻微地扰乱行与行之间均匀的间距。可以使用
css解决这个问题。

/* gist.github.com/413930 */
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline.
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}

添加作者联系信息
address元素是用以定义与HTML页面或者页面一部分（如一篇报告或新文章）有关的作者、现骨干人事或组织的联系信息，通常位于页面底部或相关部分内。
大多数时候，联系信息的形式是作者的电子邮件地址或指向联系信息页的链接。联系信息也有可能是作者的通讯地址，但是用address标记公司的办公地点，则是错误的用法。
如果address嵌套在article里，则属于其所在的最近的article元素；否则属于页面的body。
address只能包含作者的联系信息，不能包括其他内容，如文档或文章的最后修改时间。
<address>Have some question? Contact us: <a href="site-feedback.html">Contact us web team</a></address>

标注编辑和不再准确的文本
代表添加内容的ins元素和标记已删除内容的del元素。s元素用以标注不再准确或不再相关的内容。
del和ins是少有的既可以包括短语内容，又可以包围块级内容的元素。
del和ins都支持两个属性：cite和datetime。cite属性用于提供一个URL，指向说明编辑原因的页面。datetime属性提供编辑的时间。它们的值可以通过JavaScript或分析页面的程序提取出来。

标记代码
使用code元素标记代码或文件名。如要使用<和>这两个符号，请输入< >。
kbd元素标记用户输入提示。
samp元素用于指示程序或系统的示例输出。
var元素表示变量或占位符的值。

使用预格式化的文本
pre元素显示预格式化的文本，预格式化的文本可以保持文本固有的换行和空格。
如果要显示包含HTML元素的内容，务必使用<与&rt；
浏览器通常会对pre里面的内容关闭自动换行，可以使用CSS规则打开自动换行。

pre {
	white-space: pre-wrap;
}

突出显示文本
将mark元素想象成为荧光笔的语义化对照物。用于提起读者对特定文本片段的注意。
mark元素与em（表示强调）或strong（表示重要）不同。

创建换行
使用br元素手动强制文字进行换行。
确保使用br是最后的选择，不要因为模拟段落而使用，对于诗歌、街道地址等应该紧挨着出现的短行，才适合用br元素。

创建span
span元素是没有任何语义的，只适合包围字词或短语内容。
由于span没有任何语义，因此应将它作为最后的选择，仅在没有其他适合的元素时才使用它。
span通常添加class或id属性，用来标示。

其他元素
u元素：
为一块文字添加明显的非文本注解，比如在中文中将文本标记为专有名词，或者表明文本拼写错误。
仅在cite、em、mark等其他元素语义上不合适的情况下使用u元素。
wbr元素：
标示一个可换行处，可以在一个较长的无间断短语（如URL）中使用该元素，表示此处可以在有必要时进行换行，从而让文本在有限的空间内更具可读性。
ruby、rp和rt元素：
旁注标记是东亚语言（如中文和日文）中一种惯用符号，通常用于表现生僻字的发音。
rt指明对基准字符进行注解的旁注字符。rp元素用于在不支持ruby的浏览器中的旁注文本周围现实括号。

<ruby>
	base <rp>(</rp><rt>ruby chars</rt><rp>)</rp>
	北京 <rp>(</rp><rt>bei jing</rt><rp>)</rp>
</ruby>

bdi和bdo元素：
要使用bdo，必须包含dir属性并将属性值设置为ltr（从左至右）或rtl（从右至左）。bdi用于内容的方向未知的情况。不必包含dir属性，默认自动判断。
meter元素：
表示分数的值或已知范围的测量结果。表现上类似于一个进度条一样的东西。
meter支持好几个属性。value是其中唯一必须包含的属性。如果不指定min（最小值）和max（最大值），则默认将它们分别设为0和1.0。low，high和optimum属性通常共同作用，他们将范围划分为低、中、高三个区间。optimum表示范围内的最优位置。
meter并不用于标记没有范围的普通测量值，如高度、宽度、距离、周长等。
progress元素：
指示某项任务的完成进度，可以用它表示一个进度条，就像在web应用中看到的那种进度组件。
progress元素支持三个属性：max、value和form。他们都是可选的，max属性指定任务的总工作量，其值必须大于0。value是任务已完成的量。如果progress没有嵌套在form元素里面，由需要将它们联系起来，可以添加form属性并将其值设置为该form的id。