HTML 代碼約定
很多 Web 開(kāi)發(fā)人員對(duì) HTML 的代碼規(guī)范知之甚少。
在2000年至2010年，許多Web開(kāi)發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。
使用 XHTML 開(kāi)發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫(xiě)規(guī)范。
而針對(duì)于 HTML5 ，我們應(yīng)該形成比較好的代碼規(guī)范，以下提供了幾種規(guī)范的建議。
使用正確的文檔類(lèi)型
文檔類(lèi)型聲明位于HTML文檔的第一行：
<!DOCTYPE html>
如果你想跟其他標(biāo)簽一樣使用小寫(xiě)，可以使用以下代碼：
<!doctype html>
使用小寫(xiě)元素名
HTML5 元素名可以使用大寫(xiě)和小寫(xiě)字母。
推薦使用小寫(xiě)字母：
混合了大小寫(xiě)的風(fēng)格是非常糟糕的。
開(kāi)發(fā)人員通常使用小寫(xiě) (類(lèi)似 XHTML)。
小寫(xiě)風(fēng)格看起來(lái)更加清爽。
小寫(xiě)字母容易編寫(xiě)。
不推薦:
<SECTION>
<p>這是一個(gè)段落。</p>
</SECTION>
非常糟糕:
<Section>
<p>這是一個(gè)段落。</p>
</SECTION>
推薦:
<section>
<p>這是一個(gè)段落。</p>
</section>
關(guān)閉所有 HTML 元素
在 HTML5 中, 你不一定要關(guān)閉所有元素 (例如 <p> 元素)，但我們建議每個(gè)元素都要添加關(guān)閉標(biāo)簽。
不推薦:
<section>
<p>這是一個(gè)段落。
<p>這是一個(gè)段落。
</section>
推薦:
<section>
<p>這是一個(gè)段落。</p>
<p>這是一個(gè)段落。</p>
</section>
關(guān)閉空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要關(guān)閉：
我們可以這么寫(xiě)：
<meta charset="utf-8">
也可以這么寫(xiě)：
<meta charset="utf-8" />
在 XHTML 和 XML 中斜線(xiàn) (/) 是必須的。
如果你期望 XML 軟件使用你的頁(yè)面，使用這種風(fēng)格是非常好的。
使用小寫(xiě)屬性名
HTML5 屬性名允許使用大寫(xiě)和小寫(xiě)字母。
我們推薦使用小寫(xiě)字母屬性名:
同時(shí)使用大小寫(xiě)是非常不好的習(xí)慣。
開(kāi)發(fā)人員通常使用小寫(xiě) (類(lèi)似 XHTML)。
小寫(xiě)風(fēng)格看起來(lái)更加清爽。
小寫(xiě)字母容易編寫(xiě)。
不推薦：
<div CLASS="menu">
推薦：
<div class="menu">
屬性值
HTML5 屬性值可以不用引號(hào)。
屬性值我們推薦使用引號(hào):
如果屬性值含有空格需要使用引號(hào)。
混合風(fēng)格不推薦的，建議統(tǒng)一風(fēng)格。
屬性值使用引號(hào)易于閱讀。
以下實(shí)例屬性值包含空格，沒(méi)有使用引號(hào)，所以不能起作用:
<TABle class=table striped>
以下使用了雙引號(hào)，是正確的：
<table class="table striped">
圖片屬性
圖片通常使用 alt 屬性。 在圖片不能顯示時(shí)，它能替代圖片顯示。
<img src="html5.gif" alt="HTML5">
定義好圖片的尺寸，在加載時(shí)可以預(yù)留指定空間，減少閃爍。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
空格和等號(hào)
等號(hào)前后可以使用空格。
<link rel = "stylesheet" href = "styles.css">
但我們推薦少用空格:
<link rel="stylesheet" href="styles.css">
避免一行代碼過(guò)長(zhǎng)
使用 HTML 編輯器，左右滾動(dòng)代碼是不方便的。
每行代碼盡量少于 80 個(gè)字符。
空行和縮進(jìn)
不要無(wú)緣無(wú)故添加空行。
為每個(gè)邏輯功能塊添加空行，這樣更易于閱讀。
縮進(jìn)使用兩個(gè)空格，不建議使用 TAB。
比較短的代碼間不要使用不必要的空行和縮進(jìn)。
不必要的空行和縮進(jìn):
<body>
<h1>菜鳥(niǎo)教程</h1>
<h2>HTML</h2>
<p>
菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。
菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。
菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想,
菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。
</p>
</body>
首先我們需要下載。Sublime Text，然后安裝安裝完成之后，我們就可以在這個(gè)上面編寫(xiě)代碼了，首先還要配置一下jdk，一切就緒之后我們可以新建一個(gè)web項(xiàng)目，然后就可以敲代碼了。第1次編寫(xiě)的代碼，我們可以通過(guò)添加的方式添加進(jìn)去，然后點(diǎn)擊運(yùn)行就可以了。
前端代碼寫(xiě)成怎么樣才能達(dá)到上線(xiàn)的標(biāo)準(zhǔn)？
標(biāo)準(zhǔn)有以下幾點(diǎn)：
一、代碼簡(jiǎn)潔、沒(méi)有垃圾代碼，符合W3C標(biāo)準(zhǔn)；
二、與UI設(shè)計(jì)圖相符；
三、支持各端瀏覽器，瀏覽均正常，兼容性好；
四、沒(méi)有外部引用文件，都在本地引用；
五、我認(rèn)為達(dá)到以上4點(diǎn)就具備了上線(xiàn)的標(biāo)準(zhǔn)；
關(guān)于你的第二個(gè)問(wèn)題，一個(gè)簡(jiǎn)單的頁(yè)面后端能用嗎？可以用的，只要在頁(yè)面源碼中注明了各段代碼說(shuō)明，后端程序員就可以看明白。
如有其它問(wèn)題也歡迎與我交流，也可以在下方評(píng)論區(qū)留言。