【重構(gòu)前端知識(shí)體系之HTML】講講對(duì)HTML5的一大特性——語義化的理解
引言
在講什么是語義化之前，先看看語義化的背景。
在之前的文章中提到HTML最重要的特性简烤，那就是標(biāo)簽。但是項(xiàng)目一大，標(biāo)簽多的看不懂撤蟆，一堆疊著一堆。一些命名奇奇怪怪堂污，想維護(hù)被勸退家肯，團(tuán)隊(duì)協(xié)作導(dǎo)致團(tuán)戰(zhàn)開始！
因此語義化迫在眉睫盟猖！
什么是語義化
在我們寫HTML時(shí)其實(shí)無所謂讨衣，因?yàn)槟憷锩骈L(zhǎng)啥樣，用戶看不到式镐，也不用看到反镇。
因?yàn)槟阌蠧SS的漂亮衣服，即使你的HTML一塌糊涂娘汞，CSS也可以讓它光鮮亮麗歹茶。
但是用戶看不到，開發(fā)者看得到呀你弦！因此惊豺，這個(gè)語義化的友好者是開發(fā)者本身。
所謂語義化禽作，就是憑著HTML本身尸昧，也能體驗(yàn)出人性化的結(jié)構(gòu)！
語義化的好處
在沒有CSS的情況下旷偿，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)烹俗、代碼結(jié)構(gòu)。這樣開發(fā)者一眼就明了你的意圖萍程，一秒破冰幢妄！
-
對(duì)SEO友好。對(duì)開發(fā)者友好尘喝，那么對(duì)開發(fā)者的小蟲子們也是當(dāng)然磁浇！
當(dāng)標(biāo)簽應(yīng)用得當(dāng)，體現(xiàn)出上下文中你想要關(guān)鍵字的權(quán)重朽褪，那么搜索引擎爬蟲就到了你的頭上了置吓。那么網(wǎng)站的訪問量不就來了嗎。
可以支持一些特殊的設(shè)備（盲人閱讀缔赠、移動(dòng)設(shè)備）衍锚，網(wǎng)頁翻譯等。
-
最直觀的一點(diǎn)嗤堰，便是你的隊(duì)友都希望和你合作戴质！你的代碼的語義化，隊(duì)友都愛啊告匠！
語義化更具可讀性戈抄，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化后专。（跳槽快速融入划鸽？）
工作中語義化的思考
不要使用一些純樣式標(biāo)簽，這些CSS會(huì)幫我們做到戚哎。如：b裸诽、font、u等一些標(biāo)簽型凳。
-
需要強(qiáng)調(diào)的文本丈冬，可以包含在strong或者em標(biāo)簽中（，strong默認(rèn)樣式是加粗（不要用b）甘畅，em是斜體（不用i）埂蕊。使用 mark標(biāo)簽來表示標(biāo)注的/突出顯示的文本。
但是還是可以考慮使用CSS來完成橄浓。
每個(gè)input標(biāo)簽對(duì)應(yīng)的說明文本都需要使用label標(biāo)簽粒梦，并且通過為input設(shè)置id屬性亮航，在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對(duì)應(yīng)的input關(guān)聯(lián)起來荸实。
表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途缴淋。
應(yīng)該使用
<h1> - <h6>來表示標(biāo)題准给。當(dāng)用CSS寫樣式的時(shí)候命名也需要遵循HTML的結(jié)構(gòu)，體現(xiàn)出語義化的本質(zhì)重抖。
語義化的標(biāo)簽
1露氮、<header> 標(biāo)簽定義文檔的頁眉
通常包含頁面的正副標(biāo)題。
<header>
<h1>他真的是美男子嗎?</h1>
<p>據(jù)現(xiàn)場(chǎng)勘查钟沛，他真的是美男子畔规！</p>
</header>
2、<footer>標(biāo)簽定義文檔或節(jié)的頁腳
頁腳通常包含文檔的作者恨统、版權(quán)信息叁扫、使用條款鏈接、聯(lián)系信息等等畜埋。
可以在一個(gè)文檔中使用多<footer>元素莫绣。
<footer>
<p>Posted by: 美男子</p>
</footer>
3、<main>標(biāo)簽規(guī)定文檔的主要內(nèi)容悠鞍。
<main>元素中的內(nèi)容對(duì)于文檔來說應(yīng)當(dāng)是唯一的对室。
它不應(yīng)包含在文檔中重復(fù)出現(xiàn)的內(nèi)容，比如側(cè)欄、導(dǎo)航欄掩宜、版權(quán)信息蔫骂、站點(diǎn)標(biāo)志或搜索表單。
在一個(gè)文檔中牺汤，不能出現(xiàn)多個(gè)
<main>元素纠吴。<main>元素不能是以下元素的后代：<article>、<aside>慧瘤、<footer>戴已、<header>或<nav>。
<main>
<h1>我的介紹</h1>
<p>我是一個(gè)聰明的孩子</p>
</main>
4锅减、<section> 標(biāo)簽定義文檔中的片段糖儡。
比如章節(jié)、頁眉怔匣、頁腳或文檔中的其他部分握联。
<section>
<h1>PRC</h1>
<p>The People's Republic of China was born in 1949...</p>
</section>
5、<article> 標(biāo)簽規(guī)定獨(dú)立的自包含內(nèi)容
比如文章下的評(píng)論之類的
<article>
<h1>我為什么聰明呢</h1>
<p>我聰明的秘訣是我愛思考</p>
</article>
6每瞒、<aside> 標(biāo)簽定義其所處內(nèi)容之外的內(nèi)容金闽。
用來裝載非正文類的內(nèi)容。例如廣告剿骨，成組的鏈接代芜，側(cè)邊欄等等。
<p>聰明的研究</p>
<aside>
<h1>我為什么聰明呢</h1>
<p>我聰明的秘訣是我愛思考</p>
</aside>
7浓利、<nav> 元素代表頁面的導(dǎo)航鏈接區(qū)域挤庇。
用于定義頁面的主要導(dǎo)航部分。
<nav>
<ul>
<li><a href=”https://www.baidu.com”>百度</a></li>
<li><a href=”https://www.guizimo.com”>歸子莫</a></li>
</ul>
</nav>
一個(gè)語義化模板
先來看一張圖贷掖。
看起來嫡秕，一個(gè)標(biāo)標(biāo)致致的HTML結(jié)構(gòu)就很清晰了。
總結(jié)
有的朋友肯定會(huì)問了苹威，那平時(shí)都是用框架寫的代碼昆咽，基本不用用這些，又不是去寫個(gè)人網(wǎng)站或者官網(wǎng)牙甫，都是寫一些業(yè)務(wù)型的H5或者后臺(tái)管理掷酗。
其實(shí)對(duì)于個(gè)人網(wǎng)站或者官網(wǎng)來說，語義化是有實(shí)際價(jià)值的腹暖。而且汇在，這個(gè)也是近些年來面試的常問的一題。最重要的是要去學(xué)習(xí)語義化的含義脏答。做到代碼語義化糕殉，包括函數(shù)的命名亩鬼，組件的命名，組件業(yè)務(wù)功能的拆分阿蝶。一直在路上雳锋！
重構(gòu)前端知識(shí)體系，你要一起嗎羡洁？
博客說明與致謝
文章所涉及的部分資料來自互聯(lián)網(wǎng)整理玷过，其中包含自己個(gè)人的總結(jié)和看法，分享的目的在于共建社區(qū)和鞏固自己筑煮。
引用的資料如有侵權(quán)辛蚊，請(qǐng)聯(lián)系本人刪除！
感謝萬能的網(wǎng)絡(luò)真仲，W3C袋马，菜鳥教程等！
感謝勤勞的自己秸应，個(gè)人博客虑凛，GitHub學(xué)習(xí)，GitHub
如果你感覺對(duì)你有幫助的話桑谍，不妨給我點(diǎn)贊鼓勵(lì)一下，好文記得收藏喲祸挪！關(guān)注我一起成長(zhǎng)锣披！
幸好我在，感謝你來匕积！
