你所不知道的html5与html中的那些事（四）——文本标签

文章简介：

      关于html5相信你们早已经耳熟能详，可是他真正的意义在具体的开发中会有什么做用呢？相对于html，他又有怎样的新的定义与新理念在里面呢？为何一些专家认为html5彻底完成后，全部的工做均可以达到真正的云方式呢？这一系列的问题你是否已经想明白了呢？

      本系列文章将为您一一解答你所不知道的关于html5与html中的那些事;具体会包括如：html5新的理念与想法，html5的新标签的用意与具体开发中场景应用，html5与css3的感情经历（用法搭配），包括html5的父亲html的一些小隐私（您在开发中可能不知道的事）;

你们好，又与你们见面了， 今天我会为你们讲到的您可能不知道的事有什么呢？下面咱们就来看看

1)元素title属性对语意的重要性是什么？

2)html5中的新标签对于写文本启到一些重要影响的标签有哪些？

3)html5中<address>、<figure>、<time>标签的正确用法与注意事项有哪些是你不知道的?

4)关于<em><strong>与<b><i> 的前世此生？

第一个问题

元素title属性对语意的重要性是什么？

     title属性这个刚一看会不会想到title标签？可是不要弄到一块儿算呀，他们是彻底不一样的东西；感受平时在咱们开发的时候不多会用到这个属性，首先说一下它是干什么的吧，其实他就是一个具备提示做用的属性；对于屏幕阅读器来讲能够为用户朗读文本；因此正确的使用能够提高页面的访问性哦；

以下图在浏览器中的效果与代码；

 

代码实现

效果展现

各位朋友有没有发现这个有似曾相识的感受，对的就是之前用<img>标签的时候，alt属性的感受，这个就是须要朋友们注意了，在IE7之前img标签中是用alt来显示文本的，可是在IE7之后的版本，若是alt与title这两个属性同时出现会显示title属性中的文字而不是alt属性中的；

若是下图的运行结果：

第二个问题

html5中的新标签对于写文本启到一些重要影响的标签有哪些？

     小编想在写这个问题的答案以前说几句这些标签的理解与用法（至少小编是这么理解的并且自我感受效果还能够）；

    1，明确html5的核心思想就是语意，因此不论是什么标签就看表达的意思，而不是看展示的效果；

    2，关于文本的相关标签能够适当的想象成是语文中的标点符号这样能够方便记意与运用（或着你也能够经过其它的方式）

   好了明白上面的两点咱们在来讲这些新的标签的语意与用法吧；

     <address>、<figure>、<time>这三个标签下一个问题中详细说这里就先不说了；

    <strong><em>这个两个标签在HTML4.0中就已经有了，可是在这里仍是要说一下由于在之前可能不多用到它们由于不多有人去注意语意；

    <strong>表示的是重要的文本（默认为粗体显示）——重点是语意上的表达而不是展示的效果这个须要记住哦；

    <em>表示的是强调的文本(默认为斜体)

       <mark>标签HTML5中的新元素用来突出显示文本，它的效果就像是用荧光笔给重点的语句作标记同样；

     <span>标签这个也是在HTML中就已经有的了，之前的文章也大概的提过一下可是没有详细的说明，下面就详细的说明一下：

1.span没有任何的语意，因此正确的使用方式是须要在没有其它合适有标签的时候才能够用它；

2.它是短语级别的标签因此不会新出现一行，

3.同div同样在必定的状况下能够添加span标签利用微格式来增长语意；

4.通常的状况下须要用css来控制它的显示样式由于它没有样式的展示样式；

      <wbr>一个与<br>很像的新标签；区别在于它不会强制换行；

      <ruby><rp><rt>这几个标签就像是语文中的音标同样；

      <meter>能够用它作一些测量结果的显示与投票结果的显示（如今的问题是浏览器对它的支持很差）

      <progress>一样的一个进度条的显示，能够用作一些很好的与用户交互的效果；问题是浏览器的兼容如今也很差；

第三个问题

html5中<address>、<figure>、<time>标签的正确用法与注意事项有哪些是你不知道的?

      <address>这个标签是新的因此用他的人不多至于正确的用法固然也不多有人去研究它；小编就简单的总结一下：

 1.address是用来定义与HTML页面或页面一部分有关的做者、相关人员或组织的联系信息，一般位于页面底部或相关部份内；

 2.大多数时候，联系信息是做者的电子邮件或是指向联系信息页的连接；这个是正确的，不能标记“联系咱们”中的办公地点这是错误的用法；

 3.提供的信息要准确，不是说电子邮件的地址的正确性，而是说须要对应上提供信息的人，若是一个页面中有好多相关的人，那么提供信息的时候必定要肯定信息准确性，不要张冠李戴；

 4.address标签中不能有h1~h6\article\address\aside\footer\header\hgroup\nav\section等标签；

        <figure>这个元素是用来引入图表、图形、照片等，对应的场景就是像是杂志中的图片同样，在html5以前是没有一个专门的标签来作这个事的，以前若是实现这个功能就是用没有语意的div标签；

   用法提示：

    1.figure元素能够包含多个内容块；可是只能有一个figcaption（能够理解成给图表加标题）标签 

    2.能够用H1~H6来给figure增长标题；

    3.figcaption不能单独出现，须要有配套的内容一块儿出现 ；

       <time>能够经过这个标签标记一个具体的时间或日期；应用场景一般就是一篇文章的发表时间；写法以下图：

须要注意的是：

1.datetime中的时间最好与time标签中的文本元素日期同样，写法能够不同；

2.若是这个时间是表明整个文章或是页面的时间须要添加pubdate属性；

3.不要在time标签中使用不确切的时间如：“今天中午”、“上周末”

4.若是 使用pubdate属性须要注意的是要在同一个父标签下面不要出现张冠李戴的问题；

5.times标签不能在嵌套另外一个time标签；

6.datatime中的时间格式须要是标准的机器可能的时间 如:YYYY-MM-DDThh:mm:ss

其实作为一个新的标签它的用法还有不少，小编这里只是说了一些最基础的东西，不过我认为用会上面因此说的东西这个time元素用的就能够说是入门了

  第四个问题         

关于<em><strong>与<b><i> 的前世此生？

  各位开发过HTML的朋友都知道<em>与<i>、<strong>与<b>它们的展示形式同样的，一个是斜体一个是粗体，那么它们在html5中是怎么平相处的呢？下面咱们来重点讲一下<b><i>的前世此生：

    在很早之前，互联网那时尚未一个叫做CSS的东西出现的时候，为了区分文本中的重点与特殊的含意的文字<b><i>这对兄弟出现了；

在它们的帮助下，页面的文字与用户之间的交互获得了提高。

    然而好景不长，在互联网飞速发展的状况下，很快出现一个叫css的东西，它的责任就是用来控制页面的表现形式的，固然也包括<b><i>所表现的形式，因此在html4.0与xhtml1中就有开发人员建议废弃<b><i>,取面代之的就是<strong><em>+css，由于他们有语意性能够更好的与用户交互；但是问题并无就此结束，由于在开发的时候在一些状况下发现用<strong><em>老是不能很的好的表示语义；

    为此，在html5中<b><i>有以修改后的面貌展示给咱们了，因此在html5中又从新启用了<b><i>这对兄弟；

    那么具体在HTML5中何时用它的呢？

    b标签表示出于实用的目的提醒读者注意的一块文字，不传达任何额外的重要性，也不表示其它的语意和语气，用于：关键词，产品名，操做指令等等；

    i标签表示一块不一样于其它文字的文字，具备不一样的语态或语气，用于：分类名称，技术术语，外语中的惯用词等等；

好了今天就说到这里吧，不知道对读到这篇文章的您有什么帮助没有？相信经过这几篇文章感受您对HTML5文本标签这块了解了不少呢？

下篇文章我会讲一些HTML5 与图像相关的东西哦，相信必定会有你不知道的事情。 感谢您的阅读，期待下次与您见面；

身为一名IT技术人员磨练本身的技术是必不可少的，关注微信号coder_online，程序员互动联盟，能够与大牛在线随时讨论本身感兴趣的话题，让本身用最少的时间学到最多的东西，我在程序员互动联盟期待您的加入