首頁 web前端 html教學 關於HTML中的程式碼註釋

關於HTML中的程式碼註釋

Mar 29, 2018 pm 03:14 PM
html 程式碼 註解


本文主要為大家分享一篇關於HTML中的程式碼註解的問題,具有很好的參考價值,希望對大家有幫助。一起跟著小編過來看看吧。

HTML註解

在HTML程式碼中,標籤之間的文字是文件的註釋,註釋的內容不會被顯示在瀏覽器頁面上。只有在文字編輯器中,或瀏覽器的「檢視原始碼」選項開啟文件時,才能看到註解。

HTML中的註解有兩種類型,一種是HTML程式碼註釋,一種是IE條件註解。

1、HTML程式碼註解

在一個大文件中,透過註解來標示區塊的開始合結束的位置,可以方便查找,也可以透過註釋來阻止某些內容顯示。

當編寫了大量程式碼時,對關鍵程式碼進行註解是一個良好的習慣,透過註解來說明某段程式碼的意圖,有助於提醒自己或需要在這個網站上工作的其他人,了解這段程式碼的作用。

使用註解來隱藏腳本,也是一個好的習慣,這樣一來,不支援腳本的瀏覽器就不會把腳本當作純文字顯示出來。如:

<script type="text/javascript">
<!--
function displayMsg() {
    alert("Hello World!")
}
//-->
</script>
登入後複製

2、IE條件註解

IE條件註解(Conditional comments),是IE瀏覽器對HTML程式碼註解的一種擴展,它是一種非標準邏輯語句,可以靈活的為不同版本的IE匯入不同html元素,如樣式表、html標籤等。

條件註釋在IE5首次出現,並得到後續版本的支持,其語法就是一個普通的HTML註釋,IE以外的瀏覽器會把它作為註釋而忽略。因此,它能通過W3C的校驗,也不會對其他瀏覽器造成影響。

條件註解的功能非常強大,可以進行 if 條件判斷,並根據判斷結果是true 或 false,來決定是否要解析條件註解裡的內容。

條件判斷以結束,可以根據IE、非IE進行判斷,還可以根據IE的版本號進行判斷,版本號碼可以精確到小數點後4位。如:

<!--[if IE]> <![endif]-->      /* 所有IE,无论哪个版本 */
<!--[if IE 6]> <![endif]-->    /* 如果IE版本是6 */
登入後複製

條件判斷中,也支持大於(gt: greater than)、小於(lt: less than)、大於等於(gte: greater than or equal)、小於等於(lte: less than or equal)、或(|)、與(&)、非(!)、括號。如:

<!--[if gt IE 6]> <![endif]-->             /* 如果IE版本大于6 */
<!-- [if lte IE 9]> <![endif]-->            / * 如果IE版本小于等于9 * /
<!--[if IE 6 | IE 7]> <![endif]-->          /* 如果IE版本是6或7 */
<!--[if ! IE 5.5]> <![endif]-->             /* 如果IE版本不是5.5 */
<!-- [if (gt IE 6) & (lte IE 9)]> <![endif]-->  / * 如果IE版本大于6,且小于等于9 * /
登入後複製

借助條件註釋,可以解決許多IE相容性問題。如,IE9以下的版本不支援HTML5的新元素 header、nav、aside、footer等,而在Internet上存在大量的 html5shiv腳本可以解決這個問題。只要下載對應的腳本,並在頁面的頭部,透過IE條件註釋,讓IE9以下的版本載入該腳本,就可以讓這些舊瀏覽器支援HTML5的新元素。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
登入後複製

也可以使用同樣的方法,來解決CSS的相容性問題。如,IE6不支援一些CSS新特性,就可以專門針對IE6編寫CSS文件,並只讓IE6加載它:

<!--[if IE 6]>
<link rel="stylesheet" href="css/ie6.css" />
<![endif]-->
登入後複製

一個好消息是,從IE10版本開始,不再支援條件註釋。這標誌著IE從此走向成熟、走向標準,Web設計師再也不必為IE的兼容性問題所困擾了。

相關推薦:

html註解規格

#HTML程式碼註解

#HTML的程式碼註解 

以上是關於HTML中的程式碼註釋的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 中的表格邊框

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

HTML 中的巢狀表

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

在 HTML 中移動文字

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表

您如何在PHP中解析和處理HTML/XML? 您如何在PHP中解析和處理HTML/XML? Feb 07, 2025 am 11:57 AM

您如何在PHP中解析和處理HTML/XML?

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕

See all articles