你的位置:首页 > 网页设计

[网页设计]3.html5的文本元素


  如果你看了第一篇的内容,你会发现我的代码是这样的:

文本<span>文本</span><scolia>文本</scolia><scolia abcd=123>文本</scolia>

 

  但显示的效果却是这样的:

  很奇怪,明明我的代码是分了4行来写的,但为什么在浏览器显示的时候却都在一行以内,而且它们之间都有一个空格的距离?

  因为,浏览器对于换行的解释并不是依靠我们写代码时的排版,而是根据特定的标签,例如专用的换行标签<br/>,或者是隐含换行的分组元素<div><div/>等。

  而我们的代码中,并没有使用到这些带有换行功能的元素。而其中的span元素,就是属于文本元素。

  所谓文本元素,就是将一段文本设置成相匹配的结构和含义。下面列出了一个参考表格:

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

  从上面这张表格中,我们发现文本元素还是非常多的。但实际上,在现实应用中,真正 常用的也就是那么几个,绝大部分是针对英文的。


 

文本元素解析

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

<b>HTML5</b> 

 

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


  2.<strong>表示重要的文字

<strong>HTML5</strong> 

 

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

 

  总结:为什么实现的效果一样,却分开了两个元素呢?这不是多余吗?其实,这就是html5的特色,html5强调的是语义化标签,这里的语义化,是对人而言的,目的是为了让人知道标签里文本放的是什么内容。而对于浏览器来说,其实完全可以使用通用元素<span>加上css样式来实现各种效果,只要一个元素就够了。但是这样代码的可读性就会很低了。当然,其实并没有强迫什么内容一定要放在特定的标签里面,具体的使用习惯还是依照个人而言。


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

<br>  //个人认为写成<br/>这种自闭合标签更符合规范,但不这样写也可以Thisabc<wbr>dkedkslakdj<wbr>fkdlsakd is apple. 

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


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

<i>HTML5</i>

 

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

  5.<em>加以强调

<em>HTML5</em>

 

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

 

  不同的元素实现相同的效果,上面就已经解释过为什么了,下面也就不再解释了


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

<s>HTML5</s>

 

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

 

  7.<del>表示删除文字

<del>HTML5</del> 

 

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


 

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

<u>HTML5</u> 

 

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

 

  9.<ins>添加一段文本

<ins>HTML5</ins> 

 

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


  10.<small>添加小号字体

<small>HTML5</small>

 

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


  11.<sub><sup>添加上标和下标

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

 

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


  12.<code>等表示输入和输出

<code>HTML5</code> <var>HTML5</var><samp>HTML5</samp><kdb>HTML5</kdb>

 

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


 

   13.<abbr>表示缩写

<abbr>HTML5</abbr>

 

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


  14.<dfn>表示定义术语

<dfn>HTML5</dfn>

 

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


  15.<q>引用来自他处的内容

<q>HTML5</q> 

 

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


 

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

<cite>HTML5</cite> 

 

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


  17.<ruby>语言元素

<ruby>   饕<rp>(</rp><rt>tāo</rt><rp>)</rp>  餮<rp>(</rp><rt>tiè</rt><rp>)</rp> </ruby> 

 

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


 

  18.<bdo>设置文字方向

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

 

   解释:<bdo>必须使用属性 dir 才可以设置,一共两个值:rtl(从右到左)和 ltr(从 左到右)。一般默认是 ltr。还有一个<bdi>元素也是处理方向的,由于是特殊语言的特殊效果,具有的支持程度要自己去测试了。


  19.<mark>突出显示文本

<mark>HTML5</mark> 

 

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


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

<time>2015-10-10</time> 

 

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


 

  21.<span>表示一般性文本

<span>HTML5</span>

 

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


  总结:其实这些元素看起来数量很多,但是能在浏览器展现的效果却很少。

  1.加粗

  2.倾向

  3.删除线

  4.下划线

  5.小号字体

  6.数学中的上下标

  7.英文生效的计算机代码片段效果

  8.双引号

  9.发音标注

  10.文字方向

  11.黄色背景,黑色字体

  12.换行相关

  而这些效果里面,大部分能够通过css实现,还有部分几乎用不到,所以没必要一定都要背下来。大概知道有哪些效果,用到的时候再查相应的表格就行了。