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