正確使用HTML標(biāo)簽

時(shí)間：2023-07-25 01:51:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-25 01:51:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

正確使用HTML標(biāo)簽：【摘要】華麗的樂(lè)章，通過(guò)七個(gè)音階1234567就能實(shí)現(xiàn)，元素周期表的118種元素，組成了世間的物質(zhì)百態(tài)；嚴(yán)明的軍隊(duì)紀(jì)律，是從【立正、稍息、齊步走】三個(gè)口令深入執(zhí)行而來(lái)；二進(jìn)制的0和1，組成了計(jì)算機(jī)世界的底層。 今天我們談的標(biāo)簽，也正是網(wǎng)頁(yè)腳本語(yǔ)言的基石，重要性，毋庸置疑。

【作者】：shuaiyin

【更新目錄】

1.2020-10-06：更新使用flex布局的一個(gè)實(shí)際案例。

【建議】 繼續(xù)深入探討這些底層原理，總結(jié)出不一樣的理解, Android也有類似的layout.xml, 用來(lái)布局控件， IOS體系也有類似的，可以做一些類比; 我們未來(lái)先知平臺(tái)也要對(duì)元素進(jìn)行布局，一旦本文寫(xiě)得足夠優(yōu)雅， 這篇基礎(chǔ)的文章對(duì)后面幫助特別大。

最近在做移動(dòng)端項(xiàng)目時(shí)，發(fā)現(xiàn)用到的HTML標(biāo)簽有點(diǎn)匱乏，所以今天特來(lái)總結(jié)一下，自己在碼移動(dòng)端靜態(tài)頁(yè)面的一些HTML標(biāo)簽的分享，以及為什么要使用語(yǔ)義化標(biāo)簽。


到底什么是HTML標(biāo)簽？HTML是一種構(gòu)建互聯(lián)網(wǎng)內(nèi)容的一種語(yǔ)言方式。類似于交流的各國(guó)語(yǔ)言，實(shí)質(zhì)如此。我們需要知道的是：HTML是開(kāi)發(fā)互聯(lián)網(wǎng)的一種語(yǔ)言即可。

語(yǔ)義化標(biāo)簽：

1.代碼結(jié)構(gòu): 使頁(yè)面沒(méi)有css的情況下，也能夠呈現(xiàn)出很好的內(nèi)容結(jié)構(gòu)。就是把css去掉之后，頁(yè)面所呈現(xiàn)的布局狀態(tài)，不會(huì)亂七八糟。

常見(jiàn)的塊級(jí)元素：

div ，p ，ul , li ,h1-h6

常見(jiàn)的行內(nèi)元素：

span ,a ,strong ,em ,b ,s ,i ,font

常見(jiàn)的語(yǔ)義化標(biāo)簽：

1.<header>表示頁(yè)面中一個(gè)內(nèi)容區(qū)塊或整個(gè)頁(yè)面的標(biāo)題。

2.<section>頁(yè)面中的一個(gè)內(nèi)容區(qū)塊，如章節(jié)、頁(yè)眉、頁(yè)腳或頁(yè)面的其他地方，可以和h1、h2……元素結(jié)合起來(lái)使用，表示文檔結(jié)構(gòu)。

3.<article>表示頁(yè)面中一塊與上下文不相關(guān)的獨(dú)立內(nèi)容，如一篇文章。

4.<aside>表示<article>標(biāo)簽內(nèi)容之外的，與<article>標(biāo)簽內(nèi)容相關(guān)的輔助信息。

6.<hgroup>表示對(duì)整個(gè)頁(yè)面或頁(yè)面中的一個(gè)內(nèi)容區(qū)塊的標(biāo)題進(jìn)行組合。

7.<figure>表示一段獨(dú)立的流內(nèi)容，一般表示文檔主體流內(nèi)容中的一個(gè)獨(dú)立單元。

8.<figcaption>定義<figure>標(biāo)簽的標(biāo)題。

9.<nav>表示頁(yè)面中導(dǎo)航鏈接的部分。

10.<footer>表示整個(gè)頁(yè)面或頁(yè)面中一個(gè)內(nèi)容區(qū)塊的腳注。一般來(lái)說(shuō)，它會(huì)包含創(chuàng)作者的姓名、創(chuàng)作日期及聯(lián)系方式。

11.目前常見(jiàn)的flex布局理解：

就是我們所說(shuō)的彈性布局，為盒模型提供了很大的靈活性。它的出現(xiàn)，可以說(shuō)，很大程度上定位和浮動(dòng)已經(jīng)被取代。

參考阮一峰官方文檔：

主要的幾個(gè)屬性：

1.display：flex

2.justify-content:center

3.align-items:center

單單的幾條屬性，就可以完全實(shí)現(xiàn)垂直居中了。是不是相較之前的定位浮動(dòng)等來(lái)的比較干脆，且比較穩(wěn)定。最主要的是實(shí)現(xiàn)了塊元素在一行展示的這種特性。在以前的時(shí)候，這種只可以依靠定位和浮動(dòng)來(lái)進(jìn)行實(shí)現(xiàn)。那么定位和浮動(dòng)已經(jīng)脫離了文檔流，也是十分的麻煩。

flex很實(shí)用，但是在實(shí)際項(xiàng)目當(dāng)中，也會(huì)遇到諸多小問(wèn)題，下面就是我在實(shí)際項(xiàng)目中遇到的一個(gè)很直接卻很普遍的實(shí)例。

案例一：

介紹一種flex布局實(shí)現(xiàn)tab菜單，兩行展示，第一行展示4個(gè)tab，第二行展示三個(gè)的這種布局是如何實(shí)現(xiàn)的。

實(shí)現(xiàn)原理，flex布局可以實(shí)現(xiàn)每個(gè)tab之間的間隔，也就是等間距排列。

我們用到的屬性為：justify-content:space-between

那么會(huì)出現(xiàn)一個(gè)問(wèn)題：就是第二行的tab，會(huì)出現(xiàn)和第一行一樣，等間距兩端排列。然而我們想要的并非如此，那么flex就不能實(shí)現(xiàn)了嘛，不然，請(qǐng)看實(shí)例：

這種是要實(shí)現(xiàn)的效果：




那么我們利用flex布局實(shí)現(xiàn)的原理就是：添加空標(biāo)簽

原理大致如此。