常用HTML文本元素汇总

来源:互联网 发布:城西银泰有mac专柜吗 编辑:程序博客网 时间:2024/06/13 22:45

所谓文本元素,就是将一段文本设置成像匹配的结构和含义。

HTML5规范指出:使用元素应该完全从元素的语义出发。而我们往往会出现胡乱拼凑以达到显示效果的现象,此类编程习惯目前可能看似没有什么影响,但很有可能存在不少的隐患,而且对于将来浏览器的检索也是有一定的影响的。故而根据语义来选择适当的标签是非常重要的。

以下是总结的常用文本元素;(为了方便记忆,特意给出了基本所有标签的完整描述)

1.br(break)与wbr(word break):
br表示纯粹的换行;
wbr作用于不带分隔符的字符序列,只有当浏览器窗口的宽度小到一定的程度时才会对wbr处的内容进行换行;(就跟其完整描述Word break所描述的,即单词的分隔)
2.b(即bold)与strong
两个都用于对文本进行加粗,区别在于b用来定义粗体文本,而strong虽然效果和b相同,但其表示重要的文本;
3.i(italic)与em(emphasis即强调的意思)
两个都是将文本以斜体的样式显示,i是指纯粹的斜体,而em则是表示强调意义,即添加了强调的语义成分。
4.s(strike)与del(delete)
两者都是定义文档中已被删除的文本(即删除线文本),目前已不建议使用s,建议使用后者del,del经常配合<ins>标签来使用,来描述文档的更新与修正。
5.u(underline)与ins(inserted text)
两个都是为文本添加下划线的效果,u定义下划线文本,ins定义已经被插入文档中的文本。
6.small定义小号文本
7.sub(subscript 下标)与sup(superscript 上标)添加商标和下标

<sub> 标签可定义下标文本:包含在 <sub> 标签和其结束标签 </sub> 中的内容将会以当前文本流中字符高度的一半来显示。
<sup> 标签可定义上标文本:包含在 <sup> 标签和其结束标签 </sup> 中的内容将会以当前文本流中字符高度的一半来显示。
提示:无论是 <sub> 标签还是和它对应的 <sup> 标签,在数学等式、科学符号和化学公式中都非常有用。
<sup>标签在向文档添加脚注以及表示方程式中的指数值时非常有用。如果和 <a> 标签结合起来使用,就可以创建出很好的超链接脚注。
8.code、var(variable 变量)、samp(sample )、kbd(keyboard 键盘)
<code> 标签:用于表示计算机源代码或者其他机器可以阅读的文本内容。
             软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code> 标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体(Courier)显示出来,对于大多数程序员和 W3School 的用户来说,这应该是十分熟悉的。
             只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 <code> 标签。虽然 <code> 标签通常只是把文本变成等宽字体,但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如,程序员的浏览器可能会寻找 <code> 片段,并执行某些额外的文本格式化处理,如循环和条件判断语句的特殊缩进等。
<var> 标签:表示变量的名称,或者由用户提供的值。
            <var> 标签是计算机文档中应用的另一个小窍门,这个标签经常与 <code> 和 <pre> 标签一起使用,用来显示计算机编程代码范例及类似方面的特定元素。
            用 <var> 标签标记的文本通常显示为斜体。
            就像其他与计算机编程和文档相关的标签一样,<var> 标签不只是让用户更容易理解和浏览你的文档,而且将来某些自动系统还可以利用这些恰当的标签,从你的文档中提取信息以及文档中提到的有用参数。我们再一次强调,提供给浏览器的语义信息越多,浏览器就可以越好地把这些信息展示给用户。
<samp> 标签是一个短语标签,用来定义计算机程序的样本文本。
<kbd> 标签:定义键盘文本。
            说到技术概念上的特殊样式时,就要提到 <kbd> 标签。正如你已经猜到的,它用来表示文本是从键盘上键入的。
             浏览器通常用等宽字体来显示该标签中包含的文本。
9.abbr(abbreviated 缩写)
<abbr>元素没有实际作用;从语义上看,是一段文本的缩写。
提示:可以在 <abbr> 标签中使用全局的 title 属性,这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本。
10.dfn(definition)
解释:<dfn>元素就是一般性的倾斜;从语义上看,表示解释一个词或短语的一段文本。
11.q(quotation 引用)
定义短的引用,其效果为为文本加上一对引号。
12.cite
<cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
13.ruby()
<ruby> 标签定义 ruby 注释(中文注音或字符)。
在东亚使用,显示的是东亚字符的发音。
与 <ruby> 以及 <rt> 标签一同使用:
ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。
14.bdo(Bi-directional override双向铺下,双向覆盖 即表示可以双向打字)
bdo 元素可覆盖默认的文本方向。
解释:<bdo>必须使用属性 dir 才可以设置,一共两个值:rtl(从右到左)和 ltr(从 左到右)。一般默认是 ltr。还有一个<bdi>元素也是处理方向的,由于是特殊语言的特殊 效果,且主流浏览器大半不支持,忽略
bdi 指的是 bidi 隔离。
<bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。
在发布用户评论或其他您无法完全控制的内容时,该标签很有用。
15.mark 标记:突出显示文本 
解释:<mark>实际作用就是加上一个黄色的背景,黑色的字;从语义上来看,与上下 文相关而突出的文本,用于记号。
16.time表示日期和时间 
<time>2015-10-10</time> 解释:<time>元素没有实际作用;从语义上来看,表示日期和时间。
17.span表示一般性文本
<span>HTML5</span> 解释:<span>元素没有实际作用;语义上就是表示一段文本,我们经常用它来设置 CSS 等操作。

原创粉丝点击