国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

huayeluoliuhen / 412人閱讀

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

什么是HTML語義化

說HTML語義化就要先說說HTML到底負責的什么?下面摘自維基百科:

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

為什么要使用語義化標簽?我用DIV+CSS也能做出來一樣的效果,確實單純看效果兩者并沒有什么區別,但是頁面不止是給人看的,機器也要看爬蟲也要看。
網頁結構更清晰方便開發維護:


另外,在網絡或其他原因頁面樣式文件丟失的時候,滿是div組成的頁面和良好語義結構組成的頁面那個對用戶更友好?

優點

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

有利于不同設備的解析(屏幕閱讀器,盲人閱讀器等)滿是div的頁面這些設備如何區分那些是主要內容優先閱讀?

有利于構建清晰的機構,有利于團隊的開發、維護。

大廠都是怎么做的?

看一下大廠的操作,打開淘寶的頁面查看它首頁的源碼發現,全局只有一個h1標簽就是他的LOGO。

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


再往下看,分欄都是用的h3標簽,并且內部使用了一個隱藏的專門強調處理。

盡管這些東西都是用div+css就能搞出來的,但是它還是專門使用了相應的語義化標簽來強調作用。

寫語義化代碼應該注意什么

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

不要使用純樣式標簽,如:b、font、u等,改用css設置。需要強調的文本,可以包含在strong或者em標簽中(瀏覽器預設樣式,能用CSS指定就不用他們),strong默認樣式是加粗(不要用b),em是斜體(不用i);

使用表格時,標題要用caption,表頭用thead,主體部分用tbody包圍,尾部用tfoot包圍。表頭和一般單元格要區分開,表頭用th,單元格用td;

表單域要用fieldset標簽包起來,并用legend標簽說明表單的用途;每個input標簽對應的說明文本都需要使用label標簽,并且通過為input設置id屬性,在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來。

常用的一些語義化標簽

~
,作為標題使用,并且依據重要性遞減,

是最高的等級。

段落標記,知道了

作為段落,你就不會再使用
來換行了,而且不需要
來區分段落與段落。

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

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

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

            是用作強調, 是用作重點強調。

                    <
                    , 就是用來做表格不要用來布局

                    HTML5新增的那些

                    HTML5標準更加的講究語義化了,借用一張網上的圖來說明這些新標簽

                    header元素:header 元素代表“網頁”或“section”的頁眉。

                    footer元素:footer元素代表“網頁”或“section”的頁腳,通常含有該節的一些基本信息,譬如:作者,相關文檔鏈接,版權資料。

                    hgroup元素

                    nav元素:nav元素代表頁面的導航鏈接區域。用于定義頁面的主要導航部分。

                    aside元素:aside元素被包含在article元素中作為主要內容的附屬信息部分,其中的內容可以是與當前文章有關的相關資料、標簽、名次解釋等。(特殊的section)

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

                    article元素:article元素最容易跟section和div容易混淆,其實article代表一個在文檔,頁面或者網站中自成一體的內容,其目的是為了讓開發者獨立開發或重用。譬如論壇的帖子,博客上的文章,一篇用戶的評論,一個互動的widget小工具。(特殊的section)除了它的內容,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

                    文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

                    轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52240.html

                    相關文章

                    • 如何理解語義(semantic)化?

                      摘要:邏輯學的語義學著眼點在于邏輯系統的語義解釋,是一個理想化的模型系統,不直接涉及自然語言。例如,通過幫助臨床研究中的決策,語義技術將跨機構橋接多種形式的生物和醫學信息。 showImg(https://segmentfault.com/img/bVbrJYw?w=758&h=420); 前端工程師的招聘中,經常有這樣的要求:對Web 語義化有深刻理解。那么到底什么才是深刻理解Web語義化...

                      CarlBenjamin 評論0 收藏0
                    • 每日前端進階第三題:說一說你HTML5語義化的理解

                      摘要:作者陳大魚頭鏈接背景最近高級前端工程師劉小夕在上開了個每個工作日布一個前端相關題的,懷著學習的心態我也參與其中,以下為我的回答,如果有不對的地方,非常歡迎各位指出。如果你采用正宗川菜做法,最后只需加入花生米,炒拌幾下就可以起鍋了。 作者:陳大魚頭 github: KRISACHAN 鏈接:github.com/YvetteLau/S… 背景:最近高級前端工程師 劉小夕 在 github 上...

                      番茄西紅柿 評論0 收藏0

                    發表評論

                    0條評論

                    最新活動
                    閱讀需要支付1元查看