代码注释:_HTML注释:如何在HTML代码中创建和使用?

代码注释:

代码注释:

HTML is a very popular scripting or coding language used to create web pages. HTML provides different tags in order to create different units like textbox, color, paragraph, list, etc. While using HTML we may need to put some information about the code and tags. In this tutorial, we will learn how to create comments.

HTML是一种非常流行的脚本或编码语言,用于创建网页。 HTML提供了不同的标签,以创建不同的单元,例如文本框,颜色,段落,列表等。使用HTML时,我们可能需要放置一些有关代码和标签的信息。 在本教程中,我们将学习如何创建注释。

单行注释 (Single Line Comment)

HTML comments are created with the <!-- and --> tags. <!-- is used to specify the start of the comment. --> is used to specify the end of the comment. The content between start and end tags of comment will be omitted by the browser and they will not show to the browser tab to the user. We can create a single line comment by using comment tags in the same line.

HTML注释是使用<!---->标记创建的。 <!--用于指定注释的开始。 -->用于指定注释的结尾。 浏览器将忽略注释的开始标签和结束标签之间的内容,并且不会向用户显示在浏览器选项卡中。 我们可以通过在同一行中使用注释标签来创建一行注释。

<!DOCTYPE html>
<html>

   <head>  <!-- Document Header -->
      <title>This is document title</title>
   </head> 
    
   <body>  <!-- Document Body -->
      <p>Document content goes here.....</p>
   </body>
    
</html>

多行注释 (Multiline Comment)

We can use HTML comments in a multiline way. If we have a lot of information to write into comment we can use HTML multiline comment. The start tag <!-- and end tag --> will surround multiple lines like below. We will see that we can use comment tags in the same line of the comment text or in a new line too.

我们可以以多行方式使用HTML注释。 如果我们有很多要写入注释的信息,则可以使用HTML多行注释。 起始标签<!--和结束标签-->将围绕多行,如下所示。 我们将看到我们可以在注释文本的同一行或换行中使用注释标签。

<!DOCTYPE html>
<html>

   <head>  <!-- This is a 
                 Multiline HTML Tag 
            -->
      <title>This is document title</title>
   </head> <!-- Document Header Ends -->
    
   <body>
      <p>Document content goes here.....</p>

      <!-- This 
           is a 
           Multiline 
           HTML 
           Tag -->
   </body>
    
</html>

有条件HTML注释 (Conditional HTML Comment)

Conditional HTML comments are only supported y the Microsoft Internet Explorer and Edge. They are supported from version 5 of the Internet Explorer and all versions of the Edge. Conditional HTML comments will only exist if the running browser is Microsoft Internet Explorer. If not there will be no comment in the HTML code. We will put [if IE 6] after HTML comment the start tag.

Microsoft Internet Explorer和Edge仅支持条件HTML注释。 Internet Explorer的版本5和Edge的所有版本都支持它们。 仅当运行的浏览器是Microsoft Internet Explorer时,条件HTML注释才会存在。 否则,HTML代码中将没有注释。 我们将在HTML注释开始标记后放置[if IE 6]

<!DOCTYPE html>
<html>

   <head>  
      <title>Conditional Comment Examples</title>

      <!--[if IE 6]>
         Only avaible for the Microsoft Internet Explorer
      <![endif]-->
   </head> 
   
   <body>
      <p>Document content goes here.....</p>
   </body>
    
</html>

无效的注释示例 (Invalid Comment Examples)

Up to now, we have learned different types of comments. But while using comments we may create invalid or error-prone comments. In this part, we will list some generally error-prone comment examples.

到目前为止,我们已经学习了不同类型的评论。 但是在使用注释时,我们可能会创建无效或容易出错的注释。 在这一部分中,我们将列出一些通常容易出错的注释示例。

<! -- There is a space between the exclamation mark and dash   -->

<!-- There is a space between the dash and bigger sign  -- >

<-- The exclamation mark does not exist -- >

评论标签 (Comment Tag)

Up to now, we have used <!-- and --> as comment start and end. HTML supports and as comment tag. But this support is dropped with the HTML version 5. So using this type of comment is very error-prone.

到目前为止,我们已经使用<!---->作为注释的开始和结束。 HTML支持and作为注释标签。 但是HTML 5不再提供这种支持。因此,使用这种类型的注释非常容易出错。

Comment Tag
Comment Tag
评论标签

注释HTML标记/代码(Comment HTML Tag/Code)

We generally assume that comments should contain human-readable or normal language text. But we can use comments to comment on normal HTML code or tags too. This can be useful if we want to try some HTML elements and tags by enabling and disabling the element and tag. In this following example, we will comment on the button HTML tag.

我们通常认为注释应包含人类可读或普通语言的文本。 但是我们也可以使用注释来注释普通HTML代码或标签。 如果我们想通过启用和禁用元素和标签来尝试一些HTML元素和标签,这将很有用。 在下面的示例中,我们将对按钮HTML标记进行注释。

<!DOCTYPE html>
<html>

   <head>
      <title>Comment HTML Tag</title>
   </head>
    
   <body>
      <!-- <button type="button">Click Me!</button> -->
      
      <!-- 
           <button type="button">Click Me Too!</button> 
      -->

   </body>
    
</html>

注释JavaScript代码/脚本 (Comment JavaScript Code/Script)

JavaScript is a defacto web scripting language where the code is executed on the client browser. While developing JavaScript code we may want to comment on the code in order to make some tests and checks. We can use HTML Comment tags to JavaScript code as below.

JavaScript是事实上的Web脚本语言,其中的代码在客户端浏览器上执行。 在开发JavaScript代码时,我们可能想对代码进行注释,以便进行一些测试和检查。 我们可以将HTML Comment标签用于JavaScript代码,如下所示。

<!DOCTYPE html>
<html>

   <head>
      <title>Commenting JavaScript Code</title>
      
      <script>
         <!-- 
            document.write("Hello Poftut!")
         //-->
      </script>
   </head>
    
   <body>
      <p>This is the body</p>
   </body>
    
</html>

注释CSS代码 (Comment CSS Code)

Cascading Style Sheet or CSS can be commented with the HTML comment tags too. This will disable the CSS code effect on the HTML code and can be useful to test some CSS code easily without coding again and again.

级联样式表或CSS也可以使用HTML注释标签进行注释。 这将禁用HTML代码上CSS代码效果,并且对轻松测试某些CSS代码而不用反复编码很有用。

<!DOCTYPE html>
<html>

   <head>
      <title>Commenting CSS</title>
      
      <style>
         <!--
            .test {
               border:2px solid #5a7d49;
            }
         //-->
      </style>
   </head>
    
   <body>
      <div class = "test">Hello , Poftut!</div>
   </body>
    
</html>
LEARN MORE  What Is HTML5?
了解更多什么是HTML5?

翻译自: https://www.poftut.com/html-comments-how-to-create-and-use-in-html-code/

代码注释:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值