學會這樣去寫你的HTML代碼

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

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

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

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

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

6、的段落中做簡單的換行，而不是用來控制頁面留白。我是一個段落。詩歌都會用換行的。分割線：具有非常好的語義作用。但他的視覺效果很難控制。之前就寫過 這樣的文章關于在各瀏覽器中的問題。一般也都很少用。如果專門為讀屏軟件使用 者提供單獨頁面的話，或許會大有用處。 標題一 Lorem Ipsum is . 標題二 This is the entry of. 無語義標簽：/其實/這兩個標簽是有語義的，都是 defines a section in a document 是的，和 HTML5 中的 其實是一樣的。只是， 因為搜索引擎的的原因，搜索引擎認為它們是無語義標簽，因此他們成了 無語義標簽。 推薦用法

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

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

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