創(chuàng)新互聯(lián)公司是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷策劃、微信小程序、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動(dòng)互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立10多年以來，已經(jīng)為1000+成都紙箱各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)。現(xiàn)在，服務(wù)的1000+客戶與我們一路同行，見證我們的成長(zhǎng)；未來，我們一起分享成功的喜悅。
1，如何理解語(yǔ)義化的html結(jié)構(gòu)
語(yǔ)義化的HTML是最新的HTML5提出的理論，也就是通過一些有具體含義的標(biāo)簽來代替之前用class名或者ID來賦予意義的標(biāo)簽，舉個(gè)例子，之前用HTML寫個(gè)導(dǎo)航要寫個(gè)div ，然后給他設(shè)置一個(gè)id名為nav,這樣寫，，而現(xiàn)在你可以直接用標(biāo)簽來代替之前的寫法，這樣別人一眼就知道你這個(gè)里面要寫的就是導(dǎo)航菜單了，這就是語(yǔ)義化標(biāo)簽的意義所在。2，怎么理解HTML的語(yǔ)義化
用正確的標(biāo)簽做正確的事情。html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器、搜索引擎解析;即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO;使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。（BY三人行慕課）語(yǔ)義化，顧名思義就是使用相關(guān)的單詞來代替div作為一個(gè)標(biāo)簽，例如：nav,就是導(dǎo)航條，footer就是頁(yè)腳。Aside就是側(cè)邊欄，Video就是視頻等等，語(yǔ)義化標(biāo)簽的好處就是可以讓瀏覽器快速知道你這個(gè)標(biāo)簽里面的東西是干什么的，使頁(yè)面結(jié)構(gòu)清晰，方便搜索引擎解析等看見標(biāo)簽就知道你這塊寫的屬于哪個(gè)模塊，比如<nav> 包裹的通常就是導(dǎo)航再看看別人怎么說的。3，HTML語(yǔ)義化是什么意思
HTML是提供網(wǎng)頁(yè)文檔內(nèi)容的上下文結(jié)構(gòu)和含義；html本身是沒有表現(xiàn)的，我們看到例如<h1>是粗體，字體大小2em，加粗；<strong>是加粗的，不要認(rèn)為這是html的表現(xiàn)，這些其實(shí)html默認(rèn)的css樣式在起作用，所以首先我們要知道html和頁(yè)面的表現(xiàn)是沒有關(guān)系的，這些是css的事情。HTML在頁(yè)面中的作用就是結(jié)構(gòu)和含義，通俗點(diǎn)說就是劃分內(nèi)容，這里放什么，我們放的是什么。語(yǔ)義化的HTML結(jié)構(gòu)首先要強(qiáng)調(diào)HTML結(jié)構(gòu) HTML結(jié)構(gòu)是頁(yè)面的骨架，一個(gè)頁(yè)面就好像一幢房子，HTML結(jié)構(gòu)就是鋼精鋼筋混泥土的墻，一幢房子如果沒有鋼精鋼筋混泥土的墻那就是一堆費(fèi)磚頭，不能住人，不能辦公。css是裝飾材料，是原木地板，是大理石，是油漆，是用來裝飾房子的，CSS的強(qiáng)大就不用多說了，css如果沒有html結(jié)構(gòu)那就是一堆木板，一同油漆，沒有了實(shí)際使用價(jià)值。CSS完全依靠引用它的(X)HTML文檔。如果你想使CSS的能力充分發(fā)揮到極致，提供一個(gè)用既干凈又有結(jié)構(gòu)的內(nèi)容的html是非常必要的，“HTML是在互聯(lián)網(wǎng)上發(fā)布超文本的通用語(yǔ)，HTML使用標(biāo)簽來對(duì)文本結(jié)構(gòu)化”。1、“語(yǔ)義化”指的是機(jī)器在需要更少的人類干預(yù)的情況下能夠研究和收集信息，讓網(wǎng)頁(yè)能夠被機(jī)器理解，最終讓人類受益。2、語(yǔ)義化的主要目的就是讓大家直觀的認(rèn)識(shí)標(biāo)簽(markup)和屬性(attribute)的用途和作用3、根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（代碼語(yǔ)義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí)讓瀏覽器的爬蟲和機(jī)器很好地解析。“語(yǔ)義化”指的是機(jī)器在需要更少的人類干預(yù)的情況下能夠研究和收集信息，讓網(wǎng)頁(yè)能夠被機(jī)器理解，最終讓人類受益。 html 標(biāo)簽語(yǔ)義化是讓大家直觀的認(rèn)識(shí)標(biāo)簽(markup)和屬性(attribute)的用途和作用，很明顯hx系列看起來很像標(biāo)題，因?yàn)閾碛写煮w和較大的字號(hào)。,用來區(qū)別于其他文字，起到了強(qiáng)調(diào)的作用。 語(yǔ)義化的網(wǎng)頁(yè)的好處，最主要的就是對(duì)搜索引擎友好，有了良好的結(jié)構(gòu)和語(yǔ)義你的網(wǎng)頁(yè)內(nèi)容自然容易被搜索引擎抓取，你網(wǎng)站的推廣便可以省下不少的功夫。 語(yǔ)義 web 技術(shù)有助于利用基于開放標(biāo)準(zhǔn)的技術(shù)，從數(shù)據(jù)、文檔內(nèi)容或應(yīng)用代碼中分離出意義。4，什么是HTML語(yǔ)義化
作為一個(gè)前端開發(fā)人員，你要是沒有聽說過 CSS，那你肯定是一個(gè) “out-man” 。隨著 CSS 的深入人心，結(jié)構(gòu)、表現(xiàn)與行為的逐漸分離，HTML 語(yǔ)義化成了炙手可熱的賣點(diǎn)。 語(yǔ)義化的 HTML 首先要強(qiáng)調(diào) HTML 結(jié)構(gòu)一個(gè)網(wǎng)頁(yè)就好像一幢房子，HTML作為一個(gè)前端開發(fā)人員，你要是沒有聽說過 css，那你肯定是一個(gè) “out-man” 。隨著 css 的深入人心，結(jié)構(gòu)、表現(xiàn)與行為的逐漸分離，html 語(yǔ)義化成了炙手可熱的賣點(diǎn)。 語(yǔ)義化的 html 首先要強(qiáng)調(diào) html 結(jié)構(gòu)一個(gè)網(wǎng)頁(yè)就好像一幢房子，html 結(jié)構(gòu)就是鋼筋混泥土的墻，一幢房子如果沒有鋼筋混泥土的墻那就是一堆廢磚頭，也就稱不上是房子了。css 是裝飾材料，是油漆，是用來裝飾房子的。css 如果沒有 html 結(jié)構(gòu)那也就什么都不是了，沒有了實(shí)際使用價(jià)值。css 完全依靠引用它的 (x)html 文檔。如果你想使 css 的能力發(fā)揮到極致，提供一個(gè)既干凈又有結(jié)構(gòu)的 html 是非常必要的。 其實(shí)html 中的標(biāo)簽都有他自身的含義，只是常常被忽視——就像表格一直充當(dāng)著網(wǎng)頁(yè)布局的角色。還好隨著 css 的重現(xiàn)江湖，表格也終于回到他的本質(zhì)工作——列表數(shù)據(jù)。它會(huì)告訴我們說：“這行是一個(gè)標(biāo)題；這幾行組成了一個(gè)段落；這些文字是項(xiàng)目列表……”在做前端開發(fā)的時(shí)候要記住：html 告訴我們一塊內(nèi)容是什么（或其意義），而不是它長(zhǎng)的什么樣子。寫語(yǔ)義化的 html 結(jié)構(gòu)其實(shí)很簡(jiǎn)單，首先掌握 html 中各個(gè)標(biāo)簽的語(yǔ)義，在看到內(nèi)容的時(shí)候想想用什么標(biāo)簽?zāi)芨玫拿枋鏊鞘裁淳陀檬裁礃?biāo)簽。、 、 、 、 、 作為標(biāo)題使用，并且依據(jù)重要性遞減， 是最高的等級(jí)。 段落標(biāo)記，知道了 作為段落，你就不會(huì)再使用 來?yè)Q行了，而且不需要 來區(qū)分段落與段落。 中的文字會(huì)自動(dòng)換行，而且換行的效果優(yōu)于 。段落與段落之間的空隙也可以利用 css 來控制，很容易而且清晰的區(qū)分出段落與段落。 、、1. 無序列表，這個(gè)被大家廣泛的使用， 有序列表也挺常用。在 web 標(biāo)準(zhǔn)化過程中， 還被更多的用于導(dǎo)航條，本來導(dǎo)航條就是個(gè)列表，這樣做是完全正確的，而且當(dāng)你的瀏覽器不支持 css 的時(shí)候，導(dǎo)航鏈接仍然很好使，只是美觀方面差了一點(diǎn)而已。 、 、 就是“定義列表”。比如說詞典里面的詞的解釋、定義就可以用這種列表。、 是用作強(qiáng)調(diào)， 是用作重點(diǎn)強(qiáng)調(diào)。 、 知道 ，就不要再用 做刪除線了，用 顯然更具有語(yǔ)義化。而且 還帶有 和 來表明刪除的原因以及刪除的時(shí)間。 是表示插入，也有這樣的屬性。、 標(biāo)簽是表示 web 頁(yè)面上的簡(jiǎn)稱， 標(biāo)簽為取首字母縮寫。alt 屬性和 title 屬性title 屬性用來為元素提供額外說明信息，但是并不是必須的。alt 屬性為不能顯示圖像、窗體或 applets 的用戶代理（ua），指定替換文字。替換文字的語(yǔ)言由 lang 屬性指定。讓你語(yǔ)義化 html 結(jié)構(gòu)的無數(shù)條理由：1、去掉或樣式丟失的時(shí)候能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)。html 本身是沒有表現(xiàn)的，我們看到例如 是粗體，字體大小 2em； 是加粗的， 不要誤會(huì)這是html的表現(xiàn)，這些其實(shí)是 html 默認(rèn)的 css 樣式在起作用。所以去掉或樣式丟失的時(shí)候,也能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)，增強(qiáng)頁(yè)面的可讀性。 2、屏幕閱讀器（如果訪客有視障）會(huì)完全根據(jù)你的標(biāo)記來“讀”你的網(wǎng)頁(yè)。如果你使用的含語(yǔ)義的標(biāo)記，屏幕閱讀器會(huì)根據(jù)你的標(biāo)簽來判斷網(wǎng)頁(yè)的內(nèi)容，而不是一個(gè)字母一個(gè)字母的拼寫出來。 3、pda、手機(jī)等設(shè)備可能無法像普通電腦的瀏覽器一樣來渲染網(wǎng)頁(yè)（因?yàn)檫@些設(shè)備對(duì) css 的支持較弱）使用語(yǔ)義標(biāo)記可以確保這些設(shè)備以一種有意義的方式來渲染網(wǎng)頁(yè)。理想情況下，觀看設(shè)備的任務(wù)是符合設(shè)備本身的條件來渲染網(wǎng)頁(yè)。 4、搜索引擎的爬蟲也依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重。搜索引擎的爬蟲也是網(wǎng)站的“訪客”，現(xiàn)在它們是極其寶貴的用戶。沒有他們的話，搜索引擎將無法索引你的網(wǎng)站，然后一般用戶將很難過來訪問。 5、便于團(tuán)隊(duì)開發(fā)和維護(hù)在團(tuán)隊(duì)中大家都遵循同一個(gè)標(biāo)準(zhǔn)，可以減少很多差異化的東西，方便開發(fā)和維護(hù)，提高開發(fā)效率，甚至實(shí)現(xiàn)模塊化開發(fā)。 、 、 、 、 summary(x)html中的表格不再是用來布局。如果是為了標(biāo)記列表的數(shù)據(jù)，就應(yīng)該使用表格了。 為表格標(biāo)題，屬性 summar 為摘要（要想提高搜索的排名這個(gè)絕對(duì)不應(yīng)該少）， 標(biāo)簽為首部說明， 標(biāo)簽為表格頭部， 標(biāo)簽為表格主體內(nèi)容， 標(biāo)簽為表格尾部。
5，如何理解html語(yǔ)義化
語(yǔ)義化的HTML結(jié)構(gòu)怎么理解 關(guān)于html結(jié)構(gòu)的面試題，語(yǔ)義化的html占據(jù)了很大一部分。那么為什么要使用語(yǔ)義化的HTML？語(yǔ)義化的HTML到底有什么好處呢？ HTML是提供網(wǎng)頁(yè)文檔內(nèi)容的上下文結(jié)構(gòu)和含義；html本身是沒有表現(xiàn)的，我們看到例如是粗體，字體大小2em，加粗；是加粗的，不要認(rèn)為這是html的表現(xiàn)，這些其實(shí)html默認(rèn)的css樣式在起作用，所以首先我們要知道html和頁(yè)面的表現(xiàn)是沒有關(guān)系的，這些是css的事情。HTML在頁(yè)面中的作用就是結(jié)構(gòu)和含義，通俗點(diǎn)說就是劃分內(nèi)容，這里放什么，我們放的是什么。 語(yǔ)義化的HTML結(jié)構(gòu)首先要強(qiáng)調(diào)HTML結(jié)構(gòu) HTML結(jié)構(gòu)是頁(yè)面的骨架，一個(gè)頁(yè)面就好像一幢房子，HTML結(jié)構(gòu)就是鋼精鋼筋混泥土的墻，一幢房子如果沒有鋼精鋼筋混泥土的墻那就是一堆費(fèi)磚頭，不能住人，不能辦公。css是裝飾材料，是原木地板，是大理石，是油漆，是用來裝飾房子的，CSS的強(qiáng)大就不用多說了，css如果沒有html結(jié)構(gòu)那就是一堆木板，一同油漆，沒有了實(shí)際使用價(jià)值。CSS完全依靠引用它的(X)HTML文檔。如果你想使CSS的能力充分發(fā)揮到極致，提供一個(gè)用既干凈又有結(jié)構(gòu)的內(nèi)容的html是非常必要的，“HTML是在互聯(lián)網(wǎng)上發(fā)布超文本的通用語(yǔ)，HTML使用標(biāo)簽來對(duì)文本結(jié)構(gòu)化”。 語(yǔ)義化的HTML結(jié)構(gòu)怎么寫？ HTML是一種對(duì)文本內(nèi)容進(jìn)行結(jié)構(gòu)和意義（或者說“語(yǔ)義”）進(jìn)行補(bǔ)充的方法。它會(huì)告訴我們說：“這行是一個(gè)標(biāo)題，這幾行組成了一個(gè)段落。這些文字是項(xiàng)目列表，這些文字是鏈接到互聯(lián)網(wǎng)上另一個(gè)文件的超鏈接。”值得注意的是，不應(yīng)該讓HTML來告訴我們：“這些文字是藍(lán)色的，這些文字又是紅色的。這部分內(nèi)容是最最靠右的一欄，這行內(nèi)容是斜體字。”這些和表現(xiàn)相關(guān)的信息是CSS的工作。在做前端開發(fā)的時(shí)候要記住：HTML告訴我們一塊內(nèi)容是什么（或其意義），而不 是它長(zhǎng)的什么樣子。當(dāng)我們提到“語(yǔ)義標(biāo)記”的時(shí)候，我們所說的HTML應(yīng)該是完全脫離表現(xiàn)信息的，其中的標(biāo)簽應(yīng)該都是語(yǔ)義化地定義了文檔的結(jié)構(gòu)。 語(yǔ)義化的HTML結(jié)構(gòu)其實(shí)很簡(jiǎn)單，首先掌握html中各個(gè)標(biāo)簽的語(yǔ)義， 是一個(gè)容器；是表示強(qiáng)調(diào)； 是一個(gè)無序列表等等…在看到內(nèi)容的時(shí)候想想用什么標(biāo)簽?zāi)芨玫拿枋鏊鞘裁淳陀檬裁礃?biāo)簽。 語(yǔ)義化的HTML結(jié)構(gòu)到底有什么好處？ 我們知道HTML5新增的標(biāo)簽，比如 和 ，html正在朝著更加健壯的語(yǔ)義化的HTML結(jié)構(gòu)發(fā)展，xhtml2在這點(diǎn)上沒html5先進(jìn)，這也是xhtml2死亡的一個(gè)原因，這一點(diǎn)也說明語(yǔ)義化的HTML結(jié)構(gòu)是html的發(fā)展趨勢(shì)。 1.去掉或樣式丟失的時(shí)候能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)： html本身是沒有表現(xiàn)的，我們看到例如 是粗體，字體大小2em，加粗；是加粗的，不要認(rèn)為這是html的表現(xiàn)，這些其實(shí)html默認(rèn)的css樣式在起作用，所以去掉或樣式丟失的時(shí)候能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)不是語(yǔ)義化的HTML結(jié)構(gòu)的優(yōu)點(diǎn)，但是瀏覽器都有有默認(rèn)樣式，默認(rèn)樣式的目的也是為了更好的表達(dá)html的語(yǔ)義，可以說瀏覽器的默認(rèn)樣式和語(yǔ)義化的HTML結(jié)構(gòu)是不可分割的。 2.屏幕閱讀器（如果訪客有視障）會(huì)完全根據(jù)你的標(biāo)記來“讀”你的網(wǎng)頁(yè). 例如,如果你使用的含語(yǔ)義的標(biāo)記,屏幕閱讀器就會(huì)“逐個(gè)拼出”你的單詞,而不是試著去對(duì)它完整發(fā)音. 3.PDA、手機(jī)等設(shè)備可能無法像普通電腦的瀏覽器一樣來渲染網(wǎng)頁(yè)（通常是因?yàn)檫@些設(shè)備對(duì)CSS的支持較弱）. 使用語(yǔ)義標(biāo)記可以確保這些設(shè)備以一種有意義的方式來渲染網(wǎng)頁(yè).理想情況下,觀看設(shè)備的任務(wù)是符合設(shè)備本身的條件來渲染網(wǎng)頁(yè). 語(yǔ)義標(biāo)記為設(shè)備提供了所需的相關(guān)信息,就省去了你自己去考慮所有可能的顯示情況（包括現(xiàn)有的或者將來新的設(shè)備）.例如,一部手機(jī)可以選擇使一段標(biāo)記了標(biāo)題的文字以粗體顯示.而掌上電腦可能會(huì)以比較大的字體來顯示.無論哪種方式一旦你對(duì)文本標(biāo)記為標(biāo)題,您就可以確信讀取設(shè)備將根據(jù)其自身的條件來合適地顯示頁(yè)面. 4.搜索引擎的爬蟲也依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重. 過去你可能還沒有考慮搜索引擎的爬蟲也是網(wǎng)站的“訪客”,但現(xiàn)在它們他們實(shí)際上是極其寶貴的用戶.沒有他們的話,搜索引擎將無法索引你的網(wǎng)站,然后一般用戶將很難過來訪問. 5.你的頁(yè)面是否對(duì)爬蟲容易理解非常重要,因?yàn)榕老x很大程度上會(huì)忽略用于表現(xiàn)的標(biāo)記,而只注重語(yǔ)義標(biāo)記. 因此,如果頁(yè)面文件的標(biāo)題被標(biāo)記,而不是,那么這個(gè)頁(yè)面在搜索結(jié)果的位置可能會(huì)比較靠后.除了提升易用性外,語(yǔ)義標(biāo)記有利于正確使用CSS和JavaScript,因?yàn)槠浔旧硖峁┝嗽S多“鉤鉤”來應(yīng)用頁(yè)面的樣式與行為.SEO主要還是靠你網(wǎng)站的內(nèi)容和外部鏈接的。 6.便于團(tuán)隊(duì)開發(fā)和維護(hù) W3C給我們定了一個(gè)很好的標(biāo)準(zhǔn)，在團(tuán)隊(duì)中大家都遵循這個(gè)標(biāo)準(zhǔn)，可以減少很多差異化的東西，方便開發(fā)和維護(hù)，提高開發(fā)效率，甚至 實(shí)現(xiàn)模塊化開發(fā)。 如有不同觀點(diǎn)，補(bǔ)充，歡迎留言討論。就是當(dāng)你寫html時(shí)，要按照人們的思考邏輯寫。不但要自己能看懂，也要讓別人也能看懂，不要讓別人覺得你的代碼很亂。
標(biāo)題名稱：如何理解html結(jié)構(gòu)的語(yǔ)義化，如何理解語(yǔ)義化的html結(jié)構(gòu)
本文來源：http://chinadenli.net/article34/icoose.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、虛擬主機(jī)、全網(wǎng)營(yíng)銷推廣、營(yíng)銷型網(wǎng)站建設(shè)、域名注冊(cè)、建站公司
廣告
![]()
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：
創(chuàng)新互聯(lián)
