重构HTML5&CSS3

H5

简介

• H5万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言，用于替代H4与XHTML的新一代标准版本，所以叫做H5

• XHTML可扩展性超文本标记语言，增强了的HTML，适应应用的更多需求

• 设计目的是为了在移动设备上支持多媒体，增加了语义特性，本地存储特性，设备兼容特性，连接特性，网络多媒体特性，三维、图形及特效特性、性能与集成特性、CSS3特性

• 废弃了font、center…元素或者属性

优势

• 提高了可用性和改进用户的友好体验，更好的语义化标签

• 给站点带来更多的多媒体元素，很好替代FLASH和Silverlight

• 当涉及到网站的抓取和索引时候，对SEO很友好，被大量应用于移动程序和游戏，可移植性好

劣势

• IE9以下版本不兼容

新增语义化标签

header：头部标签 nav：导航标签 main：主体标签 footer：尾部标签

article：独立的内容标签 section：区段标签 aside：侧边栏标签

注意事项：

• 语义化标准主要针对搜索引擎的，新标签页面中可以使用多次
• IE9中兼容问题，转换为块级元素，移动端开发更喜欢

header,nav,article,aside,section,main,footer{display:block}

新增多媒体标签

可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件

音频

• 在不适用插件的情况下也可以原生支持音频格式的文件

<audio src="地址" controls="controls"></audio>

H5规定如果属性名和属性值相同，可以只写属性值

• 音频常见标签
  

  google禁用了autoplay

• 多种音频格式兼容的写法，直接一次性加载两种资源，如果还是没有就直接提示用户版本过低

视频

• 在不使用插件的情况下，实现视频的播放

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

• 视频标签常见属性

google的视频自动播放只有在静音情况下才允许自动播放

• 多种视频兼容的写法，依旧是多添加视频文件格式

新增表单标签

已学标签类型：

新增表单类型：

• number可以设置max/min=""，step=”步数“ value=“默认显示值”

新增可输入表单

<input type="text" list="list01">
<datalist class="list01">
  <option value="广州">gz</option>
  <option value="上海">
</datalist>

datalist标签规定了input元素可能的选项列表，包含了一组option元素，在输入过程中会自动相应元素的值,预定义

新增表单属性

CSS3

简介

• 相对于CSS2中的7个选择器，添加了更多的其他选择器，实现了更多的选择方式
• 新增选择器：子级选择器、兄弟选择器、结构伪类选择器、伪元素选择器、属性选择器

子级选择器

父级选择器>子级选择器

用于选取带有特定父元素的元素，如果不是直接子元素就不会被选中

兄弟选择器

相邻兄弟选择E1+E2

• 用于选择紧接在另一个元素后的兄弟元素，两者有相同的父元素
• 选中的是E1紧跟后面的第一个E2(但是E1可以有多个)

其他兄弟选择器E1~E2

• 选择的E1后面的同一个父亲的所有E2

结构伪类选择器

• nth-child(n) n可以是数字，也可以是even(偶数)odd(奇数)，也可以是公式（5n）
• nth-of-type(n)会忽略掉其他的非同类元素，只在E中去找

伪元素选择器

.box::before{ content:"";}

• 伪元素属于行内元素，我们可以对其进行display修改为块元素
• 在DOM中无法看到该元素，故称之伪元素

属性选择器

用来选择包含指定属性的标签

• 根据具体的属性来进行选择

选择器权重

• id选择器>类选择器>标签选择器>*
• 伪类选择器、属性选择器的权重等于类选择器
• 伪元素选择器的权重等于标签选择器

盒模型

box-sizing来指定盒模型

边框圆角

border-radius设置边框的圆角

• 可以通过单一属性来进行半径的设置

• border-radius可以进行简写，三值，两值，单值

• IE8及以下版本浏览器不支持border-radius属性，其他浏览器都支持

文字阴影

text-shadow可向文本应用阴影，可以规定水平、垂直阴影、模糊距离、颜色

• 多层阴影，逗号分隔多个阴影的属性值，先写的盖住后写的阴影

盒子阴影

box-shadow用于对盒子边框添加阴影

• 外部的边框阴影不需要设置

• 同样需要多层阴影，只需要用逗号分隔多个属性值

过度属性

在CSS3出现之前，一般使用flash动画或者js制作动画，通过一帧一帧的实现，CSS3就可以通过 transition实现补间动画实现过渡效果，当前元素发生变化时就会存在两种状态（A和B），切换就有平滑的动画过渡效果。

transition:过度属性、过渡时间、运动曲线、延时时间；

• transition-property过渡的属性

  none：没有属性过渡 all：所有变化的属性都过渡

• transition-duration过渡的时间

  单位是s，默认是0也是需要写单位s

• transition-timing-function时间曲线

  

• 贝塞尔曲线可以通过自定义来进行更改

• 浏览器兼容问题：IE9以及更早版本不支持transition属性，Safari需要使用前缀-webkit-transition才可以实现

2D转换

transform

对元素进行移动、缩放、转动、拉长或拉伸，配合过渡和动画，卡哇伊取代大量之前只能使用Flash实现的效果

属性值

位移translate（）

• 属性值（x,y）表示水平和垂直方向位移的距离，px或百分比（参照于移动盒子的大小移动），区分正负
• （x）只有一个数值表示水平方向的位移
• 可以实现居中的效果

缩放scale（）

• 属性值

旋转rotate（）

数字deg，deg表示度数，正数表示正方向，负数表示负方向

• 当元素旋转后，它的坐标轴也会发生变化
• 多个属性值同时设置给transform时，书写顺序不同导致效果有差异

倾斜skew（）

transform:skew(数字deg，数字deg)

• 两个属性分别表示水平和垂直方向倾斜的角度

基准点 transform-origin

• 设置调整元素的水平和垂直方向原点的位置，调整元素的基准点
• 可以的值，left、center、right、像素值、百分比

卡包特效案例

• 六张照片全部排列于一处，使用子绝父相，left:0 right:0
• 给不同的照片设置不同的tranform的rotate旋转角度
• 设置所有照片的动画效果transition

3D转换

比普通的x、y轴多了一个z轴属性

透视perspective

• 图像3D效果的呈现其实是一种视觉效果，通过透视实现此目的
• 透视特点：近大远小
• 给perspective属性设置一个值

3D旋转

• 属性值相比较2D的旋转多一个rotateZ（angle）

3D位移

• 位移可以根据X、Y、Z轴分别进行位移
• 在进行位置后，旋转的轴也会发生变化

transform-style

• 设置内部被嵌套子元素在3D空间中进行显示，子元素会保留自己的3D转换坐标轴

• 属性值: flat：所有子元素在2D平面呈现

  ​ preserve-3d：保留3D空间

• 3D元素的构建是某个图形由多个元素构成的，可以给这些元素设置该属性，使其成为一个真正的3D图形，一般设置给父级元素。

• 浏览器兼容问题，Chrome和Safari需要前缀-webkit-，IE9需要前缀-ms-

动画

创建动画—>绑定动画

创建动画@keyframes

@keyframes{
 0%{transform:translateY(0);}
 100%{transform:translateY(150px)}
}

@keyframes可以规定CSS样式，从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式，任意多的次数。

• 使用百分比来规定变化发生的事件，或用关键词“from” “to”等同于0%到100%

• 使用百分比的形式可以使动画效果更加灵活

绑定动画animation

div{
  animation：动画名称、过渡时间、速度曲线、动画次数、延时时间;
}

• 将@keyframes中创建的动画绑定在某个选择器上才能产生动画效果
• 可以将属性设置为单一属性后再添加，动画名称和过渡时间必须要设置，其他属性可以按需设置
  
• 版本兼容问题，IE10、Firefox以及Opera均支持@keyframes属性，Chrome和Safari需要前缀-webkit-前缀，IE9及早版本均不支持