HTML5权威指南——用基本的文字元素标记内容

最新推荐文章于 2022-07-21 14:51:49 发布

gyypwrs

最新推荐文章于 2022-07-21 14:51:49 发布

阅读量204

点赞数

分类专栏： HTML5权威指南文章标签： html5

本文链接：https://blog.csdn.net/gyypwrs/article/details/109259741

版权

20 篇文章 0 订阅

订阅专栏

这下面要记录的标签都与设置文字呈现形式相关的，鉴于他们太零碎了，就在这里做一下记录吧！书中作者也说到顺应语义与呈现分离的原则，尽量少用吧！多用CSS来设置呈现方式吧！

b元素用来标记一段文字，但并不表示强调或者是重要性。设计他的初衷应该就是用来标记文章中提要中的关键词和产品评论中的产品名称。他的实际做法就是将内容加粗

<body>
	I like <b>apples</b> and <b>oranges</b>
</body>

下图就是他的呈现方式：
在这里插入图片描述

em元素表示对一段文字的强调（联想到em是CSS中的相对长度，跟字号挂钩的。）可以理解为给文字添加一个语境。

<body>
	I like <em>apples</em> and <em>oranges</em>
</body>

下面就是他的呈现方式（看上去是变成斜体了）：
在这里插入图片描述

i元素表示一段文字与周围内容有本质区别。这个含义是相当的模糊，不过书中说这个元素常用来表示外文词语，科技术语，或者是某个人的想法。

<body>
   I like <i>apples</i> and <i>oranges</i>
</body>

下图是他的呈现方式（看上去跟em是一样的，都变成斜体了）
在这里插入图片描述

s元素用来表示一段文字不再准确或正确。他的样式是在文字上显示一条删除线。

<s>I like apples and oranges</s>

在这里插入图片描述

用strong元素表示一段重要的文字。与b元素的区别就是strong赋予文字以重要性。

<b>I like apples and oranges</b>
<br/>
<strong>warning:</strong>Eating too many oranges can give you heart burn

第一行是b,第二行是strong，看呈现方式上没有太大的区别。
在这里插入图片描述

u元素将一段文字从周围中凸显出来的方式是加下划线，但他并未赋予强调或者重要性的意思，只是给了呈现效果。

<u>warning:Eating too many oranges can give you heart burn</u>

在这里插入图片描述
添加小号字体内容
small元素表示小号字体内容，常用于免责声明和澄清说明。

warning:Eating too many oranges can give you heart burn
<br/>
<small>warning:Eating too many oranges can give you heart burn</small>

第一行是正常显示，第二行是用了small
在这里插入图片描述

使用sub和sup添加上标和下标。

The point X<sub>10</sub> is the 10<sup>th</sup> point

在这里插入图片描述

关注

专栏目录