你所不知道的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，程序員互動聯盟，或者掃描下方二維碼，能夠與大牛在線隨時討論本身感興趣的話題，讓本身用最少的時間學到最多的東西，我在程序員互動聯盟期待您的加入