如何在 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>