深入理解html5系列-文本標(biāo)簽
來源:易賢網(wǎng) 閱讀:795 次 日期:2015-04-29 14:33:19
溫馨提示:易賢網(wǎng)小編為您整理了“深入理解html5系列-文本標(biāo)簽”,方便廣大網(wǎng)友查閱!

文章簡介:

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

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

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

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

2)html5中的新標(biāo)簽對于寫文本啟到一些重要影響的標(biāo)簽有哪些?

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

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

第一個(gè)問題

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

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

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

代碼實(shí)現(xiàn)

效果展示

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

如果下圖的運(yùn)行結(jié)果:

第二個(gè)問題

html5中的新標(biāo)簽對于寫文本啟到一些重要影響的標(biāo)簽有哪些?

小編想在寫這個(gè)問題的答案之前說幾句這些標(biāo)簽的理解與用法(至少小編是這么理解的而且自我感覺效果還可以);

1,明確html5的核心思想就是語意,所以不管是什么標(biāo)簽就看表達(dá)的意思,而不是看展現(xiàn)的效果;

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

好了明白上面的兩點(diǎn)我們在來說這些新的標(biāo)簽的語意與用法吧;

<address>、<figure>、<time>這三個(gè)標(biāo)簽下一個(gè)問題中詳細(xì)說這里就先不說了;

<strong><em>這個(gè)兩個(gè)標(biāo)簽在HTML4.0中就已經(jīng)有了,但是在這里還是要說一下因?yàn)樵谝郧翱赡芎苌儆玫剿鼈円驗(yàn)楹苌儆腥巳プ⒁庹Z意;

<strong>表示的是重要的文本(默認(rèn)為粗體顯示)——重點(diǎn)是語意上的表達(dá)而不是展現(xiàn)的效果這個(gè)需要記住哦;

<em>表示的是強(qiáng)調(diào)的文本(默認(rèn)為斜體)

<mark>標(biāo)簽HTML5中的新元素用來突出顯示文本,它的效果就像是用熒光筆給重點(diǎn)的語句做標(biāo)記一樣;

<span>標(biāo)簽這個(gè)也是在HTML中就已經(jīng)有的了,以前的文章也大概的提過一下但是沒有詳細(xì)的說明,下面就詳細(xì)的說明一下:

1.span沒有任何的語意,所以正確的使用方式是需要在沒有其它合適有標(biāo)簽的時(shí)候才可以用它;

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

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

4.一般的情況下需要用css來控制它的顯示樣式因?yàn)樗鼪]有樣式的展現(xiàn)樣式;

<wbr>一個(gè)與<br>很像的新標(biāo)簽;區(qū)別在于它不會強(qiáng)制換行;

<ruby><rp><rt>這幾個(gè)標(biāo)簽就像是語文中的音標(biāo)一樣;

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

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

第三個(gè)問題

html5中<address>、<figure>、<time>標(biāo)簽的正確用法與注意事項(xiàng)有哪些是你不知道的?

<address>這個(gè)標(biāo)簽是新的所以用他的人很少至于正確的用法當(dāng)然也很少有人去研究它;小編就簡單的總結(jié)一下:

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

2.大多數(shù)時(shí)候,聯(lián)系信息是作者的電子郵件或是指向聯(lián)系信息頁的鏈接;這個(gè)是正確的,不能標(biāo)記“聯(lián)系我們”中的辦公地點(diǎn)這是錯(cuò)誤的用法;

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

4.address標(biāo)簽中不能有h1~h6articleaddressasidefooterheaderhgroup avsection等標(biāo)簽;

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

用法提示:

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

2.可以用H1~H6來給figure增加標(biāo)題;

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

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

需要注意的是:

1.datetime中的時(shí)間最好與time標(biāo)簽中的文本元素日期一樣,寫法可以不一樣;

2.如果這個(gè)時(shí)間是代表整個(gè)文章或是頁面的時(shí)間需要添加pubdate屬性;

3.不要在time標(biāo)簽中使用不確切的時(shí)間如:“今天中午”、“上周末”

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

5.times標(biāo)簽不能在嵌套另一個(gè)time標(biāo)簽;

6.datatime中的時(shí)間格式需要是標(biāo)準(zhǔn)的機(jī)器可能的時(shí)間 如:YYYY-MM-DDThh:mm:ss

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

第四個(gè)問題

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

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

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

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

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

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

那么具體在HTML5中什么時(shí)候用它的呢?

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

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

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

更多信息請查看網(wǎng)頁制作
易賢網(wǎng)手機(jī)網(wǎng)站地址:深入理解html5系列-文本標(biāo)簽
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)