论道HTML5（一）——利用HTML5制作网站

一、你不懂HTML5网页设计的10大理由

阴影代码可控
动画简单易懂
渐变数值化操作
字体图片矢量化
表单验证轻松搞定
数据类型扩大一倍
行业工作流程需要重组
个人职业生涯重新定位
原生支持无需插件
对Web设计人员的要求更高

苹果公司的精神领袖乔布斯说过：“网页将为你的手指而设计。”

二、HTML 4 时代的几个特征

Web的head区域声明还不够细致，不适用于所有媒体，如手机、平板电脑等新出现的设备。
Web的body区域过于粗放，除了div和table外，再没有其他更好的标签用于表示更加清晰的页面结构。
缺少圆角、阴影、渐进等特效的快速处理方法。
缺少简单动画的快速高效处理方法。
缺少专门处理音频和视频的标签。
对表单数据处理缺少验证和过滤。
对本地存储缺少管理和控制能力。
网页不能高效实时通信。
网页上不能直接显示3D动画，总是要借助其他插件。

三、一个典型的 HTML5 页面

<!DOCTYPE html>
<!-- 声明文档结构类型 -->
<html lang=zh-cn>
<!-- 声明文档文字区域-->
<head>
<!-- 文档的头部区域 -->
<meta charset=utf-8>
<!-- 文档的头部区域中元数据区的字符集定义，这里是utf-8，表示国际通用的字符集编码格式 -->
<!--[if IE]><![endif]-->
<!-- 文档的头部区域的兼容性写法 -->
<title>一个不带CSS样式的HTML5布局</title>
<!-- 文档的头部区域的标题。这里要注意，这个title的内容对于SEO来说极其重要-->
<!--[if IE 9]><meta name=ie content=9><![endif]--> 
<!-- 文档的头部区域的兼容性写法 -->
<!--[if IE 8]><meta name=ie content=8 ><![endif]-->
<!-- 文档的头部区域的兼容性写法 --> 
<meta name=description content=一个不带CSS样式的HTML5布局>
<!-- 文档的头部区域元数据区关于文档描述的定义 -->
<meta name=author content=秀野堂主>
<!-- 文档的头部区域元数据区关于开发人员姓名的定义 -->
<meta name=copyright content=HTML5研究小组>
<!-- 文档的头部区域元数据区关于版权的定义 -->
<link rel=shortcut icon href=favicon.ico>
<!-- 文档的头部区域的兼容性写法 -->
<link rel=apple-touch-icon href=custom_icon.png>
<!-- 文档的头部区域的apple设备的图标的引用 -->
<meta name=viewport content=width=device-width, user-scalable=no >
<!-- 文档的头部区域对于不同接口设备的特殊声明。宽=设备宽，用户不能自行缩放 -->
<link rel=stylesheet href=main.css>
<!-- 文档的头部区域的样式文件引用 -->
<!--[if IE]><link rel=stylesheet href=win-ie-all.css><![endif]-->
<!-- 文档的头部区域的兼容性样式文件引用写法 -->
<!--[if IE 7]><link rel=stylesheet type=text/css href=win-ie7.css><![endif]-->
<!-- 文档的头部区域的IE7浏览器的兼容性写法 -->
<!--[if lt IE 8]><script src=http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.
 js></script><![endif]-->
<!-- 文档的头部区域的关于让IE8也兼容HTML5的JavaScript脚本（本书作者希望读者可以少考虑兼容性，
     多做技术研究） -->
<script src=script.js></script>
<!-- 文档的头部区域的JavaScript脚本文件调用 -->
</head>
<body>
 <header>HTML5文档的头部区域</header>
 <nav>HTML5文档的导航区域</nav>
 <section>HTML5文档的主要内容区域
  <aside>
   HTML5文档的主要内容区域的侧边导航或菜单区
  </aside>
  <article>
   HTML5文档的主要内容区域的内容区 
   <section>以下是一个section和article的嵌套，循环表现章节与内容之间的父子关系，包
    含关系。
    <aside>
    </aside>
    <article>
     <header>HTML5文
档的嵌套区域，可以对某个article区域进行头部和脚部的定义。
      这样做，可以有非常清晰和严谨的文档目录结构关系。
     <footer>
    </article>
   </section>
  </article>
 </section>
 <footer>HTML5文档的脚部区域</footer> 
</body>
</HTML>

四、HTML5 带来的标签变化

标签（tag）是HTML语言最基本的元素和组成部分，它使一个网页分出范围、内容区、解释区以及各种内容的引用。

简单地说，标签是使网页内各种内容互相区分，使内容与数据更加有序的、特殊的、约定好的符号。

1）标签的分类的好处

使Web页面的内容更加有序和规范。
使搜索引擎更加容易按照HTML5规则识别出有效内容。
使Web页面更接近于一种数据字段和表。（所有的header、footer、article、section等都成了天然的数据集与字段。）
从整个世界的角度说，信息和知识将更加有序。

2）把HTML5的标签按优先等级定义为结构性标签、级块性标签、行内语义性标签、交互性标签4大类

结构性标签：主要负责Web的上下文结构的定义，确保HTML文档的完整性，这类标签包括以下几个，section、header、footer、nav、article
级块性标签：主要完成Web页面区域的划分，确保内容的有效分隔，这类标签包括以下几个，aside、figure、code、dialog
行内语义性标签：主要完成Web页面具体内容的引用和表述，是丰富内容展示的基础，这类标签包括以下几个，meter、time、progress、video、audio
交互性标签：主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础，这类标签包括以下几个，details、datagrid、menu、command

五、HTML5 带来的表单数据内容进化

1）数据提交格式的变化

数据提交格式以前有两种。第一种是动态文件，数据以字符串格式提交。现在增加一种动态文件，form的内容将会以XML的形式提交。

2）数据提交范围的变化

在以往的Web表单提交概念中，所有的表单提交元素必须在<form>和</form>之间。而现在，表单可以定向索引，提交方式也更加灵活。

<form action="XXX.php" method="post" enctype="application/x-www-form-urlencoded" id="test"></form>
<label form="test"  for=user_name>用户名</label><input type="text" name="user_name"/><label form="test"  for= user_password >密码</label><input type="password" name="user_password"/>
<input form="test" type="submit" name="submit" value="提交"/>
<label form="test" for=user_ address >地址</label><input form="test" name="user_address"/>

3）表单数据类型的增加

<input type=url>这是网址专用的数据类型。

<input type=email>这是电子邮件专用的数据类型。

<input type=date>这是日期专用的数据类型。 (date, month, week, time, datetime, datetime-local)

<input type=number>这是数字专用的数据类型。

<input type=range>这是滑动条（表示区间、范围等）。

<input type=search>这是搜索框。

<input type=color>这是颜色。

<input type=telephone>这是电话类型。

4）表单属性和验证方式的进化

必填项属性required
占位属性placeholder
数字类型控件提供的max、 min属性
正则表达式属性pattern
data属性，可外联数据源
自动完成属性autocomplete
步长设定属性step
onerror。当发生错误时运行脚本。
onhaschange。当发生变化时运行脚本。
oncontextmenu。当触发上下文菜单时运行脚本。
onformchange。当表单改变时运行脚本。
onforminput。当表单获得用户输入时运行脚本。
oninput。当元素获得用户输入时运行脚本。
oninvalid。当元素无效时运行脚本。

5）文件上传控件和重复模型的应用

改进后的文件上传控件可以使用一个控件上传多个文件，并且设计人员可以规定上传文件的类型（ accept），甚至可以设定每个文件上传时最大的大小（ maxlength）。

六、调试环境

若调试视频与音频支持，建议使用多个浏览器进行测试
若调试Canvas动画效果，推荐使用Safrai浏览器或IE 9.0，这可以保证你有最快和最优化的视觉体验
若想体验HTML5全部表单功能，推荐使用Opera浏览器
若调试基于WebGL的3D Web效果，建议在Chrome浏览器下，使用about:flags命令，打开GPU Accelerated Canvas 2D功能