标题 认识HTML5
HTML5是 是html4.0 升级版
结构HTML5,样式CSS3,行为JS API都有所增强
HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏。
广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合
H5范称:HTML + CSS3 + JS
优点：http://www.intertid.com/school/2014/595568.shtml
1.2 语法规范
HTML5在语法规范上也做了比较大的调整，去除了许多冗余的内容，书写规则更加简洁、清晰。
见代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<P>我是一段文本，我闭合标签用了大写</P>
<Img src="1.jpg" alt="">
</body>
</html>
特点：
1、更简洁
2、更宽松
单标签不用写关闭符号
双标签省略结束标签
html、head、body、colgroup、tbody可以完全省略
实际开发中应规范书写，不建议太随意 ！
2语义标签
语义标签对于我们并不陌生，如
表示一个段落、
-
表示一个无序列表
~
表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。
传统的做法我们或许通过增加类名如class=“header”、class=“footer”，使HTML页面具有语义性，但是不具有通用性。
HTML5则是通过新增语义标签的形式来解决这个问题，例如
此章节学习目的为了解增加语义标签的目的，以及各语义标签所表达的意义，在网页布局中能够合理使用标签。
传统网页布局：
<!-- 头部 -->
<div class="header">
<ul class="nav"></ul>
</div>
<!-- 主体部分 -->
<div class="main">
<!-- 文章 -->
<div class="article"></div>
<!-- 侧边栏 -->
<div class="aside"></div>
</div>
<!-- 底部 -->
<div class="footer"></div>
H5 经典网页布局:
<!-- 头部 -->
<header>
<ul class="nav"></ul>
</header>
<!-- 主体部分 -->
<div class="main">
<!-- 文章 -->
<article></article>
<!-- 侧边栏 -->
<aside></aside>
</div>
<!-- 底部 -->
<footer></footer>
2.1 常用新语义标签
<nav> 表示导航
<header> 表示页眉
<footer> 表示页脚
<section> 表示区块
<article> 表示文章 如文章、评论、帖子、博客
<aside> 表示侧边栏 如文章的侧栏
<figure> 表示媒介内容分组 与 ul > li 做个比较
<mark> 表示标记 (文本有背景颜色,表示标记)
<progress> 表示进度
<time> 表示日期 ( 包裹时间 )
本质上新语义标签与
尽量避免全局使用header、footer、aside等语义标签。
2.2 兼容处理
(我们在测试ie 的兼容的时候，有一个叫做ietest 的软件，这个软件可以模拟ie6-ie11)
在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement(‘tagName’)创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement(‘tagName’)来创建一遍，这样IE低版本也能正常解析HTML5新标签了，在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。
<!--[if lte IE 8]>
<script src="./js/html5shiv.min.js"></script>
<![endif]-->
第3表单
伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经越来越不能满足开发的需求，所以HTML5在Web表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。
此章节学习目的，了解HTML5表单的新增的特性，以及PC和移动设备间的差异，其兼容性较差。
3.1 输入类型 (表单类型，表单元素，表单属性,表单事件.)
email 输入email格式
tel 手机号码
url 只能输入url格式
number 只能输入数字
search 搜索框
range 范围 滑动条
color 拾色器
time 时间
date 日期 不是绝对的
--**datetime-local**
时间日期
month 月份
week 星期
部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。
3.2 表单元素（标签）
智能表单( 输入指定文本提供备选 )
<datalist> 数据列表
与input 配合使用
<input type=”text” list=” car ”>
<datalist id=" car ">
<option>宝马</option>
<option>宝骏</option>
<option>宝强</option>
<option>宝宝</option>
<option>奥迪</option>
<option>奥迪奥</option>
<option>迪奥</option>
</datalist>
表示度量器，不建议用作进度条
<meter value=“81” min=“0” max=**“100” low=*“60” high=“80” />
3.3 表单属性
placeholder 占位符
autofocus 获取焦点 (打开页面焦点自动锁定在当前目标)
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成，用于表单元素，也可用于表单自身(on/off)
(记录上次输入的信息,e-mail默认不会记录)
form 指定表单项属于哪个form，处理复杂表单时会需要
novalidate 关闭验证，可用于<form>标签 (写在form,不会对表单进行验证)
required 必填项 (不填写无法提交表单)
pattern 正则表达式 验证表单
手机号:<input type="tel" name="tel" required="required" pattern="^(\+86)?1[3,5,8](\d{9})$">
<form action="" autocomplete="on" id="form">
<fieldset>
<legend>表单属性</legend>
<label for="">
autofocus: <input type="text" autocomplete="on" name="autofocus" autofocus required>
</label>
<label for="">
placeholder: <input type="text" pattern="\D+" placeholder="这是一个占位符" novalidate>
</label>
<label for="">
multiple: <input type="file" multiple>
</label>
<input type="submit" value="提交">
</fieldset>
</form>
<label for="">
表单外的一个元素：
<input type="text" name="outer" form="form">
</label>
1283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
