html - 这个语法: <! ---->有什么用？

Question

我一直在处理我们网站的设计 UI，并在网上寻找一些可用的模板。

然后我遇到了这种语法 <!---->我不熟悉它。

你能告诉我它是什么以及它的用途吗？

谢谢。

Answer 1

正如其他帖子提到的 <!----> HTML 中的代码用于添加注释 - 开发人员在代码中留下的注释，为其他开发人员提供一些信息，或者让他们自己记住一些东西。此代码在源代码中可见，但在浏览器中查看 HTML 时不会显示。例如:

<!-- We need to update this each year -->
<div>&copy; 2009 - 2016</div>

将产生:

© 2009 - 2016

在大多数情况下，可以删除注释而不会对代码产生副作用。这只是开发人员的注意事项。

其他用途

注释掉代码
除了注释之外，您有时还会看到由 <!----> 包裹的 HTML 代码。 .例如:

<!-- Add this later
  <img src="article.jpg" alt="Article">
-->

以上代码将从浏览器 View 中删除整个图像标签。如果您想暂时从页面中删除一些 HTML，用于测试/调试或供以后使用，这将很有用。有时您会看到整个 HTML 部分都被注释掉了。

条件代码
注释的另一个常见用途是添加特定浏览器使用的条件代码。以下代码片段只能由 Internet Explorer 8 读取，并且会将黑色背景颜色应用于正文。

<!--[if IE 8]>
  <style>
    body {
      background-color: black;
    }
  </style>
<![endif]-->

网站 build 者
一些网站 build 者生成自己的代码注释供内部使用。例如，如果您使用 Squarespace生成的代码将包含如下注释:

<!-- This is Squarespace. --><!-- www -->

在某些情况下，这些片段被生成器本身用作插入其他代码的标记。

构建脚本
评论标签被用作构建脚本的一部分的可能性很小，在这种情况下，删除它会导致问题。这是一个例子:

<!-- build:css -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->

上面的代码，与类似Gulp 的构建系统一起使用和一个像 HTML Replace 这样的 Gulp 插件将替换 <!-- build:css--> 之间的内容和 <!-- endbuild -->带有新代码的标签。删除其中任何一个评论标签都会导致错误。