H5扩展知识

今天老师带着我们学习了很多的新知识，来回顾一下吧

1. HTML5新语义化标签 ( 很重要的 )

   div span h1 img -> html4.01
   width height background -> css2.1
   transform border-radius -> css3

   header footer main -> html5
   注：很多新的HTML5语义化标签，跟div类似。

   header : 页眉
   footer : 页脚
   main : 主体
   注：header footer main 语义化标签在一个页面中只能出现一次。

   hgroup : 标题组合
   nav : 导航
   article : 独立的内容
   论坛帖子
   报纸文章
   博客条目
   用户评论
   aside : 辅助信息的内容
   section : 区域 , 跟div的功能以及语义是一样的

   figure : 描述图像或视频
   figcaption : 描述图像或视频的标题部分

   datalist : 选项列表
   涉及到的语法：list id value …
   
   
   
   
   
   
   
   
   

   details / summary : 文档细节 / 文档标题
   相关语法：open属性
   
   HTML
   

   超文本标记语言

   
   

   progress / meter : 定义进度条 / 定义度量范围
   
   

   time : 定义日期或时间
   

   今天是 3月3日

   
   

   今天是 情人节

   mark : 带有记号的文本

2. 音频与视频？

   audio ：音频 ，双标签

    controls : 显示控件
    loop : 循环播放
    autoplay : 自动播放 ( 很多浏览器已经禁止这个功能，因为考虑到用户体验的问题 )
    muted : 静音
   

   video : 视频 ， 双标签

    object-fit: cover; 可以让视频覆盖整个父容器。
   

   注：音频和视频的默认控件是隐藏的。
   注：如果想做出跟QQ音乐一样的效果：audio标签 + 隐藏控件（默认的，控件的样式用HTML+CSS模拟）+ JavaScript来实现交互功能。
   注：在视频中，可以通过 autoplay + muted 可以在静音的情况下进行自动播放。
   注：默认情况下，视频是不能进行拉伸的，必须成比例。
   注：为了能够支持多个备选文件的兼容支持，可以配合source标签。

3. 新的表单控件？

   email : 电子邮件地址输入框
   url : 网址输入框
   number : 数值输入框
   range : 滑动条
   date / month / week : 日期控件
   search : 搜索框 ( 跟普通框的区别，会多一个关闭按钮 )
   color : 颜色控件
   tel : 电话号码输入框 ( 跟普通框的区别，在移动端，会调起带数字的软键盘 )
   time : 时间控件

   表单怎么把值传给后端的？

    name -> 卡
    value -> 钱
   
    后端根据 name 拿到 value
   

   传输方式？

    method  :  数据传输方式
        GET （ 默认的 ）
        POST 
   

   传输类型?

    enctype  :  数据传输类型
        application/x-www-form-urlencoded   默认传输的是文本
        multipart/form-data    传输的是文件
   

   表单的新属性？

    autocomplete="off" 关闭表单的默认提示信息
    autofocus  :  自动获取焦点
    required : 值不能为空
    pattern : 正则验证 ( JS的内容了 )
   

4. 分栏布局？

   column-count : 分栏的个数
   column-width : 分栏的宽度
   注：column-count column-width 不要一起去写。
   column-gap : 分栏的间距
   column-rule : 分栏的边线
   column-span : 合并分栏
   注：num | all

5. 伪类与伪元素？
   #elem:after{}
   #elem:hover{}

   在 CSS2.1的时候 : #elem:after{} √
   在 CSS3的时候 : #elem:after{} × #elem::after{} √
   #elem:hover{} √ #elem::hover{} ×
   写法区别：
   伪类： 单冒号 -> :hover :active :visited :link …
   伪元素： 双冒号 -> ::after ::before …
   功能区别：
   伪类只会对操作的元素起作用，相当于样式添加到了元素身上
   而伪元素是对创建出来的虚拟容器起作用，相当于样式添加到了这个虚拟容器上。

6. link标签的扩展学习？

   提前去进行域名的dns解析 给头标签页添加小图标

7. 扩展meta标签？元信息（辅助信息）

   注：网页的描述信息，有助于搜索引擎搜索。

   已哪个引擎去渲染页面。有的浏览器可能有多个引擎，chrome : webkit blink .. ie浏览器已什么方式渲染edge最新版进行渲染，ie9 ie10 -> edge 每个多长时间可以对浏览器进行刷新 在指定的时间内，请求资源会走缓存。

8. CSS Hack?
   我们一直用的就是chrome浏览器，但是还有很多其他浏览器，当然这些浏览器都可以称为高级浏览器。

   CSS Hack 解决那些古老的浏览器兼容性问题。

   Hack分类
   下载：ieTester工具 , 测试在服务器环境下。

   1. CSS属性前缀法
      _ + * \9 \0 …

   2. 选择器前缀法
      *html

   3. IE条件注释法

   IE6 BUG 非常多：
   1. IE6高度的最小值是19px ,解决 overflow:hidden;
   2. IE6双边距问题margin和float，解决 display:inline;