如何在HTML中建立條件註釋?


條件註釋不過是一種條件語句,用於向瀏覽器隱藏或顯示HTML原始碼。

首先讓我們討論HTML註釋,然後我們將進一步瞭解HTML中的條件註釋:

  • HTML註釋不是可執行語句;它們用於描述語句。

  • HTML註釋有起始和結束標籤:<!-- -->。

  • 這些註釋可以放置在HTML頁面的任何位置,但最好放在DOCTYPE之後。

  • HTML不支援巢狀註釋,這意味著它不支援在一個註釋內再巢狀另一個註釋。

  • HTML註釋用於隱藏不必要的程式碼或暫時隱藏程式碼。

  • HTML註釋也可以用於隱藏程式碼中間的一部分內容,我們稱之為隱藏內聯內容。

例如,如果您觀察以下HTML標籤,該語句的輸出是:他是一個男孩。它隱藏了單詞“有天賦的”

<p>He is a <! ---talented - -> boy</p>

示例

以下是HTML文件中註釋的示例:

<!DOCTYPE html>
<HTML>
<body>
   <!--write the content here -->
   <p> Welcome to <!--HTML &--> CSS tutorial</p>
   <!--<img src=”pic.jpg -->
</body>
</html>

上面的程式展示了三種表示註釋的方式,解釋了程式碼的使用、隱藏內聯內容和隱藏不必要的內容。現在讓我們討論HTML中的條件註釋:

條件註釋

條件註釋不過是一種條件語句,用於向Internet Explorer瀏覽器隱藏或顯示HTML原始碼。

HTML中使用兩種型別的條件註釋:

  • downlevel-hidden - 用於在瀏覽器中隱藏HTML原始碼

  • downlevel-revealed - 用於在瀏覽器中顯示HTML原始碼

語法

讓我們看看downlevel-hidden和downlevel-revealed條件註釋的用法:

Downlevel-hidden 
<!—[if expression]> HTML Code has written here <![endif]-->
Downlevel-revealed
<![if expression]> HTML code has written here&;lt;![endif]>

示例

以下示例顯示瞭如何使用條件註釋:

<link href="home.css" rel="stylesheet">
<!--[if IE]><link href="body.css" rel="stylesheet"><![endif]-->

在HTML中使用條件註釋

讓我們看看在HTML中使用條件語句的必要性:

  • 對於開發者來說,開發跨瀏覽器網站是一個巨大的挑戰,因為IE(Internet Explorer)解釋HTML程式碼的方式與其他瀏覽器不同。

  • 因此,藉助條件註釋,我們可以透過簡單地為Internet Explorer編寫一組程式碼,為其他瀏覽器編寫不同的程式碼來解決上述問題。

  • 條件註釋的結構與HTML註釋相同。

  • 透過檢視條件註釋的結構,其他瀏覽器會忽略在條件註釋內編寫的程式碼。

  • Internet Explorer識別條件註釋並將其視為正常的網頁內容。

以下是用於表示條件註釋的運算子。

  • ! - 非運算子。

  • lt - 小於。

  • lte - 小於或等於。

  • gt - 大於。

  • gte - 大於或等於。

  • ( ) - 表示子表示式,用於在另一個條件中構建條件。

  • & - AND運算子。

  • | - OR運算子。

現在讓我們看看一些關於使用運算子的downlevel hiddendownlevel revealed的程式:

示例

以下示例演示了HTML中的downlevel hidden條件註釋:

<!DOCTYPE>
<html>
   <head>
      <title>Example of conditional comment using downlevel hidden</title>
   </head>
<body>
      <h1>How to write conditional comment</h1>
      <!--[if lte IE 8]>
      <link href="sample.css" rel="stylesheet">
      <![endif]-->
</body>
</html>

示例

以下示例演示了HTML中的downlevel revealed條件註釋:

<!DOCTYPE>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title>Example of conditional comment using downlevel revealed</title>
</head>
<body>
   <h1>How to Write conditional comment</h1>
   <![if !IE]>
   <p>This message can be seen, if your browser is not IE </p>
   <![endif]>
</body>
</html>

更新於:2023年10月6日

1K+ 次瀏覽

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.