JavaScript库CDN加速:
百度: http://cdn.code.baidu.com/
七牛云: http://www.staticfile.org/
zeptojs: http://www.zeptojs.cn/
一、新特性
- 用于绘画的canvas元素
- 用于媒体播放的video和audio元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素(例如article、footer、header、nav、section)
- 新的表单控件(例如calendar、date、time、email、url、search)
二、新的结构化元素(语义化标签)
- <header></header>页眉 【用于页面头部的信息介绍】
<header>
</header>
- <hgroup><hgroup>页面中标题组合 【一个标题和一个子标题或标语组合】
<hgroup>
<h1>标题1</h1>
<h2>标题2</h2>
</hgroup>
- <nav></nav>导航
<nav>
<a href="#">首页</a>
<a href="#">财经</a>
<a href="#">体育</a>
</nav>
- <footer></footer>页脚 【页面的底部或版块底部】
<footer>
我是底部声明
</footer>
- <section></section>页面上的版块 【划分页面中不同区域】
<article></article>页面中一套结构完整且独立的内容部分 【可以用来呈现论坛的一个帖子、杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可浮动的页面模块挂件】
<aside></aside>主要内容相关的应用、侧边栏、广告、nav元素组
<section>
// 主体内容
<article></article>
// 侧边栏
<aside></aside>
</section>
- <figure></figure>对元素进行组合，一般用于图片或视频
<figcaption></figcaption>figure的子元素，用于对figure的内容进行说明
<figure>
<figcaption>图片内容的描述</figcaption>
</figure>
- <time></time>表现时间或日期
<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>
- <datalist></datalist>选项列表，与input元素配合使用，来定义input可能的值(即提示内容)
// 注意id要一致
<input type="text" list="valList" />
<datalist id="valList">
<option value="javascript">javascript</option>
<option value="html">html</option>
<option value="css">css</option>
</datalist>
- <details></details>描述文档或文档某个部分的细节
<summary></summary>details元素的标题
<details>
<summary>联系方式:</summary>
// 显示的具体内容
<p>1380013800</p>
</details>
- <dialog></dialog>定义一段对话
<dialog>
<dt>老师:</dt>
<dd>1+1=?</dd>
<dt>学生:</dt>
<dd>等于3</dd>
<dt>老师:</dt>
<dd>非常好，答对了。</dd>
</dialog>
- <address></address>详细联系信息
<address>联系方式: 1380013800</address>
- <mark></mark>需要标记的词或句子
<p>
你的名字: <mark> 张三 </mark>
</p>
- <progress></progress>定义进度条
<progress max="100" value="73"></progress>
三、IE下的兼容(语义化标签的兼容)
- 添加自定义标签的方法1
// 即先创建对应的自定义标签(对应标签中添加display: block;)
document.createElement('haha');
document.createElement('header');
document.createElement('article');
document.createElement('aside');
document.createElement('section');
document.createElement('footer');
// 在IE中是没有这些语义化标签的，所以在自定义好标签后，显示还是有问题。因为这些标签都是没有默认样式的！！！！
- 通过Google中的一个JS文件
<!-- 通过Google的一个js文件来解决IE语义化兼容问题(带有功能的语义化标签还是不支持，如果需要功能自己JS添加)-->
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
四、新增表单控件和表单属性
- 新的输入型控件
1、email: 电子邮箱文本框，与普通的没有区别
当输入不是邮箱时，验证不通过
移动端的键盘会有变化
2、tel: 电话号码
3、url: 网页的url
4、search: 搜索引擎
5、range: 特定范围内的数值选择器
属性: min、max、step(步进值)
例如: 用JS来显示当前数值
6、number: 只能包含数字的输入框
7、color: 颜色选择器
8、date: 日期
9、datetime-local: 显示完整日期，不含时区
10、time: 显示时间，不含时区
11、month: 显示月
- 新增表单属性
1、placeholder: 输入框提示信息
2、autocomplete: 是否保存用户输入值
默认为on，关闭提示选择off
3、autofocus: 指定表单获取输入焦点
4、list和datalist: 为输入框构造一个选择列表
list值为datalist标签的id
5、required: 此项必填，不能为空
6、pattern: 正则验证 pattern=“\d{1,5}”
7、formaction: 在submit中定义提交地址 【在同一个form中可以提交到不同地址中】
为了手机方便查看: <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
