日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
這樣去寫你的HTML

昨天在 twitter 上說(shuō)，怎么忍心把頁(yè)面寫得這么難用？是的，這個(gè)世界還有一群人等著我們創(chuàng)建出來(lái)的東西，可以讓他們的生活能過(guò)得更容易呢。比如那些需要讀屏軟件的用戶。作為一個(gè)前端，我們又怎么會(huì)忍心呢。之前就一直想寫這樣的一篇文章，分享一下如何去創(chuàng)造一個(gè)可訪問(wèn)性更好的頁(yè)面。今天的計(jì)劃里有一條把HTMLTag 和 WCAG標(biāo)準(zhǔn)結(jié)合起來(lái)。我推薦你這樣去寫你的HTML，讓某些人的生活可以更容易。

今天想分享的是如何去使用我們的 HTML Tag, 把 WCAG 的標(biāo)準(zhǔn)和語(yǔ)義網(wǎng)的目標(biāo)進(jìn)行代碼上的體現(xiàn)：

1. 文檔聲明：

其實(shí)這跟 WCAG 根本上連不上什么直接關(guān)系，但為了一個(gè)兼容性更好，特別是向后兼容的頁(yè)面，我推薦你這樣寫：

  
 
 
 
    
   
  
  
  
  1.

2. 鏈接：

互聯(lián)網(wǎng)的聯(lián)幾乎可以說(shuō)是用 來(lái)實(shí)現(xiàn)的，作為一個(gè)頁(yè)面最常見(jiàn)的標(biāo)簽。我們應(yīng)該如何對(duì)待呢？

（1）為關(guān)鍵鏈接添加 accesskey

（2）除非萬(wàn)不得已，不要去掉 focus 時(shí)虛線框

  
 
 
 
    
   
  
  
  
  1. Link
    2.

3. 縮寫:

對(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ì)比這也是常人能辨識(shí)的。但讀屏軟件用戶呢。當(dāng)然，這里只是順帶提起需要注意頁(yè)面標(biāo)簽的使用方法，而 abbr 最重要的應(yīng)該是應(yīng)該添加一個(gè) title 屬性對(duì)縮寫進(jìn)行描述。比如：

  
 
 
 
    
   
  
  
  
  1. WD
    2.

4. 大段引用:

，一般引用:

有大段引用的時(shí)候，使用

，而行內(nèi)引用則使用 ，讓你的結(jié)構(gòu)更加易讀：

  
 
 
 
    
   
  
  
  
    2. 
   
  
  
  
  2.     之前就一直想寫這樣的一篇文章，分享一下如何去創(chuàng)造一個(gè)可訪問(wèn)性更好的頁(yè)面。今天的計(jì)劃里有一條把 HTML Tag 和 WCAG標(biāo)準(zhǔn)結(jié)合起來(lái)。我推薦你這樣去寫你的 HTML，讓某些人的生活可以更容易。 
    3.

  • 某A給我印象最深刻的一句話是，“做前端要有愛(ài)。不要?jiǎng)硬粍?dòng)就有朩有地對(duì)各種人使用咆哮體”。

    • 5. 刪除：

    在紙上寫東西不能像在計(jì)算機(jī)上寫東西一樣，可以用撤銷鍵可以按，但當(dāng)我們想要強(qiáng)調(diào)某些東西是被刪除的怎么辦？那就是使用 標(biāo)簽了。比如這樣：

      
 
 
 
      
   
  
  
  
    1. HTML上表示強(qiáng)調(diào)時(shí)，請(qǐng)使用 <b> 標(biāo)簽
      2. 
   
  
  
  
    2. HTML上表示強(qiáng)調(diào)時(shí)，請(qǐng)使用 <strong> 標(biāo)簽
      3.

    效果是這樣的：

    HTML上表示強(qiáng)調(diào)時(shí)，請(qǐng)使用 標(biāo)簽

    6. 定義列表：

    去年帶著新人做支付寶前端博客的時(shí)候，他們給我印象最深刻的是很喜歡用

    。當(dāng)時(shí)在想，這些同學(xué)挺不錯(cuò)的，對(duì)語(yǔ)義化的理解還不錯(cuò)。我們還是比較少用到定義列表的。而是使用一般的
        這兩個(gè)。
        也是應(yīng)該慎用的，最好只使用在某些有“定義”意義的條目，如 w3school 的這個(gè)例子，對(duì)咖啡和牛奶的定義：

          
 
 
 
          
   
  
  
  
          2. 
   
  
  
  
        2.   
          Coffee
          3. 
   
  
  
  
        3.     
          - black hot drink
          4. 
   
  
  
  
        4.   
          Milk
          5. 
   
  
  
  
        5.     
          - white cold drink
          6.

      7. 無(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í)的替代品。

                
 
 
 
                
   
  
  
  
                1. 
   
  
  
  
                1.   
                2. Coffee
                  3. 
   
  
  
  
                3.   
                4. Tea
                  5. 
   
  
  
  
                5.   
                6. Milk
                  7. 
   
  
  
  
                2.

              8. 表格:

              如果是一個(gè)表格，那就，就不要用段落來(lái)替代，更不要用列表。除非萬(wàn)不得已，并且他們是可以轉(zhuǎn)換的。另外，表格中還有一些需要注意的點(diǎn)：

              （1）給

              添加 summary 屬性，有些表格非常大，并不需要去讀完整個(gè)

              （2）添加

              ，如果我沒(méi)記錯(cuò)，如果沒(méi)添加的話，瀏覽器會(huì)自動(dòng)為你添加

              （3）必要時(shí)使用

              來(lái)控制表示的欄

                
 
 
 
                
   
  
  
  
                2. 
   
  
  
  
              2.     
            1.         
            2.             
            3.             
            4.             
            5.         
            6.     
            7.     
            8.         
            9.             
            10.             
            11.             
            12.         
            13.     
            14. DATE IP PV
              2011.3.11 3000 8000

            9. 格式化片段 /

             是指 computer code text, 而 
             是指 preformatted text。
             的范圍更廣，并且是塊狀元素，可能被使用來(lái)格式化各種文本，特別是代碼。使用沒(méi)有需要特別注意的，主要是語(yǔ)義上的正確使用，比如不要用 
             來(lái)代替一般的 
            。
              
 
 
 
              
   
  
  
  
            1. text-align:center
              2. 
   
  
  
  
              3. 
   
  
  
  
            3. { ( 1 * 102 ) + ( 9 * 101 ) + ( 3 * 100 ) } 
              4. 
   
  
  
  
            
  
 
 
 
        10. 換行: 
        在現(xiàn)代網(wǎng)頁(yè)中，使用 
         的情況是非常少的。網(wǎng)頁(yè)中的留白，一般都是使用 CSS 的 padding 和 margin 來(lái)實(shí)現(xiàn)。這樣更精準(zhǔn)，并用更容易控制。現(xiàn)在推薦的用法是，使用到一般的段落 
         中做簡(jiǎn)單的換行，而不是用來(lái)控制頁(yè)面留白。
          
 
 
 
          
   
  
  
  
        1. 我是一個(gè)段落。
          2. 
   
  
  
  
        2. 詩(shī)歌都會(huì)用換行的。 
          3. 
   
  
  
  
          4. 
  
 
 
 
        11. 分割線: 
         具有非常好的語(yǔ)義作用。但他的視覺(jué)效果很難控制。之前就寫過(guò)這樣的文章關(guān)于
        在各瀏覽器中的問(wèn)題。一般也都很少用。如果專門為讀屏軟件使用者提供單獨(dú)頁(yè)面的話，或許 
         會(huì)大有用處。
          
 
 
 
          
   
  
  
  
        1. 標(biāo)題一
          2. 
   
  
  
  
        2. Lorem Ipsum is ...
          3. 
   
  
  
  
          4. 
   
  
  
  
        4. 標(biāo)題二
          5. 
   
  
  
  
        5. This is the entry of... 
          6. 
  
 
 
 
        12. 無(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)簽。推薦用法是盡量使用其他來(lái)做為頁(yè)面框架的容器，比如布局、添加額外的視覺(jué)效果，而不是段落等的替代品。
          
 
 
 
          
   
  
  
  
          2. 
   
  
  
  
        2.     
          3. 
   
  
  
  
        3.     
        
   
  
  
  
      •     
        • 
   
  
  
  
      •         
          
   
  
  
  
        •             
        • God, oh my zsh
          • 
   
  
  
  
        •         
        • 
   
  
  
  
      •     
        • 
   
  
  
  
    
  
 
 
 
    13. 段落/標(biāo)題: 
    ,
    /
    /
    …
    這幾個(gè)標(biāo)簽幾乎可以說(shuō)是一個(gè)頁(yè)面標(biāo)簽等級(jí)結(jié)構(gòu)中最重要的標(biāo)簽。我們可以用一本書的結(jié)構(gòu)來(lái)說(shuō)明這幾個(gè)標(biāo)簽，而我們構(gòu)建一個(gè)頁(yè)面的時(shí)候，也應(yīng)該有這樣的一種思想在腦中：
    （1）書的名稱：H1
    （2）書的每個(gè)章節(jié)標(biāo)題: H2
    （3）章節(jié)內(nèi)的文章標(biāo)題: H3
    （4）章節(jié)的段落: P
    （5）小標(biāo)題/副標(biāo)題: H4/H5/H6
    是的，當(dāng)然還有引用 ，技術(shù)類書中提供的代碼 
    ，一些需要注意點(diǎn)的列表 
      ，一些方便比較的表格  等。
        
 
 
 
        
   
  
  
  
      1. LOGO
        2. 
   
  
  
  
      2. Title
        3. 
   
  
  
  
        4. 
   
  
  
  
      4.     
        Summary:
        5. 
   
  
  
  
      5.     
        lorem ipsum is ...emphasize
        6. 
   
  
  
  
      6. 
  
 
 
 
      14. 強(qiáng)調(diào): /
       emphasize 的縮寫。而  是 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。

      15. 表單項(xiàng): /