學(xué)會(huì)這樣去寫(xiě)你的HTML代碼

1、今天想分享的是如何去使用我們的HTML Tag,把WCAG的標(biāo)準(zhǔn)和語(yǔ)義網(wǎng)的目標(biāo)進(jìn)行代碼 上的體現(xiàn)：文檔聲明：其實(shí)這跟WCAG根本上連不上什么直接關(guān)系，但為了一個(gè)兼 容性更好，特別是向后兼容的頁(yè)面，我推薦你這樣寫(xiě)：鏈接：互聯(lián)網(wǎng)的聯(lián)幾乎可以說(shuō)是用來(lái)實(shí)現(xiàn)的，作為一個(gè)頁(yè)面最常見(jiàn)的標(biāo)簽。 我們應(yīng)該如何對(duì)待呢？為關(guān)鍵鏈接添加accesskey除非萬(wàn)不得已，不要去掉focus時(shí)虛線框Link縮寫(xiě)：對(duì)于用HTML Tag的正確使用，也是非常重要的，這有利于讀屏軟件使 用者對(duì)于頁(yè)面結(jié)構(gòu)的理解。特別是在H1,H2,H3等這些標(biāo)簽的使用，濫用非常容易造成結(jié) 構(gòu)費(fèi)解。當(dāng)然，使用一般的標(biāo)簽，再利用CSS來(lái)使視覺(jué)上形成對(duì)

2、比這也是常人能辨識(shí)的。 但讀屏軟件用戶呢。當(dāng)然，這里只是順帶提起需要注意頁(yè)面標(biāo)簽的使用方法，而abbr最重 要的應(yīng)該是應(yīng)該添加一個(gè)title屬性對(duì)縮寫(xiě)進(jìn)行描述。比如：WD大段引用：，一般引用：有大段引用的時(shí)候，使用， 而行內(nèi)引用則使用，讓你的結(jié)構(gòu)更加易讀： 之前就一直想寫(xiě)這樣的一篇文章，分享一下如何去創(chuàng)造一個(gè)可訪問(wèn)性更好 的頁(yè)面。今天的計(jì)劃里有一條把HTML Tag和WCAG標(biāo)準(zhǔn)結(jié)合起來(lái)。我推薦你這樣去寫(xiě)你 的HTML，讓某些人的生活可以更容易。某A給我印象最深刻的一句話 是，“做前端要有愛(ài)。不要?jiǎng)硬粍?dòng)就有木有地對(duì)各種人使用咆哮體w0 5.刪 除：在紙上寫(xiě)東西不能像在計(jì)算機(jī)上寫(xiě)東西一樣，可以用

3、撤銷鍵可以按，但當(dāng)我們 想要強(qiáng)調(diào)某些東西是被刪除的怎么辦？那就是使用標(biāo)簽了。比如這樣：HTML上表示強(qiáng)調(diào)時(shí)，請(qǐng)使用標(biāo)簽HTML上表示強(qiáng)調(diào)時(shí)，請(qǐng)使用 標(biāo)簽效果是這樣的：HTML上表示強(qiáng)調(diào)時(shí)，請(qǐng)使用標(biāo)簽HTML上表示強(qiáng)調(diào)時(shí)，請(qǐng)使用標(biāo)簽定義列表：去年帶著新人做支付寶前端博客的時(shí)候，他們給我印象最深刻的是很喜 歡用。當(dāng)時(shí)在想，這些同學(xué)挺不錯(cuò)的，對(duì)語(yǔ)義化的理解還不錯(cuò)。我們還是比較少用到 定義列表的。而是使用一般的 這兩個(gè)。也是應(yīng)該慎用的，最好只使用在 某些有定義意義的條目，如w3school的這個(gè)例子，對(duì)咖啡和牛奶的定義： Coffee - black hot drink Milk - white co

4、ld drink無(wú)序/有序列表/列表，這個(gè)對(duì)于每個(gè)前端來(lái)說(shuō)，都熟悉不過(guò)了。因?yàn)榻Y(jié)構(gòu) 可以非常靈活地進(jìn)行應(yīng)用，在導(dǎo)航、列表、Tab等，都經(jīng)常要要用到。這個(gè)就無(wú)須多說(shuō)了。 但有一點(diǎn)還是需要明白的，不要相信什么/是的替代品。在我們常用 的HTML Tags中，每個(gè)標(biāo)簽都有自己的作用，誰(shuí)都不是誰(shuí)的替代品。 Coffee Tea Milk表格：如果是一個(gè)表格，那就，就不要用段落來(lái)替代，更不要用列表。除非萬(wàn) 不得已，并且他們是可以轉(zhuǎn)換的。另外，表格中還有一些需要注意的點(diǎn)：給添加summary屬性，有些表格非常大，并不需要去讀完整個(gè)添加，如果我沒(méi)記錯(cuò)，如果沒(méi)添加的話，瀏覽器會(huì)自動(dòng)為你添加必要時(shí)使用 來(lái)控制表

5、示的欄 DATEIPPV 2011.3.1130008000 格式化片段 / 是指 computer code text,而 是指 preformatted text。的范圍更廣，并且是塊狀元素，可能被使用來(lái)格式化各種文本， 特別是代碼。使用沒(méi)有需要特別注意的，主要是語(yǔ)義上的正確使用，比如不要用來(lái) 代替一般的。text-align:center ( 1 * 102 ) + ( 9 * 101 ) + ( 3 * 100 ) 換行：在現(xiàn)代網(wǎng)頁(yè)中，使用的情況是非常少的。網(wǎng)頁(yè)中的留白，一般都是 使用CSS的padding和margin來(lái)實(shí)現(xiàn)。這樣更精準(zhǔn)，并用更容易控制?，F(xiàn)在推薦的用 法是，使用到一般

6、的段落中做簡(jiǎn)單的換行，而不是用來(lái)控制頁(yè)面留白。我是一個(gè)段落。詩(shī)歌都會(huì)用換行的。分割線：具有非常好的語(yǔ)義作用。但他的視覺(jué)效果很難控制。之前就寫(xiě)過(guò) 這樣的文章關(guān)于在各瀏覽器中的問(wèn)題。一般也都很少用。如果專門為讀屏軟件使用 者提供單獨(dú)頁(yè)面的話，或許會(huì)大有用處。 標(biāo)題一 Lorem Ipsum is . 標(biāo)題二 This is the entry of. 無(wú)語(yǔ)義標(biāo)簽：/其實(shí)/這兩個(gè)標(biāo)簽是有語(yǔ)義的，都是 defines a section in a document 是的，和 HTML5 中的 其實(shí)是一樣的。只是， 因?yàn)樗阉饕娴牡脑?，搜索引擎認(rèn)為它們是無(wú)語(yǔ)義標(biāo)簽，因此他們成了 無(wú)語(yǔ)義標(biāo)簽。 推薦用法

7、是盡量使用其他來(lái)做為頁(yè)面框架的容器，比如布局、添加額外的視覺(jué)效果，而不是 段落等的替代品。 God, oh myzsh 段落/標(biāo)題：,/這幾個(gè)標(biāo)簽幾乎可以說(shuō)是一個(gè)頁(yè)面標(biāo)簽等級(jí)結(jié)構(gòu)中最重要的標(biāo)簽。我們可以用一本書(shū)的結(jié)構(gòu)來(lái)說(shuō)明這幾個(gè)標(biāo)簽，而我們構(gòu)建一個(gè)頁(yè)面 的時(shí)候，也應(yīng)該有這樣的一種思想在腦中：書(shū)的名稱：H1書(shū)的每個(gè)章節(jié)標(biāo)題：H2章節(jié)內(nèi)的文章標(biāo)題：H3章節(jié)的段落：P小標(biāo)題/副標(biāo)題：H4/H5/H6是的，當(dāng)然還有引用，技術(shù)類書(shū)中提供的代碼，一些 需要注意點(diǎn)的列表，一些方便比較的表格等。LOGOTitle Summary: lorem ipsumis .emphasize強(qiáng)調(diào)：/ emphasize

8、的縮寫(xiě)。而 是 strong emphasize?？赡芎芏鄤?cè)腴T前端的同學(xué)會(huì)對(duì)、這 幾個(gè)標(biāo)簽的使用拿捏不準(zhǔn)。和基本上是被廢置的，相當(dāng)于現(xiàn)在的和 ，一般情況下他們對(duì)于內(nèi)容重要性的排序是這樣的：strong em - cite。注意：別使用老掉牙的標(biāo)簽，比如FONT、CENTER等， 特別是 FONT。表單項(xiàng)：/表單項(xiàng)是HTML中相對(duì)比較復(fù)雜的標(biāo)簽， 需要注意的點(diǎn)也比較多：需要給每個(gè)表單項(xiàng)添加對(duì)其進(jìn)行描述，當(dāng)不能使用label時(shí)，為表單項(xiàng)添 加title屬性當(dāng)表單項(xiàng)是必填項(xiàng)的時(shí)候，使用*符號(hào)來(lái)標(biāo)記Flash創(chuàng)建表單項(xiàng)一般是不會(huì)生成的，請(qǐng)勾上auto label那個(gè)選項(xiàng) My Form * Firs

9、t name: Say something: 16.圖片：對(duì)于圖片，盲人看不到。提供alt來(lái)表示替代文本。告訴他們這是一張 什么樣的圖。img src= HYPERLINK http:/sofish.de/favicon.ico http:/sofish.de/favicon.ico為視聽(tīng)媒體提供相應(yīng)的文本，包括相應(yīng)的場(chǎng)景，比如演講中的鼓掌等有利有閱讀者感知現(xiàn)在氣氛的，都應(yīng)該體現(xiàn)在演講文本中。其他的依此 類推。如果像交響樂(lè)這種不能提供具體描述的，可以進(jìn)行簡(jiǎn)單的說(shuō)明如果文本較長(zhǎng)，不能在當(dāng)前頁(yè)面展示，可以在媒體后提供一個(gè)鏈接到相應(yīng)替代文本的鏈接如果媒體中有 可能會(huì)引起癲癇發(fā)作的，應(yīng)做相應(yīng)的說(shuō)明莫扎特39號(hào)交響曲 19.網(wǎng)頁(yè)標(biāo)題：網(wǎng)頁(yè)中一定要包含標(biāo)題，并且每個(gè)