整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML(5) 代碼規范

          TML 代碼約定

          很多 Web 開發人員對 HTML 的代碼規范知之甚少。

          在2000年至2010年,許多Web開發人員從 HTML 轉換到 XHTML。

          使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規范。

          而針對于 HTML5 ,我們應該形成比較好的代碼規范,以下提供了幾種規范的建議。

          使用正確的文檔類型

          文檔類型聲明位于HTML文檔的第一行:

          <!DOCTYPE html>

          如果你想跟其他標簽一樣使用小寫,可以使用以下代碼:

          <!doctype html>

          使用小寫元素名

          HTML5 元素名可以使用大寫和小寫字母。

          推薦使用小寫字母:

          • 混合了大小寫的風格是非常糟糕的。

          • 開發人員通常使用小寫 (類似 XHTML)。

          • 小寫風格看起來更加清爽。

          • 小寫字母容易編寫。

          不推薦:

          <SECTION>

          <p>這是一個段落。</p>

          </SECTION>

          非常糟糕:

          <Section>

          <p>這是一個段落。</p>

          </SECTION>

          推薦:

          <section>

          <p>這是一個段落。</p>

          </section>

          關閉所有 HTML 元素

          在 HTML5 中, 你不一定要關閉所有元素 (例如 <p> 元素),但我們建議每個元素都要添加關閉標簽。

          不推薦:

          <section>

          <p>這是一個段落。

          <p>這是一個段落。

          </section>

          推薦:

          <section>

          <p>這是一個段落。</p>

          <p>這是一個段落。</p>

          </section>

          關閉空的 HTML 元素

          在 HTML5 中, 空的 HTML 元素也不一定要關閉:

          我們可以這么寫:

          <meta charset="utf-8">

          也可以這么寫:

          <meta charset="utf-8" />

          在 XHTML 和 XML 中斜線 (/) 是必須的。

          如果你期望 XML 軟件使用你的頁面,使用這種風格是非常好的。

          使用小寫屬性名

          HTML5 屬性名允許使用大寫和小寫字母。

          我們推薦使用小寫字母屬性名:

          • 同時使用大小寫是非常不好的習慣。

          • 開發人員通常使用小寫 (類似 XHTML)。

          • 小寫風格看起來更加清爽。

          • 小寫字母容易編寫。

          不推薦:

          <div CLASS="menu">

          推薦:

          <div class="menu">

          屬性值

          HTML5 屬性值可以不用引號。

          屬性值我們推薦使用引號:

          • 如果屬性值含有空格需要使用引號。

          • 混合風格不推薦的,建議統一風格。

          • 屬性值使用引號易于閱讀。

          以下實例屬性值包含空格,沒有使用引號,所以不能起作用:

          <table class=table striped>

          以下使用了雙引號,是正確的:

          <table class="table striped">

          圖片屬性

          圖片通常使用 alt 屬性。 在圖片不能顯示時,它能替代圖片顯示。

          <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

          定義好圖片的尺寸,在加載時可以預留指定空間,減少閃爍。

          <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

          空格和等號

          等號前后可以使用空格。

          <link rel = "stylesheet" href = "styles.css">

          但我們推薦少用空格:

          <link rel="stylesheet" href="styles.css">

          避免一行代碼過長

          使用 HTML 編輯器,左右滾動代碼是不方便的。

          每行代碼盡量少于 80 個字符。

          空行和縮進

          不要無緣無故添加空行。

          為每個邏輯功能塊添加空行,這樣更易于閱讀。

          縮進使用兩個空格,不建議使用 TAB。

          比較短的代碼間不要使用不必要的空行和縮進。

          不必要的空行和縮進:

          <body>

          <h1>菜鳥教程</h1>

          <h2>HTML</h2>

          <p>

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想,

          菜鳥教程,學的不僅是技術,更是夢想。

          </p>

          </body>

          推薦:

          <body>

          <h1>菜鳥教程</h1>

          <h2></h2>

          <p>菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。</p>

          </body>

          表格實例:

          <table>

          <tr>

          <th>Name</th>

          <th>Description</th>

          </tr>

          <tr>

          <td>A</td>

          <td>Description of A</td>

          </tr>

          <tr>

          <td>B</td>

          <td>Description of B</td>

          </tr>

          </table>

          列表實例:

          <ol>

          <li>London</li>

          <li>Paris</li>

          <li>Tokyo</li>

          </ol>

          省略 <html> 和 <body>?

          在標準 HTML5 中, <html> 和 <body> 標簽是可以省略的。

          以下 HTML5 文檔是正確的:

          實例:

          <!DOCTYPE html>

          <head>

          <title>頁面標題</title>

          </head>

          <h1>這是一個標題</h1>

          <p>這是一個段落。</p>

          嘗試一下 ?

          不推薦省略 <html> 和 <body> 標簽。

          <html> 元素是文檔的根元素,用于描述頁面的語言:

          <!DOCTYPE html>

          <html lang="zh">

          聲明語言是為了方便屏幕閱讀器及搜索引擎。

          省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。

          省略 <body> 在舊版瀏覽器 (IE9)會發生錯誤。

          省略 <head>?

          在標準 HTML5 中, <head>標簽是可以省略的。

          默認情況下,瀏覽器會將 <body> 之前的內容添加到一個默認的 <head> 元素上。

          實例

          <!DOCTYPE html>

          <html>

          <title>頁面標題</title>

          <body>

          <h1>這是一個標題</h1>

          <p>這是一個段落。</p>

          </body>

          </html>

          嘗試一下 ?

          現在省略 head 標簽還不推薦使用。

          元數據

          HTML5 中 <title> 元素是必須的,標題名描述了頁面的主題:

          <title>菜鳥教程</title>

          標題和語言可以讓搜索引擎很快了解你頁面的主題:

          <!DOCTYPE html>

          <html lang="zh">

          <head>

          <meta charset="UTF-8">

          <title>菜鳥教程</title>

          </head>

          HTML 注釋

          注釋可以寫在 <!-- 和 --> 中:

          <!-- 這是注釋 -->

          比較長的評論可以在 <!-- 和 --> 中分行寫:

          <!--

          這是一個較長評論。 這是 一個較長評論。這是一個較長評論。

          這是 一個較長評論 這是一個較長評論。 這是 一個較長評論。

          -->

          長評論第一個字符縮進兩個空格,更易于閱讀。

          樣式表

          樣式表使用簡潔的語法格式 ( type 屬性不是必須的):

          <link rel="stylesheet" href="styles.css">

          短的規則可以寫成一行:

          p.into {font-family: Verdana; font-size: 16em;}

          長的規則可以寫成多行:

          body {

          background-color: lightgrey;

          font-family: "Arial Black", Helvetica, sans-serif;

          font-size: 16em;

          color: black;

          }

          • 將左花括號與選擇器放在同一行。

          • 左花括號與選擇器間添加以空格。

          • 使用兩個空格來縮進。

          • 冒號與屬性值之間添加已空格。

          • 逗號和符號之后使用一個空格。

          • 每個屬性與值結尾都要使用符號。

          • 只有屬性值包含空格時才使用引號。

          • 右花括號放在新的一行。

          • 每行最多 80 個字符。

          在逗號和分號后添加空格是常用的一個規則。

          在 HTML 中載入 JavaScript

          使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):

          <script src="myscript.js">

          使用 JavaScript 訪問 HTML 元素

          一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。

          以下兩個 JavaScript 語句會輸出不同結果:

          實例

          var obj = getElementById("Demo")

          var obj = getElementById("demo")

          HTML 中 JavaScript 盡量使用相同的命名規則。

          訪問 JavaScript 代碼規范。

          使用小寫文件名

          大多 Web 服務器 (Apache, Unix) 對大小寫敏感: london.jpg 不能通過 London.jpg 訪問。

          其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感: london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

          你必須保持統一的風格,我們建議統一使用小寫的文件名。

          文件擴展名

          HTML 文件后綴可以是 .html (或r .htm)。

          CSS 文件后綴是 .css 。

          JavaScript 文件后綴是 .js 。

          .htm 和 .html 的區別

          .htm 和 .html 的擴展名文件本質上是沒有區別的。瀏覽器和 Web 服務器都會把它們當作 HTML 文件來處理。

          區別在于:

          .htm 應用在早期 DOS 系統,系統現在或者只能有三個字符。

          在 Unix 系統中后綴沒有特別限制,一般用 .html。

          技術上區別

          如果一個 URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務器會返回默認的文件名。通常默認文件名為 index.html, index.htm, default.html, 和 default.htm。

          如果服務器只配置了 "index.html" 作為默認文件,你必須將文件命名為 "index.html", 而不是 "index.htm"。

          但是,通常服務器可以設置多個默認文件,你可以根據需要設置默認文件嗎。

          不管怎樣,HTML 完整的后綴是 ".html"。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          級元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table

          行內元素:span, strong, em, br, img , input, label, select, textarea, cite,

          內聯元素(inline element)a - 超鏈接

          b - 粗體(不推薦)br - 換行

          em - 強調

          font - 字體設定(不推薦)

          i - 斜體

          img - 圖片

          input - 輸入框

          label - 表格標簽

          select - 選擇框

          small - 小字體文本

          span - 常用內聯容器,定義文本內區塊

          strong - 粗體強調

          sub - 下標

          sup - 上標

          textarea - 多行文本輸入框

          塊元素(block element)* blockquote - 塊引用

          * center - 居中

          * div - 常用塊級容易,也是css layout的主要標簽

          * dl - 定義列表

          * form - 交互表單

          * h1 - 大標題

          * h2 - 副標題

          * h3 - 3級標題

          * h4 - 4級標題

          * h5 - 5級標題

          * h6 - 6級標題

          * hr - 水平分隔線

          * ol - 排序表單

          * p - 段落

          * pre - 格式化文本

          * table - 表格

          * ul - 無序列表

          塊級元素和行內元素的區別:

          1)塊級元素會獨占一行,其寬度自動填滿其父元素寬度

          行內元素不會獨占一行,相鄰的行內元素會排列在同一行里,知道一行排不下,才會換行,其寬度隨元素的內容 而變化

          2) 塊級元素可以設置 width, height屬性,行內元素設置width, height無效

          3) 塊級元素可以設置margin 和 padding. 行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果,但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果。

          文章自留地:

          成笑笑博客_一個.Net和安卓技術狂愛者博客。

          主要以發布和分享.Net和安卓文章為主,爭做全棧開發工程師,愛學習,愛挑戰,愛編程。用技術改變生活。

          歡迎關注,微信公眾號:net知識分享(net4k8k)[做個12k的技術員].博客網址:www.chengxiaoxiao.com.

          歡迎加入qq技術交流群:538742639.

          TML DOM 節點

          在 HTML DOM (Document Object Model) 中, 每個東西都是 節點 :

          • 文檔本身就是一個文檔對象

          • 所有 HTML 元素都是元素節點

          • 所有 HTML 屬性都是屬性節點

          • 插入到 HTML 元素文本是文本節點

          • 注釋是注釋節點


          元素對象

          在 HTML DOM 中, 元素對象代表著一個 HTML 元素。

          元素對象 的 子節點可以是, 可以是元素節點,文本節點,注釋節點。

          NodeList 對象 代表了節點列表,類似于 HTML元素的子節點集合。

          元素可以有屬性。屬性屬于屬性節點。


          瀏覽器支持

          所有主流瀏覽器都支持 元素對象 和 NodeList 對象。.


          屬性和方法

          以上屬性和方法可適用于所有 HTML 元素:

          屬性 / 方法描述
          element.accessKey設置或返回accesskey一個元素
          element.addEventListener()向指定元素添加事件句柄
          element.appendChild()為元素添加一個新的子元素
          element.attributes返回一個元素的屬性數組
          element.childNodes返回元素的一個子節點的數組
          element.classlist返回元素的類名,作為 DOMTokenList 對象。
          element.className設置或返回元素的class屬性
          element.clientHeight在頁面上返回內容的可視高度(不包括邊框,邊距或滾動條)
          element.clientWidth在頁面上返回內容的可視寬度(不包括邊框,邊距或滾動條)
          element.cloneNode()克隆某個元素
          element.compareDocumentPosition()比較兩個元素的文檔位置。
          element.contentEditable設置或返回元素的內容是否可編輯
          element.dir設置或返回一個元素中的文本方向
          element.firstChild返回元素的第一個子節點
          element.focus()設置文檔或元素獲取焦點
          element.getAttribute()返回指定元素的屬性值
          element.getAttributeNode()返回指定屬性節點
          element.getElementsByTagName()返回指定標簽名的所有子元素集合。
          element. getElementsByClassName()返回文檔中所有指定類名的元素集合,作為 NodeList 對象。
          element.getFeature()返回指定特征的執行APIs對象。
          element.getUserData()返回一個元素中關聯鍵值的對象。
          element.hasAttribute()如果元素中存在指定的屬性返回 true,否則返回false。
          element.hasAttributes()如果元素有任何屬性返回true,否則返回false。
          element.hasChildNodes()返回一個元素是否具有任何子元素
          element.hasFocus()返回布爾值,檢測文檔或元素是否獲取焦點
          element.id設置或者返回元素的 id。
          element.innerHTML設置或者返回元素的內容。
          element.insertBefore()現有的子元素之前插入一個新的子元素
          element.isContentEditable如果元素內容可編輯返回 true,否則返回false
          element.isDefaultNamespace()如果指定了namespaceURI 返回 true,否則返回 false。
          element.isEqualNode()檢查兩個元素是否相等
          element.isSameNode()檢查兩個元素所有有相同節點。
          element.isSupported()如果在元素中支持指定特征返回 true。
          element.lang設置或者返回一個元素的語言。
          element.lastChild返回的最后一個子元素
          element.namespaceURI返回命名空間的 URI。
          element.nextSibling返回該元素緊跟的一個節點
          element.nodeName返回元素的標記名(大寫)
          element.nodeType返回元素的節點類型
          element.nodeValue返回元素的節點值
          element.normalize()使得此成為一個"normal"的形式,其中只有結構(如元素,注釋,處理指令,CDATA節和實體引用)隔開Text節點,即元素(包括屬性)下面的所有文本節點,既沒有相鄰的文本節點也沒有空的文本節點
          element.offsetHeight返回,任何一個元素的高度包括邊框和填充,但不是邊距
          element.offsetWidth返回元素的寬度,包括邊框和填充,但不是邊距
          element.offsetLeft返回當前元素的相對水平偏移位置的偏移容器
          element.offsetParent返回元素的偏移容器
          element.offsetTop返回當前元素的相對垂直偏移位置的偏移容器
          element.ownerDocument返回元素的根元素(文檔對象)
          element.parentNode返回元素的父節點
          element.previousSibling返回某個元素緊接之前元素
          element.querySelector()返回匹配指定 CSS 選擇器元素的第一個子元素
          document.querySelectorAll()返回匹配指定 CSS 選擇器元素的所有子元素節點列表
          element.removeAttribute()從元素中刪除指定的屬性
          element.removeAttributeNode()刪除指定屬性節點并返回移除后的節點。
          element.removeChild()刪除一個子元素
          element.removeEventListener()移除由 addEventListener() 方法添加的事件句柄
          element.replaceChild()替換一個子元素
          element.scrollHeight返回整個元素的高度(包括帶滾動條的隱蔽的地方)
          element.scrollLeft返回當前視圖中的實際元素的左邊緣和左邊緣之間的距離
          element.scrollTop返回當前視圖中的實際元素的頂部邊緣和頂部邊緣之間的距離
          element.scrollWidth返回元素的整個寬度(包括帶滾動條的隱蔽的地方)
          element.setAttribute()設置或者改變指定屬性并指定值。
          element.setAttributeNode()設置或者改變指定屬性節點。
          element.setIdAttribute()
          element.setIdAttributeNode()
          element.setUserData()在元素中為指定鍵值關聯對象。
          element.style設置或返回元素的樣式屬性
          element.tabIndex設置或返回元素的標簽順序。
          element.tagName作為一個字符串返回某個元素的標記名(大寫)
          element.textContent設置或返回一個節點和它的文本內容
          element.title設置或返回元素的title屬性
          element.toString()一個元素轉換成字符串
          nodelist.item()返回某個元素基于文檔樹的索引
          nodelist.length返回節點列表的節點數目。

          主站蜘蛛池模板: 久久中文字幕无码一区二区| 麻豆文化传媒精品一区二区 | 国产激情一区二区三区小说| 国产成人高清精品一区二区三区 | 国产成人精品无码一区二区| 国产女人乱人伦精品一区二区 | 国产成人精品一区二区三区无码 | 国产精品视频一区二区三区| 国模私拍一区二区三区| 免费无码一区二区| 亚洲AV日韩综合一区| 日本免费一区二区三区| 免费日本一区二区| 一区二区视频传媒有限公司| 一级毛片完整版免费播放一区| 国产伦精品一区二区三区四区| 国精产品一区一区三区MBA下载| 亚欧在线精品免费观看一区 | 一区二区三区在线视频播放| 国产一区二区在线观看麻豆| 韩国精品一区二区三区无码视频| 国内精品一区二区三区东京| 亚洲第一区二区快射影院| 久久久久人妻一区二区三区| 亚洲福利电影一区二区?| 精品国产一区二区三区不卡| 国产香蕉一区二区精品视频 | 亚洲AV无码一区二区二三区入口| 国产午夜毛片一区二区三区 | 亚洲日本精品一区二区| 日韩人妻一区二区三区蜜桃视频| 久久精品午夜一区二区福利 | 污污内射在线观看一区二区少妇 | 亚洲国产精品一区二区久| 精品熟人妻一区二区三区四区不卡| 97人妻无码一区二区精品免费| 国产第一区二区三区在线观看 | 3D动漫精品一区二区三区| 亚洲视频一区网站| 国产怡春院无码一区二区| 色多多免费视频观看区一区|