深入理解html5系列-文本標籤

文章簡介:

      關於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程序員互動聯盟,可以與大牛在線隨時討論自己感興趣的話題,讓自己用最少的時間學到最多的東西,掃一掃下方二維碼或者搜索微信號coder_online即可關注。

                                       


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章