--------------------HTML5新結構標簽--------------------
1、h5新增的主要語義化標簽如下：
1、header 頁面頭部、頁眉
2、nav 頁面導航
3、article 一篇文章
4、section 文章中的章節
5、aside 側邊欄
6、footer 頁面底部、頁腳
pc端兼容需要引用對應的js腳本
<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>
2、HTML5 新增表單控件：網址 郵箱 日期 時間 星期 數量 范圍 電話 顏色 搜索
<label>網址:</label><input type="url" name="" required><br><br>
<label>郵箱:</label><input type="email" name="" required><br><br>
<label>日期:</label><input type="date" name=""><br><br>
<label>時間:</label><input type="time" name=""><br><br>
<label>星期:</label><input type="week" name=""><br><br>
<label>數量:</label><input type="number" name=""> <br><br>
<label>范圍:</label><input type="range" name=""><br><br>
<label>電話:</label><input type="tel" name=""><br><br>
<label>顏色:</label><input type="color" name=""><br><br>
<label>搜索:</label><input type="search" name=""><br><br>
新增常用表單控件屬性：
1、placeholder 設置文本框默認提示文字
2、autofocus 自動獲得焦點
3、autocomplete 聯想關鍵詞
3、HTML5 音頻和視頻
音頻：audio標簽
格式：ogg、wav、mp3
對應屬性：
1、autoplay 自動播放
2、controls 顯示播放器
3、loop 循環播放
4、preload 預加載
5、muted 靜音
1 <audio autoplay controls loop preload> 2 <!-- <source src="source/audio.mp3" type=""> --> 3 <source src="source/audio02.wav" type=""> 4 </audio>
視頻：video標簽
格式：ogg、mp4、webM
對應屬性：
1、width
2、height
3、Poster
可選第三方播放器：
1、cyberplayer
2、tencentPlayer
3、youkuplayer
--------------------移動端頁面布局--------------------
#移動端app分類
1、Native App 原生app手機應用程序
使用原生的語言開發的手機應用，Android系統用的是java，iOS系統用的是object-C
2、Hybrid App 混合型app手機應用程序
混合使用原生的程序和html5頁面開發的手機應用
3、Web App 基於Web的app手機應用程序
完全使用html5頁面加前端js框架開發的手機應用
#Viewport 視口
視口是移動設備上用來顯示網頁的區域，一般會比移動設備可視區域大，寬度可能是980px或者1024px，目的是為了顯示下整個為PC端設計的網頁，這樣帶來的后果是移動端會出現橫向滾動條，為了避免這種情況，移動端會將視口縮放到移動端窗口的大小。這樣會讓網頁不容易觀看，可以用 meta 標簽，name=“viewport ” 來設置視口的大小，將視口的大小設置為何移動設備可視區一樣的大小。
#視網膜屏幕（retina屏幕）清晰度解決方案
視網膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解為屏幕上的一個發光點，無數發光的點組成的屏幕，視網膜屏幕比一般屏幕的物理像素點更小，常見有2倍的視網膜屏幕和3倍的視網膜屏幕，2倍的視網膜屏幕，它的物理像素點大小是一般屏幕的1/4,3倍的視網膜屏幕，它的物理像素點大小是一般屏幕的1/9。
圖像在視網膜屏幕上顯示的大小和在一般屏幕上顯示的大小一樣，但是由於視網膜屏幕的物理像素點比一般的屏幕小，圖像在上面好像是被放大了，圖像會變得模糊，為了解決這個問題，可以使用比原來大一倍的圖像，然后用css樣式強制把圖像的尺寸設為原來圖像尺寸的大小，就可以解決模糊的問題。
背景圖強制改變大小，可以使用background新屬性
background新屬性 :
background-size:
length：用長度值指定背景圖像大小。不允許負值。
percentage：用百分比指定背景圖像大小。不允許負值。
auto：背景圖像的真實大小。
cover：將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。
contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。
#流體布局
流體布局，就是使用百分比來設置元素的寬度，元素的高度按實際高度寫固定值，流體布局中，元素的邊線無法用百分比，可以使用樣式中的計算函數 calc() 來設置寬度，或者使用 box-sizing 屬性將盒子設置為從邊線計算盒子尺寸。
calc()
可以通過計算的方式給元素加尺寸，比如： width：calc(25% - 4px);
box-sizing
1、content-box 默認的盒子尺寸計算方式 2、border-box 設置盒子的尺寸計算方式為從邊框開始，盒子的尺寸，邊框和內填充算在盒子尺寸內
#響應式布局
響應式布局就是使用媒體查詢的方式，通過查詢瀏覽器寬度，不同的寬度應用不同的樣式塊，每個樣式塊對應的是該度下的布局方式，從而實現響應式布局。響應式布局的頁面可以適配多種終端屏幕（pc、平板、手機）。
1 @media (max-width:960px){ 2 .left_con{width:58%;} 3 .right_con{width:38%;} 4 } 5 @media (max-width:768px){ 6 .left_con{width:100%;} 7 .right_con{width:100%;} 8 }
#基於rem的布局
首先了解em單位，em單位是參照元素自身的文字大小來設置尺寸，rem指的是參照根節點的文字大小，根節點指的是html標簽，設置html標簽的文字大小，其他的元素相關尺寸設置用rem，這樣，所有元素都有了統一的參照標准，改變html文字的大小，就會改變所有元素用rem設置的尺寸大小。
#彈性盒模型布局
1、容器屬性
display : flex
聲明使用彈性盒布局
flex-direction : row | row-reverse | column | column-reverse
確定子元素排列的方向
flex-wrap : nowrap | wrap | wrap-reverse
元素超過父容器尺寸時是否換行
flex-flow : flex-direction | flex-wrap
同時設置flex-direction 和 flex-wrap
justify-content : flex-start | flex-end | center | space-between | space-around
子元素的尺寸確定之后，用此屬性來設置flex-direction定義方向上的分布方式
align-items : flex-start | flex-end | center | baseline | stretch
子元素的尺寸確定之后，用此屬性來設置flex-direction定義方向上的垂直方向的分布方式
align-content : flex-start | flex-end | center | space-between | space-around | stretch
設置多行子元素在行方向上的對齊方式
2、條目屬性
flex : none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
同時設置flex-grow 和 flex-shrink 以及 flex-basis
flex-grow ： number
表示的是當父元素有多余的空間時，這些空間在不同子元素之間的分配比例
flex-shrink： number
當父元素的空間不足時，各個子元素的尺寸縮小的比例
flex-basis ：length | percentage | auto | content
用來確定彈性條目的初始主軸尺寸。
align-self ：auto | flex-start | flex-end | center | baseline | stretch
覆寫父元素指定的對齊方式
order : integer
改變條目在容器中的出現順序