整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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 | 返回節點列表的節點數目。 |
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
