每日随记

一：audio音频与video视频
<audio src=’’’’>//mp3,m4a,avi…
注：音频与视频的默认控件是隐藏的
controls：显示控件
loop：循坏播放
autoplay：自动播放//现在很多浏览器为了用户体验都禁止自动播放，视频加了静音就会自动播放，音频加静音不会自动播放
muted：静音
如果想做出与扣扣音乐一样的效果：audio标签+隐藏控件（默认的，控件的样式用HTML加css模拟）+javaScript来实现交互功能

注：默认情况下，视频是不能进行拉伸得，只能成比例
object-fit:cover;覆盖操作，可以让视频覆盖整个父容器

source：

为了支持多个文件的适配问题，可以用source标签

二：新的表单控件

input type=“”email“”
input type=“url”
input type=“number”
input type=’‘range’’ minlength="" maxlength="" value="" step=""
//最小长度，最大长度，当前值，每步移动的距离
input type=’‘date’’
input type=“month”
input type=“week”

input type=’‘search’'当你写进内容之后后面会有一个x按钮
input type="color"颜色控件
input type="tel"电话号码输入框（跟普通框的区别，在移动端，会调起带数字的软键盘）
input type="time"时间控件

表单怎么吧值传给后端的
name–卡
value–钱
后端根据name拿到value
表单的新属性：autocomplete="off"关闭表单的默认信息提示（历史输入过的用户名的提示）
autofocus:自动获取光标
required:值不能为空
pattern：正则验证（js内容）

传输方式：method：数据传输方式
GET：
POST:

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

三：分栏布局
column-count：3;分栏的个数
column-width:110px；分栏的宽度
个数和宽度不要一起写
column-gap：50px;分栏的间距
column-rule:1px solid pink;分栏的边线
column-span:合并分栏 num|all

四：伪类与伪元素
#elem:after{}
#elem:hover{}

在css2.1的时候：elem:after{}√
在css3的时候#elem：after{}× #elem::after{}√
#elem：hover{}√ #elem::hover{}×
伪类：单冒号：hover :link…伪类只会对操作的元素起作用
伪元素：双冒号 --::after ::before对创建出来的虚拟容器起作用，相当于样式添加到了这个虚拟容器上

五：link标签的扩展学习

<link rel="dns-prefetch" href="//static.360buyimg.com">
提前去进行域名的dns解析

<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
给头标签页添加小图标

六：扩展meta标签，元信息（辅助信息）

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ,吃喝玩乐1折起。">

<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">

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

<meta name="renderer" content="webkit">
    已哪个引擎去渲染页面。有的浏览器可能有多个引擎，chrome : webkit blink ..
<meta http-equiv="X-UA-Compatible" content="ie=edge">
    ie浏览器已什么方式渲染edge最新版进行渲染，ie9 ie10 -> edge
<meta http-equiv="refresh" content="3" url="">
    每个多长时间可以对浏览器进行刷新
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"> 
     在指定的时间内，请求资源会走缓存。

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

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

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

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

2. 选择器前缀法
    *html

3. IE条件注释法

    <!--[if IE]>…<![endif]-->

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