• 页面的注释


    在网页中,除了以上这些基本标签外,还包含一种不显示在页面中的元素,那就是代码的注释文字。适当的注释可以帮助用户更好地了解网页中各个模块的划分,也有助于以后对代码的检查和修改。给代码加注释,是一种很好的编程习惯。在HTML5文档中,注释分为三类:在文件开始标签<html></html>中的注释、在CSS层叠样式表中的注释和在JavaScirpt中的注释,JavaScirpt中的注释有两种形式。下面将对这三类注释的具体语法进行介绍

    在文件开始标签<html></html>中的注释,具体语法如下:

    <!--注释的文字-->

    注释文字的标记很简单,只需要在语法中“注释的文字”的位置上添加需要的内容即可。

    在CSS层叠样式表中的注释,具体语法如下:

    /*注释的文字*/

    在CSS样式中注释时,只需要在语法中“注释的文字”的位置上添加需要的内容即可。

    说明:在JavaScript脚本语言中的注释有两种形式:单行注释和多行注释。

    单行注释的具体语法如下:

    //注释的文字

    注释文字的标记很简单,只需要在语法中“注释的文字”的位置上添加需要的内容即可。

    注意:在JavaScript中添加单行注释时,只需要在语法中“注释的文字”的位置上添加需要的内容即可。

    多行注释的具体语法如下:

    /*注释的文字*/

    在JavaScript脚本中进行多行注释时,只需要在语法中“注释的文字”的位置上添加需要的内容即可。

    注意:在JavaScript中添加多行注释时或单行注释的形式不是一成不变的,在进行多行注释时,单行注释也是有效的。运用“//注释的文字”对每一行文字进行注释达到的效果和“/*注释的文字*/”的效果一样。

    常见错误:在HTML代码中,注释语法使用错误时,浏览器将注释视为文本内容,注释内容会显示在页面中。有时还会造成页面结构错乱等情况。例如,在谷歌浏览器上运行一个HTML5文件,下面给出该网页的关键代码:

    01  <!--在这里注释可以吗?不可以!-->
    
    02  <!DOCTYPE html>
    
    03  <html>
    
    04  <head>
    
    05  <!--meta元素提供的信息是用户不可见的,它不显示在页面中,一般用来定义页面信息的名称、关键字、作者等。而在一个HTML头页面中可以有多个meta元素。meta元素的属性有两种:name和http-equiv-->
    
    06  <meta charset="utf-8" />
    
    07  <!--编码方式-->
    
    08  <title><!--头部标签中不能加注释-->吉林省明日科技有限公司</title>
    
    09  <link href="css/style.css" rel="stylesheet" type="text/css" />
    
    10  <!--引入CSS外部样式表-->
    
    11  <style type="text/css"  >
    
    12  /* 在CSS中注释*/
    
    13      /* 外层div.cen*/
    
    14  .cen{
    
    15        CLEAR: both;   /*清除浮动*/
    
    16  MARGIN: 0px auto;
    
    17        WIDTH: 947px;
    
    18        TEXT-ALIGN: left;    /*水平对齐方式*/
    
    19  border-left: solid 1px #D0D0D0;  /*左边框样式:宽度为1px,实线灰色框*/
    
    20  border-right: solid 1px #D0D0D0;
    
    21        padding: 0px 15px;
    
    22      }
    
    23      .err-animation {  /*'.'表示类样式,err-animation为样式名*/
    
    24  color: red;
    
    25        font-size: 24px;  /*字体*/
    
    26  font-family: fantasy;  /*字体风格*/
    
    27  animation-direction: alternate;   /*动画的路径*/
    
    28  animation-fill-mode: both;
    
    29        animation-duration: 4.75s;  /*动画持续时间*/
    
    30  animation-iteration-count: infinite;  /*循环次数*/
    
    31  animation-name: animations;  /*动画名*/
    
    32  animation-play-state: running;  /*动画的状态*/
    
    33  animation-timing-function: ease;  /*运动的速度*/
    
    34  animation-delay: 0.15s   /*动画延时时间*/
    
    35  }
    
    36  </style>
    
    37  </head>
    
    38  <body>
    
    39  <!--页面开始div.cen     start-->
    
    40  <div class="cen">
    
    41  <!--在HTML中注释语法错误的示例:-->
    
    42  <h4 class="err-animation" style="color:red;font-family:fantasy;">注释错误 1:写在<span><</span><span>!DOCTYPE></span>标签之前</h4>
    
    43  <h4 class="err-animation" style="   '内部样式中不可以注释! '   color: blue;font-style: oblique;font-family: -webkit-pictograph;color: maroon;">注释错误 2:注释语法不对!</h4>
    
    44  <p>/* 明日学院网址:www.mingrisoft.com */</p>
    
    45   
    
    46  <!--  跳转的页面top.html    start-->
    
    47  <div>
    
    48  <iframeframeborder="0" height="240" id="top" name="top" scrolling="No" src="inc/top.html" width="947"></iframe>
    
    49  <!--  跳转的页面top.html     end-->
    
    50  </div>
    
    51  <h4 style="color:blue;font-size: 24px;font-family:fantasy" class="err-animation">注释错误 3:注释标签没写完整</h4>
    
    52  <p><--   明日学院网址,我来注释一下好了,哒哒哒。。。--></p>
    
    53  <!-- 第二部分只是一张jpg图片  start-->
    
    54  <div><imgsrc="img/o_02.jpg" width="947" height="84" /></div>
    
    55  </body>
    
    56  </html>
    
    57  <!--在html 后面注释也OK-->
    
     

    用谷歌浏览器打开这个完整的HTML5文件,出现如图1.4所示的显示效果,图1.4中注释了3种注释用错的情况。分别用①②③标注出来了。

     

    图1.4 HTML中注释的3种常见错误

     

    本文摘自明日科技出版的《零基础学HTML5》,转载请注明出处!!!

     

  • 相关阅读:
    深入理解javascript原型和闭包(10)——this
    深入理解javascript原型和闭包(9)——简述【执行上下文】下
    深入理解javascript原型和闭包(8)——简述【执行上下文】上
    深入理解javascript原型和闭包(7)——原型的灵活性
    golang 处理 json 结构体
    git push 时用户的配置
    vscod如何自定义 python虚拟环境
    Python实现图片的base64编码
    解决vscode中golang插件依赖安装失败问题
    (转)vscode实现markdown流程图
  • 原文地址:https://www.cnblogs.com/mrxy/p/8288941.html
Copyright © 2020-2023  润新知