h5新增和css3新增

編輯器： webstorm， 英文版 sublime, hbuilder vscode, dw
h5的新標籤及特性（移動端用的多），，，，若是想在圖片裏面顯示 「帥哥" 記得使用單雙引號，外面是單引號，裏面是雙引號
例如： <img src="" alt="" title='這裏有一個"傻狗"'/>
h5新增語義化標籤：（對瀏覽器和搜索引擎友好，）div沒有語義化， 均可能出現不少次
section元素 表示頁面中的一個區塊
article 元素； 表示頁面中的一塊內容，字多的！！！區域---論壇，博客，新聞
aside : 側邊欄
header : 頁面頭部
footer 頁面底部
nav 導航 能夠直接寫li 不用ul 也能夠

figure 表示一段獨立的流內容 標題分組 做用相似 dl dt dd
獨立流內容的標題figcaption元素爲其添加標題 <figcaption><img> </figcaption>
main元素 表示頁面中的主要內容（ie不兼容）
hgroup 標題的一個分組 像-主副標題的那種
mark:（不是塊，也不常常用） 定義高量文本（自帶黃色） 用background改顏色
time 包時間的： 例如： <time> 12-20 </time>
上面都是塊

################視頻和音頻
video 視屏屬性：
src 引入視屏路徑
controls屬性： 若是出現該屬性，則向用戶顯示控件，好比播放按鈕，控件可能不同
autoplay屬性；視屏在就緒後立刻播放，谷歌屏蔽了該功能
loop: 重複播放屬性
muted 靜音屬性
poster: 視屏圖片 規定視屏正在下載時顯示的圖像，直到用戶點擊播放按鈕
<video width="800" height=""> 能夠設置寬高
<source src="myvideo.mp4" type="video/mp4"></source> 視屏的各類格式，向下查找，有哪一個就播放哪一個
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>

</video>
簡單的寫法就是
<video src="">

</video>
視屏經常使用的格式；mp4 ogg webm
音頻：
audio : 用法同上
audio: 音屏經常使用的格式；mp3 ogg

##########H5智能表單：
input: type="email" 限制用戶必須輸入email類型 (驗證不許，有侷限性)
type="url" 限制用戶必須輸入url 網址的意思
type="range" 產生一個滑動條表單 相似調節音量的滾動條
type="number" 數字
type="search" 產生一個搜索意義的表單
type="color" 生成一個顏色選擇的表單 顏色版

如下有兼容問題；
input: type="time" 限制用戶必須輸入時間類型 小時和分鐘
type="month" 限制用戶必須輸入月類型
type="week" 限制用戶必須輸入周類型
type="datetime-local" 選取本地時間
type="date" 日期類型

output 用於接收輸出數據結果
<output></output>

 

表單新屬性：
1）Datalist: 新增屬性list 選項列表 關聯輸入框
<input type="url" list="url-list" />
<datalist id="url-list">
<option value="https://www.baidu.com" label="百度"></option>
<option value="https://www.jd.com" label="京東"></option>
<option value="https://www.taobao.com" label="淘寶"></option>
</datalist>

list 屬性要關聯datalist 的id 屬性
下拉提示內容寫value 屬性中
label 寫提示內容
2）屬性：
1）placeholder屬性：
文本框處於未輸入狀態時文本框中顯示提示
2）autofocus屬性
給文本框、選擇框或者按鈕控件加上該屬性，當打開頁面時該控件自動得到焦點
一個頁面只能有一個autofocus,
3）required 屬性：
驗證輸入不能爲空
4）list 屬性
結合datalist元素使用----見1
5）autocomplete 就是自動補全，以前輸入的東西，後來再輸入時，有提示以前的網頁，
輸入富足和所用的自動完成功能，只有三種；on/off/""
on 但是顯示指定候補輸入的數據列表
使用datalist 元素與list 屬性提供候補輸入的數據列表，自動完成時，
能夠將該datalist元素中的數據做爲候補輸入的數據在文本框中顯示
控件要有name 屬性,否則不生效
3. pattern
將屬性值設爲某個格式的正則表達式，在提交時會檢查其內容是否符合給定格式
例如： <input pattern="[0-9][A-Z]{3}"title="輸入內容：一個數與三個大寫字母"
placeholder=’輸入內容：一個數與三個大寫字母‘>
4.對於number和range 新增屬性 min，max step:
爲包含數字或日期的input 類型規定限定（約束）
max 最大值
min 最小值
step: 數字間隔

5.multiple 容許輸入多個值
經常使用的是 文件上傳，和select選擇 可用，，，上傳多個，選擇多個

6. novalidate 取消驗證；

1.漸進加強優雅降級

2.css3選擇器
a）層級選擇器
子代選擇器：>
相鄰兄弟選擇器：e + f 加號先後元素必須挨着，，， 後面的元素生效, e和f是兄弟（同級）
選擇後面全部的同一個父元素 中同類兄弟元素 e~f e後面的全部f元素 e和f是同級
b)屬性選擇器：
1. E[attr]
具備attr 屬性的E元素
p[class] 擁有class 的p
2. E[attr="value"]
[class="box"] class 屬性只有box 的屬性，某一個類名爲box 不行,意思就只有一個box 類名，不是包含box類名
3 E[attr~="value"]
[class~="main"] class屬性包含main 並且是一個完整的單詞
4 E[attr^="value"]
[class^="c"]class 屬性以c開頭，完整的全部的類名的開頭，中間類名開頭不算
5 E[attr$="value"]
[class$="c"]class 屬性以c結尾，完整的全部的類名的結尾，中間類名結尾不算
6. E[attr*="value"]
[class*="o"]class 屬性包含o字母就行，無論類名有多少個
7. E[attr|="value"]
指定了屬性名， 而且屬性值是value 或者以「value-」開頭的值（好比說zh-cn）

c)僞類選擇器：
1.結構性僞類選擇器：帶type 就是 同類型中數，，，，不帶type,,就是隨便數
.wrap>p：first-child (意思就是： .wrap類裏的第一孩子是p 而且判斷是不是p ) 匹配全部子集元素的第一個元素。IE7就能夠支持
.wrap>p：last-child 匹配父元素中最後一個X元素
.wrap>p： nth-child（n）用於匹配索引值爲n 的子元素，索引值從1開始,還能夠指定奇數行，偶數行，，也能夠指定3的倍數，等等，就是3n
.wrap>p: only-child 有且只有惟一子元素，
如下： 是分類型： 就是.wrap 中p 的第幾個
.wrap>p: nth-of-type(n):匹配同類型中的第n個同級兄弟元素X
.wrap>p: only-of-type 匹配屬於同類型中惟一兄弟元素的X
.wrap>p: first-of-type: 匹配同級兄弟元素中的第一個x 元素
.wrap>p: nth-last-child(n) 從最後一個開始算索引 從後往前
.wrap>p: nth-last-of-type(n) 匹配同類型中的倒數第n個同級兄弟元素p
.wrap>p: root 匹配文檔的根元素
.wrap>p: empty匹配沒有任何子元素（包括包含文本）空白 的元素x 能夠設置默認樣式

2.目標僞類選擇器
E：target 選擇匹配E的全部元素，且匹配元素被相關URL指向 跳轉錨點
瞭解、語言僞類選擇器
E：lang(language) 選擇匹配E的全部元素，且匹配元素指定了lang屬性，並且其值爲language
3.元素狀態僞類選擇器 （經常使用在表單）
E:enabled 匹配全部用戶界面（form表單）中處於可用狀態的E元素
E：disabled 匹配全部用戶界面（form表單）中處於不可用狀態的E原素，，，至關因而不可選擇
E：checked 匹配全部用戶界面（form表單）中處於被選中狀態的E原素就是按鈕被選中 [type="text"] 加一個span
E:: selection 匹配E元素中被用戶選中或處於高亮狀態的部分(網頁選中顯示的設置的顏色)（注意這裏是兩個 ：）

4.否認僞類選擇器
E：not(s) (IE6-8瀏覽器不支持：not（）選擇器)
匹配全部不匹配簡單選擇符s的元素E


5. E：focus 用戶行爲選擇器 選擇匹配的E元素，並且匹配元素獲取焦點

瀏覽器前綴：
-ms- : IE
-moz-: firefox
-o-: Opera 歐朋
-webkit- google chrome 谷歌 Safari

 

4.css3的屬性
盒子陰影：（屬性之間用空格隔開）
box-shadow: 水平陰影位置 垂直陰影位置 模糊距離 陰影尺寸（） 顏色 內/外陰影
調整陰影位置，
水平陰影位置20px 向右偏移20px
垂直陰影位置20px 向下偏移20px
模糊距離； 單位px 數值越大越模糊
陰影尺寸；向外擴充
默認外陰影： 改成內陰影inset
box-shadow:10px 10px 30px 0 #333 inset
經常使用的： 水平陰影位置 垂直陰影位置 模糊距離 顏色

一個元素設置多個陰影，要用逗號 分割

5. 文本陰影
text-shadow： 水平陰影位置 垂直陰影位置 模糊距離 顏色；
6. 文本換行相關屬性
word-wrap 只在容許的斷字點換行（瀏覽器保持默認處理）
break-word 容許長單詞或URL 地址換行到下一行
word--break
break-all 直接進行單詞內的斷句
Keep-all 文本不會換行，只能在半角空格或連字符處換行

7.字體圖標@font-face
CSS3中的一個模塊 它主要是把本身定義的Web字體嵌入到你的網頁中可使用iconfont(阿里巴巴矢量圖標庫)
製做---現成的字體圖標庫

8. css3邊框的新增屬性
border-color 邊框顏色
border-color: pink yellow green orange ; 四個邊的顏色， 上 右下左
border-image 簡寫屬性： 用於設置如下屬性：
路徑； 路徑 偏移量（水平一刀，垂直一刀 不帶px）
平鋪效果（拉伸stretch,鋪滿round 平鋪repeat）
border-image-outset:20px; 邊框圖像區域超出邊框的量
9. 邊框倒角
border-radius:5px 10px 20px 50px ; 四個倒角不相同
border-radius:5px /10px ; 倒角是橢圓形

##########css3 新增的選擇器


css3背景新增屬性：

1. background-origin 背景原點
屬性值：
padding-box 背景圖像填充框的相對位置----默認在內邊距左上角
border-box 背景圖像邊界框的相對位置
content-box 背景圖像的相對位置的內容框
2. background-clip 背景裁切 ----規定背景的繪製區域
屬性值：
border-box 背景被裁剪到邊框盒---默認
padding-box 背景被裁減到內邊距框
content-box 背景被裁剪到內容框
3.background-size 背景尺寸
屬性值： 1）指定具體寬度高度：第一個值表明寬度，第二個值表明高度
2）50% %設置大小
3）cover -----把背景圖像擴展至足夠大，已使背景圖像徹底覆蓋背景區域，
4）contain- 把圖像擴展到最大尺寸。以使其寬度和高度徹底適應內容區域
4.background-color; hsl(40,50%,60%) 顏色 hsl

按鈕：
盒模型：
標準盒模型： box-sizing: content-box; 默認
-----元素的內容區域纔是代碼設置的尺寸
怪異盒子模型 ： box-sizing: border-box;
元素的總尺寸就是代碼設置的尺寸 width:200px; heigh:200px;
---該尺寸包含了元素的內容，內邊距，邊框


彈性盒模型：
佈局的傳統解決方案： 基於盒模型
1.display: flex;
設置給父元素，造成彈性伸縮盒
彈性盒的特色：
a.彈性盒裏面的子元素都是沿着主軸排列(主軸能夠設置，默認是x軸，能夠改爲y軸方向)
b.彈性盒裏面的子元素都能直接添加寬高---例如span
c.讓彈性盒裏面的(一個子元素)!!!!!!左右上下居中，直接給與元素添加margin:auto;

2.設置主軸排列方向
flex-direction給父元素設置
row 默認橫向一行內排列 主軸方向 帶着display:flex ； 實現側軸居中
row-reverse： 反轉橫向排列（右對齊，從後往前排，最後一項排在最前面）倒着排列
column：縱向排列 側軸方向
column-reverse:反轉縱向排列，從下到上排，最後一項排在最上面
3.(主軸對齊方式（上面設置哪一個是主軸就是對應哪一個設置） )
justify-content
flex-start 默認 頂端對齊
flex-end 末端對齊 就是主軸方向，末端，不是側軸方向（除非是上面設置反轉縱向，）
center 總體居中對齊
space-between 兩端對齊 中間自動分配
space-around 自動分配距離

*{ box-sizing: border-box; }


4。align-items（側軸對齊方式）
flex-start:
flex-end
center
baseline； 基線 默認是頂部
stretch:默認值 項目被拉紳以適應容器 高度值被定了，就無效了

5.flex-wrap:
控制flex容器是單行或者單行
nowrap 默認的不換行
wrap 換行

6.align-content(行與行之間對齊方式，前提是子元素多行之間的效果)
flex-start 沒有行間距
flex-end 底對齊沒有行間距
center 居中沒有行間距
space-between 兩端對齊，中間自動分配
space-around 自動分配距離
stretch ： 默認值 項目被拉伸以適應容器
*******************以上屬性添加給父元素上***************************
彈性盒能夠相互嵌套

7.align-self （加給子元素）靈活容器內別選中項目的對齊方式
auto 默認值 元素繼承了他的父容器的align-items屬性
stretch 元素被拉紳以適應容器
center 元素位於容器的中心
flex-start 元素位於容器的開頭
flex-end 元素位於容器的結尾
8.order排序 number 數字越大越靠後，，，，，從新排列 （）

9.
flex-grow:1
按比例 平分剩餘空間

10： flex-shrink：
縮小比例，默認爲1 若是不想讓元素縮小（保持原始的寬高），設置爲0

11.flex-basis: 項目的長度

 

/*outline:none 去邊框顏色*/