HTML5移動Web開發（三）——在移動網站中使用HTML5

時間 2019-11-11

標籤 html5 html 移動 web 開發網站使用欄目 HTML5 简体版

原文原文鏈接

建立一個簡單得HTML5頁面ch01e2.htmlhtml

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
    </head>
    <body>
        hello to the HTML5 world.
    </body>
</html>

　　HTML5和其餘HTML頁面的惟一區別就在於咱們使用的文件類型定義（DTD Document Type Definition）:<!doctype html>html5

　　Safari(iPhone最經常使用的瀏覽器)會根據<meta name="viewport" content="width=device-width,initial-scale=1.0">,將頁面寬度設爲屏幕寬度，而且根據initial-scale=1禁用瀏覽器的縮放。git

　　HTML5與版本號github

　　爲何HTML5會沒有版本號？web

　　1.瀏覽器並不會針對HTML的某個版本作支持，而是針對某個功能作支持。就是說若是瀏覽器支持你使用某個功能，及時你把文檔申明爲HTML4，瀏覽器仍然會按照HTML5的標準來顯示頁面。canvas

　　2.名字能夠很簡潔。　瀏覽器

　　移動文檔類型app

　　使用HTML5文檔類型<!doctype html>是不是可靠的？ide

　　文檔類型只是用做確認，而非瀏覽器實際顯示。工具

　在怪異模式（一些網頁瀏覽器爲了維持對較舊的網頁設計的向後兼容性而使用的一種技術）中是不是可靠的？

　　<!doctype html>是瀏覽器按照標準工做所須要的最少的信息，因此使用<!doctype html>時很是可靠的。

　　咱們使用<!doctype html>而不是<!DOCTYPE html>,這是由於HTML5不是大小寫敏感，可是出於一致性的考慮，咱們都將使用小寫。

　　跨瀏覽器HTML5

　　舊瀏覽器沒法識別HTML5元素，也沒法對這些元素設置樣式，可是有許多工具能夠解決這個問題，例如Modernizr.

　　Windows Mobile的自帶瀏覽器沒法識別HTML5元素。若是沒有Windows Mobile你可使用IE7來測試，由於他們都是基於相同的瀏覽器引擎。Modernizr下載地址：http://www.modernizr.com/

　　新建HTML文件ch01e3.html

<!doctype html>
<html>
  <head>
  <title>Mobile Cookbook</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  header, footer {display:block;}
  </style>
  </head>
  <body>
    <header>
      Main Navigation here
    </header>
    body content here
    <footer>
      Footer links here
    </footer>
  </body>
</html>

　　再新建一個HTML文件ch01e4.html,引入Modernizr。

　　modernizr-1.7.min.js 下載：http://pan.baidu.com/s/1c0v1Api 提取碼：kepb

<!doctype html>
<html>
  <head>
  <title>Mobile Cookbook</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="modernizr-1.7.min.js"></script>
  <style>
  header, footer {display:block;}
  </style>
  </head>
  <body>
    <header>
      Main Navigation here
    </header>
    body content here
    <footer>
      Footer links here
    </footer>
  </body>
</html>

效果圖：

　　Modernizr的使用須要在<head>標籤中引入。Modernizr不是惟一能夠幫助咱們跨瀏覽器的庫，還有其餘兩點值得注意：

　　1.html5shim,對打印也一樣有效：http://code.google.com/p/html5shim/
　　2.InnerShiv,支持元素的innerHTML。http://jdbartlett.github.com/innershiv/

　　HTML5 CSS重置
　　下面的代碼能夠清除HTML5元素的默認樣式：
　　article,aside,canvas,detailsfigcaption,figure,footer,header,hgroup,menu,nav,se
　　ction,summary,time,mark,audio,video{
　　　　margin:0;
　　　　padding:0;
　　　　border:0;
　　　　font-size:100%;
　　　　font:inherit;
　　　　vertical-align:baseline;
　　}

　　使HTML5元素在舊版本IE中變爲塊級元素：
　　下面的代碼可使HTML5圓度變爲塊級元素，可是不是全部的HTML5元素都須要顯示爲塊級元素。
　　下面是HTML5中的塊級元素：
　　article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
　　　　display:block;
　　}

　　Modernizr

　　Modernizr不只使HTML5元素能夠被設置樣式，他還能夠檢測HTML5各個功能在不一樣瀏覽器中的兼容性。你能夠在2.0版本中自定義下載內容：http://www.modernizr.com/download/　　

　　學習HTML5的免費資源

　　若是你對HTML5不是很熟悉，能夠在下面的網站學習：

　　HTML5 Doctor:http://html5doctor.com/

　　Dive Into HTML5:http://diveintohtml5.org/

　　HTML5 Rocks:http://www.html5rocks.com/

　　若是但願詳細瞭解HTML5，你能夠閱讀官方HTML5文檔，W3C版本的文檔：　http://dev.w3.org/html5/spec/Overview.html

　　WHATWG版本的在線標準：http://www.whatwg.org/specs/web-apps/current-work/multipage/