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/