h5c3 part1

一.h5c3:
HTML5广义的概念: 代表着浏览器技术发展的阶段，是html5 css3和js（API）一套前端技术的组合;
h5设计的目的是为了在移动设备上支持多媒体;;新的语法特征被引进以支持这一点.h5还引进了新的功能,可以真正改变用户与文档的交互方式;

优点: 1. 提升用户体验
2. 丰富页面的多媒体元素 audio video canvas
3. 取代flash在移动设备的地位
4. 增加很多新标签, 有助于开发人员定义重要的内容

兼容性: 1.不支持h5新标签的浏览器会将这些标签解析成行内元素, display: block ; 即可以解决;
2.ie9 以下版本浏览器 不能识别这些标签, 但通过 document.createElement 创建的元素可以识别, 实际开发中通常引入js库来解决这个问题 <script src="../js/html5shiv.min.js"></script>

二.表单:
1.新增标签

1.datalist 和input 结合使用, 拥有输入功能的下拉列表
2.Keygen
3.meter 度量器
4.output 用于输出内容
5.progress

多媒体标签: audio video

<form>
<fieldset>
特殊格式处理
<legend>fieldset元素的标题</legend>
</fieldset>
</form>
2 新增属性
1. autofocus 自动聚焦
2. autocomplete form 或者input 都可以有
3. multiple 文件或者邮箱
4. required 必填
5. pattern 正则表达式
6. form 哪项属于表单
7. placeholder
3. 新增输入类型

tel : 主要在移动端弹出数字键盘
email:
tel:
search:
number:
range:
color:
date:
datetime:
localtime
week
month
day

4. 新增事件
oninput: 内容改变时触发
oninvalid: 输入无效是触发
setCustomValidity: 输入无效时的输出内容

三. 页面结构新增标签:

<header></header>
<nav></nav>
<main>
<article></article>
<aside></aside>
</main>
<footer></footer>

转载于:https://www.cnblogs.com/noraZhang/p/10044612.html