HTML5移动Web开发（三）——在移动网站中使用HTML5
创建一个简单得HTML5页面ch01e2.html
<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>
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
<!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/
HTML5移动Web开发（三）——在移动网站中使用HTML5的更多相关文章
- HTML5移动Web开发实战 PDF扫描版
<HTML5移动Web开发实战>提供了应对这一挑战的解决方案.通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台.全书共分10章,从移动Web. ...
- HTML5移动Web开发（一）——HTML5和移动网站基本概念以及一些模拟器
当前,手机设备发展迅猛.屏幕尺寸各不相同.存储和性能仍有局限性,如何结合HTML5的功能,在多平台上创建高性能.响应式的移动网站,是Web开发者所要面对的首要挑战.HTML5以及移动网站都是很有前景的 ...
- Web 开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十七】
<Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- html5移动web开发实战必读书记
原文 http://itindex.net/detail/50689-html5-移动-web 主题 HTML5 一.配置移动开发环境 1.各种仿真器.模拟器的下载安装 http://www.mob ...
- HTML5移动Web开发指南-学习笔记（一）
一,浏览器引擎 浏览器的内核引擎,基本上是四分天下: Trident: IE 以Trident 作为内核引擎; Gecko: Firefox 是基于 Gecko 开发; WebKit: Safa ...
- HTML5移动Web开发（八）——避免文本字体大小重置
适用设备:iOS.Windows Mobile在一些移动设备上,比方说iPhone,Windows Mobile,当用户把手机切换到横屏时,浏览器会自动地重置文本字体大小.这可能会对我们造成困扰,因为 ...
- Web开发人员不容错过的10个HTML5工具
HTML5已经成为当今世界的一个必定组成部分.由于World Wide Web万维网是使用超文本标记语言来架构和呈现的,于是HTML5成为了最流行的编程语言之中的一个.随着网络的不断扩张,Web开发者 ...
- HTML5移动Web开发（六）——定义一个内容策略
通过分析工具搜集到的数据,你可以定义一个内容策略,这对已经有了一个桌面网站的人是非常有用的. 1.确认你已经把分析工具的Javascript代码嵌入到网站中.(http://www.cnblogs.c ...
- HTML5移动Web开发（四）——移动设计
桌面网站的设计趋势是固定布局(fixed layout)或流体布局(fluid layout),而在移动网站中我们应该始终使用流体布局,它可以使你的网站适应不同的设备尺寸. 固定宽度布局(Fixed ...
随机推荐
- react-router+webpack+gulp路由实例
背景:新项目要开始了,有一种想要在新项目中使用react的冲动,应该也是一个单页面的应用,单页应用就涉及到一个路由的问题.于是最近在网上找了蛮多关于react-router的文章,也遇到了许多的坑,经 ...
- JAVA学习博客---2015-6
JAVA核心技术卷一第一遍看得差不多了,应该是五月初开始看的,用了两个月的中午时间看完的,一共七百多页,接下来还是需要再看一遍,不懂的还是有很多. JAVA和C++一样是面向对象OOP的语言,不同于命 ...
- static关键字作用总结
之前讲到final关键字的作用是每次面试的时候我必问求职者的两个问题之一,另外一个问题就是文本会写到的static.final和static一样,都是一个小问题可以看到一个人的基础是否扎实以及平时是否 ...
- Window Ghosting
最近工作中遇到Window Ghosting这个问题, 感觉挺有意思,这里简单记录下. 在XP时代我们的程序没有响应后只能通过任务管理器强制杀掉,但是Vista之后情况变了, 我们仍然可以拖动失去响应 ...
- Java-字符串练习
1. 用自己的算法实现startsWith和endsWith功能. String str="dsjhajdl"; Scanner sc=new Scanner(System.in) ...
- 爱上MVC3~为下拉列表框添加一个自定义验证规则
回到目录 开发它的原因: 之前的同事,也是我的哥们,问我下拉列表框是否可以支持验证,这个问题看似简单,但确实MVC里有为我们提供,所以,只能自己写个扩展了,即自己写一个attribute特性,让它继承 ...
- Mybatis文档阅读笔记（明日继续更新...）
今天在编写mybatis的mapper.xml时,发现对sql的配置还不是很熟,有很多一坨一坨的东西,其实是可以抽取成服用的.不过良好的组织代码,还是更重要的.
- [C#基础]基础知识一: 面向对象的基本知识.
激励自己有时间多看看.!! C#基础共分为七个部分: 一: 面向对象 二: 值类型, 引用类型, 字符串操作 三: 集合文件操作 四: 正则表达式 五: XML操作 六: 委托, 事件 七: 反射 1 ...
- 合法提交Html标签 Page指令
3.2.1 提交合法的HTML标签(1) 有时候我们需要让我们提交的文本展示出来的效果非常美观,通常会对服务器提交一些HTML标签来控制文本或内容的样式. HTML标签可能包含了很多不安全的因素,所以 ...
- linux下编译安装curl
linux下编译安装curl 1.下载curl git clone https://github.com/curl/curl.git 2.在curl目录下生成configure文件 ./buldcon ...