這是面試時候可能遇到的一道題
一腾夯、先說觀點
- 我認為內(nèi)容颊埃、樣式和行為分離，根據(jù)W3C標準來說蝶俱，就是
html負責(zé)內(nèi)容班利，CSS負責(zé)樣式，JS負責(zé)行為榨呆。
二罗标、提供論據(jù)
- 類似這樣的題目，如果正面不好回答的情況下愕提，可以嘗試反著回答馒稍，如人為什么要吃飯，答：如果人不吃飯就會餓死浅侨！
- 假設(shè)
html控制樣式纽谒，如圖
html控制樣式
- 用
<center>標簽把文字居中，然后用<strong>加粗文字如输。 - 這樣的寫法把原本簡單的邏輯結(jié)構(gòu)變得復(fù)雜話鼓黔，不利于代碼的維護央勒。
- 如果html也負責(zé)樣式的話，使得內(nèi)容的結(jié)構(gòu)有很多無用的標簽澳化，有的標簽表示內(nèi)容崔步，有的標簽表示樣式，這樣我就很難區(qū)分內(nèi)容的邏輯結(jié)構(gòu)
- 假設(shè)用
CSS寫內(nèi)容
CSS寫內(nèi)容
- 這樣寫會導(dǎo)致用戶選取不到文字
- 而且JS取不到這里的文本內(nèi)容
- 假如用CSS控制行為缎谷，那么CSS里面有很復(fù)雜的邏輯井濒，會導(dǎo)致CSS很慢，最終影響頁面加載速度
- 假設(shè)用JS控制樣式
- 還沒寫
$div.hiden()之前
- 寫了
$div.hiden()之后列林，文字就被隱藏
- 加上
$div.show()文字又出現(xiàn)
那么問題來了 - 在
$div.show()之后瑞你，div的屬性為display: block;，那么有可能在$div.hiden()之前,原本的div標簽屬性是display: flex;希痴，經(jīng)過$div.show()改變了屬性的值為block者甲，那么頁面的flex布局就會全局炸掉。
三砌创、總結(jié)
- 為了以后改版時更方便虏缸，直接修改樣式，而不動HTML的內(nèi)容嫩实。更方便易于閱讀樣式和內(nèi)容刽辙，便于項目的維護。
- 網(wǎng)頁的內(nèi)容直接暴露在搜索引擎面前甲献，這樣有利于搜索引擎抓取網(wǎng)頁的內(nèi)容扫倡。
