HTML相關知識

時間 2020-03-31

標籤 html 相關知識欄目 HTML 简体版

原文原文鏈接

DOCTYPE及做用

<!DOCTYPE> 聲明不是 HTML 標籤；它用來向瀏覽器說明頁面使用哪一個HTML版本編寫的。
DOCTYPE是用來聲明文檔類型和DTD規範的，一個主要的用途即是文件的合法性驗證。html

HTML版本：

HTML5：前端

<!DOCTYPE html>

HTML 4.01 Strict （嚴格模式）canvas

該DTD包含全部HTML元素和屬性，但不包括展現性的和棄用的元素(好比font)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional（傳統/寬鬆模式）瀏覽器

該DTD包含全部HTML元素和屬性，包括展現性的和棄用的元素(好比font)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5不須要引用DTD，HTML 4.01 須要引用DTD
DTD： (文檔類型定義)是一系列的語法規則，用來定義XML或(X)HTML的文件類型。服務器

Canvas和SVG

Canvas

Canvas 經過 JavaScript 來繪製 2D 圖形。
Canvas 是逐像素進行渲染的。
在 canvas 中，一旦圖形被繪製完成，它就不會繼續獲得瀏覽器的關注。若是其位置發生變化，那麼整個場景也須要從新繪製，包括任何或許已被圖形覆蓋的對象。

SVG

SVG 是一種使用 XML 描述 2D 圖形的語言。
svg繪製出來的每個圖形的元素都是獨立的DOM節點，可以方便的綁定事件或用來修改。
在 SVG 中，每一個被繪製的圖形均被視爲對象。若是 SVG 對象的屬性發生變化，那麼瀏覽器可以自動重現圖形。

Canvas 與 SVG 的比較

Canvassvg

依賴分辨率
不支持事件處理器
弱的文本渲染能力
最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪
canvas是位圖，輸出標量畫布，就像一張圖片同樣，可以以 .png 或 .jpg 格式保存結果圖像放大會失真或者鋸齒

SVG佈局

不依賴分辨率
支持事件處理器
最適合帶有大型渲染區域的應用程序（好比谷歌地圖）
複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快）
svg是矢量圖，輸出矢量圖形，後期能夠修改參數來自由放大縮小，不會是真和鋸齒。

SEO優化

SEO：搜索引擎優化，是一種利用搜索引擎的搜索規則來提升目前網站在有關搜索引擎內的天然排名的方式。

SEO原理：

頁面抓取：爬蟲向服務器請求頁面，獲取頁面內容。
分析入庫：對獲取到的內容進行分析，對優質頁面進行收錄。
檢索排序：當用戶檢索關鍵詞時，從收錄的頁面中按照必定的規則進行排序，並返回給用戶結果。

SEO 中的 TDK

title 標題標籤，<title>優化

強調重點便可，重要關鍵詞出現不要超過 2 次，並且要靠前

description 描述標籤，<meta description>網站

把頁面內容高度歸納

keywords 關鍵詞標籤 <meta keywords>ui

列舉出重要關鍵詞便可

前端SEO優化

網站結構佈局優化

1. 控制首頁連接數量
太少：影響網站收錄數量
太多：影響用戶體驗，下降網站首頁權重
2. 優化目錄層次
儘可能讓「爬蟲」跳轉3次，就能到達網站內的任何一個內頁
3. 導航優化
儘可能採用文字方式
4. 分頁導航
推薦寫法：「首頁 1 2 3 4 5 6 7 8 9 下拉框」
不推薦的，「首頁下一頁尾頁」
5. 提升網站速度：
控制頁面的大小，減小http請求。

網頁代碼優化

1. 合理的TDK
2. 語義化的HTML代碼

標籤要加「title」屬性加以說明
正文標題用<h1>標籤，副標題用<h2>標籤
<img>應使用 "alt" 屬性加以說明（指圖片不顯示時顯示的文字）
、標籤 : 須要強調時使用。
b爲了加粗而加粗，strong爲了標明重點而加粗
i爲了斜體而斜體，em爲了標明重點而斜體

3. 重要的HTML代碼放在最前
4. 重要的內容不要用js輸出
5. 少用iframe

相關概念

嚴格模式與混雜模式

嚴格模式：以瀏覽器支持的最高標準運行
混雜模式：頁面以寬鬆向下兼容的方式顯示，模擬老式瀏覽器的行爲

漸進加強和優雅降級

漸進加強：一開始保證最基本的功能，再針對高版本瀏覽器改進和追加功能。
優雅降級：一開始就構建完整的功能，再針對低版本瀏覽器進行兼容。

Quirks模式和Standards模式

Quirks(怪癖/兼容）模式是一種瀏覽器操做模式。一個相對新的瀏覽器故意模擬許多在舊瀏覽器中存在的bug。目標是使舊頁面顯示出他們的做者想要的那樣。沒有DOCTYPE的文檔用怪異模式。Quirks Mode比較寬鬆對某些規則不強求。

Quirks模式和Standards模式的區別

盒模型：
在W3C標準中，若是設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
設置行內元素的高寬：
在Standards模式下，給<span>等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。
margin:0 auto：
在standards模式下使用margin:0 auto可使元素水平居中，但在quirks模式下卻會失效。

HTML 與 XHTML 兩者有什麼區別，你以爲應該使用哪個並說出理由。
應該使用XHTML，由於XHTML是XML重寫了HTML的規範，比HTML更加嚴格，表現以下：

1.XHTML中全部的標記都必須有一個相應的結束標籤；
2.XHTML全部標籤的元素和屬性的名字都必須使用小寫；
3.全部的XML標記都必須合理嵌套；
4.有的屬性都必須用引號「」括起來；
5.把全部<和&特殊符號用編碼表示；
6.給全部屬性附一個值；
7.不要在註釋內容中使用「--」；
8.圖片必須使用說明文字。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。