文章簡介：

關(guān)于html5相信大家早已經(jīng)耳熟能詳，但是他真正的意義在具體的開發(fā)中會有什么作用呢？相對于html，他又有怎樣的新的定義與新理念在里面呢？為什么一些專家認為html5完全完成后，所有的工作都可以達到真正的云方式呢？這一系列的問題你是否已經(jīng)想明白了呢？

本系列文章將為您一一解答你所不知道的關(guān)于html5與html中的那些事;具體會包括如：html5新的理念與想法，html5的新標簽的用意與具體開發(fā)中場景應(yīng)用，html5與css3的感情經(jīng)歷（用法搭配），包括html5的父親html的一些小隱私（您在開發(fā)中可能不知道的事）;

大家好，又與大家見面了， 今天我會為大家講到的您可能不知道的事有什么呢？下面我們就來看看

1)元素title屬性對語意的重要性是什么？

2)html5中的新標簽對于寫文本啟到一些重要影響的標簽有哪些？

3)html5中<address>、<figure>、<time>標簽的正確用法與注意事項有哪些是你不知道的?

4)關(guān)于<em><strong>與<b><i> 的前世今生？

第一個問題

元素title屬性對語意的重要性是什么？

title屬性這個剛一看會不會想到title標簽？但是不要弄到一起算呀，他們是完全不同的東西；感覺平時在我們開發(fā)的時候很少會用到這個屬性，首先說一下它是干什么的吧，其實他就是一個具有提示作用的屬性；對于屏幕閱讀器來說可以為用戶朗讀文本；所以正確的使用可以提升頁面的訪問性哦；

如下圖在瀏覽器中的效果與代碼；

代碼實現(xiàn)

效果展示

各位朋友有沒有發(fā)現(xiàn)這個有似曾相識的感覺，對的就是以前用<img>標簽的時候，alt屬性的感覺，這個就是需要朋友們注意了，在IE7以前img標簽中是用alt來顯示文本的，但是在IE7以后的版本，如果alt與title這兩個屬性同時出現(xiàn)會顯示title屬性中的文字而不是alt屬性中的；

如果下圖的運行結(jié)果：

第二個問題

html5中的新標簽對于寫文本啟到一些重要影響的標簽有哪些？

小編想在寫這個問題的答案之前說幾句這些標簽的理解與用法（至少小編是這么理解的而且自我感覺效果還可以）；

1，明確html5的核心思想就是語意，所以不管是什么標簽就看表達的意思，而不是看展現(xiàn)的效果；

2，關(guān)于文本的相關(guān)標簽可以適當?shù)南胂蟪墒钦Z文中的標點符號這樣可以方便記意與運用（或著你也可以通過其它的方式）

好了明白上面的兩點我們在來說這些新的標簽的語意與用法吧；

<address>、<figure>、<time>這三個標簽下一個問題中詳細說這里就先不說了；

<strong><em>這個兩個標簽在HTML4.0中就已經(jīng)有了，但是在這里還是要說一下因為在以前可能很少用到它們因為很少有人去注意語意；

<strong>表示的是重要的文本（默認為粗體顯示）——重點是語意上的表達而不是展現(xiàn)的效果這個需要記住哦；

<em>表示的是強調(diào)的文本(默認為斜體)

<mark>標簽HTML5中的新元素用來突出顯示文本，它的效果就像是用熒光筆給重點的語句做標記一樣；

<span>標簽這個也是在HTML中就已經(jīng)有的了，以前的文章也大概的提過一下但是沒有詳細的說明，下面就詳細的說明一下：

1.span沒有任何的語意，所以正確的使用方式是需要在沒有其它合適有標簽的時候才可以用它；

2.它是短語級別的標簽所以不會新出現(xiàn)一行，

3.同div一樣在一定的情況下可以添加span標簽利用微格式來增加語意；

4.一般的情況下需要用css來控制它的顯示樣式因為它沒有樣式的展現(xiàn)樣式；

<wbr>一個與<br>很像的新標簽；區(qū)別在于它不會強制換行；

<ruby><rp><rt>這幾個標簽就像是語文中的音標一樣；

<meter>可以用它做一些測量結(jié)果的顯示與投票結(jié)果的顯示（現(xiàn)在的問題是瀏覽器對它的支持不好）

<progress>同樣的一個進度條的顯示，可以用做一些很好的與用戶交互的效果；問題是瀏覽器的兼容現(xiàn)在也不好；

第三個問題

html5中<address>、<figure>、<time>標簽的正確用法與注意事項有哪些是你不知道的?

<address>這個標簽是新的所以用他的人很少至于正確的用法當然也很少有人去研究它；小編就簡單的總結(jié)一下：

1.address是用來定義與HTML頁面或頁面一部分有關(guān)的作者、相關(guān)人員或組織的聯(lián)系信息，通常位于頁面底部或相關(guān)部分內(nèi)；

2.大多數(shù)時候，聯(lián)系信息是作者的電子郵件或是指向聯(lián)系信息頁的鏈接；這個是正確的，不能標記“聯(lián)系我們”中的辦公地點這是錯誤的用法；

3.提供的信息要準確，不是說電子郵件的地址的正確性，而是說需要對應(yīng)上提供信息的人，如果一個頁面中有好多相關(guān)的人，那么提供信息的時候一定要確定信息準確性，不要張冠李戴；

4.address標簽中不能有h1~h6articleaddressasidefooterheaderhgroup avsection等標簽；

<figure>這個元素是用來引入圖表、圖形、照片等，對應(yīng)的場景就是像是雜志中的圖片一樣，在html5之前是沒有一個專門的標簽來做這個事的，之前如果實現(xiàn)這個功能就是用沒有語意的div標簽；

用法提示：

1.figure元素可以包含多個內(nèi)容塊；但是只能有一個figcaption（可以理解成給圖表加標題）標簽

2.可以用H1~H6來給figure增加標題；

3.figcaption不能單獨出現(xiàn)，需要有配套的內(nèi)容一起出現(xiàn) ；

<time>可以通過這個標簽標記一個具體的時間或日期；應(yīng)用場景通常就是一篇文章的發(fā)表時間；寫法如下圖：

需要注意的是：

1.datetime中的時間最好與time標簽中的文本元素日期一樣，寫法可以不一樣；

2.如果這個時間是代表整個文章或是頁面的時間需要添加pubdate屬性；

3.不要在time標簽中使用不確切的時間如：“今天中午”、“上周末”

4.如果 使用pubdate屬性需要注意的是要在同一個父標簽下面不要出現(xiàn)張冠李戴的問題；

5.times標簽不能在嵌套另一個time標簽；

6.datatime中的時間格式需要是標準的機器可能的時間 如:YYYY-MM-DDThh:mm:ss

其實做為一個新的標簽它的用法還有很多，小編這里只是說了一些最基礎(chǔ)的東西，不過我認為用會上面所以說的東西這個time元素用的就可以說是入門了

第四個問題

關(guān)于<em><strong>與<b><i> 的前世今生？

各位開發(fā)過HTML的朋友都知道<em>與<i>、<strong>與<b>它們的展現(xiàn)形式一樣的，一個是斜體一個是粗體，那么它們在html5中是怎么平相處的呢？下面我們來重點講一下<b><i>的前世今生：

在很早以前，互聯(lián)網(wǎng)那時還沒有一個叫作CSS的東西出現(xiàn)的時候，為了區(qū)分文本中的重點與特殊的含意的文字<b><i>這對兄弟出現(xiàn)了；

在它們的幫助下，頁面的文字與用戶之間的交互得到了提升。

然而好景不長，在互聯(lián)網(wǎng)飛速發(fā)展的情況下，很快出現(xiàn)一個叫css的東西，它的責任就是用來控制頁面的表現(xiàn)形式的，當然也包括<b><i>所表現(xiàn)的形式，所以在html4.0與xhtml1中就有開發(fā)人員建議廢棄<b><i>,取面代之的就是<strong><em>+css，因為他們有語意性可以更好的與用戶交互；可是問題并沒有就此結(jié)束，因為在開發(fā)的時候在一些情況下發(fā)現(xiàn)用<strong><em>總是不能很的好的表示語義；

為此，在html5中<b><i>有以修改后的面貌展現(xiàn)給我們了，所以在html5中又重新啟用了<b><i>這對兄弟；

那么具體在HTML5中什么時候用它的呢？

b標簽表示出于實用的目的提醒讀者注意的一塊文字，不傳達任何額外的重要性，也不表示其它的語意和語氣，用于：關(guān)鍵詞，產(chǎn)品名，操作指令等等；

i標簽表示一塊不同于其它文字的文字，具有不同的語態(tài)或語氣，用于：分類名稱，技術(shù)術(shù)語，外語中的慣用詞等等；

更多信息請查看IT技術(shù)專欄