HTML、javascript、CSS 注释符号、语法

liangsheng

HTML、javascript、CSS 注释符号、语法

HTML 注释：
         我们经常要在 HTML 代码旁做一些注释，这样做的好处很多；譬如：方便查找、比对，便于其它程序员了解您的代码，便于以后您自己理解、修改代码，等等。

         1、单行注释语法：

1. <!--注释文字-->

复制代码

        2、多行注释语法：

1. <!--
   
2. 注释文字 1
   
3. 注释文字 2
   
4. 注释文字 3
   
5. -->

复制代码

        3、范例：
               示例 1：
                      HTML 页面右侧带注释弹出式 “在线客服” HTML 代码

1. <!-- 在线客服代码开始 -->
   
2.     <div class="service_box">
   
3.       <ul class="tab_nav">
   
4.         <li>
   
5.           <a href=""><i class="icon icon_1"></i><b>在线客服</b></a>
   
6.         </li>
   
7.         <li>
   
8.           <a href=""><i class="icon icon_3"></i><b>微信</b></a>
   
9.         </li>
   
10.       </ul>
    
11.       <div class="tab_content">
    
12.         <div class="tab_plan">
    
13.           <p class="fs14">
    
14.             <b>销售推广_唐女士 QQ:1721809125</b>
    
15.             <br>
    
16.             <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1721809125&amp;site=qq&amp;menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1721809125:51" alt="点击这里给我发消息" title="点击这里给我发消息"></a>
    
17.           </p>
    
18.           <p class="mt10">上班时间(星期一至星期五):
    
19.             <br>
    
20.             <u><b>10:30-12:00  14:00-17:30</b></u>
    
21.           </p>
    
22.           <p class="fs14">
    
23.             <b>技术推广_江先生 QQ:1477987636</b>
    
24.             <br>
    
25.             <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1477987636&amp;site=qq&amp;menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1477987636:51" alt="点击这里给我发消息" title="点击这里给我发消息"></a>
    
26.           </p>
    
27.           <p class="mt10">上班时间(星期一至星期五):
    
28.             <br>
    
29.             <u><b>09:00-12:00  14:00-18:30</b></u>
    
30.           </p>
    
31.           <p>广州市德数机械设备有限公司</p>
    
32.           <p class="text-left" style="font-size:14px;color:#242424">
    
33.                         <a href="http://map.baidu.com/?newmap=1&amp;s=inf%26uid%3Dae8d6d0122c7147f2cb96d89%26wd%3D%E5%B9%BF%E5%B7%9E%E5%B8%82%E5%BE%B7%E6%95%B0%E6%9C%BA%E6%A2%B0%E8%AE%BE%E5%A4%87%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8%26all%3D1%26c%3D257&amp;from=alamap&amp;tpl=map_singlepoint"
    
34.                         style="color:#242424">地址：广东省广州市黄埔区南岗沙步二横路3号自编435房 (沙步社区综治信访维稳中心右侧)</a>
    
35.                         <br>邮编：510735</p>
    
36.         </div>
    
37.         <div class="tab_plan" style="display: none;">
    
38.           <img src="images/weixin.jpg" alt="官方微信自助客服" width="200" height="200">
    
39.           <p>
    
40.             <b>扫一扫</b>
    
41.           </p>
    
42.         </div>
    
43.       </div>
    
44.     </div>
    
45.     <script type="text/javascript">
    
46.       $(".service_box .tab_nav li").hover(function(){
    
47.         var i=$(this).index();
    
48.         $(this).addClass("active").siblings().removeClass("active");
    
49.         $(".service_box .tab_plan:eq("+i+")").show().siblings().hide();
    
50.       });
    
51.       $(function(){
    
52.         var t;
    
53.         $(".service_box").hover(function(){
    
54.           $(".service_box").animate({right:0},300)
    
55.           clearTimeout(t);
    
56.         },function(){
    
57.           t=setTimeout(function(e){
    
58.             $(".service_box").animate({right:"-250px"},300);
    
59.             $(".service_box").find(".tab_nav li").removeClass("active");
    
60.           },1000);
    
61.         });
    
62.       });
    
63.       var isTransition=true;
    
64.       $(".m_logo").hover(function(){
    
65.         var r=0;
    
66.         if(isTransition){
    
67.           animateTime = setInterval(function(){
    
68.             if (r>=153){
    
69.               clearInterval(animateTime);
    
70.               isTransition=true;
    
71.             }else{
    
72.               isTransition=false;
    
73.               r++;
    
74.               $(".m_logo a").attr("style","-webkit-mask:-webkit-gradient(radial, 45 25, "+r+", 45 25, "+(r+15)+", from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)));")
    
75.             };
    
76.           },5);
    
77.         }
    
78.       },function(){
    
79.         return;
    
80.       });
    
81.     </script>
    
82.     <!-- 在线客服代码结束 -->

复制代码

              示例 2：
                      HTML 页面 javascript 代码引用注释

1. <!-- 百度免费搜索 & 提示 -->
   
2.     <script language="javascript">
   
3.       function g(formname)  {
   
4.         var url = "http://www.baidu.com/baidu";
   
5.         if (formname.s[1].checked) {
   
6.           formname.ct.value = "2097152";
   
7.         }
   
8.         else {
   
9.           formname.ct.value = "0";
   
10.         }
    
11.         formname.action = url;
    
12.         return true;
    
13.         }
    
14.     </script>
    
15.     <script charset="gbk" src="http://www.baidu.com/js/opensug.js"></script>

复制代码

CSS 注释：
        1、单行注释语法：

1. /* 注释文字*/

复制代码

             示例：

1. /* 文本属性：字号、颜色、粗细 */

复制代码

       2、多行注释语法：

1. /*
   
2. 注释文字 1
   
3. 注释文字 2
   
4. 注释文字 3
   
5. */

复制代码

             示例：

1. /*
   
2.     Name:            mod_page_header
   
3.     Level:            Global
   
4.     Sample:            <h1 class="ph">Text</h1>
   
5.     Explain:        页面中标题级别的文字 [!]此处须整合为一个单独 class
   
6.     Last Modify:    lushnis
   
7. */

复制代码

javascript 注释：
         1、单行注释语法：

1. //注释文字

复制代码

       1、多行注释语法：

1. /*
   
2. 注释文字 1
   
3. 注释文字 2
   
4. 注释文字 3
   
5. */

复制代码

liangsheng

html, HTML5, css, javascript, python

liangsheng

html, HTML5, css, javascript, python