从零开始构建HTML 5 Web页面
HTML 5是时下Web开发领域炒得火热的一个术语，是的，很多人都看好它，也有很多业内知名公司开始正式使用HTML 5重新构建自己的网站，如YouTube开始使用HTML 5视频，Google 已经弃用自家的Gears，开始全面拥抱HTML 5实现离线解决方案，各大浏览器厂家也纷纷开始支持HTML 5，连被人诟病的微软也声称要在IE 9中增加对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页面的大致结构吧。
<html><head>...stuff...</head><body><div id="header"><h1>My Site</h1></div><div id="nav"><ul><li>Home</li><li>About</li><li>Contact</li></ul></div><div id=content><h1>My Article</h1><p>...</p></div><div id="footer"><p>...</p></div></body></html> 在上面的例子中，我为所有DIV标记增加了ID，相信大多数Web设计师都很熟悉这种做法了，这么做有两个目的，首先，ID提供了一个钩子，通过它可以对页面的特定部分应用样式，其次，ID作为一种原始的，伪语义结构，智能解析器将查找标签上的ID属性，并尝试猜测其含义，但这是一件很困难的事情，因为每个网站的ID可能都不一样。
于是就有了增加新标签的想法，HTML 5的创造者们就设计了一些新的元素，下面我们就来看看HTML 5中新增的一些关键的结构性标记。
◆ <header>
这个标记计划用来描述一节或一个完整Web页面的介绍性信息，<header>标记可以包括所有的通常放在页面头部的标志，如果你在页面中使用了<div id="header">，它将被<header>取代。
◆ <nav>
这 个元素的含义就不说了，你的导航元素就放在这里，如主站点导航，但在某些情况下也可能有页面导航元素，HTML 5的创建人WHATWG最近修改了<nav>的解释，展示了如何在一个页面上使用两次。有关nav更多的讨论，可以参 考：http://www.zeldman.com/2009/07/13/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中，也可以用于一个页面的底部。
全部放在一起
现在我们全部使用新标记重写前面的示例页面。
<!DOCTYPE html><html><head>...stuff...</head><body><header><h1>My Site</h1></header><nav><ul><li>Home</li><li>About</li><li>Contact</li></ul></nav><section><h1>My Article</h1><article><p>...</p></article></section><footer><p>...</p></footer></body></html>是不是更干净，更易于理解呢？我们可以把<h1>My Article</h1>打包到header标记中。另外请注意，我们可以在article元素下再增加一个footer元素，用来容纳如翻页导航，相关文章或其它内容。
新标记的样式
在大多数浏览器中，你只需要如往常一样对元素使用样式，但是请一定要对每个元素加上display:block;规则，随着时间的推移，浏览器对HTML 5新元素的支持越来越标准后，就可以不使用了。
下面我们队header应用一些样式：
header {display: block;font-size: 36px;font-weight: bold;} 记住，你现在仍然可以在这些元素上添加class和ID属性，因此，如果你想对导航小节单独使用一个样式，你可以向下面这样增加一个class或ID属性：
<nav class="main-menu">然后再应用一个样式：
nav.main-menu {font-size: 18px;}
与旧浏览器的兼容
这 些样式都不能在IE 6下使用，如果你坚持要保持与旧浏览器兼容，也是有补救办法的，IE 6可以解析这些标记，但不能应用样式，解决办法就是使用JavaScript，使用createElement方法就可以让IE支持HTML 5标记的样式了，你可以在HTML 5文件的头部包括这段代码，也可以保存到一个独立文件中，然后进行引用。
<script>document.createElement('header');document.createElement('nav');document.createElement('section');document.createElement('article');document.createElement('aside');document.createElement('footer');
</script>
你可能要问，为什么没有给这段脚本指定MIME类型呢？在HTML 5中无需指定了，在HTML 5中，所有的脚本都假设是type="text/javascript"，因此不必再多此一举了。
虽 然IE的问题得到了解决，但据我所知，Firefox 2中的Gecko渲染引擎仍然存在一个bug，解决办法有两个，但这两个办法都不是很理想，更多信息请看这里 http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/。考虑到 Firefox 2的使用人数已经很少，你可以完全忽视这个bug。
现在你已经可以使用HTML 5了，但应该使用吗？
答案很简单：是的！
但 这也要根据网站的性质做出调整，例如，假设你要重构CNN主页，那可能不太现实，最好还是等浏览器的支持更好一些再说，但如果你是在翻新你的博客系统，那 么你可以一试，如果你使用的WordPress，目前已经出现了一些插件可以帮助你，这里就有一个HTML 5的WordPress主题。
你 也可以去HTML 5画廊（http://html5gallery.com/）瞧瞧，因为它全部是用HTML 5构建的，可以看看其源码，加深对HTML 5标记的理解。还可以继续关注51CTO.com的HTML 5专题，我们会持续更新关于HTML 5的技术应用和资讯报道。
如果你还有点犹豫不决，那你去看看Google的主页，已经是HTML 5了，保险一点的话，你可以使用JavaScript声明这些新标记进行使用。HTML 5的标记远不止这些，希望本文能消除你的疑虑，大胆使用HTML 5，只有使用的人多了，这个规范才能真正见效。
本文由HTML5中国网站小编整理完成，原地址：http://www.html5cn.org/article-438-1.html。
从零开始构建HTML 5 Web页面相关推荐
- 使用Spring boot，Thymeleaf，AngularJS从零开始构建新的Web应用程序-第2部分
在本系列博客中,我们将使用Springboot,Angular等构建完整的Web应用程序. 在上一个博客中,我们与Thymeleaf建立了基本的登录页面. 在此博客中,我们将介绍bower ,它用于管 ...
- 使用Spring boot，Thymeleaf，AngularJS从零开始构建新的Web应用程序–第3部分
在之前的博客中,我们使用Thymeleaf,Bower和Bootstrap构建了登录页面,并将其部署到了Heroku. 在此博客中,我们将介绍用于前端的AngularJS和在后端的Spring Boo ...
- （三）构建模块——Web页面建设
2019独角兽企业重金招聘Python工程师标准>>> 1.完成网页的基本过程: ①画一个粗略的草图作为页面构建的基础 ②创建HTML的基本构建模块,把草图翻译成HTML的略图 ③把 ...
- domino子表单html,使用Domino表单构建Web页面.ppt
使用Domino表单构建Web页面 大纲 Domino表单和HTML页面之间的关系 Notes元素在Web上HTML代码转换 熟悉DominoDesignerWeb开发环境 设计表单前的必备知识 如何 ...
- 万字干货：如何从零开始构建企业级推荐系统？
「免费学习 60+ 节公开课:投票页面,点击讲师头像」 作者丨gongyouliu 编辑丨zandy 来源 | 大数据与人工智能(ID: ai-big-data) 最近几个月有很多人咨询作者怎么从零开 ...
- spring boot构建基础版web项目(一)springboot、thymeleaf控制层基础构
原文作者:弥诺R 原文地址:http://www.minuor.com/147852147/article 转载声明:转载请注明原文地址,注意版权维护,谢谢! 写前说明 根据个人在各篇博文中看到的信息 ...
- 《从零构建前后分离web项目》：开篇 - 纵观WEB历史演变
开篇 : 纵观WEB历史演变 在校学习和几年工作工作中不知不觉经历了一半的 WEB 历史演变.对近几年的发展比较了解,结合经验聊聊 WEB 发展历史. 演变不易,但也是必然,因为为人始终要进步. WE ...
- 一个Web页面的问题分析
一个Web页面的问题分析 几个月之前我接到一个新的开发任务,要在一个旧的Web页面上面增添一些新的功能.在开发的过程中发现旧的代码中有很多常见的不合适的写法,结合这些问题,如何写出更好的,更规范的,更 ...
- 前端app调起摄像头 只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...
本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴 有前端开发经验.但是没有使用过Vue的小伙伴 有过其他编程经验,对前端开发感兴趣的小伙伴 学习本教程之后你将会: 了解 ...
最新文章
- Windows下运行rabbitmqctl 相关命令(如rabbitmqctl stop)报错：Error: unable to perform an operation on node解决方案
- 安卓APP_ 布局（1）—— LinearLayout
- 魅族android n内测报名,不再万年Android 5.0！ Flyme安卓N内测招募开启
- Python里面几种排序算法的比较，sorted的底层实现，虽然我们知道sorted的实现方式，但是...
- Socket 编程实战
- 最长上升子序列问题（O（n^2）算法）
- MySQL怎么建两个table_在MySQL中使用带有两个表的UNION的CREATE TABLE AS语句
- 【linux】nmap命令使用
- 数字电子技术基础一览
- MMUlinux内核开启
- Python入门50个小程序
- kernel Damon实现
- 计算机磁盘管理看不到盘符,Win10系统本地磁盘盘符不见了的解决方法
- Tensorflow 年龄和性别识别(AgeGender)
- 课程项目：大学程序设计相关大作业汇总参考及源码地址
- 【Ubuntu】普通用户修改了/etc/sudoers文件权限导致的问题
- 【ElasticSearch从入门到放弃系列 零】ElasticSearch看这一篇就够了
- 全球主要高光谱遥感卫星介绍
- iphone配置Charles抓包
- XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Siberia