新聞中心
首先h6里面有幾個通用的格式,不再像之前每次用div定義。
header
nav
section
aritcle
aside
footer
視頻和音頻的格式
video:ogg webm mp4
audio:mp3 ogg wav
屬性:
width height src controls autoplay loop poster
src 文件源 controls插件,也就是下面的進度條一欄 loop循環(huán)播放 poster暫停
表單
text password textarea checkbox radio file select button submit reset
H5 表單:
email,url,date,week,month,time,number,color,range,search
H5表單屬性
required 必填項
autocomplete 自動記憶
plactholder 提示信息
pattern 正則表達式pattern=[a-z]{3} 意思就是輸入三個字母 了解一下
autofocus 自動聚焦
去邊距間距:
html, body, ul, li, ol, dl, dd, dt, p, h2, h3, h4, h5, h6, h7, form, fieldset, legend, img
*{}
目前創(chuàng)新互聯(lián)公司已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、沭陽網(wǎng)站維護等服務(wù),公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
選擇器
元素選擇器
- 通配符
e 標簽選擇器
#id id選擇器
.class 類選擇器
關(guān)系選擇器
e f 包含選擇器
e>f父子選擇器
e+f 相鄰選擇器 :e元素后所有的f元素
e~f 兄弟選擇器 e后面所有的兄弟元素f
偽類選擇器
:link 訪問前
:hover 鼠標懸停時
:active 點擊激活狀態(tài)
:visited 訪問后
:focus 獲取焦點時
UI元素狀態(tài)偽類選擇器
e:checked 選中狀態(tài) (只針對單選按鈕和復(fù)選框)
e:enabled 可編輯狀態(tài) (默認狀態(tài))
e:disabled 禁用狀態(tài)
屬性選擇器
e[attr]
e[attr="value"]
e[attr~="value"] 包含空格及value的e元素
e[attr|="value"] 有分隔符-的e元素
e[attr^="value"] 以value開頭的e
e[attr$="value"] 以value結(jié)尾的e
有[attr*="value"] attr中包含value的e標簽
偽對象選擇器
e:first-letter 第一個字符
e:first-line 第一行
e:before 前
e:after 后
e::selection 選中狀態(tài)時觸發(fā)的效果
結(jié)構(gòu)偽類選擇器
:root 根選擇器
e:first-child 第一個子元素e
e:last-child 最后一個子元素e
e:only-child 唯一的一個子元素e
e:nth-child(n) 第n個子元素e n=odd even 數(shù)字 公式
e:nth-last-child(n) 倒數(shù)第n個子元素e
e:first-of-type 第一個同類型元素
e:last-of-type 最后一個同類型元素
e:only-of-type 唯一同類型元素
e:nth-of-type(n) 第n個同類型元素e n=odd even 數(shù)字 公式
e:nth-last-of-type(n) 倒數(shù)第n個同類型元素e
e:empty 空元素
————————————————————————————
box-shadow 盒子陰影
box-shadow:水平位置 垂直位置 模糊距離 陰影大小 陰影顏色 [內(nèi)置或外置]
background-origin:border-box,padding-box,content-box
background-clip::border-box,padding-box,content-box
background:linear-gradient(方向,顏色,……)線性漸變
background:repeating-linear-gradient(方向,顏色……) 重復(fù)線性漸變
徑向漸變
background:radial-gradient(中心坐標,形狀 大小,顏色……)
大小:
/closest-side 最近的邊
farthest-side 最遠的邊
closest-corner 最近的角
farthest-corner 最遠的角/
形狀:
circle 或 ellipse(默認橢圓)
background:repeating-radial-gradient() 重復(fù)徑向漸變
多列
column-count:分列數(shù)
column-gap:欄間距
column-rule:分隔線
彈性盒子
父元素中添加
display:flex; display:-webkit-flex;
子元素排列方式 :(父元素添加)
justify-content:flex-start/flex-end/center/space-between/space-around
子元素垂直對齊方式(父元素中添加)
align-item:flex-start/flex-end/center/baseline/stretch
頂端/底端/居中/基線/默認auto
子元素換行方式(父元素添加)
flex-wrap:nowarp/wrap/wrap-reverse/initial/inherit
單行(不換行,會溢出)/多行,自動換行/換行,反轉(zhuǎn)排列/初始化默認效果相似/默認(不換行)
align-content 設(shè)置行對齊方式 (添加到父元素中)
前提條件是flex-wrap為wrap時才可以用
align-content:stretch/flex-start/flex-end/center/space-between/space-around
默認/頂端、底端、居中、兩端、平均分布
子元素順序(子元素添加)
order:1,值越小越靠前 可以為負值
子元素對齊(子元素添加)
margin:auto;對象自動留白
按比例分配元素(子元素添加)
flex:比例值
如:
div>div*3
子元素按順序添加flex:1 flex:3 flex:1 結(jié)果:1:3:1
網(wǎng)站題目:web前端開發(fā)H5知識點
轉(zhuǎn)載注明:http://www.ef60e0e.cn/article/gjcddg.html