整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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，我們一起飛！
、 HTML語言
HTML 指的是超文本標記語言 (Hyper Text Markup Language)，它不是一種編程語言，而是一種使用一套標記標簽（markup tag）來標記元素作用的標記語言，標記語言使用標記標簽來描述網頁的內容。標記標簽不會出現在頁面中，只有標簽中的內容才會顯示在頁面上。
二、 HTML標簽和HTML元素
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)，是由一對尖括號括起來的關鍵詞，稱為標簽名，如 <html>、<a>、<h1>。標簽不區分大小寫，但是推薦使用小寫，(X)HTML 版本中強制使用小寫，這樣更加嚴謹。
標簽的標記分為起始標簽和結束標簽。HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有內容。
起始標簽用于標記對應HTML元素的開始位置，結束標簽用于標記HTML元素的結束位置。
標簽分為單標簽和雙標簽，都需要起始標簽和結束標簽，不同的是單標簽起始、結束標簽都寫在一個尖括號里而雙標簽則分別寫在兩個尖括號里。單標簽又稱為空標簽，雙標簽又稱為閉合標簽。單標簽的結束標簽就是在標簽的右尖括號前面一個反斜杠，如<br />就是一個單標簽，雙標簽的結束標簽就是在左尖括號后比開始標簽多了一個反斜杠，如<html>和</html>就是一對開始標簽和結束標簽。
三、 HTML元素的分類
不同的HTML標簽對應的HTML元素可以根據位置特征等分為兩類:
四、 標簽嵌套
雙標簽的開始標簽和結束標簽之間可以嵌套其他標簽，不過需要遵循以下規則：
1、兩個標簽嵌套時必須確保開始標簽和結束標簽的層級是一致的，即開始標簽在外層的結束標簽必須在外層；
2、建議書寫HTML文本時嵌套標簽的內層標簽相對外層標簽進行縮進以體現嵌套關系；
3、塊元素標簽可以包含行元素標簽，但行元素標簽不能包含塊元素標簽，它們只能包含其它的行元素標簽；
4、a標簽想要用hover必須把它的路徑寫全；
5、偽類(hover/link/visited/active)只能加給a標簽，在支持 CSS 的瀏覽器中，偽類表示鏈接的不同狀態，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態：
1)link用在為訪問的連接上；
2)visited用在已經訪問過的連接上；
3)hover用于鼠標光標置于其上的連接；
4)active用于獲得焦點(比如，被點擊)的連接上。
6、塊元素標簽之間：
1)h1、h2、h3、h4、h5、h6、p、dt標簽內不能再嵌套塊標簽；
2)li元素可以嵌入ul, ol, div；
3)div內可以再嵌套其他塊元素；
4)塊元素嵌套其他標簽時，同一層級必須都是塊元素，或必須都是行元素，不能一部分是塊元素，一部分是行元素。如<div><span></span><p></p></div>這種模式是錯誤的，因為span是行元素，p是塊元素，所以這個是錯誤的嵌套。
雖然標簽可以嵌套，但為了提高瀏覽器的渲染效率，應該盡量少使用標簽嵌套。
五、 標簽的屬性
HTML 標簽可以擁有屬性,屬性為HTML元素提供的更多的附加信息, 屬性只能在開始標簽中使用,總是以名稱/值對的形式出現，屬性與屬性之間需要用空格隔開，屬性使用小寫。常用的屬性有class(樣式類)、id（屬性名）、style（顯示風格）、title（標題）、align（對齊方式）、bgcolor（背景色）、color（顏色）。
如：
。
標題估計也很難知道什么是斜線拼接，為了快速知道斜線拼接是什么意思，此處省去一堆廢話……
這篇文章我們來研究一下用CSS3屬性怎么實現下面這張圖效果。
上面這圖是由兩張圖構成的，使用的是css3屬性mask和linear gradient。沒什么難的。通過這個實例我們就能理解這兩個屬性是怎么用的了。
DOM結構：
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
樣式內容：
.wrapper{
position: relative;
width: 360px;
border: 5px solid #fff;
}
.left{
background: url(1.png);
background-size: cover;
width: 100%;
height: 200px;
}
.right{
background: url(2.png);
background-size: cover;
width: 100%;
height: 200px;
}
顯示結果是這樣的：
這很簡單，很好理解，沒什么難的，下面開始重點內容了
為了實現斜線拼接，你總得有個斜線吧？把下面那個美女圖換成一個斜線圖。
.right{
background: -webkit-linear-gradient(left top, blue 50%, #ddd 50%);
}
結果變成這個樣子的：
沒錯，美女圖不見了，不急，下面我們在換回來。
把背景換成真實的美女，漸變圖作為mask。
.right{
background: url(2.png);
-webkit-mask-image: -webkit-linear-gradient(left top, blue 50%, #ddd 50%);
}
這個時候又回到了顯示兩張圖的效果。是的，沒錯，那是因為：
Mask的原理是：它只會把遮罩圖里透明像素所對應的原圖部分進行隱藏，而我們的漸變是完全不透明的。所以就沒有遮罩效果。
現在來改一下mask:
.right{
-webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, #ddd 50%);
}
這樣子就對了，效果如下圖所示：
給下面那個美女圖區加個定位：
.right{
position:absolute;
left:0;
top:0;
}
這樣就得到文章一開始的那個兩張圖拼接的效果了。本文最關鍵是理清css3屬性mask和linear gradient的使用原理，記住文中加粗的那句話。
短內容，說完整事，哪怕只讀一篇也能學知識。點擊關注小鄭搞碼事，說的都是那堆代碼。謝謝您的鼓勵！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
