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小時內與您取得聯系。