成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

對HTML語義化的一些理解和記錄

huayeluoliuhen / 439人閱讀

摘要：什么是語義化說語義化就要先說說到底負責(zé)的什么下面摘自維基百科超文本標記語言英語，簡稱是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。常用的一些語義化標簽，作為標題使用，并且依據(jù)重要性遞減，是最高的等級。

什么是HTML語義化

說HTML語義化就要先說說HTML到底負責(zé)的什么？下面摘自維基百科：

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。
HTML元素是構(gòu)建網(wǎng)站的基石。HTML允許嵌入圖像與對象，并且可以用于創(chuàng)建交互式表單，它被用來結(jié)構(gòu)化信息——例如標題、段落和列表等等，也可用來在一定程度上描述文檔的外觀和語義。
關(guān)于對于語義化的理解顧軼靈：如何理解 Web 語義化？這里講的很清楚了我就簡單說一下我的理解：
通俗的來講就是從代碼上來展示頁面的結(jié)構(gòu)，而不是從最終視覺上來展示結(jié)構(gòu)。單純的HTML代碼是不帶任何樣式的只是用來標記這一段是標題、這一塊是代碼、那一個是要強調(diào)的內(nèi)容等等，但是為什么我們只寫HTML在瀏覽器中不同的標簽也是有不同的樣式呢？那是因為各個瀏覽器都自帶的有相應(yīng)標簽的默認樣式，為了方便在沒有設(shè)定樣式的情況下友好的展示頁面。
良好的語義化代碼可以直接從代碼上就能看出來那一塊到底是要表達什么內(nèi)容。
為什么要使用HTML語義化標簽

為什么要使用語義化標簽？我用DIV+CSS也能做出來一樣的效果，確實單純看效果兩者并沒有什么區(qū)別，但是頁面不止是給人看的，機器也要看爬蟲也要看。
網(wǎng)頁結(jié)構(gòu)更清晰方便開發(fā)維護：


另外，在網(wǎng)絡(luò)或其他原因頁面樣式文件丟失的時候，滿是div組成的頁面和良好語義結(jié)構(gòu)組成的頁面那個對用戶更友好？

優(yōu)點

標簽語義化有助于構(gòu)架良好的HTML結(jié)構(gòu)，有利于搜索引擎的建立索引、抓取。簡單來說，試想在H1標簽中匹配到的關(guān)鍵詞和在div中匹配到的關(guān)鍵詞搜索引擎會吧那個結(jié)果放在前面。

有利于不同設(shè)備的解析（屏幕閱讀器，盲人閱讀器等）滿是div的頁面這些設(shè)備如何區(qū)分那些是主要內(nèi)容優(yōu)先閱讀？

有利于構(gòu)建清晰的機構(gòu)，有利于團隊的開發(fā)、維護。

大廠都是怎么做的？

看一下大廠的操作，打開淘寶的頁面查看它首頁的源碼發(fā)現(xiàn)，全局只有一個h1標簽就是他的LOGO。

再往下看主題分欄的標題是h2


再往下看，分欄都是用的h3標簽，并且內(nèi)部使用了一個隱藏的專門強調(diào)處理。

盡管這些東西都是用div+css就能搞出來的，但是它還是專門使用了相應(yīng)的語義化標簽來強調(diào)作用。

寫語義化代碼應(yīng)該注意什么

盡可能少的使用無語義的標簽div和span；在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；

不要使用純樣式標簽，如：b、font、u等，改用css設(shè)置。需要強調(diào)的文本，可以包含在strong或者em標簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；

使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；

表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途；每個input標簽對應(yīng)的說明文本都需要使用label標簽，并且通過為input設(shè)置id屬性，在lable標簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來。

常用的一些語義化標簽

~
，作為標題使用，并且依據(jù)重要性遞減，

是最高的等級。

段落標記，知道了

作為段落，你就不會再使用
來換行了，而且不需要
來區(qū)分段落與段落。

中的文字會自動換行，而且換行的效果優(yōu)于
。段落與段落之間的空隙也可以利用 CSS 來控制，很容易而且清晰的區(qū)分出段落與段落。

    、
      、
    1. ，
        無序列表，這個被大家廣泛的使用，
          有序列表不常用。在 Web 標準化過程中，
            還被更多的用于導(dǎo)航條，本來導(dǎo)航條就是個列表，這樣做是完全正確的，而且當(dāng)你的瀏覽器不支持 CSS 的時候，導(dǎo)航鏈接仍然很好使，只是美觀方面差了一點而已。

            、
            、
            ，
            就是“定義列表”。比如說詞典里面的詞的解釋、定義就可以用這種列表。dl不多帶帶使用，它通常與dt和dd一起使用。dl開啟一個定義列表，dt表示要定義的項目名稱，dd表示對dt的項目的描述。

            、， 是用作強調(diào)， 是用作重點強調(diào)。

            、、、
            <tfoot id="0w0mm"></tfoot>
          • 、、
            ， 就是用來做表格不要用來布局
            

HTML5新增的那些

            HTML5標準更加的講究語義化了，借用一張網(wǎng)上的圖來說明這些新標簽
            

            


            
header元素：header 元素代表“網(wǎng)頁”或“section”的頁眉。
            

            
footer元素：footer元素代表“網(wǎng)頁”或“section”的頁腳，通常含有該節(jié)的一些基本信息，譬如：作者，相關(guān)文檔鏈接，版權(quán)資料。
            

            
hgroup元素：
            

            
nav元素：nav元素代表頁面的導(dǎo)航鏈接區(qū)域。用于定義頁面的主要導(dǎo)航部分。
            

            
aside元素：aside元素被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料、標簽、名次解釋等。（特殊的section）
            

            
section元素：section元素代表文檔中的“節(jié)”或“段”，“段”可以是指一篇文章里按照主題的分段；“節(jié)”可以是指一個頁面里的分組。section通常還帶標題，雖然html5中section會自動給標題h1-h6降級，但是最好手動給他們降級。
            

            
article元素：article元素最容易跟section和div容易混淆，其實article代表一個在文檔，頁面或者網(wǎng)站中自成一體的內(nèi)容，其目的是為了讓開發(fā)者獨立開發(fā)或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評論，一個互動的widget小工具。（特殊的section）除了它的內(nèi)容，article會有一個標題（通常會在header里），會有一個footer頁腳。
            


            推薦看原博主的博客：傳送門
            
參考鏈接


            https://www.zhihu.com/question/20583492/answer/260535796
            

            https://www.zhihu.com/question/20455165
            

            https://www.zhihu.com/question/20583492
            

            https://www.cnblogs.com/freeyiyi1993/p/3615179.html
            

            http://www.html5jscss.com/html5-semantics-section.html
            

            https://segmentfault.com/a/1190000004179484
            
           
               
                                           
                       
                 
            
                     
             
               
            
                   
             文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
            
                 
                   
            轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52240.html
            
               
            
                      
               
              
              
            
                
            相關(guān)文章
            
                
              
                             
                                                                                                    
            • 
                                                
              
                          
              如何理解語義(semantic)化？
              
                                                     
              摘要：邏輯學(xué)的語義學(xué)著眼點在于邏輯系統(tǒng)的語義解釋，是一個理想化的模型系統(tǒng)，不直接涉及自然語言。例如，通過幫助臨床研究中的決策，語義技術(shù)將跨機構(gòu)橋接多種形式的生物和醫(yī)學(xué)信息。

showImg(https://segmentfault.com/img/bVbrJYw?w=758&h=420);
前端工程師的招聘中，經(jīng)常有這樣的要求：對Web 語義化有深刻理解。那么到底什么才是深刻理解Web語義化...
              
                                                   
                          
              
                                
              
                                    CarlBenjamin
                                    
                                    評論0 
                                    收藏0 
                                
              
                          
              
                      
              
                    
              •  
                                                                                       
            • 
                                                
              
                          
              每日前端進階第三題：說一說你對HTML5語義化的理解
              
                                                     
              摘要：作者陳大魚頭鏈接背景最近高級前端工程師劉小夕在上開了個每個工作日布一個前端相關(guān)題的，懷著學(xué)習(xí)的心態(tài)我也參與其中，以下為我的回答，如果有不對的地方，非常歡迎各位指出。如果你采用正宗川菜做法，最后只需加入花生米，炒拌幾下就可以起鍋了。

作者：陳大魚頭
github： KRISACHAN
鏈接：github.com/YvetteLau/S…
背景：最近高級前端工程師 劉小夕 在 github 上...
              
                                                   
                          
              
                                
              
                                    番茄西紅柿
                                    
                                    評論0 
                                    收藏0 
                                
              
                          
              
                      
              
                    
              •  
                                                                           
                
            
              
            
              
               
            
                  
                  
            發(fā)表評論
            
                   
               
            
              
            
                
            
                  
            0條評論
               
                
             
                      
            
              
            
           
           
            
              
             
                

                   
              
  
            
                  
            最新活動
             
           
                             
              

            


            
                                
                          
            
           
            
        
       
    
    
     
            
      
    
            
    
    
            
    
       
       
            
         
            閱讀需要支付1元查看
              
         
                 
       
            
      
  
    
    







            
        
            
            
            
              
              
            
            
             
        
            
    
            








<