文本层面的元素（简称文本元素），把这些元素加入文本当中，也就引入了结构和含义。
生成超链接
生成指向外部的超链接
使用相对URL
生成内部超链接
设置浏览环境
标记内容
b元素
em元素
i元素
s元素
strong元素
u元素
small元素
sub和sup元素
换行
br元素
wbr元素
表示输入和输出
使用标题引用、引文、定义和缩写
abbr元素
dfn元素
q元素
cite元素
使用语言元素
ruby、rt和rp元素
bdo元素
其他文本元素
span元素
mark元素
ins元素和del元素
time元素
HTML5规范明确指出：使用元素应该完全从元素的语义出发。但这类元素中有些元素的含义非常明确，有些则比较含糊。在元素的使用上最好做到“将呈现工作交给CSS打理”，但这并不是绝对的，有时候只要保持HTML文档中的一致性就好。
生成超链接
a元素用于生成超链接，a元素有6个局部属性：
1）href：指定a元素所指资源的URL；
2）hreflang：说明所链接资源使用的语言；
3）media：说明说链接资源用于哪种设备，同 style元素的media属性；
4）rel：说明文档与所链接资源的关系类型，同 link元素的rel属性；
5）target：指定用于打开所链接资源的浏览环境；
6）type：说明所链接资源的MIME类型（比如text/html）。
1）href：指定a元素所指资源的URL；
2）hreflang：说明所链接资源使用的语言；
3）media：说明说链接资源用于哪种设备，同 style元素的media属性；
4）rel：说明文档与所链接资源的关系类型，同 link元素的rel属性；
5）target：指定用于打开所链接资源的浏览环境；
6）type：说明所链接资源的MIME类型（比如text/html）。
生成指向外部的超链接
<body>
I like <a href="http://en.widipedia.org/wiki/Apples">apples</a> and <a href="http://en.wikipeida.org/wiki/Orange_(fruit)">oranges</a>.
</body>使用相对URL
<body>
......
You can see other fruits I like <a href="fruitlist.html">here</a>.
</body>生成内部超链接
该方式用于将统一文档中的另一个元素移入视野，需要是使用ID选择表达式：#<id>。
<body>
......
You can see other fruits I like <a href="#fruits">here</a>.
......
<p id="fruits">
I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
</p>
</body>设置浏览环境
target属性用于告诉浏览器希望将所链接的资源显示在哪里。默认情况下，浏览器使用当前文档的窗口、标签页或窗框，所以新文档会取代现在显示的文档，但你可以设置其它值：
1）_blank：在新窗口或标签页中打开文档；
2）_parent：在父窗框（frameset）中打开文档；
3）_self：在当前窗口中打开文档（默认）；
4）_top：在顶层窗口打开文档；
5）<frame>：在指定窗框中打开文档，这里的<frame>是表示窗口的名称。
下面通过一个例子帮助你理解frame。假定TestFrame.html文档中的代码如下：
1）_blank：在新窗口或标签页中打开文档；
2）_parent：在父窗框（frameset）中打开文档；
3）_self：在当前窗口中打开文档（默认）；
4）_top：在顶层窗口打开文档；
5）<frame>：在指定窗框中打开文档，这里的<frame>是表示窗口的名称。
下面通过一个例子帮助你理解frame。假定TestFrame.html文档中的代码如下：
<html>
<frameset cols="50%,50%">
<frame src="test.html" />
<frame name="frame1" />
</frameset>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Your page title</title>
<link href="test.css" rel="stylesheet" id="test"/>
</head>
<body>
<a title="W3C web site" href="http://w3c.org" target="frame1">W3C web site</a>
</body>
</html>标记内容
b元素
在HTML4中b元素只具有呈线性质的含义，在HTML5中，用于标识关键词和产品评论中的产品名称。
<body>
I like <b>apples</b> and <b>oranges</b>.
</body>em元素
em元素表示对一段文字的强调，可以用来向读者提供关于句子或段落含义的一种语境。
<body>
<em>I</em> like <b>apples</b> and <b>oranges</b>.
</body>i元素
i元素表示一段文字与周围内容有本质区别，常用于外文词语、科技术语甚至某人的想法。
<body>
<em>I</em> like <b>apples</b> and <b>oranges</b>.
My favorite kind of orange is the mandarin, properly known as <i>citrus reticulata</i>.
</body>s元素
s元素用来表示一段文字不再正确或准确，习惯样式是在文字上显示一条删除线。
<body>
<em>I</em> like <b>apples</b> and <b>oranges</b>.
My favorite kind of orange is the mandarin, properly known as <i>citrus reticulata</i>.
Oranges at my local store cost <s>$1 eanch</s> $2 for 3.
</body>strong元素
strong元素表示一段重要文字。
<body>
I like apples and oranges.
<strong>Warning:</strong> Eating too many oranges can give you heart burn.
</body>u元素
u元素让一段文字从周围内容中凸现出来，但并不表示强调或其重要性有所增加。效果就是为文字添加下划线。
<body>
I like apples and oranges.
<strong>Warning:</strong> Eating <u>too many</u> oranges can give you heart burn.
</body>small元素
HTML5中使用small标签指定细则，通常包括免责声明、注意事项、法律限制、版权信息等。有时还可以用它来表示署名，或者满足许可要求。
<body>
<p>Order now to receive free shipping.
<small>(Some restrictions may apply.)
</small></p>
...
<footer role="contentinfo">
<p><small>© 2013 The Super
Store. All Rights Reserved.
</small></p>
</footer>
</body>sub和sup元素
sub和sup元素分别用于表示下标和上标。
<body>
The point x<sub>10</sub> is the 10<sup>th</sup> point.
</body>换行
有两个元素可以用来控制内容换行：br和wbr元素。
br元素
br元素会引起一次换行，br元素只宜用在换行也是内容的一部分的情况，切勿用它创建段落或别的内容组。
<body>
I WANDERED lonely as a cloud<br/>
That floats on high 0'er vales and hills,<br/>
When all at once I saw a crowd,<br>
A host, of golden daffodils;
</body>wbr元素
HTML5新增，用于表示长度超过当前浏览器窗口的内容适合再次换行，究竟换不换行由浏览器决定，wbr元素只不过是对恰当的换行位置的建议而已。
<body>
This is a very long word: Super<wbr>califragilistic<wbr>expialidocious.
</body>表示输入和输出
1）code：表示计算机代码片段
2）var：在编程语境中表示变量，也可表示一个供读者在想象中插入一个指定值的占位符
3）samp：表示程序或计算机系统的输出
4）kbd：表示用户输入
2）var：在编程语境中表示变量，也可表示一个供读者在想象中插入一个指定值的占位符
3）samp：表示程序或计算机系统的输出
4）kbd：表示用户输入
<body>
<p>
<code>var fruits = ["apples", "oranges", "mangoes", "cherries"];<br> document.writeln("I like " + fruits.length + " fruits");</code>
</p>
<p>The variable in this example is <var>fruits</var></p>
<p>The output from the code is: <samp>I like 4 fruits</samp></p>
<p>When prompted for my favorite fruit, I typed: <kbd>cherries</kbd>
</body>使用标题引用、引文、定义和缩写
abbr元素
表示缩写，其title属性表示该缩写代表的完整词语。
<body>
I like apples and oranges.
The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the Florida citrus industry.
</body>dfn元素
表示定义中的术语，即用来解释一个词（或短语）的含义的句子中的词（或短语）。如果要为dfn元素设置title属性，那么必须将其设置为所定义的术语。
<body>
<p>
The <dfn title="apple">apple</dfn> is the pomaceous fruit of the apple tree, species Malus domestica in the rose family.
</p>
</body>q元素
表示引自他处的内容。q元素的cite属性可以用来指定来源文章的URL。
<body>
<p>
<q cite="http://en.wikipedia.org/wiki/Apple">The <dfn title="apple">apple</dfn> is the pomaceous fruit of the apple tree, species Malus domestica in the rose family.</q>
</p>
</body>cite元素
表示所引用作品的标题。
<body>
My favorite book on fruit is <cite>Fruit: Edible, Inedible, Incredible</cite> by Stuppy & Kesseler
</body>使用语言元素
ruby、rt和rp元素
ruby元素表示一段包含注音符号的文字，需要与rt元素和rp元素搭配使用，rt元素用来标记注音符号，rp元素则用来标记供不支持注音符号特性的浏览器显示在注音符号前后的括号。
<body>
<ruby>魑<rp>(</rp><rt>chi</rt><rp>)</rp></ruby>
<ruby>魅<rp>(</rp><rt>mei</rt><rp>)</rp></ruby>
</body>bdo元素
用来设置其内容中文字的方向。bdo元素必须加上dir属性，支持的值为：1）rtl（从右到左）；2）ltr（从左到右）。
<body>
<p>
This is left-to-right: <bdo dir="ltr">I like oranges</bdo>
</p>
<p>
This is right-to-left: <bdo dir="rtl">I like oranges</bdo>
</p>
</body>其他文本元素
span元素
本身没有任何含义，通常用来把一些全局属性应用到一段内容上。
<body>
I like <span class="fruit">apples</span> and <span class="fruit">oranges</span>.
</body>mark元素
HTML5中新增的，用来表示因为与某段上下文相关而被突出显示的一段文字。
<body>
<p>
I would like a <mark>pair</mark> of <mark>pears</mark>
</p>
</body>ins元素和del元素
ins元素和del元素可以分别用来表示文档中添加和删除的文字。
<body>
<p>
<del>I can <mark>sea</mark> the <mark>see</mark></del>
<ins>I can <mark>see</mark> the <mark>sea</mark></ins>
</p>
</body>time元素
表示时间和日期。如果布尔属性pubdate存在，那么time元素表示的是整个HTML文档或离该元素最近的article元素的发布日期。datetime属性以
RFC3339规定的格式指定日期和时间。有了datetime，就能在元素中以便于阅读的形式设置日期或时间，同时又确保计算机能无歧义地解析指定的日期或时间。
<body>
I still remember the best apple I ever tasted.
I bought it at <time datetime="15:00">3 o'clock</time> on <time datetime="1984-12-7">December 7th</time>.
</body>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
