重头学习html5+css3系列笔记（10）

CSS初始化

由于每个浏览器执行css时会有一些差异，所以我们需要将标签自带的一些样式清除，再将其进行初始化，让其按照我们设定的属性去执行。
比如京东的初始化

* {
  margin: 0;
  padding: 0;
}
em,
i {
  font-style: normal;
}
li {
  list-style: none;
}
img {
  border: 0;
  /* 消除空白间距 */
  vertical-align: middle;
}
button {
  cursor: pointer;
}
a {
  color: #666;
  text-decoration: none;
}
a:hover {
  color: #c81623;
}
button,
input {
    /* \588B是UNicode转码，这一组值代表宋体*/
  font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
    "\5B8B\4F53", sans-serif;
}
body {
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
    "\5B8B\4F53", sans-serif;
  color: #666;
}
.hide,
.none {
  display: none;
}
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: ".";
  height: 0;
}
.clearfix {
  *zoom: 1;
}

HTML5常用新特性

新特性主要针对于前边的不足，增加了一些新的标签，新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是IE9+以上版本才支持。

新增语义化标签

头部标签：<header>
导航标签：<nav>
内容标签：<article>
定义文档某个区域：<section>
侧边栏标签：<aside>
尾部标签：<footer>
之前我们布局一般都会用div做盒子，但使用上述标签做盒子，可以使我们的页面更有语义化，这些盒子也都是块级元素
注意：

1. 这些语义标准主要是针对搜索引擎的
2. 这些标签页面可以使用多次
3. 在IE9中，需要把这些元素转换为块级元素
4. 由于移动端不需要考虑兼容性，会大量使用这些标签

多媒体标签

音频:<audio>
视频：<video>
使用他们可以方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。

video标签

video元素支持三种格式的 Mp4 webm ogg但尽量使用mp4格式的，这个格式在每个浏览器都是支持的
语法：

<video src="文件地址" controls></video>

video常见属性

项目	Value	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器无法自动播放，可以添加muted来解决自动播放的问题）
controls	controls	显示播放插件（由于每个浏览器的视频插件样式不一样，后续主要通过js来完成插件显示，该属性一般不用）
width	plxels(像素）	播放器宽度
height	plxels	播放器高度
loop	loop	是否循环播放
preload	auto(预先加载视频） none（不应加载视频）	规定是否预加载视频（如果有了autoplay，则忽略该属性）
src	url	视频地址
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

audio标签

因为所有的浏览器都支持mp3格式，所以推荐使用mp3格式的音频

 <audio src=""></audio>

常用属性有autoplay，controls，loop， src等，谷歌也禁用了音频的自动播放，但是使用muted属性无法解除禁止

新增input类型

可以限制用户输入类型
如type="email"限制用户只能输入邮箱，url输入必须为url类型，color生成一个颜色选择表等

新增html5表单属性

项目	Value	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值（如value）时则不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	提示曾经提交成功的值，默认为打开，只有放在表单里，同时加上name属性，才有效
multiple	multiple	可以多选文件提交

可以通过input::placeholder来修改样式

CSS新特性

css3新增选择器

属性选择器

根据元素特定的属性来选择元素

 <input type="text">
 <input type="text" value="123">

比如只想选择到第二个选择器

 input[value]{
            color: black;
        }

便可以这样通过属性选择器来选择
还有以下形式：

项目	含义
E[att]	选择具有att属性的E元素
E[att=‘val’]	选择具有att属性且其属性值等于val的E元素
E[att^=‘val’]	选择具有att属性且其属性值以val开头
E[att$=‘val’]	选择具有att属性且其属性值以val结尾
E[att*=‘val’]	选择具有att属性且值中含有val的E元素

类选择器，伪类选择器，属性选择器权重均为10
则input[value] 权重值为11（元素选择器加属性选择器）
div.icon权重为11

结构伪类选择器

根据文档结构来选择元素，常用于根据父级选择
比如

 ul li:first-child {
            background-color: blue;
        }

选中ul后代元素中第一个li标签（即第一个后代元素是li才能被选中），注意如果没有li需要在ul之后加一个空格（其实也可以理解为对ul后代元素选中的li进行限定）
其它结构伪类选择器

项目	Value
E:first-child	匹配父元素中第一个子元素E
E:last-child	匹配父元素中最后一个子元素E
E:nth-child(n)	匹配父元素中第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type（n）	指定类型E的第n个

nth-child(n)选择某个父元素的一个或多个特定的子元素

n可以是数字，关键字，公式
关键字：odd(奇数） even(偶数）
公式（必须为n）（n是从0开始计数）：

• 2n 选择了所有偶数的元素（0 2 4…）
• 5n 选择了5的倍数
• n+5 从第5个开始（包含第五个）
• -n+5前五个（包含第五个)

伪元素选择器

伪元素选择器可以帮助我们利用css创建新标签元素，而不需要html标签，从而简化HTML结构
一些装饰性的内容可以通过伪元素添加

选择符	含义
::before	在元素内部内容的前面插入内容
::after	在元素内部的内容后面插入内容

• before和after创建一个元素，但是属于行内元素 ，可以声明转化为其他类型
• 新创建的这个元素在文档中是找不到的，所以称为伪元素
• 必须具有content属性
• 权重为1

伪元素选择器使用场景

伪元素字体图标
遮罩层 .tudou:hover::before{display:block}
清除浮动

CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有两个属性值

1. content-box 盒子大小=width+padding+border(默认）
2. border-box 盒子大小=width
   即如果盒子模型设置了border-box属性，那么padding和border就不会撑大盒子,他们会向内挤压内容区（前提是padding和border不会超过width宽度）

CSS的其他属性

图片变模糊

css3滤镜filter:
filter CSS属性将模糊或颜色偏移等效果应用于元素

filter: 函数（）；例如：filter:blur(5px); blur模糊处理 数值越大越模糊

CSS3 calc函数

此CSS3函数让你在声明属性时可以执行一些计算（与其他元素产生关联）
比如子盒子永远比父盒子小80像素：
定义子盒子：

width:calc(100%-80px)

CSS3过渡效果

过渡动画：是从一个状态渐渐过渡到另一个状态

transition: 要过渡的属性 花费的时间 运动曲线 何时开始

经常和 :hover搭配使用 谁做过渡给谁加

1. 属性 ：想要变化的CSS属性，如宽度高度 背景颜色 内外边距都可以，如果想要所有属性都变化过渡，写一个all
2. 花费时间：单位是秒（必须写单位）比如0.5s
3. 运动曲线：默认是ease(逐渐慢下来，可以省略）还有linear（匀速） ease ease-in（加速） ease-out（减速） ease-in-out（先加速后减速）等属性
4. 何时开始：单位是秒（必须写单位）可以设置延时触发时间 默认是0s（可以省略）

如果想要写多个属性，利用逗号进行分隔
过渡条效果：

  .progress {
            padding: 1px 0;
            width: 150px;
            height: 15px;
            border: 1px solid skyblue;
            border-radius: 7px;
        }

        .in {
            width: 50%;
            height: 100%;
            border-radius: 7px;
            background-color: skyblue;
            transition: all 1s;
        }

        .in:hover {
            width: 100%;
        }

我第一个想法是只用一个盒子，让其背景色由白色到蓝色，但是发现他是均匀变化的。无法实现从左到右变化
解决方法是可以在内部设置一个小盒子，让其宽度变化

广义HTML5

HTML5+CSS3+JavaScript