第四篇：HTML5及CSS3

html5简介

它是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。用于取代HTML4与XHTML的新一代标准版本，所以叫HTML5

HTML5的设计目的是为了在移动设备上支持多媒体增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3 特性废弃一些元素和属性比如 font 、center 等

HTML5优势、劣势

提高可用性和改进用户的友好体验 更好的语义化标签可以给站点带来更多的多媒体元素(视频和音频)可以很好的替代FLASH和Silverlight当涉及到网站的抓取和索引的时候，对于SEO很友好将被大量应用于移动应用程序和游戏 可移植性好该标准并未能很好的被PC端浏览器所支持，IE9以下的浏览器几乎都不兼容

广义的html5

狭义的 HTML5 是指 HTML 语言的第 5 个版本而广义的 HTML5 是 HTML5本身 + CSS3 + JavaScript 技术的综合

新增的语义化标签

<header>：头部标签 <nav>：导航标签<main>: 主体标签<article>：独立的内容标签<section>：区段标签<aside>：侧边栏标签 <footer>：尾部标签

注意

这种语义化标准主要针对搜索引擎的这些新标签页面中可以使用多次的在IE9中，需要把这些元素转换为块级元素其实，我们移动端更喜欢使用这些标签 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

音频标签

格式支持写法常用属性

视频标签

格式支持写法常见属性

总结

音频标签和视频标签使用基本一致 浏览器支持情况不同我们可以给视频标签添加 muted 属性进行自动静音播放视频，音频不可以 视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用 controls 控件

新增的表单标签

输入标签新增属性

datalist标签

<datalist> 标签规定了 <input> 元素可能的选项列表<datalist>元素包含了一组<option>元素，这些元素表示预定义可选值，在<input>元素输入过程中，会自动响应<option>元素的值绑定的<input>标签必须设置 list 属性，属性值等于<datalist>标签的 id 属性值

新增表单属性

CSS3新增的选择器

子级选择器

子级选择器用于选取带有特定父元素的元素书写语法：element1 > element2注意：如果 element2 元素不是父元素 element1 的直接子元素，则不会被选择。> 符号之前书写父级的选择器，> 符号之后写子级选择器，必须满足父子级关系才能选中标签

兄弟选择器

相邻兄弟选择器相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素书写语法：E1 + E2选中的是紧跟在 E1 之后的同级元素 E2只能选中紧跟在后面的一个 E2 元素二者有相同的父元素+ 符号前后可以添加空格书写其他兄弟选择器其他兄弟选择器匹配同一个父元素中在 element1 后面的所有 element2 元素书写语法：element1~element2 选择 element1 之后出现的所有 element2两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1~ 符号前后可以添加空格书写

结构伪类选择器

nth-child（n）

n可以是数字，关键字和公式n如果是数字，就是选择第n个常见的关键字是even偶数和odd奇数常见的公式如下但是第0元素或者超出了的元是的个数会被忽略

E:nth-child(n) 和E:nth-of-type(n) 的区别

E:nth-child(n) 匹配父元素的第 n 个子元素 E，同时需要满足两个条件E:nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素 E，会忽视其他同级的非同类型元素

伪元素选择器

h5写法和传统写法的区别

1. 单冒号 E:before2. 双冒号 E::before浏览器对以上写法都能识别，双冒号是 h5 的语法规范

伪元素的注意事项

伪元素只能给双标签添加，不能给单标签添加伪元素的冒号前不能有空格，如 E ::before 这个写法是错误的伪元素里面必须写上属性 content:""before 和 after 创建一个元素，但是属于行内元素因为在 DOM 里面看不见刚才创建的元素，所以我们称为伪元素

属性选择器

选择器权重

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

CSS3盒子模型

css3中可以使用box-sizing来指定盒子模型，这样我们就可以设置如何计算一个元素总的宽度和高度

content-box标准模式

Standard 模式：标准模式中，盒子总体大小为 width(height) + padding + border，内容区域是 width 和 height 部分

border-box 怪异模式

Quirks 模式：怪异模式中，盒子总体大小为 width 和 height，添加了padding和border后，内容区域会收缩

CSS3新增属性

边框圆角

属性名：border­radius作用：设置边框的圆角属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比ie8一下不兼容

单一属性

border-top-left-radius: 半径border-top-right-radius: 半径border-bottom-right-radius: 半径border-bottom-left-radius: 半径

简单写法

border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写法border-radius: 左上角 右上角 右下角 左下角border-radius: 左上角 右上角和左下角 右下角border-radius: 左上角和右下角 右上角和左下角border-radius: 四个角相同

/的属性值写法

border-radius 属性值中出现了 / 斜线，那么 / 前面可以设置水平方向四种值的写法，/ 后面可以设置垂直方向四种值的写法

文字阴影

在 CSS3 中，text-shadow 可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色text-shadow 属性向文本添加阴影，属性值有2-3个长度值和一个可选的颜色值进行规定，省略的长度是 0多层阴影：text-shadow 属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。多阴影中，先写的阴影压盖在后写的阴影上

盒子阴影

在 CSS3 中，box-shadow 属性用于对盒子边框添加阴影box-shadow 属性向盒子添加阴影，属性值有2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定，省略的长度是 0多层阴影：box-shadow 属性也可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。 多阴影中，先写的阴影压盖在后写的阴影上。

过渡

属性名：transition作用：在不使用 Flash 动画或 JavaScript 的情况下，使用 transition 可以实现补间动画（过渡效果）并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），那么A和B之间就可以实现平滑的过渡的动画效果。为了方便看效果，我们使用 :hover 切换状态ie10一下不兼容，Safari 需要前缀 -webkit-

单一属性写法

transition-property过渡的属性

none 表示没有属性过渡all 表示所有变化的属性都过渡属性名 使用具体的属性名，多个属性名中间逗号分隔

时间

过渡时间：以s秒为单位延时时间：以s秒为单位。0s也必须加单位

transition-timing-function 时间曲线

贝尔赛曲线

2D转换

属性名：transform作用：对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果属性值：多种转换方法的属性值，可以实现不同的转换效果

位移 translate()

transform 的属性值为 translate() 时，可以实现位移效果

缩放 scale()

transform 的属性值为 scale() 时，可以实现元素缩放效果

旋转 rotate()

transform 属性值设置为 rotate(数字deg) 时，实现元素的旋转deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。2d的旋转只有一个属性值元素旋转后坐标轴也会跟着变化，因此多个属性值同时设置给transform时，书写顺序的不同会导致转换结果有差异

倾斜 skew()

transform 属性值设置为 skew() 时，实现元素的倾斜书写语法：transform: skew(数字deg,数字deg)两个属性值分别表示水平和垂直方向的倾斜角度。属性值可以正负，第二个属性值不写默认为0

transform­-origin 属性

作用：设置调整元素的水平和垂直方向原点的位置调整元素的基准点属性值：包含两个，中间使用空格分隔

3D转换

transform 属性不止能实现 2D 转换，也可以制作 3D 立体转换效果，比普通的 x、y 轴组成的平面效果多了一条 z 轴，如下图Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。Chrome 和 Safari 需要前缀 -webkit-

透视

电脑显示屏是一个2D的平面，图像之所以具有立体感的效果，其实是一种视觉呈现透视可以将一个2D的平面，在转换的过程当中呈现3D的效果透视的特点：远小进大注意：并非任何情况下都需要透视效果，根据开发需要进行设置，如果需要展示z轴的变化，则需要设置透视效果

透视属性

属性名：perspective作用：设置在 z 轴的视线焦点的观察位置，从而实现 3D 查看效果属性值：像素值，数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸注意：透视属性需要设置给 3D 变化元素的父级

3D旋转

属性值3D旋转属性值的角度区分正负，正数表示沿对应坐标轴顺时针旋转，负数表示逆时针旋转

3D位移

属性值属性值为像素值或者百分比，正数表示正方向，负值表示反方向

transform-style属性

用于设置被嵌套的子元素在父元素的 3D 空间中显示，子元素会保留自己的 3D 转换坐标轴属性值：flat 所有子元素在2D平面展现、preserve-3D 保留三d空间3D元素构建是指某一个图形是有多个元素构成，可以给这些元素的父元素设置，preserve-3d 来使元素变成一个真正的3d图形一般来说，该属性设置给3d变换图形的父元素

动画

css3 中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash 动画以及JavaScriptcss3 动画制作分为两步：创建动画、绑定动画ie10、火狐、Opera支持、谷歌和safari需要加前缀-webkit-

@keyframes 规则

keyframes 规则用于创建动画keyframes 中规定某项 CSS 样式，就能创建由从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数需要使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成写法如下

animation 属性

需要将keyframes中创建的动画捆绑到某一个选择器，否者不会产生动画效果，animation 属性用户对动画进行困吧其中必须设置动画的名称和过度时间，其他属性值可以根据需求设置写法如下

单一属性列表