HTML5新結構標籤和移動端頁面佈局

時間 2019-11-13

標籤 html5 html 結構標籤移動頁面佈局欄目 HTML5 简体版

原文原文鏈接

--------------------HTML5新結構標籤--------------------
一、h5新增的主要語義化標籤以下：
　　一、header 頁面頭部、頁眉
　　二、nav 頁面導航
　　三、article 一篇文章
　　四、section 文章中的章節
　　五、aside 側邊欄
　　六、footer 頁面底部、頁腳javascript

pc端兼容須要引用對應的js腳本
<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>css

二、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>
新增經常使用表單控件屬性：
　　一、placeholder 設置文本框默認提示文字
　　二、autofocus 自動得到焦點
　　三、autocomplete 聯想關鍵詞html

三、HTML5 音頻和視頻
　　音頻：audio標籤
　　格式：ogg、wav、mp3
　　對應屬性：
　　　　一、autoplay 自動播放
　　　　二、controls 顯示播放器
　　　　三、loop 循環播放
　　　　四、preload 預加載
　　　　五、muted 靜音　　前端

1 <audio  autoplay controls loop preload>
2     <!-- <source src="source/audio.mp3" type=""> -->
3     <source src="source/audio02.wav" type="">
4 </audio>

　　視頻：video標籤html5

　　格式：ogg、mp四、webM
　　對應屬性：
　　　　一、width
　　　　二、height
　　　　三、Poster
　　可選第三方播放器：
　　一、cyberplayer
　　二、tencentPlayer
　　三、youkuplayerjava

--------------------移動端頁面佈局--------------------
#移動端app分類
　　一、Native App 原生app手機應用程序
　　使用原生的語言開發的手機應用，Android系統用的是java，iOS系統用的是object-Cweb

　　二、Hybrid App 混合型app手機應用程序
　　混合使用原生的程序和html5頁面開發的手機應用瀏覽器

　　三、Web App 基於Web的app手機應用程序
　　徹底使用html5頁面加前端js框架開發的手機應用app

#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

　　一、content-box 默認的盒子尺寸計算方式二、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 }