• CSS3
  • 新增了很多的选择器
  • 新增一些常用的属性
  • 关于背景的升级
  • 变形: transform
• CSS3动画
  • 1、transition：过渡动画
  • 2、animation：帧动画
• 需要写两套加 -webkit- 前缀的CSS3属性（兼容IOS和安卓）
• HTML5基础
• HTML5提供的新语法规范
  • H5中新增的语义化标签(默认都是块级元素)
  • H5中新增加的标签
  • H5中对原有标签的修改
  • H5中对于表单元素的升级
  • H5增加了新的媒体解决方法
  • H5中增加了canvas（绘图）
  • H5提供很多强大的JS API
  • H5的本地存储
  • H5获取本机地理位置
  • H5提供了新的通信方式:websocket
  • H5提供操作手机硬件功能的api
  • H5离线缓存:manifest

24、CSS3与H5

CSS3

新增了很多的选择器

TIP

属性选择器：

a[src^="https"]{ }  /*  选择其 src属性值以 "https" 开头的每个 <a>元素 */。
a[src$=".pdf"]{ }   /* 选择其 src属性值以 ".pdf" 结尾的每个<a>元素。 */
a[src*="abc"]{ }    /* 选择其 src 属性中包含 "abc" 子串的每个<a>元素。 */

伪类选择器：

.page2 img:nth-child(1){ } /* 先获取 class为 page2 下的第一个子元素，然后再判断这个子元素的标签是否是 img，不是 img 则不会生效 */
.page2 img:nth-of-type(1){ } /* 先获取 class为 page2 下的标签名为 img 元素，再找到其中的第一个元素； */
:not(p){ } /* 选择除了p元素以外的元素 */

新增一些常用的属性

border-radius:10px; /* 盒子圆角 */
/* 
一个值： 四个圆角值相同 
两个值: 左上与右下，右上与左下
三个值: 左上, 右上和左下，右下
四个值: 左上，右上，右下，左下	 
*/
box-shadow: 0px 0px 5px 2px #000; /* 盒子阴影 */
/* 
  box-shadow: x-shadow y-shadow blur spread color inset;
  x-shadow： 水平阴影（必须的，正值靠盒子右，负值靠盒子左）
  y-shadow：垂直阴影（必须的，正值靠下，负值靠上）
  blur：模糊程度（可选，值越大越模糊）
  spread： 阴影尺寸（可选，越大阴影越大）
  color：阴影的颜色（可选）
  inset：将外部阴影 (outset) 改为内部阴影（可选） 
*/
text-shadow /* 文本阴影 */
/* 
  text-shadow: x-shadow y-shadow blur color;
  x-shadow：必需。水平阴影的位置。
  y-shadow：必需。垂直阴影的位置。
  blur：	可选。模糊程度（可选，值越大越模糊）
  color：可选。阴影的颜色。
*/
text-indent  /* 首行缩进（1em相当于一个字体大小，2em相当于两个字体大小） */
word-break   /* 让页面英文自动换行 */
word-wrap   /* 长单词或URL地址自动换行 */
/* css原有属性 */  white-space:nowrap; /* 中文换行：文本不会换行直到遇到<br>标签 */
text-overflow /* clip 内容溢出时溢出内容被裁切掉   或 ellipsis [ɪ'lɪpsɪs]以省略号的形式展现出来 */
...

关于背景的升级

background:rgba(0,0,0,0.5) /* 颜色透明度0.5 */
background:-webkit-linear-gradient / radial-gradient /* 背景色渐变 */
background:-webkit-linear-gradient(left bottom,#5CB85C 0%,#5CB85C 25%,#74C274 25%,#74C274 50%,#5CB85C 50%,#5CB85C 75%,#74C274 75%,#74C274 100%);/* 变成一道一道的 */
background-size /* 指定背景图片大小。值可以为 百分比  具体数值  cover（以最适合的比例铺满整个屏幕） */
background-clip /* 规定背景的绘制区域 */
background-origin /* 规定 background-position 属性相对于什么位置来定位。 */
...
-webkit-filter /* 滤镜的升级 */

变形: transform

translate() /* 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。  —— 2D转换 */
transform:translate(50px,100px); /* 当前元素原来位置向右移动50个像素，向下移动100像素 */
          rotate(90deg) /* 在一个给定度数顺时针旋转的元素。负值是元素逆时针旋转。  ——2D转换 */
          rotateX(90deg) /* 让元素围绕X轴旋转——3D转换 */
          rotateY(90deg)   /* 让元素围绕Y轴旋转——3D转换 */
          rotateZ(90deg)  /* 让元素围绕Z轴旋转——3D转换 */
transform:rotate(30deg); /* 当前元素顺时针旋转30度 */
transform:rotateX(60deg);  /* 当前元素绕X轴旋转60度 */
transform:rotateY(60deg);  /* 当前元素绕X轴旋转60度 */
          scale()[skeɪl];/* 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数： */
transform:scale(2,3) /* 转变宽度为原来的大小的2倍，和其原始大小3倍的高度。 */
          skew()  /* （很少用）：分别表示X轴和Y轴倾斜的角度 */
          matrix /* （很少用） */
...
transform-style /* 嵌套元素是怎样在三维空间中呈现。 */
transform-style:preserve-3d; /* (表示所有子元素在3D空间中呈现。)   */
				       :flat /* (表示所有子元素在2D平面呈现。) */
transform-origin  /* 改变元素的中心点 */

CSS3动画

1、transition：过渡动画

/* 下面为简写方式 */
transition: width 1s linear 2s;
transition-property /* 需要过渡的 CSS 属性的名称。 */	
transition-duration /* 完成过渡效果花费的时间。默认是 0。 */
transition-timing-function  /* 规定过渡效果的时间曲线。默认是 "ease"。(可不写) */
transition-delay  /* 过渡效果延迟多久开始执行。默认是 0；（可不写） */

2、animation：帧动画

/* css3中我们使用@keyframes来设置一个动画的关键帧,用animation来执行动画 */
@keyframes 动画名称{
  0%{
  }
  100%{
  }
}
/* 以下为连写 */
animation: move 1s linear infinite both;
animation-name  /* 运动轨迹的名称(@keyframes设置运动轨迹) */
animation-duration   /* 完成动画需要的总时间; */
animation-timing-function /* 运动方式，默认为匀速; */
animation-delay /* 延迟时间，延迟多少秒后执行;（可不写） */
animation-iteration-count /* 动画重复的次数，默认执行一次，infinite是无限次运动; */
animation-fill-mode:none; /* 设置动画的状态；默认值为none； */
                    none  /* 默认值：无任何特殊状态设置 */
                    forwards  /* 动画完成后会停留在最后一帧的位置;(默认动画完成后会回退到起始位置) */
                    backwards /* 在延迟的情况下才有用，当动画在延迟时间内，让运动的元素在运动轨迹的第一帧位置等待 */
                    both  /* 同时具备以上两个效果； */
/* CSS3中的盒子模型 */
box-sizing:border-box;  /* (宽度包括内部白及边框) */
          :content-box; /* (默认的都是不包括内部白及边框) */
display:flex; /* 弹性盒模型  */

/* CSS3中的@media 媒体查询 */

需要写两套加 -webkit- 前缀的CSS3属性（兼容IOS和安卓）

transition、animation、@keyframes、transfrom、gradient、flex……

HTML5基础

基础

HTML：超文本标记语言（页面中不仅只有文字，而且可以呈现出图片，音视频等媒体资源） XHTML：它是HTML比较规范严谨的一代版本； XML：可扩展的标记语言（HTML中使用的标签都是W3C标准中规定的，XML 允许我们自己扩展标签），它不是用来写页面结构的，而是用来存储一些数据的（以自己扩展的标签作为标识，清晰明了的展示出数据的结构） HTML5：当前HTML最新的一代版本，也是非常成功的一代版本，目前市场上基本都是基于H5规范进行开发的（它相对于传统的HTML更多的是增加了一些有助于开发的内容，对原有的规范的修改调整很少）

<!-- HTML5文档声明 -->
<!DOCTYPE html>
<html lang='en'>  <!-- 声明页面的语言模式,如果页面中出现英文会主动提示你是否翻译 -->
  <head>
  <!-- 
    采用国际统一编码UTF-8模式；
      GBK(GB2312)中国编码
  -->
    <meta charset='UTF-8'>;
  </head>
  <body>
  </body>
</html>

HTML5提供的新语法规范

对原有语义化标签的升级

标签语义化：每一个HTML标签都有自己特殊的含义，我们在搭建页面结构的时候，应该让合理的标签做合适的事情

H5中新增的语义化标签(默认都是块级元素)

<main></main>       <!-- 主体内容 -->
<section></section> <!-- 一个主体性内容区域，通常包含一个头部，可能还有一个尾部； -->
<header></header>   <!-- 头部区域，放在页面顶部的内容，或着放在页面某个区块的顶部 -->
<nav></nav>         <!-- 导航区域 -->
<article></article> <!-- 文章区域，表示页面中一个独立的组成部分，如一个博客帖子或新闻报道 -->
<aside></aside>     <!-- 与主体内容无关的区域（一般用来打广告）对页面内容的补充，如插图或边栏 -->
<footer></footer>   <!-- 尾部区域，放在页面底部的内容，或着放在页面某个区块的底部 -->
<figure></figure>   <!-- 配图区域，通常包括图片和文字说明（figcapiton） -->
<figcapiton></figcapiton> <!-- 配图说明区域 -->

H5中新增加的标签

mark：用来标记需要高亮显示的文本。如：<mark>milk</mark>

time：用来标记日期文本

H5中对原有标签的修改

TIP

1、修改的标签 small：显示为更小的文本。在HTML5中，定义旁注信息，并显示为更小的文本。 strong：定义加粗的被强调的文本，在HTML5中，定义重要的文本。 2、移除的标签 font、center、big、tt 在PC端开发或在移动端开发，我们更应该用H5规范的语义化标签搭建页面的结构 但是在IE6-8下不能识别这些新增加的语义化标签，我们无法为其设置具体的样式 解决： 在当前页面中的head中（css后），我们导入一个JS插件：html5.min.js，它就是用来把页面中所有用到的不兼容的H5语义化标签进行兼容处理 1、把页面中所有不兼容的标签进行替换 2、把css中使用标签选择器设置的样式（标签是H5标签）也替换成其他方式

标准浏览器中不需要引入此html5.min.js。所以可用 条件注释（只能在IE下起作用）来解决这个问题

<head>
  <!--[if lt IE9]>
    <script src='html5.min.js'></script>
  <![endif]-->
</head>

H5中对于表单元素的升级

TIP

传统表单元素
form
input：txt、password（暗文输入）、button、submit、reset、file、hidden、radio、checkbox
button
select
label
textarea
submit：有默认行为，点击按钮会跳转到form的action对应的地址（表单提交）；

现有前后端完全分离的项目中，我们都是在JS中手动获取到用户输入的内容，并且通过ajax等技术发送给服务器存储或者处理（此时我们要阻止submit的默认行为）

H5的表单升级 1、给input设置了很多新的类型
search
email：提供了CSS伪类默认验证是否为基本的邮箱格式；

:vaild{ 
  /* 输入的文本是邮箱格式做的事 */
}
:invaild{ 
  /* 输入的文本不是邮箱格式做的事 */
}

tel
number
range（滑动杆）
color（颜色板）
data（日历）
time（时间）

好处：

• 1、功能强大
• 2、使用合适的类型，在移动端开发的时候，用户输入，可以调出最符合输入内容格式的虚拟键盘，方便用户操作
• 3、部分类型提供了表单验证（内置验证机制：和我们自己写的表单验证不太一样，但是可以凑合用，css验证和js验证都可以）

2、给input新增了一个属性：placeholder，给表单框做默认的信息提示，输入有内容时默认提示消失（IE10及以上虽然兼容但是文本框获取焦点后，提示信息就消失了，IE9及以下不兼容此属性） 3、二级下拉框（select一级下拉框）

H5对于表单元素升级的部分，在IE低版本（有的IE9和10都不兼容）中不兼容，而且没办法处理兼容，所以我们只在移动端使用这些新特性，在PC端的表单验证我们用正则验证完成；

H5增加了新的媒体解决方法

TIP

音频：audio 视频：video H5中的audio 音频播放标签，通过它可以播放音频文件（支持格式： mp3、ogg、wav） 使用

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
	您的浏览器不支持 audio 元素。
</audio>

Audio中常用的一些内置属性

• controls：是否使用内置的播放器播放，默认是不显示浏览器自带播放器的，加上这个属性显示
• autpplay：自动播放
• preload：设置当前音频文件预先加载的模式，默认为auto
  • auto - 当页面加载后载入整个音频
  • meta - 当页面加载后只载入元数据
  • none - 当页面加载后不载入音频
• loop：播放完成后循环播放

传统的音视频播放是基于flash来完成的，需要浏览器中安装abobe flash player插件 现在只需要基于 audio和video播放即可，但是对于音视频的格式有限制

移动端对于flash的支持不好，但是基本上都支持audio和video PC端的IE浏览器（低版本）不支持audio和video，但是支持flash；

H5中增加了canvas（绘图）

它是一个画布，允许我们在JS中通过代码绘制图形以及一些好玩的动画

应用：百度统计图插件Echarts；

H5提供很多强大的JS API

API：Application Programming Interface应用程序接口（凡是提供一个供别人使用的都可以称之为接口，例如：使用AJAX从服务器端获取数据，需要一个URL地址，此地址就是一个API，浏览器提供给我们很多常用的方法，每一个方法都可以叫做API）

H5的本地存储

webStorage：

localStorage:永久存储到客户端的本地

sessionStorage:信息的会话存储,会话窗口存在信息也存在,会话窗口关闭信息就消失了

H5获取本机地理位置

通过H5可以获取到当前用户地理位置（经度、纬度、经纬度……），再结合第三方地图（高德地图、百度地图、腾讯地图……）API接口，实现一些生活服务的推荐

H5提供了新的通信方式:websocket

H5提供操作手机硬件功能的api

调取手机的重力感应器，实现摇一摇，或者实现一些小游戏

调取手机的摄像头或者通讯录等

不是所有的手机都支持这些功能，即使支持这些功能的浏览器，在实现效果上也是不理想的（会卡顿）；

H5离线缓存:manifest

第一次联网请求完成页面，把信息缓存到本地，下一次即使断网的情况下，也可以看到上一次的信息