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