HTML編碼規(guī)范

法

縮進使用soft tab（4個空格）；
嵌套的節(jié)點應(yīng)該縮進；
在屬性上，使用雙引號，不要使用單引號；
屬性名全小寫，用中劃線做分隔符；
不要在自動閉合標簽結(jié)尾處使用斜線（HTML5 規(guī)范指出他們是可選的）；
不要忽略可選的關(guān)閉標簽，例:

<!DOCTYPE html>
 <html>
 	<head>
 		<title>Page title</title>
 	</head>
 	<body> <img src="images/company_logo.png" alt="Company">
 		<h1 class="hello-world">Hello, world!</h1>
 	</body>
 </html>

HTML5 doctype在頁面開頭使用這個簡單地doctype來啟用標準模式，使其在每個瀏覽器中盡可能一致的展現(xiàn)；雖然doctype不區(qū)分大小寫，但是按照慣例，doctype大寫（關(guān)于html屬性，大寫還是小寫）。<!DOCTYPE html> <html> ... </html> lang屬性根據(jù)HTML5規(guī)范：應(yīng)在html標簽上加上lang屬性。這會給語音工具和翻譯工具幫助，告訴它們應(yīng)當(dāng)怎么去發(fā)音和翻譯。
更多關(guān)于 lang 屬性的說明在這里；在sitepoint上可以查到語言列表；
但sitepoint只是給出了語言的大類，例如中文只給出了zh，但是沒有區(qū)分香港，臺灣，大陸。而微軟給出了一份更加詳細的語言列表.aspx)，其中細分了zh-cn, zh-hk, zh-tw。<!DOCTYPE html> <html lang="en-us"> ... </html> 字符編碼通過聲明一個明確的字符編碼，讓瀏覽器輕松、快速的確定適合網(wǎng)頁內(nèi)容的渲染方式，通常指定為’UTF-8’。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ... </html> IE兼容模式用 <meta> 標簽可以指定頁面應(yīng)該用什么版本的IE來渲染；<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html> 引入CSS, JS根據(jù)HTML5規(guī)范, 通常在引入CSS和JS時不需要指明 type，因為 text/css 和 text/javascript 分別是他們的默認值。HTML5 規(guī)范鏈接使用link
使用style
使用script <link rel="stylesheet" href="code_guide.css">  <style> ... </style>  <script src="code_guide.js"></script>  <script> ... </script> 屬性順序屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性；

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled

class是為高可復(fù)用組件設(shè)計的，所以應(yīng)處在第一位；
id更加具體且應(yīng)該盡量少使用，所以將它放在第二位。

<a class="..." id="..." data-modal="toggle" href="#">Example link</a>

<input class="form-control" type="text">

<img src="..." alt="...">

boolean屬性

boolean屬性指不需要聲明取值的屬性，XHTML需要每個屬性聲明取值，但是HTML5并不需要；
更多內(nèi)容可以參考 WhatWG section on boolean attributes：
boolean屬性的存在表示取值為true，不存在則表示取值為false。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected>1</option>
</select>

JS生成標簽

在JS文件中生成標簽讓內(nèi)容變得更難查找，更難編輯，性能更差。應(yīng)該盡量避免這種情況的出現(xiàn)。

減少標簽數(shù)量

在編寫HTML代碼時，需要盡量避免多余的父節(jié)點；很多時候，需要通過迭代和重構(gòu)來使HTML變得更少。

<!-- Not well -->
<span class="avatar">
    <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

實用高于完美

盡量遵循HTML標準和語義，但是不應(yīng)該以浪費實用性作為代價；任何時候都要用盡量小的復(fù)雜度和盡量少的標簽來解決問題。

個人編寫HTML使用的軟件是dreamweaver，這個軟件的話，正版是要購買的，一開始學(xué)習(xí)HTML就是用的這個軟件了，挺好用的，而且代碼提示特別方便，不用擔(dān)心太多的標簽和屬性記勞~

1.什么是HTML？

HTML 是用來描述網(wǎng)頁的一種語言，指的是超文本標記語言: HyperText Markup Language；
HTML 不是一種編程語言，而是一種標記語言；
HTML文檔也叫做 web 頁面；

2.HTML基本結(jié)構(gòu)

<!DOCTYPE html>：文檔聲明；
<html>：HTML 頁面的根元素；
<head>：用于定義文檔的頭部，是所有頭部元素的容器；
<meta>：提供有關(guān)頁面的元信息，位于文檔的頭部，不包含任何內(nèi)容；
<title>：文檔的標題；
<body>：定義文檔的主體，包含文檔的所有內(nèi)容；

3.HTML標簽使用？

HTML 標簽是由尖括號包圍的關(guān)鍵詞，且通常是成對出現(xiàn)的如<a></a>，當(dāng)然也有單個的，只不過比較少如<hr>；
標簽對中的第一個標簽表示開始標簽，第二個標簽表示結(jié)束標簽；

4.HTML常用標簽介紹

除了HTML基本結(jié)構(gòu)的幾個標簽以外，HTML還有一些比較常用的基本標簽；

（1）文本標簽：

h1-h6：用于定義標題，h1為最大標題，h6為最小標題；
p：定義段落；
span：組合文檔中的行內(nèi)元素；
br：換行；
hr：水平線；
strong/b：加粗文字；
em/i：斜體；
u：下劃線；
s：刪除線；
pre：定義預(yù)格式化的文本，保持原有格式；
sub：下標；
sup：上標；
blockquote：塊引用；

（2）布局標簽：

div：定義文檔中的分區(qū)或節(jié)，把文檔分割為獨立的、不同的部分；
header：定義頁面的頭部；
aside：用作文章的側(cè)欄；
section：定義文檔中的節(jié)；
footer：定義文檔或節(jié)的頁腳，通常包含文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等；
article：規(guī)定文章獨立的其他內(nèi)容，如標題、內(nèi)容、評論；

（3）多媒體標簽：

img：用于在網(wǎng)頁中插入圖像；
audio：定義聲音，比如音樂或其他音頻流；
video：定義視頻，比如電影片段或其他視頻流；

（4）超鏈接標簽：

a：定義超鏈接，指定頁面間的跳轉(zhuǎn)；

（5）序列化標簽：

ul：定義無序列表；
ol：定義有序列表；
li：定義列表項目，可用在無序列表ul和有序列表ol中；
dl：定義了定義列表；
dt：定義了定義列表中的項目（即術(shù)語部分）；
dd：在定義列表中定義條目的定義部分；

（6）表格標簽：

table：定義 HTML 表格；
tr：定義表格的行；
td：定義表格的單元；
th：定義表頭；
caption：定義表格標題；
col：為表格中一個或多個列定義屬性值；
colgroup：用于對表格中的列進行組合，以便對其進行格式化；
thead：定義表格的表頭；
tbody：表格主體，也就是正文部分；
tfoot：定義表格的頁腳（腳注或表注）；

（7）表單標簽：

form：用于為用戶輸入創(chuàng)建 HTML 表單；
input：用于搜集用戶信息；
button：定義一個按鈕；
select：創(chuàng)建單選或多選菜單；
option：定義下拉列表中的一個選項；
textarea：定義多行的文本輸入控件；
label：為 input 元素定義標注（標記）；
fieldset：用于將表單內(nèi)的相關(guān)元素分組；
legend：為 fieldset 元素定義標題；

5.HTML注意事項

HTML文件當(dāng)以后綴名為 .html 或 .htm 來命名；
HTML標簽和屬性是不區(qū)分大小寫的，建議HTML標簽和屬性都小寫，屬性值必須用雙引號包圍；
HTML標簽都是以開始標簽起始，以結(jié)束標簽終止；
HTML標簽之間盡量縮進與換行，每行代碼不要過長，方便閱讀和維護；
HTML標簽使用必須符合標簽嵌套規(guī)則，如禁止a標簽嵌套a標簽，p標簽嵌套div標簽等；
建議不使用HTML已經(jīng)廢棄的或者不贊成使用的標簽，少使用table布局、iframe框架嵌套以及flash播放器；

一篇介紹了網(wǎng)頁的基本結(jié)構(gòu)，那如何編寫網(wǎng)頁的內(nèi)容? 前提是要學(xué)會HTML標簽的用法，本篇主要介紹HTML標簽是什么，如何學(xué)習(xí)，需要大概多長時間學(xué)習(xí)。

本篇主要基于html5介紹，html5 是最新版的標準，之前的版本可以自己了解下。

HTML 簡介

HTML的英文全稱是Hyper Text Markup Language，直譯為超文本標記語言。它是全球廣域網(wǎng)上描述網(wǎng)頁內(nèi)容和外觀的標準。HTML包含了一對打開和關(guān)閉的標記，在當(dāng)中包含有屬性和值。標記描述了每個在網(wǎng)頁上的組件，例如文本段落、表格或圖像等。

事實上，HTML是一種因特網(wǎng)上較常見的網(wǎng)頁制作標注性語言，而并不能算做一種程序設(shè)計語言，因為它缺少程序設(shè)計語言所應(yīng)有的特征。HTML通過IE等瀏覽器的翻譯，將網(wǎng)頁中所要呈現(xiàn)的內(nèi)容、排版展現(xiàn)在用戶眼前。

一個html標簽基本結(jié)構(gòu)如下：

<標簽名稱  屬性="屬性值"></標簽名稱> 或 <標簽名稱 屬性="屬性值"/>

有以下特點：

由尖括“<”、“>”號包圍的標記元素，比如 <html>和</html>就是一對標記。
通常是成對出現(xiàn)的，比如 <div> 和 </div>，也有單獨呈現(xiàn)的標簽，如：<img />、<input/>等。
標簽對中的第一個標簽是開始標簽，第二個標簽是結(jié)束標簽；
一般成對出現(xiàn)的標簽，其內(nèi)容在兩個標簽中間，如<h1>標題</h1>。單獨呈現(xiàn)的標簽，則在標簽屬性中賦值，如<input type="text" />。
網(wǎng)頁展示的內(nèi)容需寫在<body>標簽中。
標簽不區(qū)分大小寫，建議按規(guī)范小寫。

HTML標簽按功能大體可分以下幾種類型：

構(gòu)成網(wǎng)頁基本架構(gòu)的標簽，比如：<!DOCTYPE>（定義文檔類型）、<html>(根標簽),<meta>（元信息）、<head> (網(wǎng)頁頭部區(qū)域)、<body> （網(wǎng)頁內(nèi)容區(qū)域）。
用于引入外部資源及客戶端腳本的標簽，比如：<link>（外部資源，css樣式文件）， <script>（客戶端js腳本）。
用于描述布局的標簽，比如： <div>、<ul>（無序列表）、<ol>（有序列表）、<h1>到<h6>（標題1到6）、<table>（表格）、<footer>（頁腳）、<header>（頁頭）等。
用于描述文本格式的標簽，比如：<p> (段落)、<strong>(加粗)、<q>（引用）、<span>等。
用于引入多媒體資源的標簽，比如：<img>、<video>、<audio>等。
用于制作表單的標簽，比如：<form>(表單),<input>(輸入框),<textarea>(文本域)，<select>(下拉菜單),<radio>(單選項),<checkbox>(多選項)等。
其它標簽（不是很常用的）。

如何學(xué)習(xí)html的標簽用法

沒有捷徑，需要多看，多練。在這里我不一一介紹每個標簽的具體含義及用法，相關(guān)語法可以參考以下幾個網(wǎng)站：

https://www.w3cschool.cn/html5/
https://developer.mozilla.org/zh-CN/docs/Web/HTML

制定一個學(xué)習(xí)計劃,每天堅持下去

要求，每天花費3到5個小時學(xué)習(xí)，至少1到2周掌握常用的html標簽含義及用法，可以按照上面介紹的標簽進行分類學(xué)習(xí)，感謝關(guān)注，祝你學(xué)習(xí)愉快。

在線咨詢

上一篇：Python轉(zhuǎn)JavaScript編譯器，天了嚕！還
下一篇：Eclipse +JAVA EE 配置Tomcat

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商