我們查看很多網(wǎng)站源代碼的時候,會發(fā)現(xiàn)很多注釋,特別是新浪網(wǎng)注釋標(biāo)簽用于在源文檔中插入注釋,注釋文字一般作為程序員參考使用,特別是大型、多人開發(fā)的網(wǎng)站源碼,如果沒有注釋就無法讓甲程序員寫的代碼,讓乙程序員識別,這樣萬一程序員甲離職了,那么他所寫的代碼將很難被維護。而有了注釋之后,對代碼的理解將更容易。
![](/d/20211016/2eb4ff4ee41bcab28ae5bd7567b2c656.gif)
新浪網(wǎng)源代碼HTML注釋(綠色文字就是注釋)
HTML 注釋會被瀏覽器忽略,而HTML 注釋直接在網(wǎng)站源代碼內(nèi)部編寫,也不會顯示在前端。如上圖,綠色部分都是注釋,不會被顯示出來,通過上面綠色文字,我們可以知道這段代碼是什么意思,以及代碼開始結(jié)束。HTML 注釋格式如下:
<!-- 這里是注釋文字 by www.jb51.net -->
<!--
這里也是注釋文字
但是換行了也可以 by www.jb51.net
-->
HTML 注釋高級作用
顧名思義,HTML注釋就是一種注釋,對程序的內(nèi)部注解。其實這只是最基礎(chǔ)的作用,但是正是因為這些被前端瀏覽器忽視的功能,現(xiàn)代網(wǎng)頁程序?qū)ψ⑨屵M行了更深入的探究,讓注釋越來越有用。
對頁內(nèi)CSS/JS的作用
HTML 注釋還被用于頁內(nèi) Javascript 和 CSS 代碼,很多老版的瀏覽器或者無法識別Javascript 和 CSS 的瀏覽器,如果直接寫代碼,往往會顯示出文字,十分影響閱讀。
<!DOCTYPE html>
<html>
<head>
<style >
body{color:#F00}
</style>
<script type="text/javascript">
alert('歡迎訪問www.jb51.net');
</script>
</head>
<body>
<p>Jbzj!</p>
</body>
</html>
上面的代碼,沒有使用HTML 注釋,如果在一些老版手機瀏覽器和IE6以下版本訪問,會顯示下面文字:
body{color:#F00} alert('歡迎訪問www.jb51.net');</p>
<p>Jbzj!
即使這些老版瀏覽器不認(rèn)識<style> 和 <script> 等等標(biāo)簽,但是根據(jù)標(biāo)簽不顯示原則,這些標(biāo)簽也不會被顯示出來的,就當(dāng)作無法識別的自定義標(biāo)簽。而這些標(biāo)簽內(nèi)部的文字就會被直接顯示出來,毫無疑問,這些CSS 和 Javascript 代碼肯定不想被顯示出來,所以如果使用下面注釋代碼,就不會顯示CSS 和 Javascript了。
<!DOCTYPE html>
<html>
<head>
<style >
<!--
body{color:#F00}
--!>
</style>
<script type="text/javascript">
<!--
alert('歡迎訪問www.jb51.net');
--!>
</script>
</head>
<body>
<p>Jbzj!</p>
</body>
</html>
HTML注釋被用于MVC設(shè)計
現(xiàn)代很多開源代碼項目,特別是MVC網(wǎng)頁設(shè)計風(fēng)格的開源代碼,這些項目會在傳統(tǒng)HTML代碼中插入一些注釋,之后在這些注釋里面添加如廣告等內(nèi)容。
![](/d/20211016/6f7d84082d511ae25806210f5f6cb743.gif)
Discuz 利用HTML注釋插入代碼、判斷Discuz代碼