您所在的位置： &
从零开始构建HTML 5 Web页面(1)
从零开始构建HTML 5 Web页面(1)
HTML 5有何不同？这个新的Web标准都新增了那些标记？它将如何改变我们现有的Web开发？本文将向您详细解答这些问题并用实例打造一个完整的HTML 5 Web页面。
【51CTO译文】是时下Web开发领域炒得火热的一个术语，是的，很多人都看好它，也有很多业内知名公司开始正式使用HTML 5重新构建自己的网站，如，，开始全面拥抱HTML 5实现离线解决方案，各大浏览器厂家也纷纷开始支持HTML 5，连被人诟病的微软也声称要在。本文打算为大家详细介绍一下如何构建一个完整的HTML 5 Web页面，以加深对HTML 5的理解。
HTML 5有何不同？
首先我们要明白HTML 5是新的语义结构标记，包括画布，离线存储规范和一些新的内联语义标记，但由于客观原因（主要是浏览器支持的原因），我们不得不限制标记的讨论范围，如画布，离线存储，原生视频或地理定位API等，还不是所有的浏览器都支持。
由于新的HTML 5标记大都是结构性的，它们的行为与块元素有些类似，为了帮助大家加深对HTML 5的理解，我将在下面的内容使用一些新的结构元素。
每个人都应该记住的doctype（文档类型）
要创建HTML 5 Web页面的第一件事情是使用新的doctype，你一定记住了HTML 4或XHTML 1.x的doctype，当我们要从旧的文档通过复制粘贴到新的文档中，必须要修改doctype，请记住，下面就是HTML 5的doctype：
&!DOCTYPE&html&
还是很容易记住吧，而且也不区分大小写，与现在广泛使用的版本要简单得多了，而且保持了向后兼容。
在深入标记前，我们先初略看一下一个Web页面的大致结构吧。
&&&&&&&&&&...stuff... &&&&&&&&&&&&&&&&&&&&id=&header&&&&&&&&&&&&&&My&Site&&&&&&&&&&&&&&&&&&&id=&nav&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&Home&&&&&&&&&&&&&&&&&About&&&&&&&&&&&&&&&&&Contact&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&id=content&&&&&&&&&&&&&My&Article&&&&&&&&&&&&&...&&&&&&&&&&&&&&&&&&&id=&footer&&&&&&&&&&&&&&...&&&&&&&&&&&&&&&&
在上面的例子中，我为所有DIV标记增加了ID，相信大多数Web设计师都很熟悉这种做法了，这么做有两个目的，首先，ID提供了一个钩子，通过它可以对页面的特定部分应用样式，其次，ID作为一种原始的，伪语义结构，智能解析器将查找标签上的ID属性，并尝试猜测其含义，但这是一件很困难的事情，因为每个网站的ID可能都不一样。
于是就有了增加新标签的想法，HTML 5的创造者们就设计了一些新的元素，下面我们就来看看HTML 5中新增的一些关键的结构性标记。
◆ &header&
这个标记计划用来描述一节或一个完整Web页面的介绍性信息，&header&标记可以包括所有的通常放在页面头部的标志，如果你在页面中使用了&div id=&header&&，它将被&header&取代。
这个元素的含义就不说了，你的导航元素就放在这里，如主站点导航，但在某些情况下也可能有页面导航元素，HTML 5的创建人WHATWG最近修改了&nav&的解释，展示了如何在一个页面上使用两次。有关nav更多的讨论，可以参考：//html-5-nav-ambiguity-resolved/。
简单说来，如果你在页面中使用了&div id=&nav&&标记来容纳导航元素，那么你可以使用&nav&进行替换。
◆ &section&
这个可能是最模糊不清的标记了，按照HTML 5规范的解释，一个section是一个有主题的内容组，前面通常有一个header标记，后面通常跟一个footer标记，如果需要，section也可以嵌套使用。
在我们上面的例子中，标记为&content&的DIV是section的一个很好候选者，在这个section中，根据内容的不同，我们可能有更多的section。
◆ &article&
根据WHATWG的注释，article元素是将section进行打包形成一个文档或网站独立的部分，例如一篇杂志或报纸文章，或一篇博客文章。
记住，在一个页面中可以有多个article元素，例如一个博客首页可能会有10多个article元素，article也可以进入section元素，因此你在嵌套使用时需要小心，可能一不小心就会出错。
◆ &aside&
另一个模糊不清的标记是aside，这个元素表现的是与文档主要文本流无关的内容，也就是相当于一个括号备注，脚注，引用，注释，或者说是类似于侧边栏的东西，根据WHATWG的注释，&aside&可以用于所有这些情况。
◆ &footer&
Footer的含义也非常清楚，它可以用在section中，也可以用于一个页面的底部。
内容导航&第 1 页： &第 2 页：
关于&&的更多文章
当下移动互联网的发展势头迅猛，各式各样的App也在横空出世，最
作为移动开发者，WOT2016移动互联网技术峰会，绝对有你不得不来的理由。
Hadoop Summit 2013 大会讲师 PPT 第二季重磅来袭！如
现在这天气到处都是高温，还是老老实实的呆在家里上网
、27日，在美国圣何塞举行的Hadoop Summit
《程序员密码学》涉及密码学的各个研究方向，分组密码、散列函数、公钥密码以及相关的攻击，同时也讲解了密码学算法实现上常用的
51CTO旗下网站哪家HTML5教的好一点啊_百度知道
哪家HTML5教的好一点啊
我有更好的答案
自己掌握知识是最重要的要不段的练习全部掌握
其他类似问题
为您推荐：
您可能关注的推广
html5的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁966,690 七月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
下一时代的HTML5和JavaScript
下一时代的HTML5和JavaScript
David Iffland
注意: 挥一挥衣袖，带走满满干货，关注，时不时发福利呦！
相关厂商内容
相关赞助商
QCon全球软件开发大会上海站，日-22日，上海宝华万豪酒店，！
InfoQ的编辑Dio Synodinos与行业中的专家举行了一次虚拟的座谈会，向出席的参与者们提出了一些问题：例如他们是如何使用JavaScript框架的，以及他们在开发JavaScript应用程序时所遵循的各种最佳实践。参与者的名单如下：Igor Minar、Matteo Pagliazzi、Julien Knebel、Brad Dunbar、John Munsch、Julio Cesar Ody和Thomas Davis。
在本文中，作者Angelos Chaidas为读者分析了在web或移动web项目中使用可缩放矢量图形（SVG）作为图形格式的各种优势。本文的目的不是要阻止设计师和开发者继续使用已证实其用途的各种扫描格式（例如PNG和JPEG），而是为读者展示SVG的使用是如何改善web项目中的工作流的。
Codecademy最近将他们的前端学习环境的代码转换为React.js。现有的许多React方面的示例都很基础，但本文的作者Bonnie Eisenman将为读者逐步展示如何在一个大型的、极其重要的环境中应用React。
响应式web设计是现代web中的一个重要组成部分，也是web开发者所必须具备的一项技能。由Matt Carver所编写的《响应式Web》一书介绍了响应式web设计，并且对于如何上手提出了实用的建议。本书的前半部分讲述了响应式设计是什么，以及为什么要使用响应式设计，后半部分则介绍了一些高级技术。Carver为现代web开发者工具箱中的这一重要工具提供了充实的叙述。
现代JavaScript开发者的工具箱The Modern JavaScript Developer&s Toolbox
文章即将发布
在过去20年间，现代JavaScript开发者的工具箱发生了极大的变化。从IDE开发环境到自动化构建工具，大量的选择出现在开发者面前。选择最好的JavaScript库只不过是整个过程中的一部分。在创建现代web应用中，各种代码整理工具（Linter）、合并工具（bundler）和压缩工具（minifier）对于生产力和性能来说都是至关重要的。在本文中，David Haney不仅为读者介绍了以上这些工具，还有其它各方面的优秀工具。
本系列文章管理者
是独立软件工作室的创始人，他同时也是伊利诺伊大学的首席软件开发者。
David在开发自定义web应用程序方面有着超过15年的经验，尤其擅长于JavaScript和C#。除了软件开发之外，David还是一位优秀的木工，并且很喜欢全家一起野营。
他的Twitter帐号是，此外，他也在网站上撰写各种软件开发方面的文章。
查看英文原文：
Author Contacted
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
InfoQ每周精要
通过个性化定制的新闻邮件、RSS Feeds和InfoQ业界邮件通知，保持您对感兴趣的社区内容的时刻关注。
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?想要快速上手HTML5 Canvas小游戏开发？下面通过一个例子来进行手把手教学。（如果你怀疑我的资历， 这个游戏的半数以上开发是由我完成的）
我们直接来看源码里的,当然你也可以一下游戏先。
// Create the canvas
var canvas = document.createElement(&canvas&);
var ctx = canvas.getContext(&2d&);
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
首先我们需要创建一张作为游戏的舞台。这里通过JS代码而不是直接在HTML里写一个&canvas&元素目的是要说明代码创建也是很方便的。有了画布后就可以获得它的上下文来进行绘图了。然后我们还设置了画布大小，最后将其添加到页面上。
// 背景图片
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
bgImage.src = &images/background.png&;
游戏嘛少不了图片的，所以我们先加载一些图片先。简便起见，这里仅创建简单的图片对象，而不是专门写一个类或者Helper来做图片加载。bgReady这个变量用来标识图片是否已经加载完成从而可以放心地使用了，因为如果在的。
整个游戏中需要用到的三张图片：，及我们都用上面的方法来处理。
// 游戏对象
var hero = {
speed: 256, // 每秒移动的像素
var monster = {
var monstersCaught = 0;
现在定义一些对象将在后面用到。我们的英雄有一个speed属性用来控制他每秒移动多少像素。怪物游戏过程中不会移动，所以只有坐标属性就够了。monstersCaught则用来存储怪物被捉住的次数。
处理用户的输入
// 处理按键
var keysDown = {};
addEventListener(&keydown&, function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener(&keyup&, function (e) {
delete keysDown[e.keyCode];
}, false);
现在开始处理用户的输入(对初次接触游戏开发的前端同学来说，这部分开始可能就需要一些脑力了)。在前端开发中，一般是用户触发了点击事件然后才去执行动画或发起异步请求之类的，但这里我们希望游戏的逻辑能够更加紧凑同时又要及时响应输入。所以我们就把用户的输入先保存下来而不是立即响应。
为此，我们用keysDown这个对象来保存用户按下的键值(keyCode)，如果按下的键值在这个对象里，那么我们就做相应处理。
开始一轮游戏
// 当用户抓住一只怪物后开始新一轮游戏
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// 将新的怪物随机放置到界面上
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
reset方法用于开始新一轮和游戏，在这个方法里我们将英雄放回画布中心同时将怪物放到一个随机的地方。
// 更新游戏对象的属性
var update = function (modifier) {
if (38 in keysDown) { // 用户按的是↑
hero.y -= hero.speed * modifier;
if (40 in keysDown) { // 用户按的是↓
hero.y += hero.speed * modifier;
if (37 in keysDown) { // 用户按的是←
hero.x -= hero.speed * modifier;
if (39 in keysDown) { // 用户按的是→
hero.x += hero.speed * modifier;
// 英雄与怪物碰到了么？
hero.x &= (monster.x + 32)
&& monster.x &= (hero.x + 32)
&& hero.y &= (monster.y + 32)
&& monster.y &= (hero.y + 32)
++monstersCaught;
这就是游戏中用于更新画面的update函数，会被规律地重复调用。首先它负责检查用户当前按住的是中方向键，然后将英雄往相应方向移动。
有点费脑力的或许是这个传入的modifier 变量。你可以在main 方法里看到它的来源，但这里还是有必要详细解释一下。它是基于1开始且随时间变化的一个因子。例如1秒过去了，它的值就是1，英雄的速度将会乘以1，也就是每秒移动256像素；如果半秒钟则它的值为0.5，英雄的速度就乘以0.5也就是说这半秒内英雄以正常速度一半的速度移动。理论上说因为这个update 方法被调用的非常快且频繁，所以modifier的值会很小，但有了这一因子后，不管我们的代码跑得快慢，都能够保证英雄的移动速度是恒定的。
现在英雄的移动已经是基于用户的输入了，接下来该检查移动过程中所触发的事件了，也就是英雄与怪物相遇。这就是本游戏的胜利点，monstersCaught +1然后重新开始新一轮。
// 画出所有物体
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
ctx.fillStyle = &rgb(250, 250, 250)&;
ctx.font = &24px Helvetica&;
ctx.textAlign = &left&;
ctx.textBaseline = &top&;
ctx.fillText(&Monsterrs caught: & + monstersCaught, 32, 32);
之前的工作都是枯燥的，直到你把所有东西画出来之后。首先当然是。然后如法炮制将英雄和怪物也画出来。这个过程中的顺序是有讲究的，因为后画的物体会覆盖之前的物体。
这之后我们改变了一下Canvas的绘图上下文的样式并调用fillText来绘制文字，也就是记分板那一部分。本游戏没有其他复杂的动画效果和打斗场面，绘制部分大功告成！
主循环函数
// 游戏主函数
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
then = now;
// 立即调用主函数
requestAnimationFrame(main);
上面的主函数控制了整个游戏的流程。先是拿到当前的时间用来计算时间差（距离上次主函数被调用时过了多少毫秒）。得到modifier后除以1000(也就是1秒中的毫秒数)再传入update函数。最后调用render 函数并且将本次的时间保存下来。
关于游戏中循环更新画面的讨论可参见「」。
关于循环的进一步解释
// requestAnimationFrame 的浏览器兼容性处理
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
如果你不是完全理解上面的代码也没关系，我只是觉得拿出来解释一下总是极好的
为了循环地调用main函数，本游戏之前用的是setInterval。但现今已经有了更好的方法那就是requestAnimationFrame。使用新方法就不得不考虑浏览器兼容性。上面的就是出于这样的考虑，它是的一个简化版本。
启动游戏！
// 少年，开始游戏吧！
var then = Date.now();
总算完成了，这是本游戏最后一段代码了。先是设置一个初始的时间变量then用于首先运行main函数使用。然后调用 reset 函数来开始新一轮游戏（如果你还记得的话，这个函数的作用是将英雄放到画面中间同时将怪物放到随机的地方以方便英雄去捉它）。
到此，相信你已经掌握了开发一个简单H5小游戏需要的基本功了。或者自己研究研究吧 :)
阅读(...) 评论()
恭喜妳发现本彩蛋， happy coding
\(^___________^)/现在一个一点不懂的人应该去学 HTML 还是直接学 HTML5 ？_百度知道
现在一个一点不懂的人应该去学 HTML 还是直接学 HTML5 ？
我有更好的答案
直接从HTML5入手，它的一些新的功能可能更容易引起学习兴趣两者大多数的语法都是通用的，HTML5是一个趋势
其他类似问题
为您推荐：
html5的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁