HTML 文本元素






一、文本元素总汇

HTML5规范指出:使用元素应该完全从元素的语义出发。但是由于历史遗留及用户至上的原则,这种语义会宽松许多。

元素名称说明
a生成超链接
br强制换行
wbr可安全换行
b标记一段文字但不强调
strong表示重要
i表示外文或科学术语
em表示强制
code表示计算机代码
var表示程序输出
samp表示变量
kdb表示用户输入
abbr表示缩写
cite表示其他作品的标题
del表示被删除的文字
s表示文字已不在确认
dfn表示术语定义
mark表示与另一段上下文有关的内容
q表示引自其他处的内容
rp与ruby元素结合使用,标记括号
rt与ruby元素结合使用,标记括号
ruby表示位于表意文字上方或右方的注音符号
bdo控制文字的方向
small表示小号字体内容
sub表示下标字体
sup表示上标字体
time表示时间或日期
u标记一段文字但不强调
span通用元素,没有任何语义。一般配合CSS修饰

二、文本元素解析

1、< b > 表示关键字和产品名称
HTML5

<b>HTML5</b>

解释:< b > 元素实际作用就是加粗。从语义上来看,就是标记一段文字,但并不是 特别强调或重要性。比如:一段文本中某些关键字或者产品的名称。

2、< strong > 表示重要的文字
HTML5

<strong>HTML5</strong>

解释:< strong > 元素实际作用和 < b > 一样,就是加粗。从语义上来看,就是强调一段重要的文本。

3、< br > 强制换行、< wbr > 安全换行

解释:在任意文本位置键入< br > 都会被换行,而在英文单词过长时使用< wbr > 会根据浏览器的宽度适当的裁切换行。

4、< i > 表示外文词汇或科技术语
HTML5

<i>HTML5</i>

解释:< i > 元素实际作用就是倾斜。从语义上来看,表示区分周围内容,并不是特别强调或重要性。

5、< em > 加入强调
HTML5

<em>HTML5</em>

解释:< em > 元素实际作用和< i > 一样,就是倾斜;从语义上来看,表示对一段文本的强调。

6、< s > 表示不准确或校正
HTML5

<s>HTML5</s>

解释:< s > 元素实际作用就是删除线;从语义上来看,表示不准确的删除。

7、< del > 表示删除文字
HTML5

<del>HTML5</del>

解释:< del > 元素实际作用和< s > 一样,就是删除线,从语义上来看,表示删除相关文字。

8、< u > 表示给文字加上下划线
HTML5

<u>HTML5</u>

解释:< u > 元素实际作用就是加一条下划线;从语义上来看,并不强调此段文本。

9、< ins > 添加一段文本
HTML5

<ins>HTML5</ins>

解释:< ins > 元素实际作用和< u > 一样,加一条下划线;从语义上来看,是添加一段文本,起到强调作用。

10、 < small > 添加小号字体
这是小号字体小号HTML5

这是小号字体<small>小号HTML5</small>

解释:< small > 元素实际作用就是将文本放小一号。从语义上来看,用于免责声明和澄清声明。

11、< sub > < sup >
HTML5
HTML5

HTML<sub>5</sub>
HTML<sup>5</sup>

解释:< sub > 和 < sup > 元素实际作用就是数学的上标和下标。语义也是如此

12、< code > 等表示输入和输出
HTML5
HTML5
HTML5
HTML5

<code>HTML5</code>
<var>HTML5</var>
<samp>HTML5</samp>
<kbd>HTML5</kbd>

解释:< code > 表示计算机代码片段;< var > 表示编程语言中的变量;< samp > 表示程序或计算机的输出;< kbd > 表示用户的输入。由于这属于英文范畴的,必须将lang=”en”英语才能提现效果。

13、< abbr > 表示缩写
HTML5

<abbr>HTML5</abbr>

解释:< abbr > 元素没有实际作用;从语义上看,是一段文本的缩写。

14、< dfn > 表示定义术语
HTML5

<dfn>HTML5</dfn>

解释:< dfn > 元素就是一般性的倾斜;从语义上来看,表示解释一个此或短语的一段文本。

15、< q > 引用来自其他处的内容
HTML5

<q>HTML5</q>

解释:< q > 元素实际作用就是加了一对双引号。从语义上来看,表示引用来自其他地方的内容。

16、< cite > 引用其他作品的标题
HTML5

<cite>HTML5</cite>

解释:< cite > 元素实际作用就是倾斜。从语义上来看,表示引用其他作品的标题。

17、< ruby > 语言元素

(tao)
(tie)

<ruby style="font-size: 100px"><rp>(</rp><rt>tao<rt><rp>)</rp><rp>(</rp><rt>tie<rt><rp>)</rp>
</ruby>

解释:< ruby > 用来为非西方语言提供支持。< rp > < rt > 用来帮助读者掌握表意语言文字正确发音。比如:汉语拼音在文字上方。

18、< bdo > 设置文字方向
HTML5

<bdo dir="rtl">HTML5</bdo>

解释:< bdo > 必须使用属性dir才可以设置。一共两个值:rtl(从右到左)合同ltr(从左到右)。 一般默认是ltr。还有一个< bdi > 元素也是处理方向的。

19、< mark > 突出显示文本
HTML5

<mark>HTML5</mark>

解释:< mark > 实际作用就是加上一个黄色的背景,黑色的字;从语义上来看,与上下文相关而突出的文本,用于记号。

20、< time > 表示日期和时间

<time>2017-09-27</time>

解释:< time > 元素没有实际作用;从语义上来看,表示日期和时间。

21、< span > 表示一般性文本
HTML5

<span>HTML5</span>

解释:< span > 元素没有实际作用;语义上就是表示一段文本,我们经常用它来设置CSS等操作。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiaoxiaobukuang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值