整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
1272208556@qq.com
1、HTML + CSS + UI
2、Javascript
3、HTML5CORE + AJAX + Jquery
4、Bootstrap,Angular JS + 其他框架
1、HTML + CSS3BASIC + PRO + UI + PRO + CSS3CORE + PRO
======================================================
1、Internet
1、什么是Internet
是全球性計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò),是由若干終端(PC,移動(dòng)端)以及特殊的傳輸介質(zhì)而組成的一個(gè)網(wǎng)絡(luò)結(jié)構(gòu)
PC:Personal Computer
2、提供的服務(wù)
信息共享
Telnet : 遠(yuǎn)程連接
Email : 電子郵件
WWW : 萬維網(wǎng) www.baidu.com
BBS : 電子公告板 ，論壇
FTP : 上傳和下載服務(wù)
3、實(shí)現(xiàn)技術(shù)
1、分組交換原理:數(shù)據(jù)通過數(shù)據(jù)包進(jìn)行傳遞，到達(dá)目的地后，對數(shù)據(jù)包進(jìn)行重組
2、TCP/IP 協(xié)議簇
2、WEB
1、什么是WEB
就是 WWW（World Wide Web）
w3c : www consortium 萬維網(wǎng)聯(lián)盟
2、能干什么
能夠?qū)⒏黝惖男畔⒑头?wù)進(jìn)行連接，提供圖形用戶界面
信息:文字、圖片、音頻、視頻
服務(wù):Telnet, FTP , Mail , HTTP ...
3、萬維網(wǎng)就是無數(shù)的文檔集合（網(wǎng)頁文檔）,文檔會(huì)駐留在世界（互聯(lián)網(wǎng)）的任何一個(gè)角落
3、WEB的工作原理
WEB是基于Internet的多媒體信息服務(wù)系統(tǒng)
1、基于 瀏覽器 / 服務(wù)器 模式
B / S : Browser / Server
在服務(wù)器上，主要以網(wǎng)頁的形式發(fā)布多媒體信息
2、由WEB服務(wù)器、瀏覽器、通信協(xié)議組成
3、WEB 相關(guān)技術(shù)
1、服務(wù)器端技術(shù)（后臺(tái)）
PHP,JSP,ASP 。。。 。。。
2、客戶端技術(shù)(前端技術(shù))
HTML,
CSS,
Javascript
=========================================================
1、HTML 入門
1、什么是HTML
HTML(Hyper Text Markup Language),超級文本標(biāo)記語言
超文本:
a
標(biāo)記 : 超文本都是由標(biāo)記組成的
<a>
語言 : 包含自己獨(dú)特的語法
HTML最終由瀏覽器負(fù)責(zé)解釋
HTML總可以嵌入一些腳本語言編寫的程序段:Javascript,VBScript
2、HTML版本
超級文本標(biāo)記語言（第一版）
HTML2.0
HTML3.2
HTML4.0
HTML4.01
XHTML1.0
HTML5
3、標(biāo)簽(標(biāo)記)
1、標(biāo)簽語法
1、必須使用尖括號擴(kuò)起來
<a>,<div> ...
<A>,<a>
2、有封閉類型的標(biāo)簽，也有非封閉類型的標(biāo)簽
1、封閉類型
也稱作雙標(biāo)記，則必須成對出現(xiàn)
<標(biāo)記>文本內(nèi)容</標(biāo)記>
不同的標(biāo)記，決定了"文本內(nèi)容"的不同表現(xiàn)形式
eg:<a></a>,<p></p>,<div></div>
2、非封閉類型
也稱作單標(biāo)記、空標(biāo)記
<標(biāo)記>
或者
<標(biāo)記/>
eg:
<hr>,<br>,<img>
3、元素
標(biāo)記就是元素，元素也稱為標(biāo)記
4、元素嵌套(標(biāo)簽嵌套)
標(biāo)簽之間相互嵌套，形成復(fù)雜的語法結(jié)構(gòu)
<body>
<p>
<a></a>
</p>
</body>
5、屬性
屬性是出現(xiàn)在開始標(biāo)記中的內(nèi)容,作用是修飾元素
<p 屬性名="屬性值"></p>
<p 屬性名='屬性值'></p>
<p 屬性名=屬性值></p>
標(biāo)準(zhǔn)屬性:每個(gè)元素都會(huì)具備的通用屬性
id : 定義每個(gè)標(biāo)簽的唯一標(biāo)識(shí)
title:提示文本
class:樣式相關(guān)，類樣式
style:樣式相關(guān)，行內(nèi)樣式
操作1：定義一對p標(biāo)簽，id屬性設(shè)置為program
<p id="program"></p>
多屬性:
<p 屬性1="值" 屬性2="值"></p>
注意：多屬性之間，排名不分先后
2、創(chuàng)建HTML文檔
開發(fā)工具:任何一個(gè)文字編輯軟件都可以開發(fā)HTML
EditPlus ： 超級記事本
運(yùn)行環(huán)境:任何一個(gè)瀏覽器都能運(yùn)行HTML
Google Chrome,Mozilla Firefox,Microsoft IE,Safari,Opera
超文本文件(HTML文檔):
是一個(gè)以.html或.htm結(jié)尾的文檔
3、文檔結(jié)構(gòu)
1、文檔類型聲明
聲明使用的html版本和風(fēng)格
<!doctype html>
2、html頁面
1、文檔根元素
每個(gè)文檔有且僅有一對根元素 , html
2、在根元素的內(nèi)部，包含兩對子元素
1、head : 頁面的頭部內(nèi)容
定義頁面全局信息
包含:
<title></title> : 網(wǎng)頁標(biāo)題
<meta />:聲明元數(shù)據(jù)(編碼,關(guān)鍵字,描述)
<style></style>:聲明內(nèi)部樣式表
<link />:引入外部樣式表
<script></script>:定義或引入腳本文件
2、body : 頁面的主體內(nèi)容
任何一個(gè)標(biāo)簽，都可能會(huì)出現(xiàn)在body中
3、head元素
1、聲明網(wǎng)頁標(biāo)題
<title></title>
2、定義網(wǎng)頁文本編碼格式
默認(rèn):ISO-8859-1,只支持英文以及英文狀態(tài)下的標(biāo)點(diǎn)符號
utf-8:支持中英文,標(biāo)點(diǎn)符號
<meta charset="utf-8" />
3、... ...
4、body元素
屬性:
text : 文本的顏色
bgcolor : 背景顏色
練習(xí)1:
1、為body添加兩個(gè)屬性，text，bgcolor
2、文本顏色 : 紅色(red)
背景顏色 : 銀色(silver)
3、在body中隨意寫上一段文本，觀察頁面顯示效果
5、文本標(biāo)記
1、特殊的文本
轉(zhuǎn)義字符:
空格:
< : < less than
> : > greater than
版權(quán)標(biāo)識(shí):©
2、文本標(biāo)記
1、文本樣式
<b>...</b> : 加粗文本
<i>...</i> : 斜體文本
<u>...</u> : 下劃線
<s>...</s> : 刪除線
<sup>...</sup> : 上標(biāo)
<sub>...</sub> : 下標(biāo)
2、標(biāo)題元素
1-6級6個(gè)標(biāo)題
<hn></hn> n:1-6
一級最大
六級最小
3、段落元素
提供了結(jié)構(gòu)化文本的表現(xiàn)方式
語法:<p></p>
注意：
1、每對p標(biāo)簽單獨(dú)成一個(gè)段落
2、段落與其他元素有垂直空白，段落間距
常用屬性:
align : 水平對齊方式
取值:left center right
4、換行元素
在代碼的任何位置處，實(shí)現(xiàn)回車的效果
<br />
5、水平線
又叫分割線
<hr />
屬性:
1、size : 水平線的粗細(xì)，通常以像素(px)為單位
2、width: 寬度
3、align: 水平線的水平對齊方式
4、color: 顏色
6、分區(qū)元素
目的：為元素進(jìn)行分組，多數(shù)用在布局中
塊分區(qū)元素:<div></div> 層
行內(nèi)分區(qū)元素:<span></span>
注意：
div ：主要用在布局上
span：修改其內(nèi)部內(nèi)容的樣式
7、預(yù)格式化
保留源文檔中的空格和回車
<pre>
文本內(nèi)容
</pre>
3、注釋
可以寫在html源碼中，但不被瀏覽器解釋的文本
語法:
<!-- 注釋內(nèi)容 -->
4、行內(nèi)元素與塊級元素
塊級元素:默認(rèn)情況下，塊級元素獨(dú)占一行，元素的前后都會(huì)自動(dòng)換行 div,hn,hr,p
塊級元素作用:布局
行內(nèi)元素:默認(rèn)情況，多個(gè)元素位于同一行，不會(huì)換行
span,文本標(biāo)記... ...
行內(nèi)元素作用:修改內(nèi)部內(nèi)容的樣式
表單
主要功能：收集客戶的信息。
表單的開發(fā)分兩個(gè)部分：前臺(tái)靜態(tài)頁面制作、后臺(tái)PHP程序來處理。
<form name= “form1”action=“register.php”method=“GET” enctype=“application/x-www-form-urlencoded”>
用戶名：<input type=“text”name=“username” />
密碼：<input type=“password” name=“userpwd” />
<input type=“submit” value=“提交表單” />
</form>
Method提交方式
POST方法：提交大量數(shù)據(jù)、相對安全些、可以提交多樣化的格式數(shù)據(jù)，提交的數(shù)據(jù)用戶不可見。
GET方法：提交少量數(shù)據(jù)，安全性比較低、數(shù)據(jù)的格式比較單一，提交的數(shù)據(jù)顯示在地址欄
Username=itcast
Userpwd=itcast
http://www.itcast.cn/register.php?username=itcast&userpwd=itcast
enctype：有兩個(gè)值：普通的表單數(shù)據(jù)編碼application/x-www-form-urlencoded”
上傳文件時(shí)，數(shù)據(jù)編碼multipart/form-data
框架
在框架定義頁面，不能包含<body>及其子標(biāo)記。<body>和<frameset>只能使用其中一個(gè)。
一個(gè)框架由框架集(frameset)和框架頁(frame)構(gòu)成。
<frameset>標(biāo)記：定義框架的類型、大小、位置，主要定義框架的結(jié)構(gòu)。
<frame>標(biāo)記：指定窗口的默認(rèn)頁面、是否可以改變大小、是否出現(xiàn)滾動(dòng)條。
<frameset rows=“64,*”frameborder=“0”border=“0”>
<frame src=“topFrame.html”noresize=“noresize”scrolling=“no”name=“topFrame” />
<frameset cols=“182,*”frameborder=“0”border=“0”>
<frame src=“l(fā)eftFrame.html”noresize=“noresize”scrolling=“auto” />
<frame src=“mainFrame.html”name=“mainFrame” />
</frameset>
</frameset>
<noframes></noframes>標(biāo)記
含義：當(dāng)瀏覽器不支持框架時(shí)，顯示的提示信息。
<iframe></iframe>浮動(dòng)框架
<iframe>是<body>有標(biāo)記，相當(dāng)于在一個(gè)普通網(wǎng)頁中，開了一個(gè)小窗口，小窗口中可以引入一個(gè)普通的網(wǎng)頁。
<iframe src=“文件URL”width=“寬度”height=“高度”scrolling=“”align=“對齊”></iframe>
一個(gè)網(wǎng)頁由三個(gè)部分構(gòu)成：結(jié)構(gòu)、表現(xiàn)、行為。對應(yīng)的標(biāo)準(zhǔn)也有三個(gè)，分別為XHTML、CSS、JS
CSS，Cascading Style Sheets層疊樣式表，“級聯(lián)樣式表”、“樣式表”。用戶可以自己定義HTML元素的樣式外觀。
CSS樣式表由多個(gè)CSS樣式規(guī)則構(gòu)成；
一個(gè)CSS樣式規(guī)則，由選擇器和樣式格式聲明語句構(gòu)成，比如：選擇器body或h1
選擇器就是指給不同的HTML元素指定樣式的一個(gè)名稱；
格式聲明語句，必須放在{}中；
一個(gè)格式聲明語句，由“屬性名:屬性值”形式構(gòu)成；比如：color:#FF000
每一條格式聲明語句，必須以分號（;）結(jié)束；
CSS屬性值，不需要加引號；
CSS的數(shù)值屬性值，一般都要加單位px；比如：div{width:500px;}
CSS中不區(qū)分大小寫，建議一般都用小寫。
<style type="text/css">
body{margin:0px;padding:0px;}
h1{color:#FF0000;}
</style>
一、基本選擇器
（1）通用選擇器：將匹配所有的HTML元素，舉例：*{margin:0px;padding:0px;}
注意：*在IE6不支持、門戶網(wǎng)站會(huì)增加客戶端負(fù)擔(dān)
（2）標(biāo)簽選擇器：所有的HTML標(biāo)記，都可以做為CSS的選擇器，它們是一一對應(yīng)的關(guān)系
舉例：h1{color:#FF0000;}
（3）類選擇器：給一類HTML元素定義樣式。每個(gè)HTML元素都有一個(gè)class的屬性，在CSS中class的寫法，是以“.”開頭。
CSS樣式寫法：.news{color:#FF0000;}
HTML元素：
<div class=“news”></div>
<p class=“news”></p>
<h1 class=“news”></h1>
提示：類樣式可以給任何HTML元素增加，只需要在HTML標(biāo)記，增加一個(gè)class的屬性即可。
（4）ID選擇器，也就是說：每一個(gè)HTML元素，都有id屬性，在CSS中id選擇器的寫法，是以“#”開頭。
CSS樣式的寫法：#title{color:#FF0000;}
HTML元素：<span id=“title”></span>
提示：ID樣式只能給某一個(gè)HTML元素增加樣式，不能是多個(gè)同名ID。ID相當(dāng)于身份證號，具有唯一性。
（1）多元素選擇器（E,F,G,H）：同時(shí)匹配E\F\G\H元素。并列關(guān)系
舉例：body,h1,p,a{margin:0px;padding:0px;}
（2）后代元素選擇器（E F）：將匹配E元素下的所有F元素。（后代關(guān)系）
舉例：div.news div.title{font-size:24px;}
說明：div.news表示，class=news的<div>元素
Div#news表示id=news的<div>元素
沒有清除margin和padding之前的效果
去除margin和padding的效果
（3）子元素選擇器(E > F)：將匹配E元素下的子元素F。（父子關(guān)系）
舉例：.news>h2{color:#FF0000;font-size:24px;font-family:黑體;}
三、偽類選擇器：主要是給鏈接的不同狀態(tài)加樣式
一個(gè)鏈接有四種狀態(tài)：正常狀態(tài)、鼠標(biāo)放上狀態(tài)、激活狀態(tài)(時(shí)間太短)、訪問過的狀態(tài)
正常狀態(tài)：a:link{color:#0000FF;text-decoration:none;}
放上狀態(tài)：a:hover{}
激活狀態(tài)：a:active{}
訪問過的狀態(tài)：a:visited{color:#0000ff;text-decoration:none;}
全局鏈接樣式設(shè)置
平常使用時(shí)，請將a:link和a:visited寫一致的樣式。
a:link,a:visited{color:#0000FF;text-decoration:none;}
a:hover{color:#FF0000;text-decoration:underline;}
自定義鏈接樣式，也就是增加類樣式
<a class=“a1” href=“#”>網(wǎng)首首頁</a>
a.a1:link,a.a1:visited{color:#FF0000;}
a.a1:hover{color:#0000FF;}
Width：設(shè)置元素的寬度；
Height：設(shè)置元素的高度；
font-size：設(shè)置元素的文本大小，默認(rèn)單位px。比如：font-size:24px;
color：設(shè)置元素的文本顏色；
font-family：設(shè)置元素的文本字體；比如：font-family:宋體,楷體,黑體;
注意：如果是英文字體，并且英文字體由多個(gè)單詞構(gòu)成，請使用引號引起來
Font-family："Times New Roman",Georgia,Serif;
font-weight：加粗；比如：font-weight:bold;
font-style：斜體；比如：font-style:italic;
text-align：水平對齊，取值：left、center、right
line-height：設(shè)置行高，取值：固定值或百分比。比如：line-height:150%、line-height:24px;
text-indent：首行縮進(jìn)，比如：text-indent:24px;
letter-spacing：字符間距；
word-spacing：單詞之間的距離
text-decoration：文本修飾線，取值：underline(下劃線)、overline(上劃線)、line-through(刪除線)、none(無)
List-style-type：設(shè)置列表前的符號，取值：none、disc、circle、square
List-style-position：設(shè)置符號的位置，取值：inside(內(nèi))、outside(外)
List-style-image：設(shè)置圖片項(xiàng)目符號，舉例：list-style-image:url(images/li01.gif);
簡寫的形式：list-style:disc inside; //將上面三項(xiàng)的值分別寫入，中間用空格隔開
實(shí)現(xiàn)一個(gè)<div>中的單行文本上下居中，需要設(shè)置兩個(gè)屬性：
div{ height:30px; line-height:30px; }
（1）通過<style></style>來書寫CSS代碼 嵌入式
<style>標(biāo)記可以放到任何地方，一般放在<head>標(biāo)記中。
<style>標(biāo)記中寫的CSS代碼，只能對當(dāng)前網(wǎng)頁起作用。
格式：
<style type=“text/css”>
body{margin:0px;padding:0px;}
</style>
（2）通過<link>標(biāo)記引入外部的CSS文件(.css) 鏈入式
格式：<link href=“css/public.css” rel=“stylesheet” type=“text/css” />
屬性：
Href：指定外部CSS文件的路徑；
Rel：指定外部CSS文件與當(dāng)前網(wǎng)頁的關(guān)系，取值：stylesheet
Type：指定引入的文件類型，取值：text/css
說明：這種方式，可以實(shí)現(xiàn)多個(gè)網(wǎng)頁共享同一個(gè)CSS文件。
（3）每個(gè)HTML元素都有一個(gè)style屬性，通過該屬性設(shè)置“行內(nèi)樣式”
格式：<div style=“color:#FF0000;font-size:24px;”></div>
總結(jié)：HTML元素的公共屬性有哪些？ name、 id、style、title、class等
10.CSS的繼承性和優(yōu)先級
1、CSS繼承性
HTML中，內(nèi)層元素將繼承外層元素的樣式；多個(gè)外層元素的樣式，最終疊加到內(nèi)層元素上。
如果里面元素的CSS屬性與外層元素的CSS屬性相同時(shí)，將替換外層的CSS屬性。
以下CSS屬性具有繼承性：
文本相關(guān)的屬性是繼承的
text-align、color、text-indent、font-family、font-size
font-style、font-weight、 letter-spacing、word-spacing
text-transform、line-height等
2、CSS優(yōu)先級
（1）單個(gè)選擇器的優(yōu)先器
!important > 行內(nèi)樣式 > ID選擇器 > 類選擇 > 標(biāo)簽選擇器
注意：!important兼容性不太好，在IE6下不支持，盡量少用。
h1{color:#FF0000!important;}
（2）組合選擇器的優(yōu)先級
當(dāng)多個(gè)選擇器組合在一起時(shí)，如何判斷其優(yōu)先級？我們平常這么做，假設(shè)：標(biāo)簽的優(yōu)先為1、類選擇器優(yōu)先級為10、ID選擇器的優(yōu)先級為100，行內(nèi)樣式的優(yōu)先級為1000。
.news h1{} 優(yōu)先級值為11
.title 優(yōu)先級值為10
div.news h1{color:#FF0000;} 優(yōu)先級為12
#title{color:#009900;} 優(yōu)先級為100
以下是一個(gè)標(biāo)準(zhǔn)的html結(jié)構(gòu)
html復(fù)制代碼<!DOCTYPE html>
<html>
<head>
<!-- 必須聲明 utf-8 編碼格式 -->
<meta charset="utf-8">
<!-- 頁面標(biāo)題不能為空 -->
<title>京東商城:商家后臺(tái)</title>
<!-- 移動(dòng)端必須使用 viewport 適配需要, PC 看場景需要使用 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- 樣式文件 以外鏈形式在此處引入 -->
<link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
</head>
<body>
<!-- 頁面主體 -->
<div class="warp">
<header>頂部內(nèi)容區(qū)域，比如：菜單頭</header>
<div class="content">主內(nèi)容區(qū)域</div>
<footer>頂部頁尾區(qū)域，比如：備案號</footer>
</div>
<!-- js文件 在此處引入 -->
<script type="text/javascript" src="//wl.jd.com/joya.js"></script>
</body>
</html>
避免多個(gè)框架混合使用，在同一個(gè)工程里面要保持主框架的一致性，多框架同時(shí)使用會(huì)造成代碼混亂，后期會(huì)變得越來越難維護(hù)。
1、全局樣式禁止使用!important
2、避免使用導(dǎo)入式引入css樣式文件；
css復(fù)制代碼<style type="text/css">
@import url(./demo.css);
</style>
歷史頁面會(huì)有一些功能下線，在去除頁面初始化的js語句的同時(shí)，也要將依賴的js文件刪除，避免資源加載浪費(fèi)
開啟Gzip壓縮功能， 可以使網(wǎng)站的css、js 、xml、html 文件在傳輸時(shí)進(jìn)行壓縮，提高訪問速度
在開發(fā)過程中，發(fā)現(xiàn)無用字段占傳輸比例30%以上時(shí)，請進(jìn)行返回?cái)?shù)據(jù)的刪減，加快數(shù)據(jù)請求速度
上傳圖片之前一定要做圖片的無損壓縮，節(jié)省網(wǎng)絡(luò)流量,推薦網(wǎng)站tinypng
html復(fù)制代碼<!DOCTYPE html>
<html>
<head>
<!-- 必須聲明 utf-8 編碼格式 -->
<meta charset="utf-8">
<!-- keywords 關(guān)鍵詞 和 Description 頁面描述 便于搜索引擎檢索，不強(qiáng)制使用 -->
<meta name="Keywords" Content=”關(guān)鍵詞1,關(guān)鍵詞2,關(guān)鍵詞3,關(guān)鍵詞4″>
<meta name="Description" Content=”頁面描述″>
<!-- 移動(dòng)端必須使用 viewport 適配需要, PC 看場景需要使用 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- 推薦手動(dòng)引入指定路徑 favicon -->
<link rel="shortcut icon" href="path/to/favicon.ico">
<!-- 樣式文件必須以外鏈形式在此處引入 -->
<link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
<!-- 內(nèi)聯(lián)樣式 -->
<style type="text/css">
.warp {
margin: 0;
padding: 0;
}
</style> -->
<!-- 頁面標(biāo)題不能為空 -->
<title>頁面標(biāo)題</title>
</head>
<body>
<!-- 頁面主體 -->
<div class="warp">
<header>頂部內(nèi)容區(qū)域，比如：菜單頭</header>
<div class="content">主內(nèi)容區(qū)域</div>
<footer>頂部頁尾區(qū)域，比如：備案號</footer>
</div>
<!-- JavaScript 文件在此處引入 -->
<script type="text/javascript" src="//wl.jd.com/joya.js"></script>
</body>
</html>
原生 HTML 標(biāo)簽元素小寫使用，自定義組件使用小駝峰命名（自定義標(biāo)簽避免和原生標(biāo)簽同名）
html復(fù)制代碼<!-- 錯(cuò)誤 ? -->
<DIV></DIV>
<SPAN></SPAN>
<!-- 正確 ? -->
<div></div>
<p></p>
<!-- 自定義組件 -->
<shareDialog><shareDialog/>
禁止在行內(nèi)元素中嵌套塊級元素??
html復(fù)制代碼<!-- 錯(cuò)誤的嵌套 ? -->
<span><div></div></span>
<i><p></p></i>
<!-- 正確的嵌套 ? -->
<div><span></span></div>
<p><i></i></p>
更多標(biāo)簽使用規(guī)則介紹請查看尾部附錄
定義屬性賦值時(shí)，使用雙引號，禁止單雙引號混用
html復(fù)制代碼<!-- 錯(cuò)誤的定義 ? -->
<input id="formTitle" type='text' placeholder="請輸入標(biāo)題">
<!-- 正確的定義 ? -->
<input id="formTitle" type="text" placeholder="請輸入標(biāo)題" data="formTitle">
除自閉合標(biāo)簽外，所有標(biāo)簽都需正確的編寫閉合標(biāo)簽
常用自閉合標(biāo)簽： <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />
ID 和 Class 取通用且有意義的名字；
使用連字符 - 作為 ID、Class 名稱界定符 ，不要駝峰命名法和下劃線；
避免選擇器嵌套層級過多，盡量少于 3 級；
使用命名空間防止命名沖突，利于維護(hù)；
css復(fù)制代碼/* 不推薦: 無意義 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
/* 推薦: 明確詳細(xì) */
#gallery {}
#login {}
.login-input {}
.meun-btn {}
css復(fù)制代碼/* 標(biāo)準(zhǔn)的聲明順序 */
.declaration-order {
/* 布局屬性 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* 盒模型屬性 */
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin: 10px;
float: right;
overflow: hidden;
/* 文本屬性 */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
/* 視覺屬性 */
background-color: #f5f5f5;
color: #fff;
opacity: .8;
/* 其他屬性 */
cursor: pointer;
}
<img/>標(biāo)簽守則
html復(fù)制代碼<!-- 禁止 src 取值為空 -->
<img src="" />
<!-- 推薦 -->
<img src="xxxx" alt="xxx" style="width:100px;height:100px;" />
尺寸 小于 50 ×?50 的請使用 字體圖標(biāo)（iconfont）或者 將多個(gè)圖標(biāo)合成一張大圖使用（雪碧圖） 尺寸大于 50 ×?50 的圖片，引入前先使用 在線壓縮 對其進(jìn)行壓縮 ，圖片大小盡量控制在 300kb 以內(nèi)
PC端、移動(dòng)端 推薦使用 2倍圖 (@2x），避免設(shè)備分辨率過高，圖片顯示失真模糊 如有兼容 iPad 場景等特殊場景，可使用 3倍圖（@3x）
html復(fù)制代碼<img src="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>
2倍圖： 圖片展示區(qū)域大小 : 圖片實(shí)際尺寸 = 1 ：2
無論使用幾倍圖，圖片大小都需遵守上條限制
如遇圖片倍圖問題，可咨詢 @UI童鞋
js復(fù)制代碼/* 推薦用變量保存頻繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
lis = document.getElementsByTagName('ul')[0].getElementsByTagName('p')
/* 推薦用變量保存頻繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
lis = ul.getElementsByTagName('li')
1個(gè)頁面中建議CSS文件不要超過3個(gè)（1個(gè)組件庫樣式文件、1個(gè)項(xiàng)目公共樣式、1個(gè)頁面樣式）； JS文件不要超過5個(gè)（1個(gè)框架文件、1個(gè)組件庫文件、1個(gè)項(xiàng)目公共庫文件、1個(gè)頁面腳本文件、1個(gè)埋點(diǎn)文件）。
縮進(jìn)使用 2個(gè)空格 樣式建議引入 CSS reset 重置各瀏覽器自帶樣式差異 github.com/necolas/nor… JS 中字符串定義 使用 '' 單引號
保持一定的代碼潔癖，尤其在大型項(xiàng)目中
性能檢測工具 - Lighthouse簡介 Lighthouse是一個(gè)Google開源的自動(dòng)化工具，主要用于改進(jìn)網(wǎng)絡(luò)應(yīng)用的質(zhì)量。Lighthouse會(huì)對各個(gè)測試項(xiàng)的結(jié)果打分，并給出優(yōu)化建議，這些打分標(biāo)準(zhǔn)和優(yōu)化建議可以視為Google的網(wǎng)頁最佳實(shí)踐。
Chrome拓展程序 谷歌商店安裝lighthouse后，在右上角或者菜單里點(diǎn)擊圖中圖標(biāo)，Options可以配置測試項(xiàng)目，點(diǎn)擊Generate report即可測試。
命令行
js復(fù)制代碼<!-- 安裝 lighthouse 組件（Node.js V5.0 或以上版本） -->
npm install -g lighthouse
<!-- 啟動(dòng)測試 （測試過程中會(huì)自動(dòng)打開 Chrome 完成后會(huì)在當(dāng)前目錄生成一個(gè)靜態(tài)HTML文件） -->
lighthouse https://www.baidu.com/ --view
<!-- 幫助-->
lighthouse --help
檢測結(jié)果
標(biāo)簽 | 語義 | 嵌套常見錯(cuò)誤 | 常用屬性 |
<a></a> | 超鏈接/錨 | a不可嵌套a | href,name,title,rel,target |
<div></div> | 塊級容器 | ||
<p></p> | 段落 | 不能嵌套塊級元素 | |
<span></span> | 內(nèi)聯(lián)容器（行內(nèi)元素） | 不可嵌套塊級容器 | |
<form></form> | 表單 | action,target,method,name | |
<input /> | 輸入框 | 不可嵌套元素 | type,name,value,checked,disabled,maxlength,readonly,accesskey |
<textarea></textarea> | 多行文本輸入控件 | name,accesskey,disabled,readonly,rows,cols | |
<img /> | 圖像 | 不可嵌套元素 | alt,src,width,height |
<label></label> | 標(biāo)簽（常用input元素定義標(biāo)注） | 不可嵌套塊級容器 | for |
<table></table> | 表格 | 只可嵌套表格子元素 | width,align,background,cellpadding,cellspacing,summary,border |
<tbody></tbody> | 表格主體 | 只能嵌套在table內(nèi) | |
<thead></thead> | 表頭 | 只能嵌套在table內(nèi) | |
<tr></tr> | 表格行 | 嵌套于table或thead、tbody、tfoot | |
<td></td> | 表格中的單元格 | 只用于tr | colspan,rowspan |
<th></th> | 表格中的標(biāo)題單元格 | 只用于tr | colspan,rowspan |
<tfoot></tfoot> | 表格表尾 | 只用于table | |
<button></button> | 按鈕 | 不可嵌套表單、表格等塊級元素 | type,disabled |
<select></select> | 列表框或下拉框 | 只能嵌套o(hù)ption或optgroup | name,disabled,multiple |
<option></option> | select中的一個(gè)選項(xiàng) | 只能嵌套在select內(nèi) | value,selected,disabled |
<ol></ol> | 有序列表 | 只能嵌套li | |
<ul></ul> | 無序列表 | 只能嵌套li | |
<li></li> | 無序列表項(xiàng) | 只能嵌套在 ul 或 ol 內(nèi) | |
<iframe></iframe> | 內(nèi)嵌一個(gè)網(wǎng)頁 | frameborder,width,height,src,scrolling,name | |
<br /> | 換行 | ||
<link /> | 引用樣式或icon | 不可嵌套任何元素 | type,rel,href |
<meta /> | 文檔信息 | 只用于head內(nèi) | content,http-equiv,name |
<script></script> | 引用腳本 | 不可嵌套任何元素 | type,src |
<style></style> | 引用樣式 | 不可嵌套任何元素 | type,media |
<title></title> | 文檔標(biāo)題 | 只用于head內(nèi) |
點(diǎn)贊收藏支持、手留余香、與有榮焉，動(dòng)動(dòng)你發(fā)財(cái)?shù)男∈謫眩兄x各位大佬能留下您的足跡。
作者：StriveToY
鏈接：https://juejin.cn/post/7262378982255394873
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
