HTML5和CSS3新增
HTML5 & CSS3
-
HTML5
- 都有兼容性要求
| 語義化標(biāo)簽 | input表單 | 限制輸入屬性 |
| 多媒體標(biāo)簽 |
-
新增語義化標(biāo)簽
- <header>
<nav>
<artical>
<section>
<aside>
<footer>
-
注意
- 此語義化標(biāo)準(zhǔn)是針對搜索引擎的
- 新增標(biāo)簽可在頁面使用多次
- IE9中,需要將元素轉(zhuǎn)換為塊級元素
- 更常在移動端使用
-
多媒體標(biāo)簽
-
視頻
-
支持格式:MP4,WebM,Ogg
-
谷歌瀏覽器會禁止自動播放,加muted屬性
-
通常不適用controls組件
-
多屬性
- <media src="" controls="controls" ></media>
-
-
音頻
-
支持格式:MP3,Wav,Ogg
- <audio src="" controls="controls"></audio>
-
谷歌瀏覽器會禁止自動播放-通過JS解決
-
-
-
form表單-input
-
新增type的屬性值,限制輸入框的內(nèi)容
-
當(dāng)submit時會反饋
-
屬性屬性值說明 required required 該屬性必填 placeholder 提示文本 提示信息,存在默認值不顯示 autofocus autofocus 自動聚焦屬性 autocomplete off/on 歷史提示,加上name屬性 multiple multiple 多選文件提交 -
CSS樣式
- input::placeholder
- …
-
-
-
CSS3
-
有兼容性問題,IE9+才支持
-
移動端優(yōu)于PC端
-
現(xiàn)階段主要:新增選擇器,盒子模型,其它特性
-
新增選擇器
-
權(quán)重 10
-
屬性選擇器結(jié)構(gòu)偽類選擇器偽元素選擇器 E [att] E:first-child ::before父元素內(nèi)容前創(chuàng)建元素 E [att=“val”] E:last-child ::after父元素內(nèi)容后創(chuàng)建元素 E [att^=“val”] E:nth-child(n) E [att$=“val”] E:first-of-type E[att*=“val”] E:last-of-type E:nth-of-type(n) -
n-----數(shù)字,表達式,關(guān)鍵字
- n從0開始
- 偶數(shù)–even,2n
- 奇數(shù)–odd,2n+1
- 選擇所有孩子:n
- 前m個: -n+m
- 第m個開始: n+m
-
nth-child(n)& **nth-of-type(n)**區(qū)別
- nth-child(n)
- 先父元素所有孩子固定排序
- 執(zhí)行nth-child(n)
- 再判斷是否與nth前的E類型符合
- nth-of-type(n)
- 把子元素指定E類型的元素排序
- 再執(zhí)行nth-of-type(n)
- nth-child(n)
-
偽元素選擇器
-
利用CSS創(chuàng)建新標(biāo)簽元素,不需要HTML,簡化HTML結(jié)構(gòu)
-
否則層疊嵌套的元素過多
-
注意
- after,before創(chuàng)建一個元素–屬于行內(nèi)元素
- 偽元素:在HTML文檔樹中不存在
- 必須有content屬性,同標(biāo)簽選擇器權(quán)重==1
-
使用場景
-
1.偽元素字體圖標(biāo)2.遮罩效果3.清除浮動 子絕父相 :hover::after/before 父級添加after偽元素 父級添加雙偽元素 -
after偽元素:后封閉
- /* 清除浮動 */ .clearfix::after {content: "";display: block; /*必須塊級元素*/height: 0;clear: both;visibility: hidden; }
-
雙偽元素–前后封閉
- /* 清除浮動 */ .clearfix::before,.clearfix::after {content: "";display: table; }.clearfix::after {clear: both;}.clearfix {*zoom: 1;}
-
-
其他
- 額外標(biāo)簽法:插入一個不可見塊級元素
- overflow:hidden
-
-
-
新增盒子模型
-
原因:修改padding,border值會影響盒子原本大小box-sizing
-
屬性值組成 content-box width+padding+border border-box width -
border-box不會撐大盒子
-
-
其它特性
-
1. 圖片變模糊2. 盒子寬度計算width:calc函數(shù) filter:模糊/顏色偏移 + - * / filter:blur(n) width:calc(100%-80px)
-
-
CSS3過渡
-
從一種狀態(tài)變換為另一種樣式時為元素增加效果
-
常與 :hover 搭配使用
-
transition
-
組成作用 屬性 需要過渡的屬性 花費時間 秒 運動曲線 ease 何時開始 延遲觸發(fā)時間 -
若想加多個屬性
- 需要寫在同一屬性,用逗號隔開
- 所有屬性: all
-
-
-
2D轉(zhuǎn)換–右X下Y
-
移動盒子位置
- 定位,盒子外邊距,2D轉(zhuǎn)換移動
-
transform–實現(xiàn)元素
-
類別方法特點 位移–translate **1.**translate(x,y) **2.**translateX() **3.**translateY() **1.**不會影響其他元素; **2.**對行內(nèi)標(biāo)簽無效果; **3.**百分比針對本身; 旋轉(zhuǎn)–rorate **1.**transform-origin(x,y) **2.**rorate(x y) **1.**單位:deg; **2.**正-順時針,負-逆時針; **3.**默認旋轉(zhuǎn)中心; 縮放–scale **1.**scale(x,y)**2.**rorate(x y) **1.**單位:倍數(shù); **2.**不影響其他盒子; **3.**默認中心放大-縮小 -
實現(xiàn)元素居中
- 定位:position:absolute
- top:50%; left:50%;
- 位移轉(zhuǎn)換
- translate(-50%,-50%);
- 定位:position:absolute
-
轉(zhuǎn)換中心點
- transform-origin()
- 參數(shù)–百分比、像素、方位名詞
- transform-origin()
-
實現(xiàn)多個transform的順序
- 位移—>其他
- transform:translate() rorate() scale()
-
-
-
CSS3—動畫
-
設(shè)置多個節(jié)點,精確控制一個/組動畫
-
比過渡更多變化,控制,連續(xù)自動播放等效果
-
定義動畫–調(diào)用動畫
-
動畫序列
- /*定義動畫 關(guān)鍵幀*/ @keyframes 動畫名稱 {0% { /*from*/}100% { /*to*/} } /*調(diào)用動畫*/ 元素 {/*使用動畫*/animation-name: 動畫名稱;/*持續(xù)時間*/ animation-duration: 持續(xù)時間; }
-
注意
- 位置移動是針對元素初始位置變化,而不是上一次變化結(jié)果
- 簡寫
- animation:
- name duration 曲線 delay count 是否反方向 起始/結(jié)束狀態(tài)
- 暫停動畫配合使用:animation-play-state:pause
- 返回:animation-direction:alternate (跑馬燈)
- 播放結(jié)束樣式:animation-fill-mode:forwords / backwords
-
animation-timing-function:曲線,默認ease
-
值描述 linear 勻速 ease 低速-加快-變慢 ease-in 低速開始 ease-out 低速結(jié)束 ease-in-out 低速開始,結(jié)束 steps() 指定時間函數(shù)的間隔數(shù)量(步長)
-
-
熱點圖案例
- 點+陰影
-
步長案例
- 打字機效果-overflow,white-space,steps()
-
同一元素加多個動畫,逗號隔開
-
-
CSS3—3D轉(zhuǎn)換 Transform
-
三維空間
-
坐標(biāo)軸注意 X軸:水平向右 左負有正 Y軸:垂直向下 上負下正 Z軸:垂直屏幕 里負外正
-
-
主要內(nèi)容
-
類別方法注意 3D位移:translate3d(x,y,z) translateX/Y/Z,translate3d 不可省略 3D旋轉(zhuǎn):rorate3d(x,y,z) 繞軸旋轉(zhuǎn) 透視:perspective 父盒子 3D呈現(xiàn):transform-style 2/3D環(huán)境 父盒子 - 透視
- 視距越小,所見越大;
- z軸越大,所見越大;
- 透視
-
-
3D旋轉(zhuǎn)
-
語法特點 rorateX() 橫軸 rorateY() 縱軸 rorateZ() 2D rorate3d() x,y,z確定矢量
-
-
左手準(zhǔn)則
-
3D呈現(xiàn)-------------------transform-style
-
控制子元素是否開啟三維立體環(huán)境
- 默認:flat
- preserve-3d
-
在父盒子設(shè)計,子盒子呈現(xiàn)
-
兩面翻轉(zhuǎn)–只翻轉(zhuǎn)一面解決
- /*方法一*/-webkit-backface-visibility:visible;backface-visibility: visible;/*方法二*/transform: translateZ(1px); ```
-
旋轉(zhuǎn)木馬樣式
-
-
-
瀏覽器私有前綴
-
兼容老版本的寫法,較新的瀏覽器無需添加
私有前綴屬性 -moz- firefox私有 -mz- ie私有 -webkit- sarari,chrome私有 -o- Opera私有 - /*建議寫法*/-moz-borer-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;
-
-
廣義的HTML5
- HTML5+CSS3+JavaScript
-
品優(yōu)購項目
-
步驟
-
提前設(shè)計文件夾
-
設(shè)計相關(guān)頁面命名
-
準(zhǔn)備好首頁,初始化CSS,并引入
-
模塊化開發(fā)–common.css,公共部分
- 按功能劃分
- 重復(fù)使用,更換方便
- 內(nèi)容
- 頭部,底部
- 版心寬度,清除浮動,頁面文字顏色
- 按功能劃分
-
主體部分–index.css
- main盒子給高度就不用清除浮動
-
主體部分-輪播圖
- ul>li>img
-
favicon.ico圖標(biāo)
-
比特蟲網(wǎng)站
- 標(biāo)簽下--
-
-
-
網(wǎng)站TDK三大標(biāo)簽SEO優(yōu)化
- SEO-Search Engine Optimization搜索引擎優(yōu)化
- 目的:對網(wǎng)站進行深度優(yōu)化,從而幫網(wǎng)站獲取免費流量,提升在搜索引擎上網(wǎng)站的排名,提高網(wǎng)站的知名度,點擊率更高;
- SEO-Search Engine Optimization搜索引擎優(yōu)化
-
TDK–優(yōu)化標(biāo)準(zhǔn)
- Title-網(wǎng)站標(biāo)題
- 網(wǎng)站名-網(wǎng)站介紹(30以內(nèi))
- Description
- 網(wǎng)站總體業(yè)務(wù)和主題概括
- 長尾關(guān)鍵詞
- Keyword
- 6~8關(guān)鍵詞,英文逗號隔開
-
常用模塊類名命名
-
名稱說明 快捷導(dǎo)航欄 shortcut 頭部 header 標(biāo)志 logo 購物車 shopcar 搜索 search
| 熱點詞 | hotwords |
| 導(dǎo)航 | nav |
| 導(dǎo)航左側(cè) | dropdown 包含.dd .dt |
| 導(dǎo)航右側(cè) | navitems |
| 頁面底部 | footer |
| 頁面底部服務(wù)模塊 | mod_service |
| 頁面底部幫助模塊 | mod_help |
| 頁面底部版權(quán)模塊 | mod-copyright | -
-
注意SVG和PNG的區(qū)別
-
-
LOGO SEO優(yōu)化
- H1標(biāo)簽–a鏈接–a背景圖片logo(點擊可返回首頁)
- 鏈接中放文字(網(wǎng)站名稱),無顯示文字
- 方法1:text-indent移到盒外,overflow-hidden
- 方法2:font-size=0;
- 鏈接title屬性=提示文字
-
遇到問題
- search搜索框的按鈕總是會與上下有縫隙,需要調(diào)整分辨率
- 解決:
- 不在父盒子search里設(shè)置邊框樣式
- 在input和button里設(shè)置樣式
-
電梯側(cè)導(dǎo)航
- 大盒子包含–樓層區(qū),不設(shè)高度
- TabList-----TabContent
- 一般情況下,a如果包含有寬度的盒子,a需要轉(zhuǎn)換為塊級元素
-
列表頁----list.html,list.css
-
注冊頁面-register.html
- 注冊頁面比較隱私,不需要SEO優(yōu)化,保護用戶信息
- 布局-header-register-footer
-
Web服務(wù)器
-
文件,數(shù)據(jù)庫,應(yīng)用程序,Web服務(wù)器
-
本地服務(wù)器–局域網(wǎng),遠程服務(wù)器–互聯(lián)網(wǎng)
-
免費遠程服務(wù)器–http://free.3v.do/
- 注冊賬號
- FTP管理-激活
- 記錄主機名,用戶名,密碼,域名
- 利用cutftp軟件上傳到遠程服務(wù)器
- 即可在瀏覽器中輸入域名訪問瀏覽器
-
GitHub免費
總結(jié)
以上是生活随笔為你收集整理的HTML5和CSS3新增的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。