文本层面的元素（简称文本元素）。把这些元素加入文本其中，也就引入了结构和含义。

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. <body>
  2. 	I like <a href="http://en.widipedia.org/wiki/Apples">apples</a> and <a href="http://en.wikipeida.org/wiki/Orange_(fruit)">oranges</a>.
  3. </body>

URL中用得最多的协议就是http。但浏览器也支持其他协议，比如：https和ftp。

假设想引用一个电子邮箱地址，能够使用mailto协议，如：mailto:adam@mydomain.com。

使用相对URL

  1. <body>
  2. 	......
  3. 	You can see other fruits I like <a href="fruitlist.html">here</a>.
  4. </body>

默认情况下，浏览器会假定目标资源与当前文档位于同一位置，只是能够通过base元素提供一个基础URL加以改变。

生成内部超链接

该方式用于将统一文档中的还有一个元素移入视野。须要是使用ID选择表达式：#<id>。

  1. <body>
  2. 	......
  3. 	You can see other fruits I like <a href="#fruits">here</a>.
  4. 	......
  5. 	<p id="fruits">
  6. 		I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
  7. 	</p>
  8. </body>

用户点击链接。文档就会滚动到能看到id为fruits的元素的位置。

设置浏览环境

target属性用于告诉浏览器希望将所链接的资源显示在哪里。默认情况下。浏览器使用当前文档的窗体、标签页或窗框，所以新文档会代替如今显示的文档，但你能够设置其他值：
1）_blank：在新窗体或标签页中打开文档；
2）_parent：在父窗框（frameset）中打开文档；
3）_self：在当前窗体中打开文档（默认）；
4）_top：在顶层窗体打开文档。
5）<frame>：在指定窗框中打开文档，这里的<frame>是表示窗体的名称。
以下通过一个样例帮助你理解frame。假定TestFrame.html文档中的代码例如以下：
  1. <html>
  2. <frameset cols="50%,50%">
  3.   <frame src="test.html" />
  4.   <frame name="frame1" />
  5. </frameset>
  6. </html>

这里定义了一个frameset。里面包括两个frame，宽度各占一半。第一个frame指向了一个html文档，第二个frame被赋予了名称frame1。test.html的内容例如以下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="utf-8" />
  5. 	<title>Your page title</title>
  6. 	<link href="test.css" rel="stylesheet" id="test"/>
  7. </head>
  8. <body>
  9. 	<a title="W3C web site" href="http://w3c.org" target="frame1">W3C web site</a>
  10. </body>
  11. </html>

在a元素中我们定义了target微frame1。这样在点击链接时，将在frame1中打开新的页面。

标记内容

b元素

在HTML4中b元素仅仅具有呈线性质的含义，在HTML5中，用于标识关键词和产品评论中的产品名称。
  1. <body>
  2. 	I like <b>apples</b> and <b>oranges</b>.
  3. </body>

b元素的默认样式是粗体。

em元素

em元素表示对一段文字的强调，能够用来向读者提供关于句子或段落含义的一种语境。
  1. <body>
  2. 	<em>I</em> like <b>apples</b> and <b>oranges</b>.
  3. </body>

em元素的习惯样式是斜体字。此例对句子开头的I进行了强调。

i元素

i元素表示一段文字与周围内容有本质差别，经常使用于外文词语、科技术语甚至某人的想法。
  1. <body>
  2. 	<em>I</em> like <b>apples</b> and <b>oranges</b>.
  3. 	My favorite kind of orange is the mandarin, properly known as <i>citrus reticulata</i>.
  4. </body>

i元素的习惯样式是斜体，同em元素。

s元素

s元素用来表示一段文字不再正确或准确。习惯样式是在文字上显示一条删除线。
  1. <body>
  2. 	<em>I</em> like <b>apples</b> and <b>oranges</b>.
  3. 	My favorite kind of orange is the mandarin, properly known as <i>citrus reticulata</i>.
  4. 	Oranges at my local store cost <s>$1 eanch</s> $2 for 3.
  5. </body>

strong元素

strong元素表示一段重要文字。
  1. <body>
  2. 	I like apples and oranges.
  3. 	<strong>Warning:</strong> Eating too many oranges can give you heart burn.
  4. </body>

strong元素的样式同b元素。

u元素

u元素让一段文字从周围内容中凸现出来。但并不表示强调或其重要性有所添加。效果就是为文字加入下划线。

  1. <body>
  2. 	I like apples and oranges.
  3. 	<strong>Warning:</strong> Eating <u>too many</u> oranges can give you heart burn.
  4. </body>

由于u元素的习惯样式与a元素相似，为了防止混淆，应该尽量避免使用u元素。

small元素

HTML5中使用small标签指定细则，通常包括免责声明、注意事项、法律限制、版权信息等。有时还能够用它来表示署名。或者满足许可要求。
  1. <body>
  2. 	<p>Order now to receive free shipping.
  3. 	<small>(Some restrictions may apply.)
  4. 	   </small></p>
  5. 	...
  6. 	<footer role="contentinfo">
  7. 	<p><small>&copy; 2013 The Super
  8. 	   Store. All Rights Reserved.
  9. 	   </small></p>
  10. 	</footer>
  11. </body>

注意：small仅仅适用于短语。不要用它标记长的法律声明。如“使用条款”和“隐私政策”页面。

sub和sup元素

sub和sup元素分别用于表示下标和上标。
  1. <body>
  2. 	The point x<sub>10</sub> is the 10<sup>th</sup> point.
  3. </body>

换行

有两个元素能够用来控制内容换行：br和wbr元素。

br元素

br元素会引起一次换行。br元素仅仅宜用在换行也是内容的一部分的情况，切勿用它创建段落或别的内容组。

  1. <body>
  2. 	I WANDERED lonely as a cloud<br/>
  3. 	That floats on high 0'er vales and hills,<br/>
  4. 	When all at once I saw a crowd,<br>
  5. 	A host, of golden daffodils;
  6. </body>

wbr元素

HTML5新增，用于表示长度超过当前浏览器窗体的内容适合再次换行，到底换不换行由浏览器决定。wbr元素仅仅只是是对恰当的换行位置的建议而已。
  1. <body>
  2. 	This is a very long word: Super<wbr>califragilistic<wbr>expialidocious.
  3. </body>

不使用wbr元素时。浏览器会将长单词作为一个总体进行处理，而使用了wbr元素，浏览器则能够选择在建议处换行。使用wbr元素，就是告诉浏览器一个单词最适合在什么地方那个拆分。

表示输入和输出

1）code：表示计算机代码片段
2）var：在编程语境中表示变量，也可表示一个供读者在想象中插入一个指定值的占位符
3）samp：表示程序或计算机系统的输出
4）kbd：表示用户输入
  1. <body>
  2. 	<p>
  3. 	<code>var fruits = ["apples", "oranges", "mangoes", "cherries"];<br> document.writeln("I like " + fruits.length + " fruits");</code>
  4. 	</p>
  5. 	<p>The variable in this example is <var>fruits</var></p>
  6. 	<p>The output from the code is: <samp>I like 4 fruits</samp></p>
  7. 	<p>When prompted for my favorite fruit, I typed: <kbd>cherries</kbd>
  8. </body>

使用标题引用、引文、定义和缩写

abbr元素

表示缩写，其title属性表示该缩写代表的完整词语。

  1. <body>
  2. 	I like apples and oranges.
  3. 	The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the Florida citrus industry.
  4. </body>

dfn元素

表示定义中的术语，即用来解释一个词（或短语）的含义的句子中的词（或短语）。假设要为dfn元素设置title属性，那么必须将其设置为所定义的术语。
  1. <body>
  2. 	<p>
  3. 		The <dfn title="apple">apple</dfn> is the pomaceous fruit of the apple tree, species Malus domestica in the rose family.
  4. 	</p>
  5. </body>

该元素没有习惯样式，因此其内容看上去没有什么特别之处。

q元素

表示引自他处的内容。q元素的cite属性能够用来指定来源文章的URL。
  1. <body>
  2. 	<p>
  3. 		<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>
  4. 	</p>
  5. </body>

q元素的习惯样式是在引文前后生成引號。

cite元素

表示所引用作品的标题。
  1. <body>
  2. 	My favorite book on fruit is <cite>Fruit: Edible, Inedible, Incredible</cite> by Stuppy & Kesseler
  3. </body>

其习惯样式是斜体。

使用语言元素

ruby、rt和rp元素

ruby元素表示一段包括注音符号的文字，须要与rt元素和rp元素搭配使用。rt元素用来标记注音符号。rp元素则用来标记供不支持注音符号特性的浏览器显示在注音符号前后的括号。
  1. <body>
  2. 	<ruby>魑<rp>(</rp><rt>chi</rt><rp>)</rp></ruby>
  3. 	<ruby>魅<rp>(</rp><rt>mei</rt><rp>)</rp></ruby>
  4. </body>

当显示在支持注音符号的浏览器中时，rp元素及其内容会被忽略，rt元素的内容则会作为注音符号显示。而在不支持注音符号的浏览器中显示该文档，那么rp和rt元素的内容都会被显示出来。

bdo元素

用来设置其内容中文字的方向。bdo元素必须加上dir属性，支持的值为：1）rtl（从右到左）；2）ltr（从左到右）。

  1. <body>
  2. 	<p>
  3. 		This is left-to-right: <bdo dir="ltr">I like oranges</bdo>
  4. 	</p>
  5. 	<p>
  6. 		This is right-to-left: <bdo dir="rtl">I like oranges</bdo>
  7. 	</p>
  8. </body>

其他文本元素

span元素

本身没有不论什么含义，通经常使用来把一些全局属性应用到一段内容上。

  1. <body>
  2. 	I like <span class="fruit">apples</span> and <span class="fruit">oranges</span>.
  3. </body>

mark元素

HTML5中新增的。用来表示由于与某段上下文相关而被突出显示的一段文字。
  1. <body>
  2. 	<p>
  3. 		I would like a <mark>pair</mark> of <mark>pears</mark>
  4. 	</p>
  5. </body>

ins元素和del元素

ins元素和del元素能够分别用来表示文档中加入和删除的文字。
  1. <body>
  2. 	<p>
  3. 		<del>I can <mark>sea</mark> the <mark>see</mark></del>
  4. 		<ins>I can <mark>see</mark> the <mark>sea</mark></ins>
  5. 	</p>
  6. </body>

time元素

表示时间和日期。假设布尔属性pubdate存在，那么time元素表示的是整个HTML文档或离该元素近期的article元素的公布日期。datetime属性以RFC3339规定的格式指定日期和时间。有了datetime，就能在元素中以便于阅读的形式设置日期或时间。同一时候又确保计算机能无歧义地解析指定的日期或时间。
  1. <body>
  2. 	I still remember the best apple I ever tasted.
  3. 	I bought it at <time datetime="15:00">3 o'clock</time> on <time datetime="1984-12-7">December 7th</time>.
  4. </body>

time元素能够不包括datetime属性，这时须要提供具备有效的机器可读格式的时间和日期。当时间和日期格式不规范时，则须要使用datetime属性来指定文本内容的机器可读格式。

HTML5：标记文字的更多相关文章

  1. html5权威指南：标记文字

    html5权威指南-第八章-用基本的文字元素标记内容 :http://www.cnblogs.com/yc-755909659/archive/2016/10/02/5928122.html html ...

  2. html5权威指南：标记文字、组织内容、文档分节

    HTML5新增及删除标签:http://www.cnblogs.com/starof/archive/2015/06/23/4581850.html 第八章:标记文字                 ...

  3. HTML5火焰文字特效DEMO演示

    效果展示:http://hovertree.com/texiao/html5/26/ 效果图: 扫描二维码查看效果:

  4. HTML5火焰文字特效DEMO演示---转载

    只有google支持 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  5. 【HTML5】标记文字

    1.用基本的文字元素标记内容 先看显示效果: 对应HTML代码: <!DOCTYPE html> <html lang="en"> <head> ...

  6. [读码]HTML5像素文字爆炸重组

    [边读码,边学习,技术也好,思路也罢] [一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看 ...

  7. [HeadFirst-HTMLCSS学习笔记][第十二章HTML5标记]

    考虑HTML结构 HTML5即是把原来<div>换成一些更特定的元素.能够更明确指示包含什么内容. (页眉,导航,页脚,文章) article nav 导航 header footer t ...

  8. 基于HTML5自定义文字背景生成QQ签名档

    分享一款利用HTML5实现的自定义文字背景应用,首先我们可以输入需要显示的文字,并且为该文字选择一张背景图片,背景图片就像蒙版一样覆盖在文字上.点击生成QQ签名档即可将文字背景融为一体生成另外一张图片 ...

  9. 【HTML 元素】标记文字

    1.用基本的文字元素标记内容 先看显示效果: 对应HTML代码: <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. 51nod-1310: Chandrima and XOR

    [传送门:51nod-1310] 简要题意: 有一个数组S,保证里面的数是从小到大的,而且每一个数的二进制中都没有连续的1,如:1,2,4,5,8... 给出n,然后给出n个位置,求出S数组中n个位置 ...

  2. [AtCoder Regular Contest 096 E] Everything on It 解题报告 (第二类斯特林数+容斥原理)

    题目链接:https://arc096.contest.atcoder.jp/tasks/arc096_c Time limit : 4sec / Memory limit : 512MB Score ...

  3. [GDKOI2010] 圈地计划(网络流)

    题2链接:https://www.luogu.org/problemnew/show/P1935 Description 最近房地产商GDOI(Group of Dumbbells Or Idiots ...

  4. 4.bind绑定

    #include <iostream> #include <string> #include <boost/bind.hpp> #include <boost ...

  5. java 类和对象2

    编写Java应用程序.首先,定义一个时钟类——Clock,它包括三个int型成员变量分别表示时.分.秒,一个构造方法用于对三个成员变量(时.分.秒) 进行初始化,还有一个成员方法show()用于显示时 ...

  6. vue中Object.defineProperty用法

    function def (obj, key, val, enumerable) { Object.defineProperty(obj, key, { value: val, enumerable: ...

  7. Mysql 主从主主复制总结(详细)

    环境:Centos 6.9,Mysql 8.0 配置准备:1.为Centos配置好网络,使用远程工具连接. 2.安装mysql,途径不限.mysql8.0和5.7区别不大,8.0在配置主从的时候默认开 ...

  8. 由于webpack-cli版本问题造成的错误

    The CLI moved into a separate package: webpack-cli Please install 'webpack-cli' in addition to webpa ...

  9. Raspberry Pi - 调整你的SD卡分割区的大小

    在使用Win32DiskImager为一张空白的SD卡刷入新的Rasbian系统后,卡上的可用剩余空间并不大, 本人有一张8G的SD卡,但是刷入4.1的Rasbian后,用df -h查看,根目录下的空 ...

  10. MySQL好弱智的一个错误

    在sql中执行select是可以查询 但是在linux命令行下执行就报错 ERROR 1059 (42000): Identifier name 'use db_goforit_stati;selec ...