HTML5的介绍

  • HTML5 并不仅仅只是做为HTML 标记语言的一个最新版本，更重要的是 它制定了Web 应用开发的一系列标准，成为第一个将Web做为应用开发平台的 HTML 语言。
  • HTML5 定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，
    可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定
    位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合 Canvas 我们可开发网页版游戏。
    广义概念：HTML5 代表浏览器端技术的一个发展阶段。在这个阶段，浏 览器呈现技术得到了一个飞跃发展和广泛支持，它 包括：HTML5，CSS3， Javascript，API 在内的一套技术组合
    特点：
    1、更简洁
    传统的做法我们或许通过增加类名如class=“header”、class=“footer”， 使
    HTML 页面具有语义性，但是不具有通用性。
    HTML5 则是通过新增语义标签的形式来解决这个问题，
    2、更宽松
    单标签不用写关闭符号双标签省略结束标签 html、head、body、colgroup、tbody 可以完全省略

H5 经典网页布局:

<!-- 头部--> 
		       <head>
		       		 <ul class="nav"></ul>
		       	</header>
		 <!-- 主体部分 -->
		       <div class="main">
			         <!-- 文章 --> <article></article>
			         <!-- 侧边栏 --> <aside></aside>
		        </div> 
		 <!-- 底部 --> 
		 <footer></footer>

常用新语义标签

<nav> 表示导航 
		 
		<header> 表示页眉 
		 
		<footer> 表示页脚 
		 
		<section> 表示区块 
		 
		<article> 表示文章 如文章、评论、帖子、博客 
		 
		<aside> 表示侧边栏 如文章的侧栏 
		 
		<figure> 表示媒介内容分组 与 ul > li 做个比较 
		 
		<mark> 表示标记 (带用“UI”，不怎么用) 
		 
		<progress> 表示进度 (带用“UI”，不怎么用) 
		 
		<time> 表示日期

表单

email 输入email 格式
		 tel 手机号码 url 只能输入url 格式
		 number 只能输入数字
		 search 搜索框
		 range 范围 滑动条
	     color 拾色器
		 time 时间
		 date 日期 不是绝对的
		 datetime 时间日期 
		 month 月份
		 week 星期 
     注： 部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当 中可选择性的使用。
          
     表单元素（标签）
        <datalist> 数据列表与input 配合使用 
        <input type=”text” list=”data”>
	         <datalist id=”data”> 
	             <option>男</option>
	             <option>女</option>
	             <option>不详</option>
	          </datalist>
         <keygen> 生成加密字符串
      keygen 元素的作用是提供一种验证用户的可靠方法。 keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，
      会生成两个键， 一个是私钥，一个公钥。 私钥（private key）存储于客户端，公钥（public key）则被发送到 服务器。
      公钥可用于之后验证用户的客户端证书（client certificate）。 <output> 不可当做数据提交？ 
 
		<meter> 表示度量器  不建议用作进度条
		<progress></progress>
		<meter value="81" min="0" max="100" low="60" high="80" />
		Max-width
	    Min-width
		
		其中的元素：
			placeholder 占位符
			autofocus 获取焦点
		    multiple 文件上传多选或多个邮箱地址
		    autocomplete 自动完成，用于表单元素，也可用于表单自身(on/off)
			form 指定表单项属于哪个form，处理复杂表单时会需要 
		    novalidate 关闭验证，可用于<form>标签
		    required 必填项

多媒体

HTML5 通过标签来解决音频播放的问题。使用相当简单，如下图所示

多浏览器支持的方案，如下图

<!--通过src指定音频文件路径即可-->
		<audio src="------"></audio>

并且可以通过附加属性可以更友好控制音频的播放，如： autoplay 自动播放、 controls 是否显不默认播放控件、 loop 循环播放、 preload 预加载 同时设置 autoplay 时些属性失效 。由于版权等原因，不同的浏览器可支持播放的格式是不一样的 。

<!--多浏览器支持的方案-->
		<video width="800" height="400">
			<source src="myvideo.mp4" type="video/mp4"></source>
			<source src="myvideo.ogv" type="video/ogg"></source>
			<source src="myvideo.webm" type="video/webm"></source>
		</video>