html5和c3属性,H5与C3不得不说的知识点
1 HTML 5
html5包含htm5 + css3 + javascript
1.1 新增語義標簽
頭部
導航欄
塊級
內容
側邊欄
腳部
注意：可以多次使用；ie9中需要轉換為塊級元素；針對搜索引擎；針對于移動端；
1.2 新增多媒體標簽
1.2.1 音頻標簽 audio
格式：ogg.mp3.
瀏覽器版本太低，不支持本音頻，請升級瀏覽器！
屬性：
controls:顯示播放按鈕
loop:loop 循環
autoplay:autoplay:自動播放 谷歌禁用了該功能
src:音頻url
不同瀏覽器支持的格式不同，采取方案是為音頻準備多個格式
1.2.2 視頻模式 video
格式：ogg,mp4,webm
你的瀏覽器版本太低，請升級瀏覽器
屬性：
src:視頻的url
controls:顯示播放控件
autoplay:自動播放
muted:靜音播放 解決谷歌自動播放問題
loop:循環
poster:加載等待時顯示的內容
1.3 新增的表單標簽 表單屬性
1.郵箱
2.網址
3.日期
4.time month week
5. 數字
6.手機號碼
7.搜索框
8.顏色選擇表單
屬性：
1. required 內容不能為空
2. placeholder="請輸入內容" 提示文字 占位符
3. autofocus 自動定位光標
4.multiple:多文件提交
5.autocomplete:on off 默認打開 默認提示輸入過的內容 必須有name屬性 成功提交過
2 CSS3
2.1 新增css3選擇器
2.1.1 css3屬性選擇器
button[disabled]{
cursor:pointer;
}
/*標簽[屬性名]{
} 屬性選擇器 類選擇器 偽類選擇器權重 0010
標簽[屬性名="屬性值"]{
}
標簽[屬性名^="val"]{
以val開頭的
}
標簽[屬性名$="val"]{
以val結尾的
}
標簽名[屬性名*="val"]{
包含val的
}*/
2.1.2 css3結構偽類選擇器
E:first-child 匹配第一個子元E
E:last-child 匹配最后一個子元素E
E:nth-child(n) 匹配父元素中的第n個子元素 不管子元素的類型
n可以是數字 公式 關鍵字 even 偶數 odd 奇數 如果公式，n從0開始計算
2n:偶數
2n+1:奇數
5n:5 10 15
n+5:從第5個開始
-n+5:前5個 包含第5個
注意：0和超過的不顯示
E:first-of-type 指定類型的第一個
E:last-of-type 指定類型的最后一個
E:nth-of-type(n) 指定類型的第n個
2.1.2 偽元素選擇器 權重為0001
div{
width：20px;
height:20px;
border:1px solid red;
}
div::before{
content:'我'；/*內容的前面 是inline 改 inline-block*/
}
div::after{
content:"你"; /*內容的后面*/
}
2.2 轉換
2.2.1 2D轉換
轉換transform:轉換就是變形。
2.2.1.1 平移 translate
1.移動 translate
div{
width:100px;
height；100px;
transform:translate(100px,100px); /*水平移動100px 垂直移動100px*/
}
/*注意：不會影響其他盒子的位置
translate對于行內元素是無效的*/
/*實現垂直居中*/
div{
width:500px;
height:500px;
background:pink;
position:relative;
}
p{
width:200px;
height:200px;
background:blue;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%); /* 跟%是相對于盒子自身來說的*/
}
2.2.1.2 旋轉 rotate
div{
transform:rotate(40deg); /*負值就是逆時針旋轉*/
transform-origin:left bottom;/* 默認50% 50% = center center 也可以是像素 */
}
2.2.1.3 縮放 scale
div{
transform:scale(2,1); x,y
/*等比例縮放：*/
transform:scale(2);
/*進行縮小 小于1*/
transform:scale(0.4);
}
優勢：
不會影響其他盒子，而且可以設置縮放中心點
2.2.1.4 綜合寫法
div{
transform:translate() rotate() scale()；
/*位移和其他屬性一起寫，位移必須放在最前面；*/
}
3.動畫
animation:動畫
使用：1.先定義動畫 2.再使用動畫
div{
width:200px;
height:200px;
background:yellow;
animation-name:move;
animation-duration:5s;
animation-timing-function:ease;/*ease-in; ease-out; 速度曲線*/
animation-delay:1s;/* 延長時間*/
animation-iteration-count:infinite; /*重復次數*/
animation-direction:normal; /*alternate; 是否反方向播放*/
animation-fill-mode:backwards;/* forwards; 結束時的狀態*/
animation-play-sate:paused;/* running 控制動畫停止或者播放*/
/*animation:名稱 時間 曲線 開始時間 播放次數 是否反向 動畫起始或者結束狀態*/
}
@keyframs move{
0% from{
transform:translateX(0px);
}
100% to{
transform:translateX(1000px);
}
}
4. 3D轉換
3d:近大遠小
1、3d位移
body{
perspective: 500px; /*透視；讓網頁中產生透視效果; 透視寫在被觀察的父盒子上*/
}
div{
transform:translateX() translateY() translateZ();
transform:translate3d(); /*x,y,z 不能省略，沒有直接寫0 */
}
2、3d旋轉 rotate3d();
div{
transform:rotateX();
transform:rotateY();
transform:rotateZ();
transform:rotate3d(x,y,z,deg);
transform:rotate3d(1,0,0,45deg); /* 沿x軸旋轉 */
}
3.transform-style 控制子元素是否開啟3d
div{
transform-style:preserve-3d; /* 給父盒子添加 */
}
5. 瀏覽器的私有前綴
div{
-moz-:火狐
-ms-:ie
-webkit-:safari,chrome
-o-:Opera
-o-border-radius:10px;
}
6 補充
1. 線性漸變
背景漸變必須添加瀏覽器私有前綴；
默認是從上往下顯示
div{
background:-webkit-linear-gradient(left,red,blue);
background:-webkit-linear-gradient(left top,red,blue); /*從左上角到右下 角進行漸變 */
}
總結
以上是生活随笔為你收集整理的html5和c3属性,H5与C3不得不说的知识点的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C语言中#、##宏定义的用法
- 下一篇： 公司网络故障那些事（路由器变交换机）