HTML文本格式化

发表于   |   分类于   |  

Heading and paragraph

Heading: <h1><h2><h3><h4><h5><h6>
重要性依次降低，每页最好只用一个<h1>，这些元素之间有层级关系，不要跳着用，浏览器会识别混乱不要用这些元素去简单得改变字体大小，它们是有语义的。
Paragragh: <p>

Emphasis and importance

Emphasis: <em> 语义为强调，显示的文字为斜体，屏幕阅读器会重读。
Importance: <strong> 语义为重要，显示的文字为加粗体，屏幕阅读器会重读。

Abbreviations

元素<abbr>用来标记缩写，属性title的值为缩写的全称，完整的元素为：

<abbr title="American Borned Chinese">ABC</abbr>

还有一个相近的元素叫<acronym>专门用来定义首字母缩写的，但是意义不大，基本弃用。

Address

标记联系方式的语义化标签是<address>,包含在<body>中是该文档的联系人的联系方式，包含在<article>中的是该文章的联系人的联系方式，显示出来的联系方式为斜体，并且在单独的一段。完整的元素为：

<address>
Written by <a href="xpchem@163.com">Mr.Chang</a>.<br>
Visit me at:<br>
changxiupeng.github.io<br>
</address>

地址内容要编排，容易跟<pre>搞混，<pre>在文本编辑器中不带标签的断行断段可以在页面保持, 并且字体为等宽，类似电传打字机样式的字体（Courier），一般用于标记代码（源代码字符要变为实体，希望执行的不用）和诗句。

Source code

有两个元素，一个是<code>,一个是<pre>
它们的区别大致跟<q>和<blockquote>的区别一样，

<code>: For making up generic pieces of computer code;
<pre>: For making up blocks of fixed width text, in which the whitespace is retained (generaly code blocks).

Entities

HTML中某些字符是预留的，即标签里会用到，比如<,>,&等，如果不希望浏览器将它们识别为标签，就要把这些预留字符转换成字符实体：
小于号（<）对应&lt;
大于号（>）对应&gt;
不间断空格对应&nbsp;
版权符号对应&copy;
更多的实体字符看实体字符参考手册

不间断空格指该空格相连的文字视为一体，换行不会分开。

Quotations

短的引用用<q>,完整的元素为：

<q cite="有些道理只是逼真">有些道理只是逼真<／q>

长的引用用<blockquote>，完整的元素为：

<blockquote cite="商场不是战场">交易不是简单的商品互换，而是价值排序的取舍。交易形成的价格更是包含了巨大的信息。</blockquote>

引用显示的字体不会有什么区别，只是两边带上了双引号，长引用会显示为缩进编排的一个新段落，并且有双引号
cite的值是你的引用地址，但是不会有在页面不会有任何显示，屏幕阅读器也不会有识别，除非用css和javascript。
如果想要这些内容显示在页面上，一个可行的方法就是将这些内容包含在一个<cite>元素里，放到引用内容的旁边，通常都是书名，说这些话的人名。上面的引用就会变成：

<q>有些道理只是逼真<／q><cite>有些道理只是逼真</cite>
<blockquote>交易不是简单的商品互换，而是价值排序的取舍。交易形成的价格更是包含了巨大的信息。</blockquote> -- <cite>商场不是战场</cite>

<cite>包含的内容为斜体
<cite>元素也可以包含在一个<a>中，起到链接的作用，指向引用地址。

Lists

无序列表

用<ul>（unordered list）包含所有的列表条目，每条列表条目也要用<li>包含，比如：

<ul>
  <li>eggs</li>
  <li>milk</li>
  <li>bread</li>
</ul>

有序列表

用<ol>(ordered list) 包含所有的列表条目，每条列表条目用<li>包含，比如:

<ol>
  <li>拿笔</li>
  <li>拿纸</li>
  <li>写字</li>
</ol>

描述列表

用<dl>(description list)包含所用的词条和相应的描述语言，<dt>(description term)包含解释词条 <dd>(description description) 包含解释：

<dl>
  <dt>soliloquy</dt>
  <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience</dd>
  <dt>monologue</dt>
  <dd>In drama, where a character speaks their thoughts out loud to share them with the sudience and any other character present.</dd>
  <dt>aside</dt>
  <dd>In drama,where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling,thought or piece of additional background information.</dd>
</dl>

列表里能嵌套列表，嵌套的列表会缩进，相当于次级列表，不影响上级列表的排序。

其他

上标<sup>
下标<sub>
变量<var>
时间<date>
键入内容<kbd>
计算机输出内容<samp>

<time datetime="2016-08-01">1 August 2016</time>
<time datetime="2016-08">August 2016</time>
<time datetime="08-01">1 August</time>
<time datetime="13:07">13:07</time>
<time datetime="2016-08-01T13:07">13:07, 1 August 2016</time>
<time datetime="2016-08-01T13:07+08:00">1.07pm, 1 August 2016 is 9.07pm in Beijing</time>
<time datetime="2016-W08">The eighth week of 2016</time>

之所以要标定时间是要让浏览器能识别。

<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
<pre>
$ <kbd>ping mozilla.org</kbd>
<samp>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</samp>
</pre>