html5頁面怎么布局

1）像span這樣的行內(nèi)標(biāo)記，定義它的margin-top和margin-bottom是無效的，除非你把它設(shè)置為塊狀元素才可以。Display:block

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)個舊免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

2）對于塊狀元素，你可以自由的使用外邊距來定義版式和元素之間的距離。類似 DIV 等等，

3）無論什么元素，一旦設(shè)置為是浮動顯示，就擁有了完整的盒模型結(jié)構(gòu)，我們就可以使用外邊距，內(nèi)邊距，邊框，高和寬來控制的大小以及與其他對象之間的位置關(guān)系。

4）浮動是從網(wǎng)頁布局的角度來定義元素的顯示，而行內(nèi)和塊狀屬性主要是從元素自身的性質(zhì)來定其顯示的。

5）當(dāng)元素沒有定義邊框時，可以把內(nèi)邊距作為外邊距使用。有時候外邊距會有重疊現(xiàn)象的。

6）當(dāng)為元素定義背景圖像時，內(nèi)邊距區(qū)域內(nèi)可以顯示背景圖像，而對外邊距區(qū)域來說，背景圖像是達(dá)不到的，他永遠(yuǎn)都是透明狀態(tài)

7）用div+css設(shè)計網(wǎng)頁結(jié)構(gòu)時，設(shè)計師滿腦子都是網(wǎng)頁內(nèi)容，而非內(nèi)容所呈現(xiàn)的效果。

8）塊狀元素：不管塊狀元素寬度是多少，他總會自動占據(jù)一行，因為在他末尾附加了一個換行符，而行內(nèi)元素沒有這個特點。塊狀元素有完整的盒模型結(jié)構(gòu)，可以定義寬度和高度，而行內(nèi)元素沒有這個特性，無法通過高度來改變文本行的行高。

塊元素的代表標(biāo)記 div

行內(nèi)元素的代表標(biāo)記 span ，行內(nèi)標(biāo)記不具備組織結(jié)構(gòu)框架

9）網(wǎng)頁布局分為：自然布局，浮動布局， 定位布局

10）當(dāng)一個元素被定義為浮動顯示時，即定義為塊狀元素。并且該元素就會收縮自身體積為最小狀態(tài)。所以，應(yīng)該有個好的習(xí)慣即把浮動元素設(shè)置高和寬。如果沒有設(shè)置，則元素會按照它所包含的內(nèi)容大小來確定它的大小。

11）當(dāng)元素浮動后，周邊的對象會自動環(huán)繞浮動元素周圍，形成一種環(huán)繞關(guān)系。

12）塊狀元素之間的外邊距會有重疊現(xiàn)象，但是浮動元素之間的外邊距不會發(fā)聲重疊現(xiàn)象。

13）浮動元素移動，上移：margin-top:-**; 下移：margin-botom:-*px,其他以此類推。

14）一般定位元素（絕對或是相對元素）都會覆蓋在文檔流對象之上。但是，select元素的窗口控件還不完全支持z-index

15）在css定位布局中，一般遵循“外部相對定位，內(nèi)部絕對定位”

16）在body中設(shè)置min-width:760px,可以避免布局重疊現(xiàn)象。

HTML5重點內(nèi)容總結(jié)

一、 HTML5新增的標(biāo)簽

（1）header nav main? footer? section article hgroup? figure figcaption? aside?

video? audio canvas

? ? ? ? ? ? （2）如何讓新標(biāo)簽兼容低版本瀏覽器：? html5shiv.js

二、 HTML5新增的表單控件

一、表單控件的新屬性

? ? ? ? input type="text"? placeholder=""? required? autofocus? pattern="abc"

二、新增的表單控件

（1）input type="email"

（2）input type="url"

? （3）數(shù)字控件：? type="number"

? (4)? 滑動組件：? type="range"

? (5)? 拾色器：? ? ? type="color"

? (6)? 日期控件：? ? type="date"

三、本地存儲

1、 三種本地存儲 ：? cookie webStorage(localStorage? sessionStorage)

2、localStorage的API

? (1)寫入：? localStorage.setItem(鍵，值);? //值只能是字符串

? localStorage.user = "123" localStorage["user"] = "123"

? （2）讀取? var user = localStorage.getItem("user")

? ? ? ? ? ? ? var user = localStorage.user;

? ? (3)刪除：? localStorage.removeItem("user")? ? localStorage.clear()

? ? （4）修改：? localStorage.setItem("user","890")

3、sessionStorage的API

sessionStorage.setItem(鍵，值);

? ? sessionStorage.getItem(鍵);

? ? sessionStorage.removeItem(鍵);

sessionStorage.clear();

**********重點**********

? 4、cookie webStorage(localStorage? sessionStorage)三者的區(qū)別

四、離線存儲

（1） *.manifest? (*.appcache)?

? ? ? index.html? html manifest="*.manifest"

(2) 理解離線存儲的更新方式

五、移動端的布局思路：

1、設(shè)備像素比（倍率）? 邏輯像素尺寸 （360px? 320px? 375px? 414px）

? ? ? ? window.devicePixelRatio

? ? 2、 meta name="viewport" content="width=device-width,maximum-

scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no""

3、使用rem單位

六、地理定位

if (navigator.geolocation){?

? ? ? ? navigator.geolocation.getCurrentPosition(success,error,{

? ? ? ? ? ? timeout: 5000

? ? ? ? });

? ? ? ? function success(pos){

? ? ? ? ? ? 緯度:? pos.coords.latitute

? ? ? ? ? ? 經(jīng)度：? pos.coords.longtitude

? ? ? ? }

? ? }

? ? navigator.geolocation.watchPosition(success);

七、地理定位和百度地圖API的結(jié)合

八、視頻，音頻? video autoplay="autoplay" controls="controls" loop="loop" poster=""

preload="preload"? audio

九、移動端事件：?

(1) ontouchstart? ontouchmove? ontouchend

(2) 如何判斷是否為移動端：? if ("ontouchstart" in document){}

? ? (3) 移動端事件的事件對象及常用屬性

? ? ? e.touches[0].clientX? e.touches[0].clientY? e.touches[0].target

? (4) 移動端常見問題及解決方案：

a、 click事件 300ms的延遲：? 1zepto的tap事件? （2） fastclick.js

b、 zepto的tap事件有點透問題 ：? （1） fastclick.js

? ? (5) zepto的touch模塊：? tap? singleTap? doubleTap? longTap?

? ? ? ? ? ? swipeLeft? swipeRight? swipeUp? swipeDown

十、swiper.js的使用? （參考官網(wǎng)）

十一、 canvas

(1)? canvas width="600" id="can"/canvas? ? 300*150

? (2)? var can = document.getElementById("can");

? var cxt = can.getContext("2d");

cxt.beginPath();

cxt.moveTo(100,200);

cxt.lineTo(200,400);

? ? ? ? ? cxt.strokeStyle = '#f00';

cxt.stroke();

? ? ? ? ? ? ? cxt.clearRect(0,0,200,300);

? ? ? ? ? ? ? context.globalCompositeOperation="destination-out";? (了解)

html5移動端開發(fā)和響應(yīng)式設(shè)計差別在哪里？?

html5移動端開發(fā)和響應(yīng)式設(shè)計沒有必然聯(lián)系，不過在HTML5移動開發(fā)中經(jīng)常會經(jīng)常使用響應(yīng)式設(shè)計。

1、響應(yīng)式設(shè)計不僅用在移動網(wǎng)站，在PC端也有不同屏幕的適配，而且移動端和PC端可以只使用一套代碼，這就是全平臺的響應(yīng)式設(shè)計。

2、HTML5移動端（移動網(wǎng)站、混合應(yīng)用、WebAPP）為了解決屏幕適配經(jīng)常會使用響應(yīng)式設(shè)計（流式布局、CSS3媒體查詢），但是響應(yīng)式設(shè)計并不是必須，也可以使用流式布局和remnant來解決移動端的屏幕適配問題。

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

3、HTML5移動端開發(fā)最初的時候使用固定布局，兩邊留白，那時也沒有用到響應(yīng)式設(shè)計，不過，那種用戶體驗不好。