如何在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 hidden和downlevel 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>
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP