HTML5与CSS3学习笔记（二）文本相关的元素

添加段落

在HTML的文本内容中，回车和重复的空格都会被忽略，只显示为一个空格。因此，若要在网页的文本内容中开始一个新的段落，应该使用p元素。P元素的使用极为简单。格式如下：

<p>添加的段落的内容</p>

虽然大多数情况下，p元素都是嵌套在article元素中，但是需要注意p元素也是可以单独使用的，不要形成对其的错误理解。

换行

如果要创建换行，而且在语义上不是添加一个新的段落，可以在需要换行的地方输入<br />.(br元素为空元素)

指定细则

small表示细则一类的旁注，通常包括注意事项，版权信息等，也可以用来署名。示例用法：

<small>&copy; 2019 HUST.All Rights Reserved.

标记重要和强调的文本

如果要用标记表示文本内容的重要性，应该用strong元素将相关内容包起来。
如果要用标记来强调一些文本内容，应该用em元素将相关内容包起来。
根据内容需要，strong和em元素可以单独使用，也可以一起使用。
用法示例：

<p><strong>Warning:No <em>Smoking</em></strong><em>Everyone</em> who <strong> smoke </strong>here will be ...</p>

在浏览器中，strong标记的内容通常用粗体表示，em标记的内容通常用斜体显示。切记，不要为了这种显示效果而使用这些元素，一定要符合元素的语义。
除了strong和em元素，在HTML5之前，还有b和i元素，用于标记重要和强调的文本，它们分别用于将文本变为粗体和斜体，但并没有语义。出于某些原因，HTML5并没有抛弃它们，因此如果是为了出于实用目的提醒读者一些文本内容，可以用b元素和i元素。HTML5强调，b和i应该是其他元素（如strong，em，cite等）都不适用时的最后选择。

突出显示文本

用mark元素对重要的特定词语进行标注（类比做笔记时在课本中用荧光笔对重点进行标注），来提起读者对特定文本片段的注意。
用法示例：

<mark>…</mark>

创建图

HTML5引入figure和figcaption两个元素来创建图。图可以是图表，照片，插图，代码片段等。在实际编程中，可以由页面上的其他内容引出figure，而figcaption是figure的标题，可选。用法示例：

<figure>
<figcaption>一个用于示例的图</figcaption>
<img src="链接 " width ="250" height="175" />
</figure>

引用

cite元素指明对某内容源的引用或参考，如书的标题，音乐的名称等。cite只用于参考源本身，而不是从中引述的内容。如果要引述文本，应该用blockquote或q元素。如果需要，可以用元素的cite属性（不要与前面的cite标签混淆概念）来说明引用的来源url。
blockquote用于引用块级文本，浏览器会自动缩进出新的一行，q元素用于引述行内文本的内容，浏览器会自动加上引号。

指定时间

HTML5新增了time元素来标记时间，日期或时间段。使用time元素的时候，要注意两点。第一，time元素包围起来的内容表示时间，显示给用户看。第二，time元素与一个可选的属性datetime，这是为机器准备的，用户不可见，该属性需要遵循特定的格式，文章后面会做介绍。如果没用datetime属性，time元素的文本内容必须是机器可读的格式，如果用了datetime元素，则对文本内容格式没有要求。
用法示例：

<p><time datetime="2019-3-21">March 21,2019</time></p>

有效的时间格式：

YYYY-MM-DDThh：mm：ss
例如:2019-03-21T23:29:34

解释缩写词

缩写词很常见，当我们在一个页面中为了方便使用缩写词的时候却也得考虑到有的人不知道缩写词的意思，因此在需要访问者了解缩写词含义时，最好在页面中加入缩写词的解释。
在HTML中，用abbr元素解释缩写词。
用法示例：

<abbr title=”厕所”>WC</abbr>

这样，当我们将鼠标移到WC处时，会有提示“厕所”出现。

定义术语

术语第一次出现时，用dfn元素将其包围，对其作语义上的区分。
用法示例：

<dfn>Pjifie</dfn> means …

创建上标和下标
HTML用sup创建上标，用sub创建下标。
用法示例：

<p>2H<sub>2</sub>+O<sub>2</sub>==2H<sub>2</sub>O</p>
<p>氚H<sup>3</sup></p>

显示效果：

2H₂+O₂==2H₂O

氚H³

添加作者联系信息
HTML用address元素定义页面或页面一部分有关的作者或组织的联系信息。如果要为一个article提供作者联系信息，就将address元素嵌套在article元素里。如果要提供整个页面的作者信息，就嵌套在body元素里。
用法示例：

<address><a href="mailto:***@qq.com">***@qq.com</a></address>

标注编辑和不再准确的文本

用ins元素标记新插入的文本，用del元素标记已删除的文本，用s元素标记不在准确或不再相关的内容。
用法示例：

<p>The price is <del>$50</del><ins>$55</ins>.</p>

The price is $50$55.

标记代码

HTML用code元素标记代码
用法示例：

	<p>一个没什么用的代码：
			<pre>
				<code>
		package test;
		import java.util.ArrayList;
		public class ArrayListDemo {

			public static void main(String[] args) {
				ArrayList <String> myArr = new ArrayList <String> ();
				myArr.add("张三");
				myArr.add("李四");
				myArr.add("王五");
				System.out.println("测试动态数组");
				int i;
				myArr.add(0,"李红");
				myArr.remove(1);
				int length = myArr.size();
				for (i=0;i&lt;length;i++) {
					if (i==1) {
						myArr.set(1, "小雨");
					}
					System.out.print(myArr.get(i)+",");
				}
			}

		}
				</code>
			</pre>
		</p>

注意，由于<>在HTML中都是用来表示标签的，所以当代码中要用到<或者>时，应分别使用&lt；和&gt；。

预格式化文本

在上面的代码中，还用到了pre元素，着表示使用预格式化的文本，所谓预格式化文本，是指不将额外的回车和空格压缩为一个空格，在代码中为了体现缩进，需要使用pre元素。

span元素

在上一篇中，我们介绍了div元素，可以用div创建一个没有任何语义的容器，来包含一些块级内容。同div元素一样，span元素是没有任何语义的，不同的是，span只适合包围字词或短语内容。