创建一个简单得HTML5页面ch01e2.html

  1. <html>
  2.     <head>
  3.         <meta name="viewport" content="width=device-width,initial-scale=1.0">
  4.     </head>
  5.     <body>
  6.         hello to the HTML5 world.
  7.     </body>
  8. </html>

　　HTML5和其他HTML页面的唯一区别就在于我们使用的文件类型定义（DTD Document Type Definition）:<!doctype html>

　　Safari(iPhone最常用的浏览器)会根据<meta name="viewport" content="width=device-width,initial-scale=1.0">,将页面宽度设为屏幕宽度，并且根据initial-scale=1禁用浏览器的缩放。

　　HTML5与版本号

　　为什么HTML5会没有版本号？

　　1.浏览器并不会针对HTML的某个版本做支持，而是针对某个功能做支持。就是说如果浏览器支持你使用某个功能，及时你把文档申明为HTML4，浏览器仍然会按照HTML5的标准来显示页面。

　　2.名字可以很简洁。　

　　移动文档类型

　　使用HTML5文档类型<!doctype html>是否是可靠的？

　　文档类型只是用作确认，而非浏览器实际显示。

　 在怪异模式（一些网页浏览器为了维持对较旧的网页设计的向后兼容性而使用的一种技术）中是否是可靠的？

　　<!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

  1. <!doctype html>
  2. <html>
  3.   <head>
  4.   <title>Mobile Cookbook</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <style>
  8.   header, footer {display:block;}
  9.   </style>
  10.   </head>
  11.   <body>
  12.     <header>
  13.       Main Navigation here
  14.     </header>
  15.     body content here
  16.     <footer>
  17.       Footer links here
  18.     </footer>
  19.   </body>
  20. </html>

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

  1. 　　modernizr-1.7.min.js 下载：http://pan.baidu.com/s/1c0v1Api 提取码：kepb
  1. <!doctype html>
  2. <html>
  3.   <head>
  4.   <title>Mobile Cookbook</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <script src="modernizr-1.7.min.js"></script>
  8.   <style>
  9.   header, footer {display:block;}
  10.   </style>
  11.   </head>
  12.   <body>
  13.     <header>
  14.       Main Navigation here
  15.     </header>
  16.     body content here
  17.     <footer>
  18.       Footer links here
  19.     </footer>
  20.   </body>
  21. </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/

HTML5移动Web开发（三）——在移动网站中使用HTML5的更多相关文章

  1. HTML5移动Web开发实战 PDF扫描版​

    <HTML5移动Web开发实战>提供了应对这一挑战的解决方案.通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台.全书共分10章,从移动Web. ...

  2. HTML5移动Web开发（一）——HTML5和移动网站基本概念以及一些模拟器

    当前,手机设备发展迅猛.屏幕尺寸各不相同.存储和性能仍有局限性,如何结合HTML5的功能,在多平台上创建高性能.响应式的移动网站,是Web开发者所要面对的首要挑战.HTML5以及移动网站都是很有前景的 ...

  3. Web 开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十七】

    <Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  4. html5移动web开发实战必读书记

    原文  http://itindex.net/detail/50689-html5-移动-web 主题 HTML5 一.配置移动开发环境 1.各种仿真器.模拟器的下载安装 http://www.mob ...

  5. HTML5移动Web开发指南-学习笔记（一）

    一,浏览器引擎    浏览器的内核引擎,基本上是四分天下: Trident: IE 以Trident 作为内核引擎; Gecko: Firefox 是基于 Gecko 开发; WebKit: Safa ...

  6. HTML5移动Web开发（八）——避免文本字体大小重置

    适用设备:iOS.Windows Mobile在一些移动设备上,比方说iPhone,Windows Mobile,当用户把手机切换到横屏时,浏览器会自动地重置文本字体大小.这可能会对我们造成困扰,因为 ...

  7. Web开发人员不容错过的10个HTML5工具

    HTML5已经成为当今世界的一个必定组成部分.由于World Wide Web万维网是使用超文本标记语言来架构和呈现的,于是HTML5成为了最流行的编程语言之中的一个.随着网络的不断扩张,Web开发者 ...

  8. HTML5移动Web开发（六）——定义一个内容策略

    通过分析工具搜集到的数据,你可以定义一个内容策略,这对已经有了一个桌面网站的人是非常有用的. 1.确认你已经把分析工具的Javascript代码嵌入到网站中.(http://www.cnblogs.c ...

  9. HTML5移动Web开发（四）——移动设计

    桌面网站的设计趋势是固定布局(fixed layout)或流体布局(fluid layout),而在移动网站中我们应该始终使用流体布局,它可以使你的网站适应不同的设备尺寸. 固定宽度布局(Fixed ...

随机推荐

  1. Yii2 性能优化 来源yii2官方文档

    优化你的 PHP 环境 使用最新稳定版本的 PHP . PHP 的主要版本可能带来显著的性能提升. 启用字节码缓存 Opcache(PHP 5.5或更高版本) 或 APC (PHP 5.4或更早版本) ...

  2. GNU Makefile编写

    [Introduction] make 是程序员很好用的工具,如果存在makefile存在,每次更新代码,执行shell命令 shell 就可以执行所有需要编译的文件,make是根据你编写的Makef ...

  3. java jdb命令详解

    jdb - Java debugger 功能描述: 通过简单的命令行程序,对本地或远程jvm进程进行调试. 开启jdb会话: 有多种方式可以开启jdb会话. (1)常见的方式是采用Jdb命令打开一个新 ...

  4. 基于资源的权限系统-API设计

    概述 权限系统需要和别的系统集成,因此,良好的API是易用性的保证. 这里只设计一些权限相关的核心 API,关于用户,组织,导入导出之类的后续再逐步补充 API 设计 围绕权限有以下 4 类 API: ...

  5. Task Runner Explorer for vs2015找不到啊

    https://visualstudiogallery.msdn.microsoft.com/8e1b4368-4afb-467a-bc13-9650572db708/view/ 编译typescri ...

  6. 可嵌入式的动态http服务minihttp组件

    minihttp是基于c#实现的轻量级的动态WEB服务组件,通过minihttp可以轻松地构一个动态的WEB服务并嵌入到.NET程序中运行部署.由于minihttp完全基于托管代码实现,所以可以轻松运 ...

  7. 软件工程课设day3

    下载昨日新版本程序,完成修复项目的测试. 与组内成员讨论,确认项目新模块功能“吐槽墙”的设计方向与实现形式——因为项目为便捷工具类,社区形式的实现方式与项目本质背道而驰.因此决定以“点击目标课程条目, ...

  8. .NET 的 WebSocket 开发包比较

    编者按 本文出现在第三方产品评论部分中.在这一部分的文章只提供给会员,不允许工具供应商用来以任何方式和形式来促销或宣传产品.请会员报告任何垃圾信息或广告. Web项目常常需要将数据尽可能快地推送给客户 ...

  9. Java多线程18：线程池

    使用线程池与不使用线程池的差别 先来看一下使用线程池与不适应线程池的差别,第一段代码是使用线程池的: public static void main(String[] args) { long sta ...

  10. dojo/dom-class源码学习

    dom-class模块是dojo中对于一个元素class特性的操作(特性与属性的区别),主要方法有: contains 判断元素是否包含某个css class add 为元素添加某个css class ...