亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

五月的夏天 · 更新于 2020-11-04

HTML 文件的注釋

HTML 注釋標簽是在 HTML 源代碼中添加說明/注釋，使用該標簽注釋的內容將不在瀏覽器中顯示。

邊寫代碼邊寫注釋是一個好習慣，特別是代碼量很大的時候，如果不寫注釋，你寫完倒回去看可能都不知道自己寫的什么了。

如果是團隊合作，就更應該寫注釋了，如果不寫每人知道你寫的什么，還需要從頭到尾仔細看一遍。

團隊可以自行約定注釋標準及規范，例如：

  1. 所有的注釋寫在內容上方；
  2. 如果有多句注釋，每一句注釋直接換行；
  3. 如果是方法注釋，寫明方法作用和每個參數介紹；
  4. 注釋的語句簡單明了；
  5. 每個變量和方法標注作用。

1. 什么是注釋

注釋指解釋字句的文字，也指用文字解釋字句。當我們需要給代碼做批注，我們就需要注釋代碼。

注釋是我們提高代碼可讀性，代碼可維護性最簡單有效的方式，往往多寫幾個字，會給我們日后的維護，減少很大的難度。

2. 注釋的作用

代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發網頁代碼。

3. 如何在 HTML 文件中書寫注釋

在 HTML 文件中， 我們將注釋寫在<!-- -->中，注釋只是起解釋作用，并不會在頁面上顯示出來。

我們如果使用編輯器編寫代碼，如 VSCode， WebStorm 等，那么在編輯器書寫注釋的快捷方式為 ctrl + / ， 我們只需要先寫注釋內容， 然后在選中注釋內容，按 ctrl + / 即可。

4. 經驗分享

1. 注釋可以寫在 HTML 文件的任意位置。

<!DOCTYPE HTML>
<HTML lang="en">
  <head>
    <meta charset="UTF-8">
    <!-- HTML注釋可以在head標簽中 -->
    <title>HTML注釋</title>
  </head>
  <body>
    <!-- HTML注釋也可以在body標簽中  -->
    <h1>我是一個大標題</h1> <!-- HTML注釋也可以在標簽后面 -->
  </body>
</HTML>

2. 注釋內容必須寫在<!-- -->中，否則不會生效。

<!DOCTYPE HTML>
<HTML lang="en">
  <head>
    <meta charset="UTF-8">
    <title>HTML注釋</title>
  </head>
  <body>
    <!--  --> HTML注釋也可以在body標簽中(此段內容沒有在<!-- -->中，則不為注釋，而是頁面上的內容)
    <h1>我是一個大標題</h1> <!-- 只有寫在規定位置，才是注釋 -->
  </body>
</HTML>

3. 注釋的內容只是解釋，并不會實際的顯示在頁面上。

<!DOCTYPE HTML>
<HTML lang="en">
  <head>
    <meta charset="UTF-8">
    <title>HTML注釋</title>
  </head>
  <body>
    <!-- 注釋的內容不會顯示在頁面上-->
    <h1>我是一個大標題</h1> 
  </body>
</HTML>

4. 編寫代碼時，盡量把注釋寫的簡單明了，通俗易懂，不僅方便自己維護代碼，也方便與他人的協同開發。

<!DOCTYPE HTML>
<HTML lang="en">
  <head>
    <meta charset="UTF-8">
    <title>HTML注釋</title>
  </head>
  <body>
    <!-- 這是頭部 -->
    <header></header>
    <!-- 這是大標題-->
    <h1>我是一個大標題</h1> 
  </body>
</HTML>

5. 注釋標簽可以自定義內容，也可以注釋已寫的HTML標簽。

<!DOCTYPE HTML>
<HTML lang="en">
  <head>
    <meta charset="UTF-8">
    <title>HTML注釋</title>
  </head>
  <body>
    <!-- 自定義注釋內容 -->
    <p>這是一段話</p>
    <!-- 注釋HTML標簽， 則該標簽也不會在頁面上顯示 -->
    <!-- <h1>我是一個大標題</h1>  -->
  </body>
</HTML>

6. 開發人員一定要養成書寫注釋的好習慣。

5. 真實案例分享

簡書官網

 <!-- 正常登錄登錄名輸入框 -->
<div >
    <input placeholder="手機號或郵箱" type="text" />
</div>

<!-- 海外登錄登錄名輸入框 -->
<div >
   <input placeholder="密碼" type="password" />
</div>

6. 小結

  1. 注釋只是起一個批注解釋作用，并不會在頁面上產生實際的內容。
  2. HTML文件中注釋寫在 <!-- --> 中。

圖片描述