首先需要考慮是全平臺(tái)適配還是只是移動(dòng)端適配這里以移動(dòng)端響應(yīng)式網(wǎng)站為例，講述如何制作響應(yīng)式網(wǎng)頁(yè)#xF4CF選定基本設(shè)計(jì)尺寸選定基本設(shè)計(jì)尺寸，一般以1080為基準(zhǔn)確定響應(yīng)式web設(shè)計(jì)的應(yīng)用場(chǎng)景之后，和美工或設(shè)計(jì)師溝通，之前，一般需要美工出幾套主流移動(dòng)設(shè)備屏幕分辨率的設(shè)計(jì)圖，現(xiàn)在，使用流式布局以及rem等可以使用一套設(shè)計(jì)。

1設(shè)計(jì)能反映網(wǎng)站內(nèi)容的logo，并且將logo放在網(wǎng)站的醒目位置2網(wǎng)站的顏色要統(tǒng)一，要突出網(wǎng)站的主調(diào)色彩3相同類型的圖像要有相同的效果4網(wǎng)站要有一句明晰的宣傳標(biāo)語(yǔ)三網(wǎng)站布局類型 1國(guó)字型布局 這種布局類型分為上邊欄左邊欄中間內(nèi)容區(qū)右邊欄和底部的頁(yè)腳區(qū)域，其形狀酷似一個(gè)“國(guó)”。

1活動(dòng)運(yùn)營(yíng)型 為活動(dòng)推廣運(yùn)營(yíng)而打造的H5頁(yè)面是最常見的類型，形式多變，包括游戲邀請(qǐng)函賀卡測(cè)試題等形式與以往簡(jiǎn)單的靜態(tài)廣告圖片傳播不同，如今的H5活動(dòng)運(yùn)營(yíng)頁(yè)需要有更強(qiáng)的互動(dòng)更高質(zhì)量更具話題性的設(shè)計(jì)來(lái)促成用戶分享傳播從進(jìn)入微信H5頁(yè)面到最后落地到品牌App內(nèi)部，如何設(shè)計(jì)一套合適的引。

如果對(duì)于簡(jiǎn)答，優(yōu)雅，容易閱讀的代碼有所偏好的話，HTML5絕對(duì)是一個(gè)為量身定做的東西HTML5允許寫出簡(jiǎn)單清晰富于描述的代碼符合語(yǔ)義學(xué)的代碼允許你分開樣式和內(nèi)容看看這個(gè)典型的簡(jiǎn)單擁有導(dǎo)航的heaer代碼ltdiv id=quotheaderquot lth1Header Textlth1 ltdiv id=quotnavquot ltul ltlilta href=quot#quot。

3Jo該框架可以創(chuàng)建像本地一樣的應(yīng)用，并且兼容任何操作系統(tǒng)，無(wú)論是BlackberryiOS還是Android并且提供許多HTML5小部件使用它可以解決任何動(dòng)畫設(shè)計(jì)方面的問(wèn)題4SenchaTouchSenchaTouch是第一個(gè)基于HTML5的移動(dòng)應(yīng)用框架，利用JavaScriptHTML5和CSS3來(lái)構(gòu)建移動(dòng)應(yīng)用程序，該框架利用本地代理存儲(chǔ)離線數(shù)據(jù)。

廣義論及HTML5時(shí)，實(shí)際指的是包括HTMLCSS和JavaScript在內(nèi)的一套技術(shù)組合它希望能夠減少網(wǎng)頁(yè)瀏覽器對(duì)于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)PluginBased Rich Internet Application，RIA，例如Adobe FlashMicrosoft Silverlight與Oracle JavaFX的需求，并且提供更多能有效加強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集2具體來(lái)。

一web應(yīng)用更容易開發(fā) HTML5的規(guī)范都是基于用戶優(yōu)先準(zhǔn)則來(lái)編寫的，貼合開發(fā)者的編碼習(xí)慣，語(yǔ)法限制不嚴(yán)，代碼也更為精簡(jiǎn)，更易于閱讀二功能強(qiáng)大，用戶體驗(yàn)佳 HTML5視頻播放起來(lái)更流暢清晰，也更省電HTML5游戲小巧流暢，畫面質(zhì)量高，操作易上手HTML5廣告擺脫了以前網(wǎng)頁(yè)廣告的懸浮滾動(dòng)和彈出。

1 Adobe Dreamweaver這是一款專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)和開發(fā)工具，支持HTML5CSS3等前端技術(shù)，提供了豐富的代碼編輯和調(diào)試功能，方便開發(fā)者制作響應(yīng)式和移動(dòng)優(yōu)化的網(wǎng)頁(yè)同時(shí)，它還支持團(tuán)隊(duì)協(xié)作和版本控制功能軟件介紹集成開發(fā)環(huán)境Dreamweaver提供了一個(gè)集成的開發(fā)環(huán)境，包含了代碼高亮自動(dòng)完成和錯(cuò)誤檢查等。

第一大原因 它是未來(lái)，開始用吧最大的原因今天就開始使用HTML5是因?yàn)樗俏磥?lái)，不要掉隊(duì)了HTML5不會(huì)往每個(gè)方向發(fā)展，但是更多的元素已經(jīng)被很多公司采用，并且開始著手開發(fā)HTML5其實(shí)更像HTML，它不是一個(gè)新的技術(shù)需要你重新學(xué)習(xí)如果開發(fā)XHTML strict的話現(xiàn)在就已經(jīng)在開發(fā)HTML5了為什么不更。

逗自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)地的核心，就是CSS3引入的 Media Query模塊它的意思就是，自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件上面的代碼意思是，如果屏幕寬度小于400像素maxdevicewidth 400px，就加載tinyScreencss文件如果屏幕寬度在400像素到600像素之間，則加載smallScreencss文件除了用html標(biāo)簽。

HTML5的移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)稿，通常情況下，內(nèi)容區(qū)為750px或960px或者1080px的，一般不小于750px像素大小寬度設(shè)計(jì)稿可以比750px大，但是絕對(duì)不能比750px小，這個(gè)主要是由于當(dāng)前手機(jī)的分辨率相對(duì)較高iPhone 6是375物理像素，但實(shí)際像素為其兩倍，也就是750，這個(gè)750就是這么來(lái)的如果設(shè)計(jì)圖稿過(guò)小。

下面是表單代碼，你直接再加屬性就可以了，表單用 table 寫比較簡(jiǎn)單，div 太麻煩了lthtml xmlns=quot quot lthead ltmeta。

通過(guò)把元素嵌套進(jìn) a 里使其變成一個(gè)鏈接將 img 嵌套進(jìn) a 元素中 如果我們要把圖片嵌套進(jìn) a 元素， 可以這樣寫HTML 中有用于創(chuàng)建有序列表的特定元素有序列表以 ltol 開始，中間包含一個(gè)或多個(gè) ltli 元素 最后以 ltol 結(jié)束例如注意 別忘了 input 元素是 quot自閉和標(biāo)簽quot。

html是一種超文本標(biāo)記語(yǔ)言，h5是就是html的第五代簡(jiǎn)稱h5包含了html所有技術(shù)點(diǎn)，比如網(wǎng)頁(yè)設(shè)計(jì)，網(wǎng)頁(yè)上面的圖片文字視頻的顯示和排版技術(shù)h5課程一般包含傳統(tǒng)網(wǎng)頁(yè)設(shè)計(jì)技術(shù)新型網(wǎng)頁(yè)設(shè)計(jì)UI設(shè)計(jì)比如h5海報(bào)設(shè)計(jì)等等由于h5使用場(chǎng)景位居前段，所以課程還會(huì)涉及一些產(chǎn)品和用戶體驗(yàn)以及設(shè)計(jì)的內(nèi)容。

2前端后臺(tái)的區(qū)別無(wú)論HTML5還是iOS，在整個(gè)網(wǎng)頁(yè)開發(fā)流程中，前端HTML5開發(fā)工程師，主要負(fù)責(zé)的是“前臺(tái)頁(yè)面制作”，“網(wǎng)站測(cè)試”，“修改”三個(gè)部分3HTML5與網(wǎng)頁(yè)設(shè)計(jì)與制作的區(qū)別原有的網(wǎng)頁(yè)設(shè)計(jì)與制作，主要針對(duì)PC平臺(tái)，進(jìn)行網(wǎng)頁(yè)網(wǎng)站的設(shè)計(jì)與制作，相對(duì)會(huì)涉及一部分設(shè)計(jì)工作，并將美工圖實(shí)現(xiàn)。

想要video能自動(dòng)填充慢父div的大小，只要給video標(biāo)簽加上style=quotwidth= 100% height=100% objectfit fillquot即可objectfit語(yǔ)法 objectfit屬性的語(yǔ)法非常的簡(jiǎn)單objectfitfill contain cover scaledown objectfit取值說(shuō)明 objectfit主要適合于替換元素，比如ltvideolt。