HTML系列教程之文字设置

程序员文章站 2022-07-23 17:47:27

1 标题标题的h1到h6标签，这里不再赘述。值得一提的是，H5中新定义了一个元素，用来将标题和副标题群组。一般在header里将一组标题...

1 标题

标题的h1到h6标签，这里不再赘述。值得一提的是，H5中新定义了一个元素<hgroup>，用来将标题和副标题群组。一般在header里将一组标题组合在一起，变成一个区块：

<body>

<h2> 虚拟化技术以及虚拟机的使用</h2>

<p>虚拟化技术是指在一台计算机上同时运行多个操作系统。</p>

</hgroup>

</header>

虚拟化技术是指在一台计算机上同时运行多个操作系统；可以搭建教学环境和测试环境；和硬件无关，可以相互拷贝，一个虚拟机就是一个文件夹。

</article>

<body>

</body>

2 关键字和产品名称b

<b>标签包裹的部分比其余部分更重要，呈现为粗体。以下场景可以使用b标签：文档的摘要中的关键字；产品描述中的产品名；其他文本在需要加粗显示的情况下。

根据H5规范，再没有其他更合适的标签时，才把b作为最后的选项。H5声明用h1到h6表示标题，em表示要强调的文本，strong来表示重要文本，mark表示标注的、突出显示的文本。

3 强调em

<em>标签表示强调其中的文本，用斜体来显示。但是如果只是单纯的想要斜体效果，请使用i标签。

4 外文或科技术语i

<i>标签也是显示斜体效果，使用场景为：表示转述句；表示分类名称；习语。

5 重要文字strong

<strong>和<em>一样用于强调文本，但它强调的程度更强一些。显示效果为加粗。

6 删除线s

<s>显示效果为删除线，可以和<ins>标签配合使用。H5中的删除线用<del> 。

7 下划线u

可以在css样式属性中的text-decoration设置为underline来为文字添加下划线，也可以利用u标签设置。在H5中不再支持u标签。如果不是超链接的话不建议添加下划线。

8 小号字体内容small

9 上标sup，下标sub

包含在<sup>标签和其结束标签</sup>中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。提示：这个标签在向文档添加脚注以及表示方程式中的指数值时非常有用。如果和<a>标签结合起来使用，就可以创建出很好的超链接脚注。

10 指明可以安全换行的建议位置wbr

<wbr>是H5中新增的元素。如果单词太长，或者担心浏览器会在错误的位置换行，那么您可以使用<wbr>元素来进行换行。将<wbr>元素放在一个单词内部，比如reck<wbr>less，当浏览器宽度合适时，不拆单词；当浏览器宽度不适时，在reck后换行。注意：IE8以下版本不支持。

11 code，var，kbd，abbr，dfn

<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。

软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code> 标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来。只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用<code> 标签。虽然<code> 标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如，程序员的浏览器可能会寻找<code> 片段，并执行某些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等。

提示：如果只是希望使用等宽字体的效果，请使用<tt>标签。或者，如果想要在严格限制为等宽字体格式的文本中显示编程代码，请使用<pre> 标签。

<var> 标签表示变量的名称，或者由用户提供的值。

<var>标签是计算机文档中应用的另一个小窍门，这个标签经常与<code>和<pre> 一起使用，用来显示计算机编程代码范例及类似方面的特定元素。用<var>标签标记的文本通常显示为斜体。

就像其他与计算机编程和文档相关的标签一样，<var> 标签不只是让用户更容易理解和浏览你的文档，而且将来某些自动系统还可以利用这些恰当的标签，从你的文档中提取信息以及文档中提到的有用参数。我们再一次强调，提供给浏览器的语义信息越多，浏览器就可以越好地把这些信息展示给用户。

<kbd>标签定义键盘文本。它用来表示文本是从键盘上键入的。浏览器通常用等宽字体来显示该标签中包含的文本。

<abbr>标签最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式，比如 “WWW” 或 “NATO”。通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。

提示：可以在<abbr>标签中使用全局的 title 属性，这样就能够在鼠标指针移动到<abbr>元素上时显示出简称/缩写的完整版本。

<dfn>标签可标记那些对特殊术语或短语的定义。其最近的父元素必须包含术语的定义。

现在流行的浏览器通常用斜体来显示<dfn>中的文本。将来，<dfn>还可能有助于创建文档的索引或术语表。与其他许多基于内容的样式和物理样式标签一样，<dfn>标签尽量少用为妙。

12 引用

<q>标签定义短的引用。浏览器经常在引用的内容周围添加引号。<q>标签在本质上与<blockquote>是一样的。不同之处在于它们的显示和应用。<q>标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用<blockquote>标签。

<cite>标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。

用<cite>标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。如果引用的这些文档有联机版本，还应该把引用包括在一个<a>标签中，从而把一个超链接指向该联机版本。

<cite>标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。<cite>标签的语义已经远远超过了改变它所包含的文本外观的作用。

13 使用预先编排好格式的内容

<pre>元素可定义预格式化的文本。被包围在<pre>元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre>标签的一个常见应用就是用来表示计算机的源代码。

可以导致段落断开的标签（例如标题、<p>和<address>标签）绝不能包含在 <pre>所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。

为了使包含在<pre>元素中的文本内容能正确换行，通常需要配上以下样式代码：

pre{

white-space: pre-wrap;

white-space: -moz-pre-wrap;

white-space: -pre-wrap;

white-space: -o-pre-wrap;

word-wrap: break-word;

}

</style>

提示：在用<pre>标签定义计算机源代码时，请使用符号实体来表示特殊字符，比如<代表”<”，>代表”>”，&代表”&”。

上一篇：设置H5页面适应手机屏幕

下一篇：手机越来越贵，怎样才能降低被苹果、华为等厂商薅羊毛..

HTML系列教程之文字设置

LNMP系列教程之设置404错误页面

从零开始学习Node.js系列教程之设置HTTP头的方法示例