網頁設計兼容h5頁面

1、html5網頁設計期末作業，要求是一個網站（至少4個網頁）

按F12或者右鍵→檢查 可查看網頁源代碼，左上角元素下面的圖標，可讓你看具體區域的代碼，右面那一列是CSS樣式，你找幾個簡單的網頁把代碼復制過來慢慢改唄

2、如何解決HTML5在實際應用中的兼容性問題

一、"自適應網頁設計"的概念
2010年，Ethan Marcotte提出了"自適應網頁設計"（Responsive Web Design）這個名詞，指可以自動識別屏幕寬度、並做出相應調整的網頁設計。
自適應網頁設計"到底是怎麼做到的看其實並不難。
首先，在網頁代碼的頭部，加入一行viewport元標簽。
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置，包括IE9。對於那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
<!--[if lt IE 9]>
<script src=""></script>
<![endif]-->
三、不使用絕對寬度
由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。
具體說，CSS代碼不能指定像素寬度：
width:xxx px;
只能指定百分比寬度：
width: xx%;
或者
width:auto;
四、相對大小的字體
字體也不能使用絕對大小（px），而只能使用相對大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。
h1 {
font-size: 1.5em;
}
然後，h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。
五、流動布局（fluid grid）
"流動布局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。
另外，絕對定位（position: absolute）的使用，也要非常小心。
六、選擇載入CSS
"自適應網頁設計"的核心，就是CSS3引入的Media Query模塊。
它的意思就是，自動探測屏幕寬度，然後載入相應的CSS文件。
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 400px)"
href="tinyScreen.css" />
上面的代碼意思是，如果屏幕寬度小於400像素（max-device-width: 400px），就載入tinyScreen.css文件。
<link rel="stylesheet" type="text/css"
media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="smallScreen.css" />
如果屏幕寬度在400像素到600像素之間，則載入smallScreen.css文件。
除了用html標簽載入CSS文件，還可以在現有CSS文件中載入。
@import url("tinyScreen.css") screen and (max-device-width: 400px);
七、CSS的@media規則
同一個CSS文件中，也可以根據不同的屏幕解析度，選擇應用不同的CSS規則。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代碼意思是，如果屏幕寬度小於400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。
八、圖片的自適應（fluid image）
除了布局和文本，"自適應網頁設計"還必須實現圖片的自動縮放。
這只要一行CSS代碼：
img { max-width: 100%;}
這行代碼對於大多數嵌入網頁的視頻也有效，所以可以寫成：
img, object { max-width: 100%;}
老版本的IE不支持max-width，所以只好寫成：
img { width: 100%; }
此外，windows平台縮放圖片時，可能出現圖像失真現象。這時，可以嘗試使用IE的專有命令：
img { -ms-interpolation-mode: bicubic; }
或者，Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
不過，有條件的話，最好還是根據不同大小的屏幕，載入不同解析度的圖片。有很多方法可以做到這一條，伺服器端和客戶端都可以實現

3、怎麼用html5製作網頁，怎麼讓IE8兼容html5

itjob老師教過為了方便兼容IE8中使用HTML5，可以使用JS的方法來使低於IE9版本的IE瀏覽器內兼容。
<!--[if lt IE 9]>
<script>
(function(){
var tags = ['header','footer','figure','figcaption','details','summary','hgroup','nav','aside','article','section','mark','abbr','meter','output','progress','time','video','audio','canvas','dialog'];
for(var i=tags.length - 1;i>-1;i--){ document.createElement(tags[i]);}
})();
</script>
<![endif]-->

第二種方容法：使用Google的html5shiv包

4、國內幾款比較好用的html5頁面製作工具有哪些？

你好，微信上的HTML頁面一般是用工具做出來的，很少有開發的H5案列，最常見是翻頁H5，自由度比較低，只能修改圖片換換文字，而專業工具自由度比較高，可以很靈活的設計H5，epub360在專業工具中上手難度適中，值得大家嘗試下。Epub360，有很多豐富的組件可以調用。使用邏輯跟PPT差不多，音樂、動畫、視頻、交互都可以輕松實現。在線製作，只需要把鏈接放在公眾號里或者分享朋友朋友圈即可。

5、網頁設計與HTML5的關系

網頁設計是根據企業希望向瀏覽者傳遞的信息（包括產品、服務、理念、文化），進行網站功能策劃，然後進行的頁面設計美化工作。作為企業對外宣傳物料的其中一種，精美的網頁設計，對於提升企業的互聯網品牌形象至關重要。
網頁設計一般分為三種大類：功能型網頁設計（服務網站&B/S軟體用戶端）、形象型網頁設計（品牌形象站）、信息型網頁設計（門戶站）。設計網頁的目的不同，應選擇不同的網頁策劃與設計方案。
網頁設計的工作目標，是通過使用更合理的顏色、字體、圖片、樣式進行頁面設計美化，在功能限定的情況下，盡可能給予用戶完美的視覺體驗。高級的網頁設計甚至會考慮到通過聲光、交互等來實現更好的視聽感受。
萬維網的核心語言、標准通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改。
2014年10月29日，萬維網聯盟宣布，經過接近8年的艱苦努力，該標准規范終於制定完成。

6、h5頁面設計是什麼意思

h5頁面設計的意思是用H5語言編寫的界面。

H5原本是一種製作萬維網頁面的標准計算機語言，由HTML5簡化而來的詞彙，HTML5的設計目的是為了在移動設備上支持多媒體。

頁面設計：隨著時代的發展，移動端用戶的增加，掃描二維碼付款、登入網站、關注公眾號、兌獎等行為越來越多，一個新的概念移動適配站即H5頁面誕生。它是通過HTML和CSS和JS技術生成的網站，需要適配多種解析度的屏幕的。分別有H5網站，H5廣告，H5游戲。

APP就是安裝在手機的一個應用程序，打開它就能進入該產品進行操作。而H5頁面則是可在不同瀏覽器和微信APP中打開的頁面。app不全都是H5界面，只是有些app為了更好的兼容性採取H5界面。

(6)網頁設計兼容h5頁面擴展資料：

H5和APP的區別。

1、開發周期：H5的開發基於後台由前端研發，時間短。APP的開發則需重新開發前端和後台，時間長。

2、更新迭代：H5的更新，只要研發更新完畢，用戶只需重新進入一次頁面，即可看到最新的頁面。APP的更新，當研發更新完畢，此時用戶需要重新下載一次APP，才可看到新的更新。

3、傳播性：H5的傳播快，通過各種瀏覽器，微信，朋友圈應用市場等方式。APP的傳播只有應用市場。

4、多平台：H5網頁可以在瀏覽器，微信中打開，還可以封裝成獨立APP。傳統APP只能在手機桌面中打開，不可以在瀏覽器或微信界面中打開。

7、怎麼用html5製作網頁，怎麼讓IE8兼容html5

引入 html5shiv.js 讓ie~7~8支持h5標簽。【主要】
H5特性如canvas，svg，也勉強可以通過js插件實現，不推薦。
CSS3 hack 的寫法，對專不同瀏覽器進行修屬正。
CSS3特性如圓角陰影可以通過如 ie-css3.htc 等腳本實現，不推薦。
通過腳本實現的「兼容」並不完美，可能會出現一些問題。
所以如果項目要兼容低版本瀏覽器，那麼一般都會放棄一些特效。

8、網頁設計Html5

左邊的左浮動，右邊的右浮動，沒有問題的。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div0 {
    width: 800px;
}
#divL {
    width: 598px;
    height: 300px;
    float: left;
    background-color: #ddd;
}
#divR {
    width: 200px;
    height: 300px;
    background-color: #eee;
    float: right;
}
#l1 {
    height: 50px;
    background-color: #888;
}
#l2 {
    height: 100px;
    background-color: #aaa;
}
</style>
</head>
<body>
<div id='div0'>
  <div id='divL'>
    <div id='l1'>左浮動內容1</div>
    <div id='l2'>左浮動內容2</div>
  </div>
  <div id='divR'>右浮動內容</div>
</div>
</body>
</html>

顯示結果：

9、H5網頁的設計有哪些優勢啊？

H5製作一般分為代碼開發和工具實現兩種。正常代碼開發團隊至少需要一名美工，前後端兩名開發技術人員，開發成本高製作周期耗時較長，但自定義程度高，需求與上線幾乎無異，如網易、騰訊、阿里製作團隊多為代碼開發上線。但目前互聯網的發展，一大批可視化工具誕生，設計師無需和程序員拌嘴皮，自己製作，簡單易學，適合中小型企業常規企劃需求。下面簡單向大家介紹幾種H5工具，可根據自己的需求和使用習慣去選擇。

專業H5製作工具推薦：意派epub360

總結：如果對於需求，細節要求比較多，推薦意派epub360，支持SVG路徑動畫、SVG變形動畫、精細化序列幀動畫控制、一鏡到底、全景360、畫中畫、手勢觸發、搖一搖、拖拽交互、碰撞檢測、重力感應、關聯控制等專業級組件。

百度搜索 epub360 或點擊 H5頁面製作工具

10、H5網頁設計需要注意哪些要點

首先選擇一個專業的H5工具，比如意派Epub360 H5平台靈活的專業的組件可以自定義實現你的個性創意想法；
其次，要有一個好的創意策劃，包含H5玩法、創意形式如何與品牌、產品或活動結合；
然後，H5標題和封面要誘惑力，吸引別人點進來，這就成功了第一步；
再者，文案和平面要足夠精美、大氣、這樣可以吸引用戶留下來多看一會，多存活一秒，你的作品就可以多向用戶傳播一秒的內容；
最後是引導和轉化，讓用戶主動分享，無論是紅包裂變還是文案共鳴，最後都是讓用戶分享，形成二次傳播，讓h5被更多的人看到，營銷得到更大的價值。

希望此回答對做h5的設計師有幫助~