HTML結構化的重要性

爲什麼我們要學習標籤?

因爲搜索引擎只看得到代碼,只能通過標籤判斷內容的語義。所以我們應該儘可能的讓我們的代碼語義化,這就凸顯了html結構化的重要性。

HTML的作用是用來寫結構的,css只是用來修飾結構的。千萬不要混淆呦~

舉個栗子~
html中的標籤就好比是一個有不同作用的積木,有的是地基,有的是房頂,有的是木頭,每個標籤意義不同,而css只是將積木拼合成各種各樣的房屋。積木是永遠不會變的,但是形狀卻在css的控制下千變萬化。

錯誤想法: 通常在製作網頁時我們會陷入css樣式影響了結構化佈局,即根據網頁中看到的樣式去選擇標籤,這是大大的錯誤。如果我們來寫幾行文字,文字之前沒有圖標,所以你選擇用p標籤。然而本質上這是一個列表,所以表明你被樣式影響了你的佈局;再舉例你不能因爲有一個加粗字體偏大樣式的字體而選h標籤,雖然h標籤的默認樣式爲加粗放大,但是h標籤的語義化是標題,所以不是標題的文字不能選擇h標籤。

搜索引擎對h標題標籤是非常敏感的,,建議標題標籤不要出現斷層,例如網頁中我們用了h1,h3,h4那麼不能缺失 h2

爲什麼我們要強調結構化的重要性?

下面我們分析一下:
當項目負責人分配給你100個頁面去切圖,完成時間一週。是不是感覺頓時天怒人怨晴天霹靂,這工作量打死也寫不完啊!這時結構化的重要性就凸顯出來啦

首先我們從頭到尾分析完這100個頁面,就能得出一個結論:咦?這些頁面大同小異,如果我寫出來幾個頁面,別的照貓畫老虎不就ok啦!怎麼那麼聰明呢,哈哈~~的確就是這麼簡單。這個想法就已經表明你對結構化已經有了初步的思想認識啦~接下來我們需要規劃如何去做?
第一步就是一遍一遍不厭其煩的分析這些類型統一的頁面,尋找相同點。大的來說這幾個頁面框架都是頭+主體+尾,小的來說這幾個頁面的導航基本一樣,這幾個頁面都是圖文結構雖然有點區別,這幾個頁面都是表單註冊…這就是最重要的一點找到結構大同小異的部分。
第二步我們需要將找到的相似結構寫出來,把用到的所有標籤羅列,最後合成一個大而全,包含量100%的導航結構。例如導航:將這些相似的導航,顏色不同,個數不同,邊框不同都無關緊要,因爲我們需要的是透過表現看結構,所有的導航都可以由列表結構完成,那麼就寫出可以包含所有導航結構的大結構。
第三步就是將我們寫出的大結構應用到每個頁面上啦!具體到某個頁面時,我們可以從最大的頁面結構到最小的一個導航結構使用我們第二步中的大結構去套用。根據頁面需要,在大結構基礎上去掉多餘的標籤,以此方式寫出頭疼的100個頁面,將會是最快速最有效率的方法之一。
Html結構化雖然學起來簡單,但是要想正確的靈活運用就需要我們花費一定的時間去體會去練習。它好比是一座大樓的地基,是建立在css、js之下最重要的部分,地基不穩如何成就高樓?千萬不要小看html結構化的作用,如果能將結構化正確熟練運用,將會使我們的工作事半功倍。


2018年,全新的起點,希望我們越來越好,一起加油

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章