前端 H5新增标签和特性

H5新增标签和特性：

 1. 用于绘画 canvas 元素。
 2. 用于媒介回放的 video 和 audio 元素。
 3. 语意化更好的内容元素，比如 article、footer、header、nav、section3）
 4. 表单控件，calendar、date、time、email、url、search。
 5. 本地离线存储 （HTML5的离线储存）
localStorage 长期存储数据，浏览器关闭后数据不丢失；能维持在多个会话范围内
 6. sessionStorage 的数据在浏览器关闭后自动删除。客户端数据存储，只能维持在当前会话范围内。
 7. 语义标签：
    article定义文章
    aside定义文章侧边栏
    figure定义一组媒体对象以及文字内容
    figcaption定义figure的标题
 8. 布局页面时用的语义标签：
     nav定义导航
     header头部
     section定义文档中的区段 区域
     footer尾部

input的类型

 1. text 文本输入框
 2. password 密码
 3. button 按钮
 4. checkbox 复选
 5. radio 单选
 6. submit 提交
 7. reset 重置
 8. file 文件
 9. email 输入邮箱地址 检测@
 10. url URL地址
 11. number 只能输入数字 还有e
 12. range 范围 默认0~100
 13. required 必须填写
 14. placeholder 占位符

功能标签：

* 视频标签
<video src="" autoplay自动播放 controls控制播放 loop是否重复播放 preload是否自动加载> 视频 </video>
* 音频： <audio src="">音频</audio>
* 内嵌网页框架:<iframe src="" frameborder=“0”>内嵌网页框架</iframe>
* 画布用js写： <canvas>定义图形提供画布</canvas>

流式布局

* 即百分比布局。（宽度， 高度，边距，rem，定位值）
* 尺寸百分比 = 目标元素的宽度（高度）/ 父级的宽高
* 定位值百分比 = 目标元素的定位值 / 父级的宽高
* margin和padding / 父级的宽度
*  em: 针对父级来设置自身
  rem: 针对html

媒体查询

可以根据不同屏幕尺寸，动态的修改网页布局以及样式，是响应式网站不可缺少的一部分
only 可以省略多个条件用and相连
@media only screen and (min-width:500px) and (max-width:700px){…}
link:
link rel=“stylesheet” href="" media=“screen and (min-width:500px) and (max-width:700px)”
响应式网站：由两种办法完成响应式网站, 流式布局和媒体查询，通常情况下相辅相成共同完成响应式网站。

拓展

• 腾讯：国内唯一有自己内核的公司，X5。（X5的浏览器内核是基于早起的webkit内核开发出来的，而后自己优化。QQ浏览器 微信）
• webkit-: 谷歌前缀，谷歌内核（猎豹 360 safari）
• -o-: 欧朋 （已经摒弃自己的内核，转战谷歌的阵营）
• -ms-: 微软 ie 斯巴达
• -moz-: 火狐 ff
• 浏览器内核是浏览器的核心，也称“渲染引擎”，用来解释网页语法并渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页的语法解释也不同，因此网页开发者需要在不同内核的浏览器中测试网页的渲染效果。
  1、IE浏览器内核：Trident内核，也是俗称的IE内核；
  2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
  3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
  4、Safari浏览器内核：Webkit内核；
  5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
  6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
  7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
  8、百度浏览器、世界之窗内核：IE内核；
  9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；