HTML5+CSS3
HTML
1. 瀏覽器內核
- 五大瀏覽器四大內核
- 瀏覽器：IE(edge), 火狐， Safari, chrome, Opera
- 內核： Trident, Gecko, webkit, chromium/Blink, blink
注1: 提到Chrome瀏覽器，一般人會認為使用的Webkit內核(移動設備多)，這種說法不完全確。Chrome發布于2008年，使用的渲染內核是Chromium，它是fork自Webkit，但把Webkit梳理得更有條理可讀性更高，效率提升明顯。2013年，由于Webkit2和Chromium在沙箱設計上的沖突，谷歌聯手Opera自研和發布了Blink引擎，逐步脫離了Webkit的影響。所以，可以這么認為：Chromium擴展自Webkit止于Webkit2，其后Chrome切換到了Blink引擎。另外，Chrome的JS引擎使用的V8引擎，應該算是最著名和優秀的開源JS引擎，大名鼎鼎的Node.js就是選用V8作為底層架構。_
注2: Opera在2013年V12.16之前使用的是Opera Software公司開發的Presto引擎，之后連同谷歌研發和選擇Blink作為Opera瀏覽器的排版內核_
2. web 標準
結構（html）, 表現（css）, 行為（JavaScript）
3. 工具
3.1 vscode
- vscode 插件
- vscode-icons 各種漂亮的圖標
- vscode-fileheader 頭部注釋 ctrl+alt+i
- Visual Studio IntelliCode 智能提示
- Regex Previewer 實時預覽正則
- Prettier - Code formatter 格式化代碼ctrl+shift+p
- Path Intellisense 智能路徑
- Path Autocomplete 自動感知目錄
- open in browser 啟動瀏覽器
- JavaScript (ES6) code snippets ES6智能提示
- HTML Snippets 智能提示HTML標簽及含義
- HTML CSS Support 智能提示CSS類名及ID
- Highlight Matching Tag 高亮顯示HTML標簽
- Guides 代碼參考線
- GitLens — Git supercharged 代碼參考線
- ESLint JS語法糾錯
- CSScomb CSS書寫順序 Ctrl + Shift + P
- Color Highlight 直觀的看見css定義的顏色
- Bracket Pair Colorizer 成對的彩色括號
- Auto Rename Tag 自動修改成對HTML標簽
- Auto Close Tag 自動開/閉HTML/XML標簽
- Vetur Vetur —— 語法高亮、智能感知、Emmet等
包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化選中代碼，兩個Ctrl需要同時按著）
3.2 sublime
-
sublime初始安裝
- 以管理員運行sublime,按Ctrl+esc調出sublime text的console
粘貼 import urllib.request,os,hashlib; h = ‘6f4c264a24d933ce70df5dedcf1dcaee’ + ‘ebe013ee18cced0ef93d5f746d80ef60’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/’ + pf.replace(’ ', ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)
-
命令面板簡單操作
- 重啟再preferrnces中最下面由各package Control就是安裝成功
- ctrl + shift + p調出命令窗口， 輸入install package
- 刪除插件remove，選擇Package: Remove package選項回車
-
激活
- 點擊Help–>Enter License
- 然后就會溫馨提示升級注冊碼，點擊取消
-
插件
- 插件emmet 快速編寫html/css
- HTML5 插件
- SublimeCodeIntel代碼提示
-
快捷鍵與設置
- 分屏 alt + shift + 1,2,3,4,5,8,9(單屏，2豎屏，3豎屏，4豎屏， 2橫屏，3橫屏， 分4屏)
- 取消右邊代碼縮略圖 view - hideMiniMap
- ctrl + enter 下一行插入
- ctrl + shift + enter上一行插入
- shift + ctrl + [ 折疊代碼塊
- shift + ctrl + ] 打開代碼塊
- ctrl + k + 0 展開所有的代碼塊
- ctrl + alt + ↑↓ 添加多行光標，同時編輯多行
- ctrl + shift + L 選中代碼同時編輯
- ctrl + f 搜索
- ctrl + g 輸入 :xx(冒號與所在的行)
-
自定義快捷鍵
ctrl + shift + p 輸入key，選擇preferences: key Bindings,找到快捷鍵的代碼，復制放到右邊，該快捷鍵就行- ctrl + down 復制到下一行
- alt + up 向上移動代碼
- alt + down 向下移動代碼
- ctrl + d 刪除整行
-
問題
- There are no packages available for installation
解決:打開Sublime Text,然后點擊Preferences->Browse Packages…,進入Sublime Text的packages的目錄,然后將文件channel_v3.json(網盤有)拷貝到目錄文件User旁邊,接著修改Package Control的用戶配置，點擊Preferences->Package Settings->Package Control->Settings – User，新增或者修改”channels”的配置信息，其路徑為channel_v3.json文件的路徑：
- There are no packages available for installation
4. HTML
4.1 HTML基本結構
<!DOCTYPE HTML><!--這句是聲明,告訴瀏覽器請使用H5標準來解析這個網頁--><!--整個網頁,相當于整個人一樣,en：英文 zh-CN： 中文--> <HTML lang = "en"><!--網頁的頭,這里的信息是對整個網頁的說明,就像一個簡單的網頁自我介紹--><head><!--網頁使用的字符集,相當于你是哪里人gb2312簡體中文BIG5繁體中文GBK包含全部的中文，是GB2312的擴展，加入對繁體字的支持，兼容GB2312UTF-8基本包含全世界多有國家需要用到字符--><meta charset = "UTF-8"><!--網頁的標題,名字--><title>我是標題</title></head><!--網頁的身體,網頁所有的精華所在,內容都是寫在這--><body><center>文字內容居中</center><button>我是一個按鈕</button></body> </HTML>- HTML是超文本標記語言(Hyper Text Markup Language)用來描述網頁的一種語言
- HTML不是編程語言，而是一種標記語言
4.2 XHTML
- XHTML是更嚴格更純凈的HTML代碼
- XHTML指可擴展超文本標記語言(Extensible HyperText Markup Language)
- XHTML的目標是取代HTML
- XHTML與HTML4.01幾乎相同
- XHTML是作為一種XML應用被重心定義的HTML
- XHTML是一個w3c的標準
- XHTML得到所有瀏覽器的支持
4.3 HTML頭部
<head></head>標簽包含所有的頭部標簽
- head區域標簽
-
<title>
-
網站名(產品名) - 網站介紹
-
小米商城 - 小米9 Pro、小米MIX Alpha、Redmi Note 8，小米電視官方網站
京東(JD.COM)-正品低價、品質保障、配送及時、輕松購物！
-
定義瀏覽器工具欄的標題
-
在網頁添加到收藏夾時,顯示在收藏夾中的標題
-
顯示在搜索引擎結果頁面標題
-
-
<style>
- 定義HTML樣式引用地址
- @import指令: @import url(css1.css); 必須放在其他CSS的前面,鏈接的雙引號可選
-
<meta>
- 被用于頁面的描述,關鍵詞,文檔的作者,最后修改的時間和其他元素
- 為搜索引擎定義關鍵字 6-8個關鍵字
- <meta name = “keywords” content = “HTML,CSS,XML,XHML,JavaScript/”>
- 為網頁定義描述內容,不超過120個漢字
- <meta name = “description” content = “Free Web tutorials on HTML, CSS, XML”>
- 定義網頁的作者
- <meta name = “author” content = “userName”>
-
<link> 鏈接外部樣式表
- rel(relation) = “icon” 規定文檔與被鏈接文檔之間的關系,這個是圖片關系,可自定義,一般stylesheet
- alternate stylesheet僅當擁護自己選擇,文檔才會使用候選樣式表渲染
- 候選樣式表在瀏覽器–>查看–> 頁面樣式–>就會有選項,我沒有找到
- title = “Default”,一旦rel的stylesheet的link元素設置了title就是首選樣式表,它要優于候選樣式表,顯示文檔默認使用,如果有一組則會觸發一個,不設置標題則為永久樣式表
- sizes = "xx * xx"規定鏈接的尺寸
- href = “… .cn” : 鏈接地址或路徑
- type = “text/css”/“text/JavaScript”: 規定被鏈接的類型
- charset = "utf-8"規定被鏈接文檔的字符編碼方式(HTML5不支持)
- media,它的值是一個或多個多媒體描述符(media descriptor),指明媒體的類型和具有的功能,多個多媒體類型與逗號隔開
- <link charset = “utf-8” rel = “stylesheet” type = “text/css” href = “…/CSS/頁面CSS.css”>
- rel(relation) = “icon” 規定文檔與被鏈接文檔之間的關系,這個是圖片關系,可自定義,一般stylesheet
-
<script>
- async 規定異步執行腳本（僅適用于外部腳本）
- defer 延遲腳本
- <script type = “text/javascript”>
- <script charset=“utf-8” src=“https://www.baidu.com/” async = “async”></script>
-
<base>
- 為頁面上所有鏈接規定默認地址或默認目標(target)
- <base href = “www.baidu.com” target="_blank _self _parent _top">
-
4.4 排版標簽
h$(1-6) ,p , hr, br ,div ,space
4.4.1 標題標簽
h1 - h6文字逐漸變小，但是字體加粗了；一般用于標題，h1文字最大，一般用于主標題
**注：**01標題demo.html里面有示例
4.4.2 段落標簽
<p> 內容區域 </p> 文章分段，屬于雙標簽
4.4.3 水平線標簽
<hr /> 屬于單標簽
4.4.4 換行標簽
<br /> 屬于單標簽
**注意：**換行標簽與段落標簽的區別，換行標簽，另起一行，上下行間隔小；段落標簽，另起一段，上下換大一些
4.4.5 div和span標簽
div和span詩沒有語義的，div屬于塊元素；span屬于行內元素（內聯元素）
4.5 HTML格式化
<b></b> <strong></strong> 文字加粗(XHTML推薦strong)
<i></i> <em></em> 文字傾斜（XHTML推薦em）
<s></s> <del></del> 文字加刪除線，不贊成使用s,使用del代替
<u><\u> <ins><\ins> 為名字加下劃線，不贊成使用u，使用樣式ins代替
注意： <b>只是單純的加粗；<strong>除了加粗還有強調語句
| <b> | 定義粗文本 | <code> | 定義計算機代碼 | <abbr> | 定義縮寫 |
| <big> | 定義粗文本 | <kdb> | 定義鍵盤碼 | <acronym> | 定義首字母縮寫 |
| <em> | 定義著重文字 | <samp> | 定義計算機代碼樣本 | <address> | 定義地址 |
| <i> | 定義傾斜文字 | <tt> | 定義計算機代碼 | <bdo> | 定義文字方向 |
| <small> | 定義小號文字 | <var> | 定義變量 | <blockquote> | 定義長的引用 |
| <strong> | 定義加重語句 | <pre> | 定義預格式文本 | <q> | 定義短的引用 |
| <sub> | 定義下標字 | <cite> | 定義引用引證 | ||
| <sup> | 定義上標字 | <dfn> | 定義一個定義項目 | ||
| <ins> | 插入字 | ||||
| <del> | 定義刪除字 |
注：01標題demo.html里面有pre的示例與解釋
4.6 標簽屬性
<標簽名 屬性1 = “屬性值1” 屬性2 = “屬性值2”…>內容</標簽名>
<p width = "20px" height = "30px" border ="1">I</p>4.7 HTML圖像
語法： <image src = “url” />
| src | URL | 圖片路徑 |
| alt | 文本 | 圖像不能顯示時替換的文本 |
| title | 文本 | 鼠標懸浮圖片顯示的信息 |
| width | 像素(XHTML不支持百分比) | 設置圖片的寬度 |
| height | 像素(XHTML不支持百分比) | 是指圖片的高度 |
| border | 像素 | 設置圖片邊框 |
4.8 HTML鏈接
語法：<a href = “跳轉目標” target = “目標窗口彈出的方式”>Link text</a>
- 通過a標簽在HTML中創建鏈接,有兩種方式
- 方式一: 通過href屬性-創建指向另一個文檔的鏈接
- targer:窗口彈出方式
- -blank: 新頁面打開
- -self: 在原窗口打開(默認)
- -parent: 父級窗口打開,如果,沒有父級窗口就和_self一樣
- -top: 將會清除所有包含子框架,并將文檔整入整個瀏覽器中
- 方式二: 通過name屬性-創建文檔內的書簽(跳)
4.8.1 鏈接與target
- <a>
- href屬性: 創建指向另一個文檔鏈接(#空鏈接)/路徑，
- name: 創建文檔內標簽
<a href = “url” target = “_blank”>Link text</a>
<a href = "https://www.baidu.com/">百度</a>4.8.2 name || id屬性
name(id)屬性規定錨: 使用錨我們可以創建直接跳至該命名的錨的鏈接,這樣就無須滾動了,比如商場向下滾動,會有個回到頂部的箭頭
<a name = “tips”>錨(顯示頁面上的文本)
<a name = “#tips”>回到頂部
注意: 請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：href=“http://www.w3school.com.cn/html”，就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址，然后創建一個新的請求，就像這樣：href=“http://www.w3school.com.cn/html/”
4.9 注釋
<!--Header--> 內容區 <!--End Header-->4.10 路徑
路徑分為相對路徑和絕對路徑
相對路徑: 相對當前的文件的路徑， …/上一級
絕對路徑：從盤符開始詳細的指定文件
4.11 HTML表格
| <table> | 定義表格 |
| <tr> | 定義表格行 |
| <th> | 定義表格表頭,內容居中加粗 |
| <td> | 定義表格單元 |
| <caption> | 定義表格標題，在表格上面內容相對于居中 |
| <colgroup> | 定義表格列的組 |
| <col> | 用于表格的屬性 |
| <thead> | 定義表格的頁眉 |
| <tbody> | 定義表格的主體 |
| <tfoot> | 定義表格的頁腳,一般總結 |
- <colgroup span = “6” width = “100px”>
- <colgroup span = “1” width = “200px”>
- <col width = “100px”>
- <col width = “100px”>
- <col width = “100px”>
- <col width = “100px”>
- <col width = “100px”>
- <col width = “100px”>
- <col width = “200px”>
- 屬性:
- width = “100px”
- border = “1px”
- cellspacing = “0”
- cellpadding = “0”
- align = “left/center/right”
- colspan = “7”
- rowspan = “4”
- border-collapse: collapse; 在table里面設置這個合并單元格
<span style="color = “red;”>注： 02表格demo01/02/03有表格示例
4.12 HTML列表
4.12.1 無序列表
標簽: <ul> <li>
屬性:type=“dicel(實心圓) || circle(空心圓) || square(方塊)”
注意:ul嵌套最外層默認是實心圓,然后嵌套是空心圓,然后一直是實心方塊,ol嵌套不受影響
示例：03無序列表demo01.html
4.12.2 有序列表
標簽 <ol> <li>
屬性reversed: 倒序
屬性strat = “value”: 從value開始
屬性type = “value”: 順序類型
示例：04有序列表demo01.html
4.12.3 自定義列表
標簽 <dl> <dt> <dd>
示例：05自定義列表demo01.html
注意:去掉列表前面的符號,可以使用CSS屬性(list-style : none)
4.13 HTML表單
<form method = “post(表單提交數據) || get(表單獲取數據)”>
action屬性: 提交表單時執行的動作,通常會提交到web服務器的網頁
method屬性: 規定在提交表單時所用的 HTTP 方法,(get,post)
name屬性: 如果要正確地被提交，每個輸入字段必須設置一個 name 屬性
- get與post區別:
- get請求通常表示獲取數據
- post請求通常表示提交數據
- get請求發送的數據都寫在地址欄上,用戶可見
- post請求發送的數據用戶不可見注
- get請求不能提交大量數據,但是post可以,因此不要混用
注: post請求在隱藏起來了,上方鏈接欄沒有,需要F12(右擊檢查)–>netWork–>Name–>第一個www.baidu.com點擊–>Headers–>最下面的Form Date就顯示了提交的信息
- <form>
- <input> 輸入,單標簽
- type 屬性
- "text"文本輸入框
- "password"密碼輸入框
- “button” 按鈕
- “submit” 提交按鈕
- “reset” 重置按鈕
- "“file” 文件框
- "radio"單選框
- “checkbox” 復選框
- “image” 圖像形式的按鈕組，必須有src
- “email” 限制用戶輸入必須為Email類型(H5)
- “url” 限制用戶輸入必須為url類型(H5)
- "date"限制用戶輸入必須為time類型(H5)
- "month"限制用戶輸入必須為月類型(H5)
- "week"限制用戶輸入必須為周類型(H5)
- "number"限制用戶輸入必須為數字類型(H5)
- “tel” 限制用戶輸入必須為手機號碼類型(H5)
- “search” 搜索框(H5)
- "color"生成顏色表單(H5)
- name 屬性(自定義名稱)，用于區分表單，后臺使用
- value 在按鈕上顯示文字或者輸入框的內容
- checked 默認選擇，單選按鈕和復選按鈕有
- size input默認在頁面中顯示的長度
- maxlength允許控件輸入最多的字符
- required: required; 表單的屬性不能為空,必填(H5)
- enctype: multipart/form-data; 將表單數據編寫成二進制形式,用戶上傳圖片之類
- placeholder: 提示文本(占位符); 表單的提示信息,存在默認值將不顯示(H5)
- autofocus: autofocus; 自動聚焦屬性,頁面加載完成自動聚焦到表單(H5)
- autocomplete當用戶在字段開始鍵入時,瀏覽器基于之前鍵入過的值,應該顯示出在字段中填寫的選項,需要在表單內同時加上name屬性,同時提交成功(H5)
- off
- on(默認打開)
- multiple: multiple可以多選文件提交(H5)
- type 屬性
- <label>: 點擊文本就會觸發表單,比input改進
- for
- id
- <fieldset>: 包含一組相關的表單元素,并使用邊框包起來
- <textarea>: 文本域
- cols: 寬度2
- rows: 高度 1
- resize:none; 不可拖動
- <legend>: 定義一個<fieldset>標題
- <select>: 定義下拉列表
-
<optgroup>: 定義下拉列表標題(不可選)
- label: 禁用這一組不可選<optgroup label = “”>
-
<option>:定義下拉列表標題的子元素(可選)
-
selected: 打開默認顯示這一個子元素,一般顯示第一個
-
disabled: 不可選
-
-
- <input> 輸入,單標簽
**實例:**06表單demo01
4.14 HTML框架
4.14.1 結構框架
- <frameset>框架結構標簽
- <frame>框架標簽
- <noframes>不支持框架的瀏覽器
可以拖動邊框來改變大小。避免這種情況發生，可以在 <frame> 標簽中加入：noresize=“noresize”。
不能將 <body> 標簽與 <frameset> 標簽同時使用！不過，假如你添加包含一段文本的 <noframes>標簽，就必須將這段文字嵌套于 <body> 標簽內
注意:07結構框架demo01
4.14.2 內聯框架
- <iframe>用于在網頁內顯示網頁
- width: 寬度
- height: 高度
- frameborder =“0”;設置框架邊框為0
- name與target 內聯跳轉鏈接
- iframe可用作鏈接目標
- 鏈接的target屬性必須引用iframe的name屬性
- 語法: <iframe src = “URL” frameborder=“0” width=“200” height=“200”></iframe>
注意:08內聯框架demo01,里面有一點注意事項,建議看一下
5. CSS
5.1 CSS概念
CSS(Cascading Style Sheet):通常稱為CSS樣式表"層疊樣式表"或"級聯樣式表",是一組格式設置規則,核心優勢是可以為文檔中某種類型的元素全部應用相同的規則
5.2 CSS書寫位置
- 外部樣式
- <link rel=“stylesheet” type=“text/css” href=“mystyle.css” />
- style type=“text/css”> @import url(mystyle.css);</style>
- 注意@import外接樣式必須第一行
- 內部樣式(內嵌樣式表)
- <style type=“text/css”></style>
- HTML5中type="text/css"可以省略
- style標簽可以放在任何一個地方,建議放在head里面,title之下
- <style type=“text/css”></style>
- 行內樣式
- <p style=“color: sienna; margin-left: 20px”></p>
5.3 CSS選擇器
- CSS選擇器
- * 通用選擇器: 會匹配頁面所有的元素,降低頁面的響應速度,不建議隨便使用
- div 標簽選擇器(派生選擇器)
- # id選擇器
- . 類選擇器,可以多寫
- [] 屬性選擇器(CSS2)
- E[att] 屬性選擇器 --> E標簽(元素), att 標簽行內塊里面的的屬性
- E[att = “val”] 選擇器具有att屬性且屬性值等于val的E元素
- E[att |= “val”] 選擇元素有att屬性,值以val或val-開頭的元素
- E[att ~= “val”] 選擇元素有att屬性,其中以空格分隔val,例:att=“one val"或者"val one”
- E[att ^= “val”] 匹配具有att屬性,且值以val開頭的E元素
- E[att $= “val”] 匹配具有att屬性,且值以val結尾的E元素
- E[att *= “val”] 匹配具有att屬性,且值中含有val的E元素
- E[att $= “val” i] 匹配元素不區分大小寫,在結束方括號前加i個
注意: 類選擇器名是可以重復的,ID選擇器的名字不能重復
- CSS 優先級與權重值,最高權重,在屬性值的后面添加!important
- 行內樣式(1000) > ID選擇器(100) > 類選擇器(10) = 屬性選擇器(10) = 偽類選擇器(10) > 偽元素 = 標簽選擇器(1) > 通用選擇器(0)
- 選擇器選擇的范圍越小越精確,優先級越高
**實例:**09基本選擇器demo01.html
5.4 選擇符
- 后代選擇符: 父類 子類{};
- 例: h1 em{} --> h1標簽下的所有em標簽,沒有距離可言,對孫子元素及以下都起作用
- 子元素選擇符: 父類>子類{};
- 例: h1>em{} --> h1標簽第一層級子元素em的所有標簽,對孫子及以下不起作用
- 兄弟選擇符:ul + ol {}; 同一級必須相鄰元素,生效的是后面的弟弟元素ol
- 相同標簽第一個不會生效,后面全生效
- 同胞連接符: h1 ~ h2{ } h1后面的所有h2元素全生效,只限于同級
5.5 偽類選擇符
- : root 選擇根元素
- html文檔中所有元素的根元素的html元素
- : empty 空選擇標簽
- 沒有任何子代標簽,文本節點,空格,換行符,里面可以是注釋,對img,input,textarea也生效
- : only-child 唯一子代標簽(可以是后代),選擇的那個后代元素必須是父類獨生子
- p span:only-child{} -->p標簽里面的只能有一個span標簽,其他標簽都不行,span必須我是獨生子
- only-of-type 表示父元素有很多子元素,而且在子元素里面其中有一個是唯一的
- : first-child 選擇父元素(同胞)中第一個子元素,不可以指定類型
- : last-child 選擇父元素(同胞)中最后一個子元素,不可以指定類型
- :first-child:last-child{} === only-child{}
- : first-of-type 選擇父元素中第一個相同的子元素,可以指定類型
- 例 span: first-of-type 指定父(同胞)元素下的第一個span元素
- :last-of-type 選擇父元素中最后一個相同的子元素,可以指定類型
- :first-of-type:last-of-type{} === :only-of-type{}
- :nth-child(n可以使數字,公式,關鍵字:even(偶數) odd(奇數))
- :first-child == :nth-child(1)
- : nth-last-child(n) 從一組同胞元素的最后一個開始往前算
- :nth-child(1):nth-last-child(1) === :only-child
- :nth-of-type() 從前開始選擇同胞元素
- :nth-last-of-type() 從后向前的同胞元素中選擇
- :nth-of-type(1):nth-last-of-type(1) === :only-of-type
5.5 動態偽類
超鏈接偽類
- :link 未訪問鏈接,和所有的超鏈接
- :visited 已訪問的超鏈接
用戶操作偽類
- : focus 獲取當前輸入焦點元素,如表單元素,可編輯內容的元素
- : hover 當鼠標指針懸浮在元素上
- : active 當用戶輸入激活的元素,按下的時刻
順序: link --> visited --> focus --> hover --> active
5.6 UI狀態偽類
-
:enabled 啟用的用戶界面元素(表單元素),接收輸入元素
-
:disabled 禁用用戶界面元素,不接受輸入元素
-
:checked 用戶或文檔默認選中的單選按鈕或復選框
-
:indeterminate 沒有選中的單選框或者復選框,這個狀態只能由DOM腳本設定,不能用戶設定
-
:default 默認選中單選按鈕,復選框或選項
-
:valid 滿足所有數據的有效性語義的輸入框
-
:invalid 不滿足所有數據有效性語義的輸入框
-
:in-range 輸入的值在最小值與最大值之間的輸入框
-
:out-of-range 輸入的值小于空間允許的最小值或大于空間允許的最大值的輸入框
-
:required 必須輸入值的輸入框
-
:optional 可選輸入值的輸入框
-
:read-write 用戶編輯輸入框
-
:read-only 不能由用戶編輯的輸入框
5.7:target偽類
URL中有個片段標識偽類,它所指向的是文檔片段稱為目標(target).URL片段標識符指向的目標元素可以使用:target偽類裝飾
片段標識符: https://www.baidu.com/#target-pseudo
這個url中的target-pseudo部分就是片段標識符,由#符號標記
借助這個元素可以可以顯示文檔中任何目標元素或者為不同的目標元素定義不同的樣式; 例如: a:target{color: red},對id = "target-pseudo"也會生效
偽類定義的樣式在兩種請款下不會應用
- 頁面的URL中沒有片段標識符
- 頁面的URL中有片段標識符,但是文檔中沒有相匹配的元素
5.8 :lang偽類
使文本選擇語言選擇符,可以使用:lang()偽類,在匹配方式上,:lang()與偽類與 |= 屬性選擇符類似;偽類選擇符與屬性選擇符之間的主要區別是語言信息有多個來源,有時可能來自元素本身之外.對屬性選擇符而言元素自身必須有lang屬性才能匹配,而:lang偽類能匹配設定語言的元素后代
在HTMl中語言可以通過lang屬性判斷,也可以通過meta元素和協議(HTTP)判斷.XML使用xml:lang屬性,還有可能有文檔語言專用方法
:lang偽類可以使用各種信息,而 |= 屬性選擇符只能用于標記中有lang屬性元素,因此偽類比屬性選擇符更可靠
*:lang(fr){font-style: italic; } *[lang |= "fr"]{font-style: italic; }5.9 否定偽類
:not(選擇符),否定可以連寫
*.link:not(li):not(p){/*class屬性包含link這個詞,但不是li或p的所有元素*/ }5.10 偽元素選擇符
在文檔中插入虛構的元素,偽類 ’ : ’ ;偽元素’ :: ’
::first-letter和::first-line只能用于塊級元素上
1. 裝飾首字母
::first-letter{ color: red;}
常用于首字母大寫,或者首字母下沉
第一種: <!--每個p元素的首字母比其余內容大兩倍,不過最好應用第一段 --> p:first-of-type::first-letter{font-size: 200%;}第二種: <!--::first-letter樣式之應用于元素的內容里,<p-first-letter>元素不會出現在文檔的源代碼里面,也不會出現在DOM中,而是由用戶動態構建,目的是把::frist-letter樣式應用到文本中--> <p><p-first-letter>T</p-first-letter>his is a p element, with a styled first <p>2. 裝飾首行
::first-line
常用于裝飾首行文本
第一種: <!--這個樣式應用到每個p的第一行文本--> p::first-line {color: red; } 第二種: <!----> <p><p-first-line>T</p-first-line>his is a p element, with a styled first <p>3. 創建前置和后置內容元素
前置 ::before
后置 ::after
/*在h2元素前面添加HELLO并且為紅色*/ h2::before{content: "HELLO"color: red; }- before與after必須有content屬性,會創建一個元素,屬于行內元素
- 作用在字體圖標可以content: '\ea50’和’口’都可以,一般ea50
- 可以用于清除浮動
5.11 CSS背景
background: url() no-repeat 5px center;/后面兩個元素是背景定位/
-
background 背景
- color: #234; 背景顏色
- image: url(https://www.baidu.com/image/); 背景圖片
- image:url(file:///C:/Users/a4244/Desktop/MD/59.png);背景圖
- repeat:背景圖片重復
- repeat-x(水平)
- repeat-y(縱向)
- no-repeat(不平鋪);
- position: 背景定位
- center
- top
- bottom
- right
- left
- 50% 50%
- 50px 50px
- attachment: 固定的背景圖像
- scroll(默認值,隨內容一起滾)
- fix(頁面滾背景不滾)
- inherit(繼承父元素)
- rgba(255,255,255, .5) (背景半透明)
科普:背景圖片與插入圖片的區別
1.插入突變用的最多,比如產品展示,移動位置只能靠盒子模型padding margin
2.背景圖片我們一半用于小圖標背景或者超大背景圖片,背景圖片只能通過background-position
5.12 CSS字體
font: italic bold 10px/35px arial, sans-serif,“微軟雅黑”(斜體字 加粗 字體大小/行高 默認字體,備用字體,“微軟雅黑”); font-size;font-family屬性必須寫,其他可選
- font 字體
-
family 定義字體系列
- arial,sans-serif,“宋體”,“微軟雅黑”(如果沒有就會一直向后找,如果都沒有就會默認)
-
style 字體風格
- normal(標準)
- italic(斜體)
- oblique(傾斜)
- none(關閉所有風格)
-
variant 字體變形
- normal(默認值,瀏覽器會顯示一個標準字體)
- small-caps(瀏覽器會顯示小型大寫字母的字體)
- inherit(繼承父類)
-
weight 文本加粗
- normal(默認值,定義標準字符)
- bold (定義粗體)
- bolder (定義更粗的字符)
- lighter (定義更細的字符)
- 100-900,400默認值,700(bold)
-
size 字體大小,默認16px,瀏覽器各不相同,最好自定義
- xx-small,x-small,small,medium(默認),large,x-large,xx-large(字體尺寸從小到大)
- smaller (比父元素更小)
- larger (比父元素更大)
- length(一個固定的值或者百分比)
- inherit (繼承父類)
-
font-kerning字距
- auto 用戶自動調整
- normal 正常
- none 忽略
-
@font-face 自定義字體
惰性加載字體,指定文本渲染時才會加載
把下載字體包,解壓,把里面的font文件夾放到網頁文件夾的fonts里面
<style>@font-face {/*聲明字體引用字體*/font-family: "icomoon"; /*icomoon官網的名字,可自定義*/src: url('fonts/icomoon.eot?7kkyc2');src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?7kkyc2') format('truetype'),url('fonts/icomoon.woff?7kkyc2') format('woff'),url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');font-weight: normal;font-style: normal;/*傾斜字體變正常*/}span {font-family: "icomoon";}/*或者*/span::after{content: '口';font-family: "icomoon";}/*或者*/span::after{content: '\ea50';/*右邊小口左邊的字碼*/font-family: "icomoon";} </style> <body><!--打開下載字體文件夾中的demo.html,選中需要的,點擊下面的右下角的小口,點擊復制粘貼到span,就可以啦--><span>口</span> </body>追加字體圖標,在網站上點擊import icons(導入icons),選中下載的文件夾中的下來的selection.jsonselection.json就可以
-
CSSUnicode字體
在CSS中設置字體名稱,直接寫中文是可以的,但是在文件編碼(GB2312,UTF-8等)不匹配時會產生亂碼的錯誤,XP系統不支持類似的字體中文
解決:
方案一:用英文代替, 比如: font-family: “Microsoft Yahei”
方案二: 在CSS中直接使用Unicode編碼來寫字體名稱可以避免這些錯誤,使用Unicode寫中文字體名稱,瀏覽器會正確的解析
-
| 宋體 | SimSun | \5B8B\4F53 |
| 新宋體 | NSimSun | \65B0\5B8B\4F53 |
| 黑體 | SimHei | \9ED1\4F53 |
| 微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷體_GB2312 | KaiTi_GB2312 | \6977\4f53_GB2312 |
| 隸書 | LiSu | \96B6\4e66 |
| 幼圓 | YouYuan | \5E7C\5706 |
| 華文細黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 細明體 | MingLiU | \7EC6\660E\4F53 |
| 新細明體 | PMingLiU | \65B0\7EC6\660E\4F53 |
| <em></em> | 傾斜 | 添加傾斜 | font-style: italic |
| <i></i> | 取消傾斜 | font-style: normal | |
| <strong></strong> | 加粗 | 添加加粗 | font-weigth: 700(bold) |
| <b></b> | 取消加粗 | font-weigth: 400(normal) | |
| <u></u> | 下劃線 | 添加下劃線 | text-decoration: underline |
| <ins></ins> | 刪除下劃線 | text-decoration: none | |
| <s></s> | 刪除線 | 添加刪除線 | text-decoration : line-through |
| <i></i> | 取消刪除線 | text-decoration : none |
5.13 CSS文本
- text 文本
- indent: 5em(可以負值,百分比,像素值); 首行縮進
- 1px = 16em,一個em就是一個字的距離
- align: 文本對齊
- left(左對齊)
- right(右對齊)
- center(居中對齊)
- justify(兩端對齊)
- inherit(看父元素)
- spacing: 字符間距
- normal (默認值,和0一樣)
- length(可正可負)
- inherit (看父元素)
- transform 處理文本大小寫
- none(默認)
- uppercase(全轉為大寫)
- lowercase(全轉為小寫)
- capitalize(首字母大寫)
- decoration 文本裝飾,可以多個屬性值一起寫
- none(關閉所有裝飾)
- underline(文本加下劃線)
- overline(文本頂端加下劃線)
- line-through(文本中間畫貫穿線)
- blink (文本閃爍)
- indent: 5em(可以負值,百分比,像素值); 首行縮進
- direction: 文本方向
- ltr (默認.文本方向從左到右)
- rtl (文本方向從右到左)
- inherit (繼承父類)
- white-space(處理空白字符)
- pre-line(合并空白符,保留換行符,允許自動換行)
- normal (合并空白符,忽略換行符,允許自動換行)
- nowrap (合并空白符,忽略換行符,不允許自動換行)
- pre (保留空白符,保留換行符,不允許自動換行)
- pre-wrap(保留空白符,保留換行符,允許自動換行)
- a 鏈接狀態(按照這個順序不能換)
- a:link {color:#FF0000;} (未被訪問的鏈接)
- a:visited {color:#00FF00;}(已被訪問的鏈接)
- a:hover {color:#FF00FF;} (鼠標指針移動到鏈接上)
- a:active {color:#0000FF;} (正在被點擊的鏈接)
- line-height (行高,行間距)
- color (文本顏色)
5.14 CSS盒子模型
- 盒子邊距
- margin: (top,right,bottom,left)盒子的外邊距,會重疊合并(盒子塌陷)
- padding: (top,right,bottom,left)盒子邊框內邊距,會撐開盒子(子盒子沒有寬度,不會撐開)
- 盒子邊框
- border-style:(border-top/right/bottom/left-style)邊框樣式
- none(無邊框)
- hidden(與 “none” 相同。不過應用于表時除外，對于表，hidden 用于解決邊框沖突)
- dotted(點狀邊框,很細,密密麻麻的點,有的瀏覽器直接實現實現)
- dashed(定義虛線,有的瀏覽器也會顯示實線)
- solid(實現)
- double(雙線)
- groove(定義 3D 凹槽邊框。其效果取決于 border-color 的值)
- ridge(定義 3D 壟狀邊框。其效果取決于 border-color 的值)
- inset(定義 3D inset 邊框。其效果取決于 border-color 的值。)
- outset(定義 3D outset 邊框。其效果取決于 border-color 的值)
- dotted solid double dashed(上 右 下 左)
- dotted solid double(上 左右 下)
- dotted solid(上下 左右)
- dotted(上下左右)
- border-width: (border-top/right/bottom/left-width)邊框寬度
- thin(細邊框)
- medium(默認中等邊框)
- thick(定義粗邊框)
- length(自定義邊框寬度)
- inherit(繼承父類)
- border-color: (border-top/right/bottom/left-color)邊框顏色
- transparent(默認值,邊框透明)
- inherit(繼承父類)
- border-radius: 50%(圓) || 1px (圓角邊框)(CSS3)
- 圓角矩形,按照下面的順序寫 border-radius: 左上 右上 右下 左下;
- border-top-left-radius 左上角圓弧
- border-top-right-radius右上角圓弧
- border-bottom-right-radius 右下角圓弧
- border-bottom-left-radius 左下角圓弧
- border-collapse
- collapse: 表格邊框合并是1+1=2,變粗,然后使用這方法相鄰邊框合并在一起
- separate: 表格邊框合并是1+1=2
- inherit
- box-shadow盒子陰影(按照這順序可以連寫)(CSS3)
- h-shadow(必須,水平x軸陰影位置,允許負值)
- v-shadow(必須,垂直y軸陰影的位置,允許負值)
- blur(可選,模糊陰影,數值越大越模糊)
- spread(可選,陰影大小)
- color(可選,陰影的顏色)
- inset(默認外部陰影,修改為內部陰影;注意外部陰影不能寫)
- border-style:(border-top/right/bottom/left-style)邊框樣式
box-shadow:0 2px 4px rgba(0,0,0,.2);
科普1:盒子居中
盒子水平居中要滿足兩個條件1.必須指定寬度;2.然后給左右兩個外布局設置為auto
寫法一: margin-left: auto; margin-right: auto;
寫法二: margin: auto;因為上下auto是沒有用的
寫法三: margin: 0 auto;
科普2:邊距
行內元素上下外邊距設置沒用,低版本IE設置內邊距也沒用,為了兼容性盡量寫左右內外邊距,不要寫上下
5.15 盒子塌陷解決辦法
- overflow: 內容溢出元素框時,發生的事情
- visible(默認值。內容不會被修剪，會呈現在元素框之外)
- hidden (內容會被修剪，并且其余內容是不可見的)
- scroll (一直顯示滾動條，超出部分滾動可見)
- auto (當超出元素框后，顯示滾動條，超出部分滾動可見)
- inherit(規定應該從父元素繼承 overflow 屬性的值。)
5.16 標簽顯示模式(display)
-
塊級元素 (block-level)
- 特點: 寬度默認獨占一行(100%)
- div,p,h1-h6,ul,li,ol,form,table等
-
行內元素 (inline-level)
- 特點: 寬高無效,默認內容的寬高,所有內容排在一排
- a,strong,b,em,i,del,s
-
行內塊 (lnline-block)
- 行內元素只能放行內元素,(float,絕對定位,固定定位都會把標簽轉為行內塊)
- 既能設置寬高大小,又能排在一排顯示
- img,input,td
-
模式轉換
- 塊轉行內: display:inline
- 行內轉塊: display: block
- 塊與行內 轉成行內塊: display: inline-block
5.17 盒子布局的三種機制
網頁布局的核心-就是用css布局
css提供三種機制來設置盒子的擺放,分別是普通流(標準流),浮動和定位
-
普通流(標準流);
-
塊級元素會獨占一行,從上向下順序排列
- 常用元素: div, hr, p, h1-h6, ul , ol ,dl ,form, table
-
行內元素會按照順序,從左到右順序排列.碰到父元素就會換行
- 常用元素: span, a, i, em等
-
-
浮動
- 讓盒子從普通流中浮起來,主要作用是讓多個盒子一行顯示
-
定位
- 將盒子定在瀏覽器的某一個位置–css離不開定位,特別是后面的js特效
5.18 浮動
float: left(左浮動123) || left(右浮動321)||none無浮動
- 浮動元素重疊問題
- 浮動不會覆蓋文字內容
- 浮動不會覆蓋圖片內容
- 浮動不會覆蓋表單內容
- 任何元素都可以浮動,無論它本身是什么元素.浮動起來就是塊級框(和行內塊相似)
- 浮動只會影響當前或者后面的標準流盒子,不會影響到前面的標準流
5.19 清除浮動
? 很多情況下,父盒子不方便給高度,但是子盒子浮動就不占位置,最后父級盒子高度為0,就會影響到下面的盒子
? 清除浮動主要是為了解決父級元素因為子級浮動引起內部高度為0的問題,清除浮動后,父級就會根據浮動的子盒子自動檢測高度,父級就有了高度,就不會影響下面的標準流了
語法: 選擇器 { clear: left/ right/ both}/清除左側 /右側 / 左右兩側的浮動/
- 清除浮動有四種方法
方法一:額外標簽法
w3c推薦的做法: 通過浮動元素,末尾添加一個空標簽,例如<div style = “clear:both”></div>
優點: 通俗易懂,書寫方便
缺點: 添加許多無意義的標簽,結構差
示例10: 清除浮動之額外標簽法demo01.html
方法二: 父級添加overflow屬性的方法
可以給父級添加: overflow: hidden | auto | scroll都可以實現
優點: 代碼簡潔
缺點: 內容增多時候容易造成不會換行導致內容被隱藏掉,無法顯示需要溢出的元素
示例11: 清除浮動之overflow demo01.html
方法三: 使用after為元素清除浮動優點: 符合閉合浮動思想
缺點: 由于IE6,7不支持: after,使用zoom:1觸發hasLayout(百度,淘寶,網易等都有)
示例12: 清除浮動之單偽元素demo01.html
方法四: 雙為元素清除浮動
.clearfix:before, .clearfix:after {display: table;content: ""; } .clearfix:after{clear: both; } .clearfix{*zoom: 1; }優點: 代碼更簡潔,語義化正確
缺點: 由于IE6,7不支持: after,使用zoom:1觸發hasLayout(騰訊,小米等都有)
示例13: 清除浮動之雙偽元素demo01.html
5.20 絕對定位
口訣: 子絕父相
- position:位置
- relative : 相對定位的元素,對象不可層疊,absolute開始相對它定位 ,本體移走,位置保留
- left
- right
- top
- bottom
- absolute: 絕對定位,可以相對absolute,relative,fixed定位,但是第一個必須是relative,fixed,瀏覽器窗口,本體移走,位置不保留
- left
- right
- top
- bottom
- fixed: 固定定位，相對于瀏覽器窗口進行定位
- static: 默認值。靜態定位，元素出現在正常的流中
- inherit: 規定應該從父元素繼承 position 屬性的值
- relative : 相對定位的元素,對象不可層疊,absolute開始相對它定位 ,本體移走,位置保留
5.21 絕對定位盒子居中
div {position: absolute;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;height: 200px;width: 200px;border: 1px solid #ff0000;} /*或者*/ div{position: absolute;left: 50%;top: 50%;height: 200px;width: 200px;border: 1px solid #ff0000;transform: translate(-50%, -50%); }5.22 堆疊順序(z-index)
? 在使用定位布局時,可能會出現盒子重疊情況,加了定位盒子,默認后來者區上,后面的盒子會壓住前面的盒子,應用z-index層疊等級屬性可以調整盒子的堆疊順序
- 屬性值: 正數負數或0,默認值0,數值越大盒子越上
- 如果屬性值相同后來者區上
- 數字后面不能加單位
**注意: **z-index只能應用于相對定位, 絕對定位和固定定位的元素,其他標準流,浮動,靜態定位無效
6. CSS高級
6.1 元素顯示與隱藏
6.1.1 diaplay 顯示
- block : 塊對象的默認值,同時還有顯示元素
- inline : 轉為行內塊(內聯對象)
- inline-block: 轉為行內塊對象
- none: 隱藏對象,不保留位置。與visibility: hidden(保留位置)不同
- 還有表格操作元素,查手冊
6.1.2 visiblity 可見性
- visible: 顯示
- hidde: 隱藏(保留位置); 清除浮動
- inherit: 繼承父級
- collapse: 隱藏表格的行和列
6.1.3 overflow 溢出
- visible: 不剪輯溢出內容,內容也不添加滾動條
- hidden: 不顯示超出的部分,超出的部分隱藏
- scroll: 不管內容超出與否,都添加滾動條
- auto: 超出自動顯示滾動條,不超出不顯示滾動條
6.2 用戶界面樣式
6.2.1 鼠標樣式 cursor
- default: 小白(默認)
- pointer: 小手
- move: 移動
- text: 文本
- not-allowed: 禁止
6.2.2 輪廓線 outline
輪廓線: 文本輸入框選中會出現藍色的邊框的外圍,可起到凸起元素的作用
outline: outlone-color | outline-style | outline-width
但是一般不關心可以設置多少,平時一般去掉,直接寫法: outline: 0;或者outline: none;
<input type = “text” style = “outline: 0;” />
6.2.3 防止拖拽文本域 resize
< textarea style = “resize: none;”></textarea> /防止拖拽/
6.3 垂直對齊 vertical-align
vertical-align垂直對齊,他只針對行內元素或者行內塊元素有效果,塊元素沒用
行高指基線與基線的距離
vertical-align: baseline(基線對齊,默認) | top(頂線對齊) | midde(中線對齊) | bottom(底線對齊)
6.3.1 去除圖片低側空白縫隙
父盒子由圖片撐開,圖片下面會有空白縫隙,因為圖片或者表單等行內塊元素,它的底線會和父級盒子的基線對齊,就是圖片低側會有的空白縫隙
解決方案1 : 給img添加vertiacl-align:middle| top | midde都可以,讓圖片不要和基線對齊
解決方案2: 給img添加 diaplay: block; 把圖片轉換為塊級元素,就不會生效
6.4 溢出文字解決
- while-space(文本顯示方式)
- normal;(默認處理,文字會自動換行)
- nowrap; (強制在同一行顯示,直到文本結束或br)
- pre 保留格式
- pre-wrap: 保留空白符序列,但是正常的進行換行
- pre-line: 合并空白,保留換行
- overflow
- hidden;(隱藏)
- text-overflow
- clip (文本溢出不顯示省略號,簡單的裁切)
- ellipsis(文本溢出顯示省略號標記)
6.5 CSS精靈技術
6.5.1 精靈技術產生背景
? 圖所示為網頁的請求原理圖，當用戶訪問一個網站時，需要向服務器發送請求，網頁上的每張圖像都要經過一次請求才能展現給用戶。
然而，一個網頁中往往會應用很多小的背景圖像作為修飾，當網頁中的圖像過多時，服務器就會頻繁地接受和發送請求，這將大大降低頁面的加載速度。為了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度，出現了CSS精靈技術（也稱CSS Sprites、CSS雪碧）。
6.5.2 精靈技術本質
? CSS精靈是一種處理網頁背景圖像的方式。它將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應用于網頁，這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景圖像即可全部展示出來。通常情況下，這個由很多小的背景圖像合成的大圖被稱為精靈圖（雪碧圖），如下圖所示為王者榮耀網站中的一個精靈圖
6.6 滑動門技術
? 為了各種特殊形狀的背景能夠自適應元素中文本內容的多少,出現了CSS滑動門技術.它從新的角度構建頁面,使各種形狀的背景能夠自動拉伸,以適應元素內部的文本內容,可用性很強,常見于各種導航欄的滑動門
核心技術
? 核心技術就是利用css精靈(主要是背景位置)和盒子padding撐開,以便于能使用不同字數的導航欄.一般經典布局是:
精靈圖:
<style>/*a設置左側(背景)門*/a {/*需要用文字撐開內容,所以用行內塊元素*/display: inline-block;height: 33px;background: url(file:///C:/Users/a4244/Desktop/MD/60.png) no-repeat;padding-left: 15px;}/*span設置右(背景)邊門*/a span {display: inline-block;height: 33px;background: url(file:///C:/Users/a4244/Desktop/MD/60.png) no-repeat right;padding-right: 15px;}a:hover,a:hover span {background-image: url(file:///C:/Users/a4244/Desktop/MD/61.png);}</style> </head> <body><a href="#"><span>導航欄內容</span></a> </body>6.7 margin負值
6.7.1 解決邊框1+1=2
利用margin去掉盒子與盒子合并的1+1 = 2的問題
div {/*浮動的盒子是緊貼在一起的*/float: left;width: 200px;height: 300px;border: 1px solid #ccc;margin-left: -1px;margin-top: -1px;}/*鼠標經過div 的意思 p:hover */div:hover {/*我要讓當前鼠標經過的這個div 升到最高處來就好了*//*定位的盒子是最高層的 */border: 1px solid #f40;/*我們只要保證當前的這個盒子 是定位 就會壓住 標準流和浮動盒子*/position: relative;/*我們只能用相對定位 它是占位置的*/} div {position: relative;/*浮動的盒子是緊貼在一起的*/float: left;width: 200px;height: 300px;border: 1px solid #ccc;margin-left: -1px;margin-top: -1px;}/*鼠標經過div 的意思 p:hover */div:hover {/*我要讓當前鼠標經過的這個div 升到最高處來就好了*//*定位的盒子是最高層的 */border: 1px solid #f40;/*都是定位的盒子，我們通過z-index 來實現層級關系*/z-index: 1;}6.7.2 制作三角
? 用CSS邊框可以模擬三角結果,寬度高度都為0,我們4個邊框都要寫,只保留邊框的顏色,其余不能省略,都改為transparent(透明色)就好
? 為了照顧兼容性,低版本瀏覽器,加上font-size: 0; line-height: 0;
6.8 引入icon
在網站的鏈接后面添加favicon.ico
/*https://www.jd.com/favicon.ico*/ /*在head之間引入*/ <link rel = "shortcut icon" href = "favicon.ico" type = "image/x-icon"> /*或者*/ <link rel = "icon" href = "favicon.ico">## ７. HTML5
7.1 HTML5 簡介
? 萬維網的核心語言，標準通用標記語言下的一個應用超文本標記語言(HTML)的第五次重大修改.作為新的HTML語言,具有新的元素,屬性和行為
? HTML5它有更大的技術集,允許多樣化和強大的網站和應用程序
? 增加了新特性: 語義特性, 本地存儲特性, 設備兼容特性, 連接特性, 網頁多媒體特性, 三維, 圖形及特效特性, 性能與集成特性, CSS3特性
? XHTML是一種增強了的HTML,它的可擴展性和靈活性將適應未來網絡應用更多的需求
7.2 H5新增語義化標簽
| <header> | 頭部標簽 | <nav> | 導航欄標簽 | <article> | 內容標簽 |
| <section> | 塊級標簽 | <aside> | 側邊欄標簽 | <footer> | 尾部標簽 |
| <audio> | 音頻標簽 | <video> | 視頻標簽 | <footer> | 尾部標簽 |
注意: 這些語義化標簽主要是針對搜索引擎的; 一個頁面可以多次使用; 在IE9中需要把他們轉換為塊級元素
7.3 autio音頻標簽
語法: <autio src=“autio.mp3” controls = “controls”></autio>
- 屬性
- autoplay: autoplay; 如果出現該屬性,則音頻就緒后會馬上播放(谷歌禁用)
- controls: controls; 如果出現該屬性,則向用戶顯示控件,比如播放按鈕
- loop: loop; 如果出現該屬性,則每當音頻結束時重新開始播放
- src: url; 要播放的音頻URL
7.4 video視頻標簽
語法: <video src=“video.mp4” controls = “controls”></video>
- video屬性
- autoplay: autoplay; 視頻就緒自動播放
- controls: xontrols; 向用戶顯示播放界面(不使用)
- width: pixels(像素); 設置播放器的寬度
- height: pixels(像素); 設置播放器的高度
- loop: loop; 播放完繼續播放該視頻,循環
- preload: 規定是否預加載視頻(如果有了autoplay就會忽略該屬性)
- auto(預先加載視頻)
- none(不應加載視頻)
- src: url; 視頻url地址
- poster: imgurl; 加載等待畫面圖片
- muted: muted; 靜音播放
| Ogg | NO | 3.5+ | 10.5+ | 5.0+ | NO |
| MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
| Ogg | NO | 4.0+ | 10.6+ | 6.0+ | NO |
8 CSS3
8.1 2D轉換
轉換(transform): 實現元素位移,旋轉,縮放等效果(變形)
- 移動: translate
- 旋轉: rotate
- 變形: scale
- 綜合寫法transfrom: translate(150px,150px) rotate(180deg) scale(1.2)…等
1. 移動: translate
/*語法: 百分比單位相對于自身元素的translate:(50%,50%)*/ transform: translate(x, y) /*或者*/ transform: translateX(x); transform: translateY(y);優點: 不會影響其他元素的位置,對行內標簽沒有效果
2.旋轉: rotate
transform: rotate(度數);- rotate里面跟度數,單位deg,如rotate(45deg)
- 角度為正時,順時針; 負時,為逆時針
- 默認旋轉的中心點是元素的中心點
3.旋轉的中心點: transform-origin
transform-origin: x y; /*x,y(默認中心點50%,50%), 還可以給x,y設置像素,方位名詞: top, bottom, left, center*/4. 縮放: scale
/*語法: transform: scale(x,y)*/ transform: scale(1,1): 放大一倍,相當于沒有放大 transform: scale(2,2): 放大兩倍 transform: scale(2) == transform: scale(2,2) transform: scale(0.5,0.5): 縮小一半 /*可以設置中心點縮放,默認就是中心點,而且不會影響其他盒子*/8.2 過渡動畫CSS3
過渡（transition)是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。
過渡動畫： 是從一個狀態 漸漸的過渡到另外一個狀態
可以讓我們頁面更好看，更動感十足，雖然 低版本瀏覽器不支持（ie9以下版本） 但是不會影響頁面布局。
我們現在經常和 :hover 一起 搭配使用。
語法格式:
transition: 要過渡的屬性 花費時間 運動曲線 何時開始;| transition | 簡寫屬性，用于在一個屬性中設置四個過渡屬性。 | 3 |
| transition-property | 規定應用過渡的 CSS 屬性的名稱。 | 3 |
| transition-duration | 定義過渡效果花費的時間。默認是 0。 | 3 |
| transition-timing-function | 規定過渡效果的時間曲線。默認是 “ease”。 | 3 |
| transition-delay | 規定過渡效果何時開始。默認是 0。 | 3 |
- 屬性
? 屬性就是你想要變化的 css 屬性， 寬度高度 背景顏色 內外邊距都可以 。如果想要所有的屬性都變化過渡， 寫一個all 就可以。
-
花費時間
transition-duration 花費時間 單位是 秒（必須寫單位） s ms 比如 0.5s 這個s單位必須寫 ms 毫秒
-
運動曲線 ease(默認)
運動曲線示意圖：
-
何時開始
默認是 0s 鼠標觸發就立即開始 可以設置 延遲觸發時間
案例：
div {width: 200px;height: 100px;background-color: pink;/* transition: 要過渡的屬性 花費時間 運動曲線 何時開始; *//*transition: width 0.6s ease 0s, height 0.3s ease-in 1s, background-color 1s ease 0s;*//* transtion 過渡的意思 這句話寫到div里面而不是 hover里面 */ /*二選一*/transition: all 0.6s; /* 所有屬性都變化用all 就可以了 后面倆個屬性可以省略 */} div:hover { /* 鼠標經過盒子，我們的寬度變為400 */width: 600px;height: 300px;background-color: purple; }8.3 動畫
動畫(animation): 可通過設置多個節點來精確控制一個或一組動畫,用用來實現復雜的動畫效果
相比于過渡,動畫實現跟多變化,更多控制,連續自動播放等效果
制作動畫: 先定義動畫,然后使用(調用)動畫
- 動畫序列
- 0%是動畫的開始,100%是動畫完成,這樣的規則就是動畫序列
- 在@keyframes中規定某項CSS樣式,就能創建由當前樣式逐漸改為新樣式的動畫效果
- 動畫是使元素從一種樣式逐漸變化為另一種樣式的效果,您可以改變任意多的樣式任意多的次數
- 請用百分比來規定變化發生的時間,或用關鍵詞"from"和"to",等同于0%和100%
- 動畫屬性
- @keyframes 規定動畫
- animation 所有動畫屬性的簡寫屬性,除animation-play-state屬性
- animation-name 規定@keyframes動畫名稱(必須的)
- animation-duration 規定動畫完成一個周期多花費的秒或毫秒,默認是0(必須的)
- animation-timing-function 規定動畫運動曲線
- linear 動畫從頭到尾的速度相同,勻速
- ease 默認. 動畫以低速開始,然后加快,在結束前變慢
- ease-in 動畫低速開始
- ease-out 動畫低速結束
- ease-in-out 動畫以低速開始低速結束
- steps() 指定了時間函數中的間隔數量
- animation-delay 規定動畫何時開始,默認是0
- animation-iteration-count 規定動畫播放的次數,默認是1,還有infinite
- animation-direction 規定動畫是否在下一周期逆向播放,默認是"normal",alternate逆向播放
- animation-play-state 規定動畫是否正在運行或暫停,默認是"running"還有"paused"
- animation-fill-mode 規定動畫后的結束狀態,保持forwards,回到起始backwards
- 簡寫: animation: 動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 動畫起始或者結束狀態,第二個動畫;
8.4 3D轉換
- 3D位移: translate3d(x, y, z)
- 3D旋轉: rotate3d(x, y, z)
- 透視: perspective
- 3D呈現: transfrom-style
1. 3D移動: translate3d
translform: translateX(100px); 僅在X軸上移動
translform: translateY(100px); 僅在Y軸上移動
translform: translateZ(100px); 僅在Z軸上移動
translform: translateX(100px) translateY(100px) translateZ(100px);
translform: translate3d(x,y,z); 分別指定x, y, z軸移動方向的距離
2. 透視: perspective
perspective: 200px;
透視的屬性一般寫在被觀察的父盒子的身上
3. 3D旋轉: rotate3d
transform: rotateX(45deg): 沿著x軸的正方向旋轉45度
transform: rotateY(45deg): 沿著y軸的正方向旋轉45度
transform: rotateZ(45deg): 沿著z軸的正方向旋轉45度
transform: rotate3d(x, y, z, deg);沿著自定義軸旋轉deg為角度
4. 3D呈現: transfrom-style
- 控制子盒子是否開啟三維立體環境
- transfrom-style: flat子元素不開啟3d立體空間,默認的
- transfrom-style: preserce-3d; 子元素開啟立體空間
- 代碼寫給父級,但是影響的卻是子盒子
8.5 漸變
1 線性漸變
background: linear-gradient(起始方向,顏色1,顏色2,...); background: -webkit-linear-gradient(left, red, blue); background: -webkit-linear-gradient(left top, red, blue); 要加私有前綴,不然不顯示8.5 瀏覽器私有前綴
瀏覽器私有前綴是為了兼容老版本,比較新的就不用添加
- -moz-: 代表火狐(firefox)
- -ms-: IE
- -webkit-: safari, chrome
- -o-: Opera
9 移動端
視口(viewport):瀏覽期限是頁面的屏幕區域,視口可以分: 布局視口, 視覺視口, 理想視口*
- 布局視口(layout viewport)
一般移動設備的瀏覽器都默認設置了一個布局視口，用于解決早期的PC端頁面在手機上顯示的問題。
iOS, Android基本都將這個視口分辨率設置為 980px，所以PC上的網頁大多都能在手機上呈現，只不過元素看上去很小，一般默認可以通過手動縮放網頁,手機顯示電腦網頁
- 視覺視口(visual viewport)
字面意思，它是用戶正在看到的網站的區域。注意：是網站的區域。
我們可以通過縮放去操作視覺視口，但不會影響布局視口，布局視口仍保持原來的寬度。
-
理想視口(ideal viewport)
為了使網站在移動端有最理想的瀏覽和閱讀寬度而設定理想視口，對設備來講，是最理想的視口尺寸
需要手動添寫meta視口標簽通知瀏覽器操作
meta視口標簽的主要目的：布局視口的寬度應該與理想視口的寬度一致，簡單理解就是設備有多寬，我們布局的視口就多寬
總結：我們開發最終會用理想視口，而理想視口就是將布局視口的寬度修改為視覺視口
9.1 視口標簽meta
<meta name = “viewport” content = “width=device-width, use-scalable = no, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0”>
content = width = device-width(設備的寬度)
use-scalable = no (不允許用戶放大(no,0))
initial-scale = 1.0(初始縮放)
maximum-scale = 1.0(最大縮放比)
minimum-scale = 1.0(最小縮放比)
9.2 二倍圖
圖片縮放
設定圖片大小為100px*100px,手機一般是2:1 img{width: 50px; height: 50px}
背景圖縮放background-size
- background-size: 背景圖寬度 背景圖片高度;
- cover: 等比例拉伸,背景放大至完全覆蓋,可能有些部分顯示不全
- contain: 等比例拉伸,當寬度或高度鋪滿盒子就不會在拉伸,可能有部分空白區域
- 精靈圖二倍縮放
- 先把精靈圖縮小至原來的兩倍,然后量坐標與大小
- background-size也要縮放
9.3 移動端主流方案
單獨制作移動端頁面(主流)
- 流式布局(百分比布局); flex彈性布局; less+rem+媒體查詢布局; 混合布局
- 通常情況下,網址域名前面加m(mobile)可以打開移動端.通過判斷設備打開,則跳轉移動端頁面,例:m.taobao.com
響應式頁面兼容移動端(其次)
- 媒體查詢; bootstarp
- 判斷屏幕寬度來改變樣式,以適應不同終端,制作麻煩,花大量的精力調兼容性問題
移動端瀏覽器基本以webkit內核為主,因此只要考慮webkit的兼容性問題,可以使用H5,CSS3
移動端CSS初始化文件: normalize.css
-
Normalize.css
- 保護了有價值的默認值
- 修復了瀏覽器的bug
- 是模塊化
- 擁有詳細的文檔
- 官網:http://necolas.github.io/normalize.css/
-
CSS3的盒子模型: box-sizing
- box-sizing: content-box; 傳統模式
- box-sizing: border-box; CSS3模式
- 傳統盒子模型: 盒子寬度 = width + border + padding;
- CSS3盒子模型: 盒子的寬度 = CSS中設置的寬度,里面包含border和padding,也就是說不會撐大盒子
特殊樣式
CSS3盒子模型
box-sizing: border-box;
-webkit-box-sizing: border-box;
點擊高亮我們需要清除: 設置為transparent;
-webkit-tap-heighlight-color: transparent;
在移動端ios默認外觀加上這個屬性才能給按鈕和輸入框自定義樣式
-webkit-appearance: none;
禁用長按頁面時的彈出菜單
img,a{-webkit-touch-callout: none;}
10 fiex布局
傳統布局: 兼容性好, 布局繁瑣,局限性,不能在移動端很好的布局
fiex布局: 操作方便,布局簡單,移動端應用廣泛,pc支持較差,IE不支持
布局原理: 通過給父盒子添加flex屬性,來控制子盒子的位置和排列方式
flexible Box的縮寫(彈性布局),用來為盒轉模型提供最大的靈活性,任何一個容器都可以指定為flex布局
- 當我們為父盒子設為flex布局后,子元素的float,clear,vertical-align屬性會失效
- 伸縮布局 = 彈性布局 = 伸縮盒布局 = 彈性盒布局 = flex布局
- 采用flex布局的元素,稱為Flex容器(flex container),簡稱"容器",他的所有子元素自動成為容器成員,稱為Flex項目(flex item),簡稱"項目"
- div就是flex父容器,大的叫容器,小的叫項目
- span就是自容器flex項目
- 自容器可以橫向排列也可以縱向排列
10.1 flex的父類屬性
給父元素: display: flex;
- flex-direction: 設置主軸的方向
- flex布局中,分為主軸和側軸兩個方向或者叫行和列,或者X,Y軸,子元素是根據主軸排列的
- 主軸默認方向就是x軸的方向,水平向右;側軸方向是y軸的方向,水平向下
- 主軸和側軸是可以變換的,就可flex-direction設置誰是主軸,剩下的就是側軸
- 屬性:
- row: 默認從左到右
- row-reverse 從右到左
- column 從上到下
- column-reverse 從下到上
- justify-content: 設置主軸上的子元素排列方式
- 使用這個元素之前一定要確定主軸是哪個
- 屬性:
- flex-start: 默認值,從頭開始,如果主軸是x軸,則從左向右
- flex-end: 尾部開始排列
- center: 主軸區中對齊(如果主軸是x軸則水平區中)
- space-around: 平分剩余空間
- space-between: 先兩邊貼邊,再平分剩余空間(重要)
- flex-wrap: 設置子元素排列方式
- 默認的情款下,盒子都排在一條軸上,flex布局默認不換行
- 屬性值:
- nowrap: 默認值,不換行
- wrap換行
- align-content: 設置側軸上的子元素的排列方式(多行),單行無效果
- 屬性:
- flex-start 在側軸的頭部開始排列
- flex-end 在側軸的尾部開始排列
- center 在側軸的中間顯示
- stretch 設置子項元素高度平分父元素高度
- space-around 子項在側軸平分剩余空間
- space-between 子項在側軸先分布在兩頭.在平分剩余空間
- 屬性:
- align-items: 設置側軸上的子元素排列方式(單行)
- 該屬性是控制側軸(默認y軸),上的排列順序,在子項為單向的時候使用
- 屬性:
- flex-start 默認值 從上到下
- flex-end 從下到上
- center 擠在一起區中(垂直區中)
- stretch 拉伸
- flew-flow: 復合屬性,相當于同時設置了flex-direction和flex-wrap簡寫
- flexflow: row wrap;
10.2 flex的子項屬性
flex屬性定義了子項目分配剩余控件,用flex來表示占多少份數
flex: number;默認是0
align-self屬性允許單個項目與其他項目不一樣的對齊方式.可以覆蓋align-items屬性,默認值為auto,標識繼承父元素的align-items屬性,如果沒有父元素,則等同于stretch
span:nth-child(2){align-self: flex-end;}
order屬性定義項目的排列順序
數值越小,排列越靠前面,默認為0
11 rem適配布局
11.1 rem基礎
rem(root em)是相對單位, 類似于em,em是父元素字體大小,不同的是rem的基準是相對于html元素的字體大小
優點:可以通過修改html里面的文字大小來改變頁面中元素的大小可以實現整體控制
例如: 根元素html設置font-size: 12px;非根元素設置width:2rem;則換成px表示就是24px;
11.2 媒體查詢
媒體查詢(Media Query)是CSS3的語法
- 使用@media查詢,可以針對不同的媒體類型定義不同的樣式
- @media可以針對不同的屏幕尺寸設置不同的樣式
- 當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面
- 目前針對很多蘋果手機,android手機,平板等設備都用得到多媒體查詢
語法: media mediatype and|no|only (media feature){CSS-Code;}
- 用@media開頭 注意@符號
- mediatype媒體類型
- all 用于所有的設備
- print 用于打印機和打印預覽
- scree 用于電腦屏幕,平板電腦,智能手機
- 關鍵字 and not only
- and可以將多個多媒體特性連接在一起,相當于且的意思
- not: 排除某個媒體類型,相當于非得意思,可以省略
- only: 指定某個特定的媒體查詢類型,可以省略
- media featrue 媒體特性 必須由小括號包含
- width:定義輸出設備中頁面可見區域的寬度
- min-width: 定義輸出設備中頁面最小可見區域寬度
- max-width: 定義輸出設備中頁面最大可見區域寬度
10.3 媒體查詢引入css
語法: <link rel = “stylesheet” media = “mediatype and|not|only (media feature)” href = “mystyle.css”>
11 less
less(Leaner Style Sheets): 一門擴展語言,也是CSS的預處理器,作為CSS的一種形式的擴展,他并沒有減少CSS的功能,而是在現有的CSS的語法上,為CSS加入了程序式語言特性,在CSS的語法基礎上,引入了Mixin(混入),運算一級函數等功能,大大簡化了CSS的編寫,并且降低了CSS的維護成本
常見的CSS預處理器: Sass, Less, Stylus
11.1 less安裝
- 安裝nodejs,可以選擇版本(8.0)
- 檢查是否安裝成功,使用cmd,node-v查看版本號
- 基于nodejs在線安裝Less,使用cmd,"npm install -g less
- 檢查是否安裝成功,使用cmd命令, "lessc -v"查看版本就可以啦
less使用: 新建less后綴的文件,在這個less文件里面書寫less語句
- less變量
- less編譯
- less嵌套
- less運算
11.2 less變量
@變量名: 值;
變量名規范: 必須以@作為前綴, 不能包含特殊字符, 不能以數字開頭, 大小寫敏感
//新建一個my.less文件 @color: pink; //定義一個粉色變量 @font14: 14px; //定義字體為14號字體 body {background-color: @color;font-size: @font14; } div {background-color: @color; }11.3 less編譯
本質上,less包含一套自定義的語法及一個解析器, 用戶根據這些語法定義自己的樣式規則,這些規則最終會通過解析器,編譯生成對應的CSS文件,所以less文件需要編譯生成CSS文件,這樣html才能使用
Easey LESS插件用來把less文件編譯成為CSS文件,只要保存就會自動生成CSS文件,然后引入生成的CSS文件
11.4 嵌套
偽類,偽元素,或者交集選擇器需要在前面加&符號,然后寫偽元素, 偽類和交集選擇器
/*less文件*/ .header {width: 200px;height: 200px;background-color: pink;a {color: red;&:hover {color: green;}} }/*less文件生成的CSS文件*/ .header {width: 200px;height: 200px;background-color: pink; } .header a {color: red; } .header a:hover {color: green; } <!--HTML結構--> <header><a herf = "#"></a> </header>11.5 less運算
運算符有: + - * /
- 運算符左右必須加空格
- 運算的順序和數學一樣
- 兩個數參與運算, 如果一個有單位,則最后的結果的以這個單位為準
- 如果兩個都有單位,而且不一樣,最后的結果以第一個單位為準
11.6 rem適配方案
- 讓一些不能等比自適應元素,達到當設備尺寸發生改變的時候,等比例適配當前的元素
- 使用媒體查詢根據不同設備按比例設置html的字體大小,然后頁面元素使用rem做單位的尺寸
技術方案一: less, 媒體查詢, rem
- 動態設置htmlfont-size大小
- 假設設計稿是750px
- 于是我們就可以把設計稿劃分為15等分(20等份,等分不一),每份html大小就是50px
- 在320px設備的時候,字體大小就是320/15就是21.33
- 頁面元素大小除以不同的html字體大小會發現他們的比例還是不相同的
- 比如750px的設計稿,在10010像素的頁面元素750屏幕下,就是100/50轉換為rem,就是2rem2rem比例是1:1
- 320屏幕下,html字體大小為21.33,則2rem = 42.66px,此時寬和高都是42.66,但是寬和高比例還是1:1
- 元素取值方法
- 頁面元素rem值 = 頁面元素值(px) / (屏幕寬度 / 劃分的份數)
- 屏幕寬度 / 劃分的份數 = html font-size的大小
- 或者: 頁面元素的rem值 = 頁面元素值(px) / html font-size字體大小
技術方案二: flexible.js, rem
CSS規范
1. CSS屬性書寫順序
- 遵循以下順序
- 布局定位(顯示)屬性: display, position, float, clear, visibility, overflow
- 自身屬性: width, height, margin, padding, border, background(透明背景CSS3除外)
- 文本屬性: color, font, text-decoration, text-align, vertical-align, white-space, break-word
- 其他屬性(CSS3): content, currsor, border-radius, box-shadow, text-shadow, background: linear-gradient …
2. CSS布局流程
? 為了提高網頁制作的效率,布局時通常有以下的布局流程,具體如下:
- 必須確定頁面版心(可視區),我們測量可以得知
- 分析頁面中的行模塊,以及每個行模塊中的列模塊.其實頁面布局就是一行一行羅列出來的
- 制作HTML結構,我們還是遵循,先有結構后有樣式的原則,結構永遠最重要
- 然后開始運行盒子模型的原理,通過DIV+CSS布局來控制網頁的各個模塊
3. CSS文件名
主要的 master.css 模塊 module.css 基本共用 base.css 布局、版面 layout.css 主題 themes.css 專欄 columns.css 文字 font.css 表單 forms.css 補丁 mend.css 打印 print.css 公共樣式: common.css4. 常用的CSS命名
頭：header 內容：content/container 尾：footer 導航：nav 側欄：sidebar 欄目：column 頁面外圍控制整體佈局寬度：wrapper 左右中：left right center 登錄條：loginbar 標志：logo 廣告：banner 頁面主體：main 熱點：hot 新聞：news 下載：download 子導航：subnav 菜單：menu 標簽：tags 子菜單：submenu 搜索：search 友情鏈接：friendlink 頁腳：footer 版權：copyright 滾動：scroll 內容：content 文章列表：list 提示信息：msg 小技巧：tips 欄目標題：title 加入：joinus 指南：guide 服務：service 注冊：regsiter 狀態：status 投票：vote 合作伙伴：partner 關于: about 賬戶: account 箭頭圖標: arrow 文章: article 邊欄: aside 音頻: audio 頭像: avatar 背景: bg,background 欄（工具類): bar 品牌化: branding 分類: category 面包屑: crumb,breadcrumbs 按鈕: btn,button 標題，說明: caption 圖表: chart 清除浮動: clearfix 關閉: close 列: col,column 評論: comment 社區: community 容器: container 內容: content 版權: copyright 當前態，選中態: current 默認: default 描述: description 細節: details 不可用: disabled 文章，博文: entry 錯誤: error 偶數，常用于多行列表或表格中: even 失敗（提示): fail 專題: feature 收起: fewer 用于表單的輸入區域: field 圖: figure 篩選: filter 第一個，常用于列表中: first 隱藏: hide 頁腳: footer 論壇: forum 畫廊: gallery 模塊，清除浮動: group 頁頭: header 幫助: help 高亮: hightlight 主頁: home 圖標: icon 信息: info,information 最后一個,常用語列表: last 鏈接: links 登錄: login 退出: logout 標志: logo 主題: main 菜單: menu 作者、更新時間等信息欄，一般位于標題之下: meta 模塊: module 更多（展開): more 消息: msg,message 導航: nav,navigation 下一頁: next 小塊: nub 奇數，常用于多行列表或表格中: odd 鼠標離開: off 鼠標移過: on 輸出: output 分頁: pagination 彈窗: pop,popup 預覽: preview 上一頁: previous 主要: primary 進度條: progress 促銷: promotion 推薦: rcommd,recommendations 注冊: reg,register 頂部導航: shortcut 保存: save 搜索: search 次要: secondary 區塊: section 已選: selected 分享: share 顯示: show 邊欄，側欄: sidebar 排序: sort 幻燈片，圖片切換: slide 次級的，子級的: sub 提交: submit 訂閱: subscribe 副標題: subtitle 成功（提示): success 摘要: summary 標簽: tab 表格: table 文本: txt,text 縮略圖: thumbnail 時間: time 提: tips 標題: title 視頻: video 容器，包，一般用于最外層: wrap 容器，包，一般用于最外層: wrapper5. id命名
1. 頁面結構
容器: container 頁頭：header 內容：content/container 頁面主體：main 頁尾：footer 導航：nav 側欄：sidebar 欄目：column 頁面外圍控制整體佈局寬度：wrapper 左右中：left right center2. 導航
導航：nav 主導航：mainnav 子導航：subnav 頂導航：topnav 邊導航：sidebar 左導航：leftsidebar 右導航：rightsidebar 菜單：menu 子菜單：submenu 標題: title 摘要: summary3. 功能
標志：logo 廣告：banner 登陸：login 登錄條：loginbar 注冊：register 搜索：search 功能區：shop 標題：title 加入：joinus 狀態：status 按鈕：btn 滾動：scroll 標籤頁：tab 文章列表：list 提示信息：msg 當前的: current 小技巧：tips 圖標: icon 注釋：note 指南：guild 服務：service 熱點：hot 新聞：news 下載：download 投票：vote 合作伙伴：partner 友情鏈接：link 版權：copyright按鈕: btn,button 標題，說明: caption 圖表: chart 清除浮動: clearfix 關閉: close 列: col,column 評論: comment 社區: community 容器: container 內容: content 版權: copyright 當前態，選中態: current 默認: default 描述: description 細節: details 不可用: disabled 文章，博文: entry 錯誤: error 偶數，常用于多行列表或表格中: even 失敗（提示): fail 專題: feature 收起: fewer 用于表單的輸入區域: field 圖: figure 篩選: filter 第一個，常用于列表中: first 隱藏: hide 頁腳: footer 論壇: forum 畫廊: gallery 模塊，清除浮動: group 頁頭: header 幫助: help 高亮: hightlight 主頁: home 圖標: icon 信息: info,information 最后一個,常用語列表: last 鏈接: links 登錄: login 退出: logout 標志: logo 主題: main 菜單: menu 作者、更新時間等信息欄，一般位于標題之下: meta 模塊: module 更多（展開): more 消息: msg,message 導航: nav,navigation 下一頁: next 小塊: nub 奇數，常用于多行列表或表格中: odd 鼠標離開: off 鼠標移過: on 輸出: output 分頁: pagination 彈窗: pop,popup 預覽: preview 上一頁: previous 主要: primary 進度條: progress 促銷: promotion 推薦: rcommd,recommendations 注冊: reg,register 頂部導航: shortcut 保存: save 搜索: search 次要: secondary 區塊: section 已選: selected 分享: share 顯示: show 邊欄，側欄: sidebar 排序: sort 幻燈片，圖片切換: slide 次級的，子級的: sub 提交: submit 訂閱: subscribe 副標題: subtitle 成功（提示): success 摘要: summary 標簽: tab 表格: table 文本: txt,text 縮略圖: thumbnail 時間: time 提: tips 標題: title 視頻: video 容器，包，一般用于最外層: wrap 容器，包，一般用于最外層: wrapper ```### 5. id命名**1. 頁面結構**```tes 容器: container 頁頭：header 內容：content/container 頁面主體：main 頁尾：footer 導航：nav 側欄：sidebar 欄目：column 頁面外圍控制整體佈局寬度：wrapper 左右中：left right center ```**2. 導航**```tes 導航：nav 主導航：mainnav 子導航：subnav 頂導航：topnav 邊導航：sidebar 左導航：leftsidebar 右導航：rightsidebar 菜單：menu 子菜單：submenu 標題: title 摘要: summary ```**3. 功能**```tes 標志：logo 廣告：banner 登陸：login 登錄條：loginbar 注冊：register 搜索：search 功能區：shop 標題：title 加入：joinus 狀態：status 按鈕：btn 滾動：scroll 標籤頁：tab 文章列表：list 提示信息：msg 當前的: current 小技巧：tips 圖標: icon 注釋：note 指南：guild 服務：service 熱點：hot 新聞：news 下載：download 投票：vote 合作伙伴：partner 友情鏈接：link 版權：copyright ```總結
以上是生活随笔為你收集整理的HTML5+CSS3的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： “运行”窗口命令大全
- 下一篇： 齐向东透露工信部检测360浏览器