整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、唯一定律
無論有多少人共同參與同一項目，一定要確保每一行代碼都像是唯一個人編寫的。
二、HTML
2.1 語法
（1）用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。
（2）嵌套元素應當縮進一次（即兩個空格）。
（3）對于屬性的定義，確保全部使用雙引號，絕不要使用單引號。
（4）不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規范中明確說明這是可選的。
（5）不要省略可選的結束標簽（closing tag）（例如，</li> 或 </body>）。
2.2 Example
三、HTML5 doctype
為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現。
四、語言屬性
根據 HTML5 規范：
強烈建議為 html 根元素指定 lang 屬性，從而為文檔設置正確的語言。這將有助于語音合成工具確定其所應該采用的發音，有助于翻譯工具確定其翻譯時所應遵守的規則等等。
五、IE 兼容模式
IE 支持通過特定的 <meta> 標簽來確定繪制當前頁面所應該采用的 IE 版本。除非有強烈的特殊需求，否則最好是設置為 edge mode，從而通知 IE 采用其所支持的最新的模式。
六、字符編碼
通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實體標記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。
七、引入 CSS 和 JavaScript 文件
根據 HTML5 規范，在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分別是它們的默認值。
八、實用為王
盡量遵循 HTML 標準和語義，但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的標簽并保持最小的復雜度。
九、屬性順序
9.1 從大到小
HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。
（1）class
（2）id, name
（3）data-*
（4）src, for, type, href, value
（5）title, alt
（6）role, aria-*
9.2 Example
9.3 說明
class 用于標識高度可復用組件，因此應該排在首位。id 用于標識具體組件，應當謹慎使用（例如，頁面內的書簽），因此排在第二位。
十、布爾（boolean）型屬性
10.1 注意
（1）布爾型屬性可以在聲明時不賦值。XHTML 規范要求為其賦值，但是 HTML5 規范不需要。
（2）元素的布爾型屬性如果有值，就是 true，如果沒有值，就是 false。
（3）如果屬性存在，其值必須是空字符串或 [...] 屬性的規范名稱，并且不要在首尾添加空白符。
簡單來說，就是不用賦值。
10.2 Example
十一、減少標簽的數量
編寫 HTML 代碼時，盡量避免多余的父元素。很多時候，這需要迭代和重構來實現。
十二、減少 JavaScript 生成的標簽
通過 JavaScript 生成的標簽讓內容變得不易查找、編輯，并且降低性能。能避免時盡量避免。
最后，小編還給大家準備了web前端的學習資料
獲取方式：請大家轉發+關注并私信小編關鍵詞：“資料”即可獲取前端自學教程一套。
.表格的制作
1、表格元素–<table>
表格中的行–<tr>
表格中的列–<td>
表格中的表頭–【居中/加粗】
table標記的邊框–border
table標記的寬度–width
table標記的高度–height
table標記的水平對齊方式–align
table標記的表格背景色–bgcolor
table標記的表格邊框色–bordercolor
table標記的表格中的內容與邊框之間的距離–cellpadding
table標記的表格中的邊框與邊框之間的距離–cellspacing【默認是1px】
tr標記的align屬性–設置當前行的水平對齊方式
tr標記的bgcolor屬性–設置當前行的背景色
tr標記的valign屬性–設置當前行的垂直對齊方式【top/middle/bottom】
td標記的align屬性–設置當前列的水平對齊方式
td標記的bgcolor屬性–設置當前列的背景色
td標記的valign屬性–設置當前列的垂直對齊方式【top/middle/bottom】
合并單元格
水平方向合并單元格–跨列—colspan
以下是計算器的控制面板代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>計算器的控制面板</title>
</head>
<body>
<table border="1" cellspacing="10px" cellpadding="20px"
align="center" bgcolor="aliceblue">
<tr><td colspan="5" height="40px" align="right"><font size="7"><b>0</b></font></td></tr>
<tr align="center">
<td>MC</td>
<td>MR</td>
<td>MS</td>
<td>M+</td>
<td>M-</td>
</tr>
<tr align="center">
<td><-</td>
<td>CE</td>
<td>C</td>
<td>+/-</td>
<td>√</td>
</tr>
<tr align="center">
<td>7</td>
<td>8</td>
<td>9</td>
<td>/</td>
<td>%</td>
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
<td>6</td>
<td>*</td>
<td>1/x</td>
</tr>
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td>-</td>
<td rowspan="2" bgcolor="yellow">=
</td>
</tr>
<tr align="center">
<td colspan="2">0</td>
<td>.</td>
<td>+</td>
</tr>
</table>
</body>
</html>
看成品:
2. 列表元素
2.1 有序列表
ol—有序列表
li—列表中的每一項【條目】
默認的標志是有順序的數字
我們可以通過ol的type屬性來修改標志
1–有順序的數字
a–有順序的小寫字母
A–有順序的大寫字母
i–有順序的小寫羅馬數字
I–有順序的大寫羅馬數字
start屬性設置書順序的開始值
2.2 無序列表
ul—無序列表
li—列表中的每一項【條目】
默認的標志是實心點
我們可以通過ul的type屬性來修改標志
circle–圓形【。】
disc----實心點[默認]
square–正方形
none–沒有標志
2.3 自定義列表
dl—自定義列表
dt—自定義列表的頭
dd—子項目
以下是有序，無序，和自定義列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<ul type="none">
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
<ol type="A">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<dl>
<dt>自定義列表</dt>
<dt>自定義列表</dt>
<dt>自定義列表</dt>
</dl>
</body>
</html>
3. 表單<form>
主要負責采集信息的，可以將采集的信息提交。
form的屬性
action—指定表單數據的后端處理程序
method----指定表單數據的提交方式【get[默認]/post】
get提交數據會將被處理的數據跟隨在請求地址之后
被提交的數據255個字符
https://www.baidu.com/s?&wd=html
post提交數據會將被處理的數據封裝到http協議的頭
https://www.baidu.com/s
被提交的數據沒有限制
通常情況下提交文件只能用post
enctype屬性規定在將表單數據發送到服務器之前如何對其進行編碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" align="center" cellpadding="20px" cellspacing="0">
<tr>
<td>application/x-www-form-urlencoded</td>
<td>在發送前對所有字符進行編碼（默認）。</td>
</tr>
<tr>
<td>multipart/form-data</td>
<td>不對字符編碼。當使用有文件上傳控件的表單時，該值是必需的。
</td>
</tr>
<tr>
<td>text/plain</td>
<td>將空格轉換為 "+" 符號，但不編碼特殊字符。</td>
</tr>
</table>
</body>
</html>
表單元素
input 文本框/密碼框/單選按鈕/復選框…
seletc 下拉列表
textarea 文本域—富文本編輯器
章中，我介紹了一種使用類似CSS的選擇器語法的快速編寫HTML代碼的新方法-一組用于高速HTML和CSS編碼的便捷工具。
您花費多少時間編寫HTML代碼：所有這些標記，屬性，引號，花括號等。如果您選擇的編輯器具有代碼補全功能，則您會更輕松，但是您仍然需要進行大量鍵入操作。
但是，如果您不僅可以使用CSS選擇器來樣式化和訪問元素，還可以生成代碼怎么辦？例如，如果您可以寫這個呢？
div#content>h1+p
…并將其視為輸出？
現在，讓我們看看這些工具是如何工作的。
擴展縮寫功能將類似CSS的選擇器轉換為XHTML代碼。術語“縮寫”可能有些混亂。為什么不將其稱為“ CSS選擇器”呢？好吧，第一個原因是語義上的：“選擇器”意味著選擇某些內容，但是在這里，我們實際上是在生成某些內容，編寫了較長代碼的較短表示。其次，除了引入一些新的運算符之外，它僅支持真正的CSS選擇器語法的一小部分。
以下是受支持的屬性和運算符的列表：
如您所見，您已經知道如何使用：只需編寫一個類似CSS的簡單“縮寫”，就像這樣……
div#header>img.logo+ul#nav>li*4>a
…然后調用“擴展縮寫”操作。
有兩個自定義運算符：元素乘法和項目編號。例如，如果要生成五個<li>元素，則只需編寫li*5。它將重復所有后代元素。如果您需要四個<li>元素，<a>每個元素中都有一個，則只需編寫li*4>a，它將生成以下輸出：
當您想用其索引標記重復的元素時，使用最后一個項目編號。假設你想生成三個<div>的元素item1，item2和item3類。您可以寫這個縮寫div.item$*3：
只需在要顯示索引的class或ID屬性中的任意位置添加一個美元符號，即可。所以這…
div#i$-test.class$$$*5
將被轉換為：
您會看到在輸入a縮寫時，輸出為<a href=“”></a>。或者，如果您編寫img，輸出為<img src=“” alt=“” />。
本人從事web前端5年，現在從事在線教育，準備了整理了一套適合小白學習資料免費分享給大家，想要的朋友可以私信 1
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
