前端学习Html5(day1)

一、什么是HTML5
1、HTML的一个最新的版本，也是web的一个标准。
2、支持 所有的主流浏览器都支持h5（chrome,firefox,safari。。。）。IE9及以上支持h5(有选择的支持，并不会全部支持),但是ie8及以下不支持h5.
3、相对于h4 抛弃了一些不合理不常用的标记和属性，.新增了一些标记和属性–表单（这点）
4、增加了其它的新特性 语义特性，本地存储特性，网页多媒体，二维三维，特效（过渡，动画）
5、设计目的是为了在移动设备上支持多媒体

二、页面结构新的元素
这里只记录比较常见的

<article>  定义页面的侧边栏内容
<command>  定义命令按钮，比如单选按钮、复选框或按钮
<footer>  定义 section 或 document 的页脚。
<header>  定义了文档的头部区域
<nav>  定义运行中的进度（进程）。
<section>  定义文档中的节（section、区段）。

三、新增标签

1、<audio> 音频  src  controls autoplay loop
2、<video> 
src 视频路径
controls 属性规定浏览器应该为视频提供播放控件
autoplay 是否自动播放 就是页面加载完之后，会自动播放
loop  是否循环播放
poster  指定视频还没有完全下载完毕，或者用户没有点击播放前显示的封面。 默认显示当前视频文件的第一副图像
source:因为不同的浏览器所支持的视频格式不一样，为了保证用户能够看到视频，我们可以提供多个视频文件让浏览器自动选择
width 视频始终会保持原始的宽高比，意味着如果你同时设置宽高，并不是真正的将视频的画面大小设置为指定的大小，而只是将视频的占据区域设置为指定大小，除非你设置的宽高刚好就是原始的宽高比例。所以建议：在设置视频宽高的时候，一般只会设置宽度或者高度，让视频文件自动缩
height
<video controls>
    <!--视频源，可以有多个源-->
    <source src="../mp3/flv.flv" type="video/flv">
    <source src="../mp3/mp4.mp4" type="video/mp4">
</video>
3、图形的绘制 canvas 后面详细讲

四、兼容处理
1.在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement(‘tagName’)创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement(‘tagName’)来创建一遍，这样IE低版本也能正常解析HTML5新标签了。
2.处理方式：在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题（测试在IE下面的兼容性：ieTester软件的使用）

五、表单新增的标签
也只记录比较常用的

1、<datalist>: 与input配合使用：类似于拥有输入功能的下拉列表
通过datalist创建选择列表，与input相结合，可以输入 也可以选择,可以达到一种提示，
专业：<input type="text" list="subjects"> <br>
<datalist id="subjects">
<option value="英语" label="不会"/>
2、<keygen>  提供一种验证用户数据的可靠方法。在提交表单数据的时候，会生成两个键，一个私钥，一个公钥。私钥存储在本地，公钥发送到服务器。在需要做验证的时候，我们可以从服务器下载一个客户端证书，通过私钥和证书来实现相关的验证操作。现在不用了 理解即可
3、progress <meter>:度量器， low high规定的较高值 value max min
4、<output>: 展示内容，只能展示，不能进行编辑
5、<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段 组合表单中的相关元素：

六、表单新增的属性

required 验证条件，必填项
autocomplete 自动完成，规定表单是否应该启用自动完成功能，用于表单元素，也可用于表单自身
autofocus 获取焦点
placeholder 占位符
pattern 正则表达式 验证表单
autofocus 获取焦点
novalidate  关闭验证

七、表单的输入类型/会有简单的自我验证
a)email： 输入email格式
d)number： 只能输入数字
e)search： 搜索框
f)range： 范围，可以进行拖动，通过value进行取值 max min
tel 本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。 如何查看效果：qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看
i)date： 日期 不是绝对的

八、表单新增的事件
1、oninput 用户输入内容时触发，可用于移动端输入字数统计
2、oninvalid 验证不通过时触发
3、onkeyup 键盘弹起
4、

<lable for=“iphone”>苹果手机</lable>
<input type="password" id="iphone"/>

如果没有Lable标签的时候，你要输入密码，必须在password文本框里点一下，才能获得输入的许可（也就是获得焦点）,有了Lable的话，你在“苹果手机”这四个汉字上点一下，光标也进入Passwors输入框，获得输入许可，也就是获得了焦点、
九、DOM扩展
1、获取元素
ElementsByTagName获取的是数组
ElementsById 获取单个元素
ElementsByClassname 通过类名进行获取
query:查询 Selector：选择器 querySelector(传入选择器名称)*
querySelector:获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素，参数要求：如果是类选择器，必须添加. 如果是id选择器， 必须添加# ,否则当成标签处理
var allLi=document.querySelectorAll(“li”)[0]; 可以获取多个元素 或者指定第几个

2、类名操作
1、Node.classList.add(‘class’) Node相当于document
2、Node.classList.remove(‘class’)
3、Node.classList.toggle(‘class’) 切换class，有则移除，无则添加
4、Node.classList.contains(‘class’) 检测是否存在class

3、自定义属性
data-info=“我是自定义属性”，
Node.dataset[‘info’]
当我们如下格式设置时，则需要以驼峰格式才能正确获取：data-my-name=“itcast”，获取Node.dataset[‘myName’]