在網頁中,除了以上這些基本標籤外,還包含一種不顯示在頁面中的元素,那就是代碼的註釋文字。適當的註釋可以幫助用戶更好地瞭解網頁中各個模塊的劃分,也有助於以後對代碼的檢查和修改。給代碼加註釋,是一種很好的編程習慣。在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種常見錯誤