HTML相關知識之文檔聲明標簽-HTML學習之路（2）

篇文章介紹了 注釋標簽，我個人感覺很容易理解，在日常編碼中，大多數編輯器都有注釋標簽的快捷鍵，如sublime或VS code里在html代碼里，選中想要注釋掉的代碼后，直接按ctrl+/即可。幾乎不用手動輸入了。還是很方便的。

這篇我寫<!DOCTYPE>標簽，說起來這個標簽，很常見，因為它會出現在每一個httml文檔的最開頭，然而，我們很少去重視它，為什么呢？

說到這個標簽，我不得不說起html的版本歷史了。

在大約10年前吧，html5應用還不如今天這么廣泛吧，于是當時的文檔類型聲明如下

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

很長，也很難記，由于我入行晚，懂得這玩意就只是一個聲明了，比如strict表示嚴格模式。其他的我也不想知道了。

當然html版本的規范從4到5的過渡經歷了太多年，因為要考慮老瀏覽器的兼容性，再加上前期移動設備配置低，不支持較為復雜的媒體元素。于是，一些資歷深的前端開發人員，面對這么長的代碼還是有很長一段時間。

當然，9102年都快過完了，我們這邊已經不需要再考慮這些了，于是，我直接就用html5了。

然后聲明文檔給格式，就變得很簡單了。

<!DOCTYPE html>

最開始我是使用sublime生成的模板練習的，然后，犯懶，直接輸入了<html>就出來下面的代碼：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
</body>
</html>

然后就開始進行填充了。

直到今天我才注意到原來<!DOCTYPE html>是單獨的一行，與下方<html></html>是兩碼事。

所以，我重新看了下書上的強調內容：

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前，沒有結束標簽，對大小寫不敏感。
<!DOCTYPE> 聲明不是 HTML 標簽；它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。
在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD(文檔類型定義)，因為 HTML 4.01 基于 SGML（標準通用標記語言)）。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。
HTML5 不基于 SGML，所以不需要引用 DTD。

關于SGML，參見https://wiki.mbalib.com/wiki/SGML

常用的 DOCTYPE 聲明

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。

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

HTML 4.01 Transitional

該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。

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

HTML 4.01 Frameset

該 DTD 等同于 HTML 4.01 Transitional，但允許框架集內容。

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

XHTML 1.0 Strict

該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標記。

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

XHTML 1.0 Transitional

該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標記。

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

XHTML 1.0 Frameset

該 DTD 等同于 XHTML 1.0 Transitional，但允許框架集內容。

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

XHTML 1.1

該 DTD 等同于 XHTML 1.0 Strict，但允許添加模型（例如提供對東亞語系的 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

最后，雖然上方的html4和xml的文檔類型聲明這么麻煩了，但是這里沒什么知識點了，因為如今，html5應用這么普及了，我們只需在文檔開頭寫<!DOCTYPE html>即可，當然html4的嚴格模式和傳統模式大概知道就行了。

先當然還的是java

單行注釋快捷鍵 CTRL+/

多行注釋快捷鍵 CTRL+SHIFT+/

多按快捷鍵就能解除注釋了

還有的文檔注釋，這個比較少關心把　　快捷鍵　　/**

三種注釋方式都有

然后就是sql的注釋了

-- 單行注釋

/* */ 多行注釋

sql語句注釋

在然后就是html的注釋了

注釋方法

在然后就是mybatis的注釋了

注釋方法

最后就是properties

主要是用#來注釋的

基本以上就是我需要寫注釋的地方了

話不多說，直接硬貨，在使用Sublime寫Html時那些常用的快捷鍵：

一、新建文件快速生成HTML頭部信息的方法：!+tab

先建立一個文件，命名以html為后綴進行保存(如：test.html)

輸入!或html:5，然后按 Tab 鍵(注意，這里的!必須是英文的嘆號)

使用!

使用html:5

這是快速補全結果：

補全結果

二、快速注釋:Ctrl+/（win）、 command+/(mac)

HTML中的注釋格式是這樣的 ，中間是注釋的內容

而添加注釋的快捷鍵是Ctrl+/（win）、 command+/(mac)，只要鼠標在該行，無論是行首，中間，還是行尾，都直接注釋鼠標所在行的整行

（如果要注釋多行，直接選中要注釋的行，按Ctrl+/（win）、 command+/(mac)）

注意：取消注釋相同操作，如果當前行（或者所選行）是注釋狀態，使用此快捷鍵會進行反注釋

快速注釋

這是注釋的結果

這是選擇多行后使用快捷鍵注釋

三、快速補全單個標簽:tab

我們寫標簽的時候，要寫左括號，但左右尖括號（<>），這需要組合輸入，比較煩，tab標簽補全解決了你的煩惱。

比如你想寫個p標簽，直接寫個p，然后按下tab即快速的完成了p標簽的基本結構，我們只要填充內容即可

直接寫個p，然后按下tab鍵

補全結果

四、快速插入多個相同標簽：標簽名*n+tab

當需要插入好幾個相同的標簽時，怎么辦？

比如想插入中五個連續的p標簽

這時，我們只需敲出一個標簽名p，然后再*5,即：p*5 然后按下tab

多個p標簽

補全結果

五、快速插入父子元素（主要用于列表操作）：ul>li*5 +tab

在寫列表時，我們經常要插入多個列表選項,一個個寫很麻煩，沒問題，快捷鍵幫你，如下圖所示：

父子元素用>

補全結果

六、快速插入兄弟元素:h2+p + tab

如果想快速插入多個兄弟元素，比如一個2級標題和一個段落，那么只需要將2個元素名用“+”號連起來，然后補全即可

兄弟元素+

補全結果

七、快速使用link標簽選擇樣式:link:css +tab

可能有人會說，直接link+tab不就好了嗎？你錯了，這樣的link如下圖所示

沒有css的link

但使用link:css +tab補全，如下圖所示,我們只要補全路徑與文件名即可，系統已經自動補全了文件后綴

使用link:css

八、快速選擇當前行/此后多行：ctrl+l(win) 、command+l(mac)

選擇當前行：ctrl+l

選中單

選擇多行：連續ctrl+l

九：批量選中重復內容：Control+Command+G

選中要修改的文案，如p標簽的具體內容，那么所有具有該內容的地方，都會被選中，進行同步修改，若果為空，那么將同步為該標簽添加內容

同步修改重復內容

同步為p標簽修改/添加內容

其實sublime在寫html/css時還有很多的快捷鍵，比如在設置某元素的寬度和高度時，不必把“width：200px；”全部鍵入，只需要敲出首字母，再按Tab鍵即可

再比如對于某些較長的屬性，我們也不需要全部敲出來，下面以background-color（背景顏色為例）

這里就不一一講述了，在工作使用的過程中，你可能會發現更多或者更好用的快捷鍵，您可以在下方留言補全，以幫助小伙伴們避坑，共同進步

在線咨詢

上一篇：html中如何給圖片添加點擊事件的詳解
下一篇：Web 技術：CSS最小和最大(寬度/高度)知識點及優缺點

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML相關知識之文檔聲明標簽-HTML學習之路（2）

常用的 DOCTYPE 聲明

先當然還的是java

然后就是sql的注釋了

在然后就是html的注釋了

在然后就是mybatis的注釋了

最后就是properties

您的項目需求