用于标记段落里的文本和其他内容组的元素种类很多,本文将这些文本级元素进行简单分类,便于整理和记忆
通用容器
<span>
元素是短语内容的通用行内容器,并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图(通过使用类或者Id属性),或者这些元素有着共同的属性,比如lang。应该在没有其他合适的语义元素时才使用它。<span>
与<div>
元素很相似,但<div>
是一个块元素而则是行内元素
<p>Some <span>text</span></p>
强调重要
虽然浏览器通常用斜体和粗体来显示em和strong,但这些元素不应用作加粗和斜体。这两个元素分别用来提升包含内容的强调程度和重要性
<em>
表示强调,<em>
元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读
<strong>
表示重要
<p>I am <em>very</em> worried!</p>
<strong>warning</strong>
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
文字间隔
i和b元素历来是用来展示粗体和斜体字体的,但在HTML5中,它们有了新的语义
<i>
1、表示不同情绪或声音的文本,如内心对白
<p>Simon smirked,"Yes,I'm happy to take the garbage out." <i>Ugh,I <em>really</em> don't want to !</i> he thought as he picked up the garbage bag.</p>
2、表示外来语、分类学名和技术术语等
<i lang="fr">Oh la la!</i>
<b>
1、用于分隔文字
<p>After bringing <b>water</b> to a boil, add <b>potatoes</b> and <b>carrots</b></p>
2、用于文章或故事的引言
<p><b class="lede">Meteorologists predict more sunshine and scorching temperatures for the upcoming week, prompting area farmers to install irrigation systems.</b></p>
不精确文字
<s>
在HTML5中重新定义为有错的、过时的、不被建议使用的文本,常用于表示价格变动等
<p>价格<s>¥1298</s>¥998!</p>
<p><s>37度</s> <strong>41度</strong></p>
高亮显示
<mark>
表示高亮或用于引用而标记的文字
<p><mark>We're all hoping it rains soon</mark>, some farmers have installed irrigation systems, at <em>considerable</em> expense</p>
次要评论
<small>
表示旁注,可用于免责声明、使用条款和版权信息等需要小字体的场景
<small>图片仅供参考,请以实物为准</small>
<small>Chris Elhorn | The city Press</small>
术语处理
用来定义术语
<p>The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals</p>
<abbr>
缩写词,可以配合<dfn>
定义术语
<p>The <dfn><abbr title="Garage Door Operner">GDO</abbr></dfn> id a device allows off-world teams to open the iris.</p>
引用
<cite>
表示作品标题的引用,可以是书影音画等
<p>
我最喜欢的电影是千与千寻
<q>
表示短引用,常用于引用别人说的话,用引号可以表达等价语义
<p>The judge said <q>You can drink water form the fish tank</q> but advised against it.</p>
换行
<br>
换行
注意:
标签是文本级语义元素,可以设置行高和字体大小,但设置宽高无效
<p>
<b>The City Press</b><br />
123 General Street <br />
Springfield, OH 45501
</p>
<i>Irrigation<wbr /> Direct</i>
上标下标
这两个标签在数学等式、科学符号和化学公式中非常有用
<sup>
表示上标
<p>
a<sup>2</sup>
+
b<sup>2</sup>
=
c<sup>2</sup>
</p>
表示下标
<p>
H<sub>2</sub>
SO<sub>4</sub>
</p>
文本删改
如果要表示文档的增删改记录,则应该使用ins和del标签
<ins>
文档中插入的内容
<del>
文档中删除的内容
注意:和可以嵌套任何元素
【属性】
1、datetime:用于标明编辑的日期和可选的时间
2、cite:用于指定说明编辑的文档网址
<p>
一打有 <del datetime="2015-12-30T00:00Z" cite="edit.html">二十</del> <ins>十二</ins>
件。</p>
特定时间
<time>
表示日期或时间
【属性】
1、datatime表示确切的时间,遵循格式YYYY-MM-DDThh:mm:ssTZD,表示年-月-天-分割符T-时-分-秒-时区
2、pubdate表示
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在<time datetime="2008-02-14">情人节</time>有个约会。</p>
<small>Posted <time datetime="2015-12-30T00:00:00UTC+08:00"></time></small>
注音标识
ruby标签定义注音标识,多用于CJK文字,CJK是指中日韩统一表意文字(Chinese、Japanese、Korean)
<ruby>
表示ruby标记
<rt>
表示ruby标记文字
<rp>
表示ruby标记括号
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
<ruby>
汉
<rp>(</rp>
<rt>hàn</rt>
<rp>)</rp>
语
<rp>(</rp>
<rt>yǔ</rt>
<rp>)</rp>
</ruby>
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
文字方向
<bdi>
忽略周围文字方向的文字
<bdo>
覆盖两种方向的设置,允许显式设置方向,并覆盖所有其他当前方向
<p>When rendered by a browser, <bdo dir="rtl">these words</bdo> will appear as 'sdroweseht'</p>
代码
<code>
表示计算机代码
<kbd>
定义键盘码
<samp>
定义计算机例子代码
<tt>
定义打字机代码
<var>
定义变量
<p>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
</p>