现在以HBuilder工具编写为例：
1. 打开此工具，在项目管理器中右键单击创建一个web 项目
2.右键单击项目名称，新建一个HTML文件----form01.html
<!DOCTYPE html>
<!--
作者：offline
时间：2017-01-06
描述：form表单
在form标签中，有两个经常使用的属性
action：表单提交服务器地址
method: 表单提交的方法/方式----get/post
其他提交方式---put delete
提交方式----get（默认的提交方式）
1.请求的参数放到地址栏中
2.不安全
3.存在缓存
4.传输数据的大小收到限制
提交方式----post
1.请求的参数放到http协议中
2.相对安全---账号密码等信息不会放到地址栏中
3.没有缓存
4.传输数据的大小限制较小
修改成post之后，可能会出现错误信息。
input标签：定义输入字段，用户可在其中输入数据。
属性：
type 指示 input标签的类型，默认的是text
按钮类型： 普通按钮 button 重置按钮 Reset 提交按钮 submit
value 定义要显示的文本。
-->
<html>
<head>
<meta charset="utf-8">
<title>form表单1</title>
</head>
<body>
<form action="" method="post">
<input type="text" name="username" value="zhangsan" />
<input type="submit" value="提交" />
</form>
</body>
</html>
3.查看此网页是不是HTML5，主要看表头
4.HTML5新增了很多新内容，具体可以查看API，例如：在网页中嵌套音频/视频文件的格式
1、打开百度，在百度上搜索：易企秀，然后点击搜索，在搜索的结果中点击进入易企秀的官方网站。
2、进入后，先登录自己的账号，可以直接用QQ微信登录即可，登录后就可以开始制作自己的手机网页微场景了。
3、首先点击【我的场景】接着点击【制作场景】，接着会进入场景模板选择界面，里面有很多免费的模板。
4、可以在模板中心选择一个自己需要的点击，直接套用模板，也可以选择自己创建一个空白页面。
5、进入后就可以根据自己的需要，将模板里面的文字图片和音乐替换成自己需要的即可，如图所示。
6、还可以给自己的手机网页添加背景音乐，动画效果，跳转链接，特效组件等等。
步骤1 创建空白的HTML 5模版首先，我们创建一个空白的模版，代码很简单，如下所示：
复制代码
步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：
复制代码
读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的 步骤3 往HTML 5标签中增加代码
1）首先往标题中增加如下代码：
Simple HTML5 Template
复制代码
2）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航：
HomeAboutParent PageChild
OneChild Two with childChild OneChild
TwoChild ThreeChild Three
Contact
复制代码
3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下代码所示：
This is a title for post
Richard KS20th March 2013TutorialsHTML5, CSS3
and Responsive10 CommentsLorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s
复制代码
4）添加标签 HTML5提供的元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。
根据目前的规范，元素有两种使用方法：
被包含在中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。
在之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。
代码如下：
CategoriesCategory 1Category 2
Parent CategoryChild OneChild Two
Grandchild OneGrandchild TwoGrandchild Three
Child ThreeCategory 3
TextLorem Ipsum is simply dummy
text of the printing and typesetting industry.
复制代码
5）加上最后的标签，代码为：
Copyright@ 2013 HTML5.comPrivacy Policy - About Us
复制代码
步骤4 增加CSS样式
首先创建一个空白的样式，如下：
[/code] 然后在http://necolas.github.com/normalize.css/中下载这个css,然后将其内容复制到该空白的文件中代码如下： [code]body {
font-family: arial, sans-serif
font-size: 100%/* best for all browser using em */
padding:0
margin:0
}
*, html { line-height: 1.6em}
article img { width:automax-width:100%height:auto}
.sidebar a, article a, header a, footer a { color: #C30}
header a { text-decoration: none}
#wrapper {
font-size: 0.8em/* 13px from 100% global font-size */
max-width: 960px/* standard 1024px wide */
margin: 0 auto
}
/* css for */
header {padding: 1em 0 margin: 0px float: left width: 100%
}
header hgroup { width: 100%font-weight:normal}
/* css for */
nav
{display: block margin: 0 0 2em padding: 0px
float: left width: 100% background-color: #181919
}
nav ul ul {display: none}
nav ul li:hover >ul {display: block}
nav
ul {padding: 0 list-style: none position:
relative display: inline-table z-index: 9999
margin: 0px float: left width: 100%
}
nav ul:after {content: ""clear: bothdisplay: block}
nav ul li {float: left}
nav ul li:hover a {color: #fff}
nav
ul li a {display: block padding: 1em font-size:
1.125em color: #ccc text-decoration: none
margin: 0px background-color: #000 border-right: 1px
solid #333
}
nav ul li:last-of-type a {border-right: 1px solid transparent !important}
nav
ul ul {background: #5f6975 border-radius: 0px
padding: 0 position: absolute top: 100% width:
auto float: none
}
nav ul li:hover {background: #5f6975 color: #FFF
}
nav ul ul li a:hover {background-color: #4b545f
}
nav ul ul li {
float: none
border-bottom: 1px solid #444240
position: relative
}
nav ul ul li a {
padding: 0.5em 1em
font-size: 1em
width:10em
color: #fff
}
nav ul ul ul {
position: absoluteleft: 100%top:0
}
/* css for */
section.content { width: 70%float:left}
.content article { width:100%float:leftpadding: 0 0 1emmargin: 0 0 1emborder-bottom: 1px solid #ddd}
article .entry { clear:bothpadding: 0 0 1em}
h1.post-title { font-size: 1.8emmargin:0padding:0}
.entry.post-meta { color: #888}
.entry.post-meta span { padding: 0 1em 0 0}
.entry.post-content { font-size: 1.125emmargin:0padding:0}
/* css for */
aside.sidebar { width: 25%float:right}
aside.sidebar ul {width:100% margin: 0px padding: 0px float: left list-style: none
}
aside.sidebar
ul li {width:100% margin: 0px 0px 2em padding:
0px float: left list-style: none
}
aside.sidebar ul li ul li {margin: 0px 0px 0.2em padding: 0px
}
aside.sidebar
ul li ul li ul li {margin: 0px padding: 0px 0px 0px
1em width: 90% font-size: 0.9em
}
aside.sidebar
ul li h3.widget-title {width:100% margin: 0px
padding: 0px float: left font-size: 1.45em
}
/* css for */
footer {width: 98% float:left padding: 1% background-color: white margin-top: 2em
}
footer .footer-left { width: 45%float:lefttext-align:left}
footer .footer-right { width: 45%float:righttext-align:right}
复制代码
步骤5 为移动应用使用@media query查询 为了进行响应式设计，最佳的方案是使用@media query去进行查询，在上面的CSS代码中添加如下代码：
/* ipad 768px */
@media only screen and (min-width:470px) and (max-width:770px){
body { background-color: red} #wrapper { width:96%font-size: 0.6875em}
section.content, aside.sidebar { width:100%}
}
/* iphone 468px */
@media only screen and (min-width:270px) and (max-width:470px){
body { background-color: yellow} #wrapper { width:96%font-size: 0.6875em}
section.content, aside.sidebar { width:100%}
}
复制代码
步骤6 增加jquery,modernizer和html5shiv到标签中 这里推荐使用Modernizr 和html5shiv，它们都是一个能在多种浏览器中通过运行各种脚本兼容运行支持大部分HTML 5标签的插件。我们将它们和jQuery库放在标签前，代码如下：
0
复制代码
