丨h(huán)tml語義div和span不是夠用了嗎

。語義類也是大家工作中經(jīng)常會用到的一類，它們的特點是視覺表現(xiàn)上互相都差不多，主要的區(qū)別在于它們表示了不同的語義，比如大家會經(jīng)常見到的secion、av、，這些都是語義類的。語義是我們說話表達的意思，多數(shù)的語義實際上都是由文字來承載的。語義類則是純文字的補充，比如標題、自、章節(jié)、列表，這些內(nèi)容都是純文字無法表達的，我們需要依靠語義代為表達。在講語義之前，我們來說說為什么要用語現(xiàn)在我們很多的前端工程師寫起代碼來，多數(shù)都不用復雜的語義，只靠div和就能走天下了這樣做行不行呢？答案是行。那這樣做好不好呢？按照正確的套路，我應該說不這是因為在現(xiàn)代互聯(lián)網(wǎng)產(chǎn)品里，HTML用于描述“軟件界面”多過于“富文本”，而軟件界面里的東西，實際上幾乎是沒有語義的。比如說，我們做了一個購物車功能，要給每個購物車里的商品套上l嗎？比如說，加入購物車這個按鈕，要用Buton嗎？實際上我覺得沒必要，因為這個場景里面，跟文本中的列表，以及表單中的Button，其實已經(jīng)相差很遠了，所以，我支持在任何“軟件界面”的場景中，直接使用div和span。語義類對開發(fā)者更為友好，使用語義類增強了可讀性，即便是在沒有CSS的時除了對人類友好之外，語義類也十分適宜機器閱讀。它的文字表現(xiàn)力豐富，更適合搜索引擎檢索（EO），也可以讓搜索引擎爬蟲更好地獲取到有效信息，有效提升網(wǎng)頁的搜索量，并且語義類還可以支持讀屏軟件，根據(jù)文章可以自動生 等等不過，不恰當?shù)厥褂谜Z義，反而會造成作用。這里我們舉一個常見的誤區(qū)作為例子。我們都知道l是無序列表，l是有序列表，所以很多接觸過語義這個概念，半懂不懂的前端工程師，特別喜歡給所有并列關系的元素都套上l。實際上ul長成下面的這種樣子的來自HTML準Ihavelivedinthefollowingcountries:UnitedKingdomUnitedStatesul數(shù)出現(xiàn)正在行文中間，它的上文多數(shù)在提示：要列舉某些項。但是，如果所有并列關系都用ul，會造成大量冗余。錯誤地使用語義，會給機器閱讀造成、增加嵌套，給CSS編寫加重負擔所以，對于語義，我的態(tài)度是：“用對”比“不用”好，“不用”比“用錯”好。當然了，我覺得有理想的前端工程師還是應該去追求“用對”它們。與JavaScript這樣嚴格的編程語言相比，HTML中語義的使用更接近我們平常說話用作為自然語言延伸的語義其實語義問題不僅僅屬于理科，它還是個文科問所以我們這里講語義的使用的第一個場景，也是最自然的使用場景，就是：作為自然語言和純文本的補充，用來表達一定的結(jié)構或者消除歧義。我們先來看看“表達一定的結(jié)構”這個場在日語中，有一個語法現(xiàn)象叫做：ルビ，它的讀音是ruby（著名的ruby言就是據(jù)此命圖中的例子選自動畫片《某科學的超》第二季第一話。圖中把 eport放在空間移動上方的用法，就是日文中ruby的用法?！翱臻g移動”是動畫中白井黑子的技能，這里動畫字幕上寫的是“空間移動”，動畫里的臺詞則用了英文發(fā)音“ 了一個使用ruby的場景。 的這個形式，的網(wǎng)友中間最近被玩出了新花樣，比如表情包 聊天，不能用ruby這樣的東西真的是好急啊，只好用括號代替，效果真是差了在HTML5中，就引入了這個表示ruby的，它由ruby、rt、rp三個來實現(xiàn)所以說，這些情況里存在的語義，其實原本就存在了，只是我們用純文字是沒法表達HTML作為一種“超文本”語言，支持這些文字表達就是必要的了還有一種情況是，HTML的有些實際上就是必要的，甚至必要的程度可以達到：如果這里我們可以介紹一下em代代昨天我吃了一個香蕉今天我吃了一個蘋果再比如代昨天我吃了兩個蘋果今天我吃了一個蘋果當沒有上下文時，如何消除歧義呢？這就要用到我們的em了。em表示重音代今天我吃了一個<em>蘋果</em>今天我吃了<em>一個</em>通過em，我們可以消除這樣的歧義一些文章常常會拿emstrong對比，實際上，我們只要理解了em真正意思，它strong可謂天差地別，并沒有任何的可能 介紹完自然語言的語義場景后，介紹的另一個語義重要使用場景，就是文章的結(jié)構。中國古代小說就形成了“章-回”的概念，西方的戲劇也有幕的區(qū)分，所以人類的自然語言作品也是如出一轍。HTML也應該支持這樣的需求。HTML語義中，有不少是用于支持這樣的結(jié)構的標語義化的TML能夠支持自動生成結(jié)構，HTML標準中還專門規(guī)定了生成結(jié)構的算法，即使我們并不打算深入實踐語義，也應該盡量在大的層面上保證這些元素的語義化使用。 成。這個樹形結(jié)構可能不會跟HTML元素的嵌套關系一致。代1例如2<h1>HTML語義<p>balahbalahbalah<h2>弱語義<p>balah<h2>結(jié)構性元素<p>balah這段HTML幾乎是平鋪的元素，但是它的標題結(jié)構結(jié)構性元h1-h6最基本的標題，它們表示了文章中不同層級的標題。有些時候，我們會有副標題，為了避免副標題產(chǎn)生額外的一個層級，我們使用hgroup。我們來看下有/無hgroup的對比代<h1>JavaScript對象<h2>我們需要模<p>balah此段生成以下標題結(jié)構JavaScript我們需要模擬類嗎…代<h1>JavaScript對象<h2>我們需要模<p>balah這一段生成以下標題結(jié)構JavaScript對象——我們需要模擬類…我們通過兩個效果的對比就可以知道，在hgroup的h1-h6視為同一標題的不同組成從HTML5開始，我們有了section，這個可不僅僅是一個“有語義的div”，它會改變h1-h6的語義。section的嵌套會使得其中的h1-h6下降一級，因此，在HTML5以后，我們只需要section和h1就足以形成文檔的樹形結(jié)構：代<h1>HTML語義<p>balahbalahbalah <h1>弱語義<p>balah<h1>結(jié)構性元素<p>balah這段代碼同樣會形成前面例子的標題結(jié)結(jié)構性元我們想介紹的最后一個場景是，隨著越來越多的瀏覽器推出“閱讀模式”，以及各種非瀏覽器終端的出現(xiàn)，語義化的HTML適合機器閱讀的特性變得越來越重要。應用了語義化結(jié)構的頁面，可以明確地提示出頁面信息的主次關系，它能讓瀏覽器很好地支持“閱讀視圖功能”，還可以讓搜索引擎中率提升，同時，它也對視障用戶的讀屏軟件更友好。我們正確使用整體結(jié)構類的語義，可以讓頁面對機器更友好。比如，這里一個典型代在body下面，有一個header，header里面是一個nav，跟header同級的有一個aside，aside里面也有一個nav。接下來是文章的整體，也就是一個一個的section。section里面可能還有嵌套，但是我們就不管了，最后是一個footer，這個footer里面可能address這樣的內(nèi)容除此之外，還有article，article是一種特別的結(jié)構，它表示具有一定獨立性質(zhì)的文章。所以，article和body具有相似的結(jié)構，同時，一個HTML頁面中，可能有多個article存一個典型的場景是多篇展示在同一個專題頁面中，這種類似報紙的多文章結(jié)構適合用arie來組織。代body面有自己的headerfooter，然后里面是豎篇的article，每一個article面都有自己的header、section、footer。這是一個典型的多文章結(jié)構。在這個結(jié)構里，我們看到了一些新，我也來逐個介紹一下header，如其名，通常出現(xiàn)部，表示導航或者介紹性的內(nèi)容。footer， headerfooter般都是放在article者body直接子元素，但是標準中并沒有明確規(guī)定，footer也可以和aside，nav，section相關聯(lián)（header不存在關聯(lián)問題）。 表示跟文章主體不那么相關的部分，它可能包含導航、等工具性質(zhì)的內(nèi)容aside容易被理解為側(cè)邊欄，實際上二者是包含關系，側(cè)邊欄是aside，aside一定是aside和header中都可能出現(xiàn)導航（nav），二者的區(qū)別是，header中的導航多數(shù) ，而aside中的導航多數(shù)是到關聯(lián)頁面或者是整站地圖。最后footer中包含address，這是個非常容易被誤用的。address并非像date一樣，表示一個給機器閱讀的地址，而是表示“文章（作者）的”，address明確地只關聯(lián)到article和body。本篇中我們介紹了一些基本原則和HTML文檔的整體結(jié)構，從整體上了解了HTML語義 適合機器閱讀的整體結(jié)構義化的開發(fā)？學習過本篇之后，答案有沒有變化呢？你可以給我留言，我們一起討論 歸科技所有 不得售賣。頁面已增加防盜追蹤，將依 上一 02|列一份前端知識架構下一 04|HTML語義：如何運用語義類來呈現(xiàn)Wiki網(wǎng)頁精選留言 展 46展作者回復:不然怎么能從里面挑出王大 咦？根 ，難道不是該介紹模塊一javascript相關的展人艱不 4