WEB標(biāo)準(zhǔn)教程:鏈接和文本標(biāo)簽的應(yīng)用

第四篇《WEB標(biāo)準(zhǔn)能有多難?》專欄文章將結(jié)束關(guān)于文本部分的XHTML的講解。那么這篇主講的內(nèi)容涉及鏈接、標(biāo)題、插.入、刪除、上下標(biāo)、分割線、換行等標(biāo)簽。
我們都知道網(wǎng)頁的最大特性是“鏈接”,是的這個在我們現(xiàn)在看起來習(xí)以為常的東西,讓我們的生活發(fā)生了巨大的變化,是這個小小的標(biāo)簽成就了這個世界上無數(shù)的互聯(lián)網(wǎng)天才。那么讓我們看看這個標(biāo)簽的真面目:<a href="URL" >文本區(qū)</a>
,就是這個簡單的標(biāo)簽,其實(shí)大家都在使用,用Dreamweaver可以很簡單的添加鏈接。但是盡管如此我們還是需要知道A的屬性是什么,這樣才能更好的利用它。A是個內(nèi)聯(lián)標(biāo)簽,也就是說它本身并不會產(chǎn)生分行。他是流于文本之中的無素。那么我們都知道內(nèi)聯(lián)元素是不能包含塊元素的。那就是說在A中不能包含段落、DIV等這些塊級的元素。那么你工作中是否有這樣的情況呢?是否在A里加了無數(shù)的塊級標(biāo)簽?zāi)??那從現(xiàn)在開始改掉這個壞習(xí)慣,這樣不光可以避免一些沒必要的BUG問題,同時也能給GOOGLE等這些搜索引擎一個好印象,多點(diǎn)印象分。當(dāng)然除此之外振之還推薦在大家伙在A中加入titile屬性。例:<a href="URL" title="這可用以解釋或是顯示完整的文本內(nèi)容">文本區(qū)</a>
。為什么這么做呢,我這里有這樣一篇文章《當(dāng)標(biāo)題不能顯示完整的時候》,大家可以看一下,這只是加title屬性其中一個小小的用處,但是作用非常有效。
鏈接標(biāo)簽中的href=“URL”這個URL是個非常強(qiáng)大的東西,當(dāng)然這不是我們這個專欄的內(nèi)容,但是也非常推薦讀者們可以認(rèn)真閱讀一下相關(guān)的知識。我從百度百科中找到了相關(guān)文檔,請大家點(diǎn)擊閱讀(站外鏈接請讀者們選擇新窗口閱讀)。關(guān)于鏈接就暫時只講這么多,如有什么疑問請通過文后的聯(lián)系信息與我聯(lián)系或是在線給我留言。
標(biāo)題幾乎是所有文章都會有的要素,也是我們用以識實(shí)與索引文章的重要元素。我們通過標(biāo)題去感知文章內(nèi)的核心。那么你知道嗎?合理使用標(biāo)題標(biāo)簽會讓你的文章更受關(guān)注。我們都知道XHTML給我們提供了h1~h6,六個標(biāo)題標(biāo)簽,那么我們?nèi)绾畏峙溥@六個標(biāo)題標(biāo)簽的使用呢?下面給出一些建議:h1,在瀏覽器中顯示最大,那么自然用來表示最大的標(biāo)題,對于一個網(wǎng)站來說哪個標(biāo)題才是最大的?是LOGO,我們通常會在網(wǎng)站的最前面先標(biāo)注這個網(wǎng)站的名稱。所以h1就用來放LOGO,當(dāng)然如果你的網(wǎng)站沒有LOGO,只有一個網(wǎng)站名稱,那也可以。當(dāng)然振之是不推薦在大家在h1中放個圖片。我們完全可以通過CSS來實(shí)現(xiàn)以圖換字。并且推薦網(wǎng)頁中h1只出現(xiàn)一次。
當(dāng)h1找到了專用的功能,那么擔(dān)任內(nèi)容標(biāo)是,或是基它標(biāo)題的重?fù)?dān)就要放在另外幾個標(biāo)題標(biāo)簽上了。在余下的幾個標(biāo)題中h5與h6在瀏覽器默認(rèn)顯示字體是小于正常文本字體的。那么推薦h5與h6只作為免責(zé)聲明或是版權(quán)通告來使用。這樣即表明重要性,又不會太過明顯影響閱讀。對于標(biāo)題標(biāo)簽的使用盡可能的注意一下他們之間的等級關(guān)系。當(dāng)然標(biāo)題的使用還是需要根據(jù)實(shí)際使用來決定。這里只是給出個建議。標(biāo)題標(biāo)簽是塊線元素,但是他并不能再包含塊級元素了,只能包含內(nèi)聯(lián)的元素,比如鏈接、圖像,換行之類的。記得有個朋友前兩天在文章中提到過關(guān)于標(biāo)題的內(nèi)容,但是寫法就有錯了,他把鏈接寫在了H1標(biāo)簽的外面,把H1包起來了,這樣的寫法是不推薦的。也不符合標(biāo)準(zhǔn)思維容易給以后的學(xué)習(xí)產(chǎn)生不好導(dǎo)向。
我們的文章難免會有錯誤的地方,那么有錯就要改,但是有時候我們需要告訴讀者這段是被刪除的但是又能讓讀者看到。那么刪除標(biāo)簽的作用就產(chǎn)生了。以前我們會使用<s></s>或是<strike></strike>來得到一個刪除線的效果。但是這僅表是一個刪除線的效果,語義上沒有DEL來得更為明確,所以這里我要告訴大家放棄以前的方式,采用<del></del>這個標(biāo)簽。同樣能表達(dá)我們需要的效果,并且意義更為直接明確。那么除了刪除有時我們還需要對刪除的部分作出一些添加與修改。那么時候這個標(biāo)簽就非常有作用了那就是插.入標(biāo)簽<ins></ins>。相信不用我說大家也知道如何使用這兩個標(biāo)簽,但是千萬別忘記了給這兩個標(biāo)簽加上兩個重要的屬性:cite與datetime。解釋與時間。解釋不用說了,只要用文字注明為什么要刪除或是為什么要插.入就可以了。但是這個時間需要明確一下格式。嚴(yán)格的格式是:YYYY-MM-DDThh:mm:ssTZD。呵呵與我們平時用的差不多但是有區(qū)別,其中T是表示時間段開始的必需字符,而TZD則是表示時區(qū),Z是表是格林威治標(biāo)準(zhǔn)時間。一秀的寫法是:2008-03-25T14:26:22Z
在所有的標(biāo)簽中有兩上標(biāo)簽是樣式標(biāo)簽,但是卻沒有被禁用,因?yàn)檫@兩個標(biāo)簽所表述的內(nèi)容很特別,上下標(biāo),<sup>上標(biāo)</sup>,<sub>下標(biāo)</sub>。
這兩個標(biāo)簽用得到機(jī)率比較小,但是上標(biāo)應(yīng)該還是會常用到的,比如溫度中的攝氏度的上的小圓圈,當(dāng)然現(xiàn)有有專業(yè)的字符對應(yīng)“℃”,還有我們常看到書中的腳注上標(biāo)[1]。
hr,分平分隔線,這個標(biāo)簽與換行標(biāo)簽只要注意標(biāo)簽的寫法就可以了<hr /><br />
關(guān)于文本部分的標(biāo)簽就講到這里,當(dāng)然標(biāo)簽可能還有很多,但是一些不推薦使用的,不常用的,這里就不再推薦,有興趣的可以搜索一下相關(guān)的內(nèi)空閱讀一下即可。下一篇將引入CSS,一點(diǎn)點(diǎn)的美化我們的文檔。
相關(guān)文章
AudioContext 實(shí)現(xiàn)音頻可視化(web技術(shù)分享)
這篇文章主要分享的是web技術(shù)的 AudioContext 實(shí)現(xiàn)音頻可視化,要實(shí)現(xiàn)音頻可視化得先實(shí)現(xiàn)一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext,下面詳細(xì)內(nèi)容2022-02-23- 這篇文章主要給大家介紹了web技術(shù)中的WebRTC記錄音視頻流,文章內(nèi)容圍繞主題展相關(guān)資料,需要的小伙伴可以參考一下,希望對你有所幫助2022-02-23
- 這是我通過網(wǎng)上查閱資料總結(jié)的一些編碼規(guī)范,用于鞏固對html,css頁面重構(gòu)時的基礎(chǔ),需要的朋友可以參考下2020-12-19
前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范,需要的朋友可以參考下2017-01-21Web前端開發(fā)規(guī)范2017(HTML/JavaScript/CSS)
這是一份旨在增強(qiáng)團(tuán)隊(duì)的開發(fā)協(xié)作,提高代碼質(zhì)量和打造開發(fā)基石的編碼風(fēng)格規(guī)范,其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個部分。我們知道,當(dāng)一個團(tuán)隊(duì)開始指定并實(shí)行2017-01-21- 這篇文章主要為大家介紹了前端開發(fā)團(tuán)隊(duì)遵循和約定的代碼書寫規(guī)范,意在提高代碼的規(guī)范性和可維護(hù)性,需要的朋友可以參考下2017-01-21
響應(yīng)式Web之流式網(wǎng)格系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了響應(yīng)式Web之流式網(wǎng)格系統(tǒng)的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-07-04在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法
下面小編就為大家分享一篇在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法。希望對大家有所幫助。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-03-16Visual Foxpro 6.0 中文版安裝向?qū)?圖解)
基于很多用戶都在下載Visual Foxpro 6.0,但是有安裝vtp6.0經(jīng)驗(yàn)的朋友確很少,在安裝過程中總會出現(xiàn)這樣那樣的問題,基于這些問題,下面小編抽個時間把Visual Foxpro 6.02015-09-09網(wǎng)站日志200 0 64狀態(tài)碼的分析(協(xié)議子狀態(tài))
網(wǎng)站日志200 0 64狀態(tài)碼的分析介紹2012-10-29