一、html語義化
- 用正確的標籤做正確的事情
- html語義化讓頁面的內容結構化,結構更清晰。便於對瀏覽器、搜索引擎的解析
- 即使在沒有樣式(CCS)的情況下也以一種容易閱讀的文檔格式顯示
- 搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重,利於SEO
- 使閱讀源代碼的人對網站更容易將網站分塊,便於閱讀維護理解
二、SEO(Search Engine Optimization)
定義:搜索引擎優化,是以網頁爲載體,在不影響用戶體驗的前提下最大化讓網站符合搜索引擎的排名規則的所有手段集合
- 常用的SEO方法:
(1) TDK規則(合理設置html的head中的title、description、keywords)
(2) 描述性的標籤加上title屬性
(3) 每個頁面都需要有個h1標籤,合理使用h2-h6標籤
(4) 頁面進行服務端渲染,不要使用js渲染頁面(搜索引擎不會執行js)
(5) 頁面中合理地進行關鍵詞植入 - 要實現一組單選框 radio,屬性上需要滿足什麼條件?
name 屬性必須一樣 - 從 SEO 角度,請給出至少 2 條 html 書寫上的注意點。
(1) a 標籤一定要寫 title 屬性
(2) img 標籤一定要寫 alt、title 屬性
(3) 選用語義化的 html 標籤
三、DOCTYPE
- doctype是什麼?
DOCTYPE是document type的簡寫,它並不是 HTML 標籤,也沒有結束標籤,它是一種標記語言的文檔類型聲明,即告訴瀏覽器當前 HTML 是用什麼版本編寫的 - doctype的作用?
DOCTYPE是document type(文檔類型)的簡寫,在web設計中用來聲明文檔的解析類型(document.compatMode)。doctype會影響代碼驗證,並決定了瀏覽器最終如何顯示你的 Web文檔。
document.compatMode:
BackCompat:怪異模式,瀏覽器使用自己的怪異模式解析渲染頁面。
CSS1Compat:標準模式,瀏覽器使用W3C的標準解析渲染頁面。
如果你的頁面沒有DOCTYPE的聲明,那麼compatMode默認就是BackCompat
四、盒模型
-
請簡述 w3c 標準的盒模型(初級)
標準盒模型包含:內容(content)、內邊距(padding)、邊框(border),外邊距(margin) -
如何在 CSS 中告訴瀏覽器使用不同的盒模型來渲染你的佈局
css中所有html元素都可以看成爲一個盒子。
盒模型主要分爲兩類:W3C標準盒子模型和IE盒子模型,在編寫頁面代碼的時候應該儘量使用標準的W3C盒子模型,可在頁面中聲明DOCTYPE類型,將頁面設置爲"標準模式"(解決兼容性最簡潔和值得推薦的方式),在頁面開頭加上:<!DOCTYPE html>