H5基础知识总结

2017-02-11 本文已影响3464人福尔摩鸡

一、HTML5

1.1 认识HTML5

HTML5并不仅仅只是作为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。

我们日常讨论的H5其实是一个泛称，它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台。

相对于HTML的早期版本，HTML5在语法规范上做了比较大的调整，去除了许多冗余的内容，书写规则更加简洁、清晰。

1.2 DOCTYPE标签

1.2.1 DOCTYPE标签的作用

DOCTYPE并不是HTML标签，而是一个声明。
作用是：告诉浏览器按照哪个规则去解析页面。

1.2.2 DOCTYPE标签的写法

HTML4中

1.HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2.HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

3.HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

HTML5中
```
<!DOCTYPE html>
```

1.2.3 Emmet语法创建文档结构

- html:5或!：HTML5文档类型
- html:xt：XHTML过渡型文档类型
- html:xs：XHTML严格型文档类型
- html:4t：HTML4过渡型文档类型
- html:4s：HTML4严格型文档类型

1.3 新的语义标签

传统的做法我们通过添加类名如class="header"、class="footer"，使HTML页面具有语义性的，但是不具有通用性（如class="header"也可能被写成class="head"）。HTML5则是通过增加语义化标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以保证其具有通用性。

1.3.1 部分常用的语义标签

标签名	作用
nav	导航
header	页眉
footer	页脚
main	文档主要内容
article	文章
aside	侧边栏
section	区块
progress	进度条

使用HTML5中新的语义标签，内容更为直观，即使删除了注释，依旧能够看出该标签的作用，语义性更强。

尽量避免全局使用header、footer、aside等语义标签。

1.3.2 新语义标签的兼容性

虽然HTML5为我们提供了一些新的语义标签，但老版本的浏览器并不兼容这些内容，比如在IE浏览器版本小于等于IE8时，就不支持新语义标签。

解决方案：

使用js代码创建标签：

在页面中添加创建header标签的代码。
修改header的样式，添加display:block。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        header{
            height: 100px;
            background-color: orangered;
            /*在低版本的ie中,如果想要显示h5的新语义标签,需要设置为block*/
            display: block;
        }   
    </style>
    <script type="text/javascript">
        // 使用代码创建header标签
      document.createElement("header");
    </script>
</head>
<body>
<!--
    在老版本的ie中无法查看(ie8)
-->
<header>
</header>
</body>
</html>

js框架：

相当于帮助我们实现了创建和添加display:block等操作，内部的处理逻辑会更多一些。
js框架"html5shiv"获取地址

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    header {
      height: 100px;
      background-color: hotpink;
    }
    
    footer {
      height: 100px;
      background-color: greenyellow;
    }
  </style>

  <!-- 通过 条件注释  让 这个js文件 在指定的 IE版本中 才被加载  -->
  <!--[if lte IE 8]>
    <script src='js/html5shiv.min.js'></script>
  <![endif]-->
</head>

<body>
  <header>
  </header>
  <footer></footer>
</body>

</html>

优化代码执行——hack语法

无论是js或者js框架都需要执行js代码才能够解决兼容性问题。但是在高版本的浏览器中，那段js代码就没有必要执行了，所以我们通过一个叫做hack的方式来减少性能的浪费。
1. 浏览器检测：cc:ie6 + tab
2. lte：less than equal
3. gte：greater than equal
```



 

   


 
```

1.4 表单

1.4.1 input标签的新type属性

伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经越来越不能满足开发的需求，所以HTML5在Web表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理变的更加高效。

类型	使用示例	含义
email	<input type="email">	输入邮箱格式
tel	<input type="tel">	输入手机号码格式
url	<input type="url">	输入url格式
number	<input type="number">	输入数字格式
search	<input type="search">	搜索框（体现语义化）
range	<input type="range">	自由拖动滑块
color	<input type="color">	拾色器
time	<input type="time">	定义日期字段的时、分、秒
date	<input type="date">	定义日期字段（带有calendar控件）
datetime	<input type="datetime">	定义日期字段（带有calendar和time控件）
month	<input type="month">	定义日期字段的月
week	<input type="week">	定义日期字段的周

兼容性问题：

由于IE的兼容性问题，在不同的浏览器中显示效果不尽相同。
部分类型是针对移动设备生效的，在实际应用当中应选择性的使用。

1.4.2 input表单验证

email标签：自带格式验证

当我们点击提交按钮时，如果输入的email格式不正确，会弹出提示信息。
email标签并不会验证内容是否为空，这个需要注意。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    <input type="submit">
</form>
</body>
</html>

required属性：对于没有自带验证效果的标签，就需要手动添加属性增加验证了。

required为非空验证。
只需要添加required属性即可，不需要赋值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required>
    <br/>
    <input type="submit">
</form>
</body>
</html>

pattern自定义验证规则：

在需要添加自定义验证规则的元素中添加required标签。
使用pattern后的正则表达式编写验证规则。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}">
    <br/>
    <input type="submit">
</form>
</body>
</html>

自定义验证信息：系统的提示消息只能够提示格式错误，如果想要更为详细的提示内容就需要我们通过js来自定义了。

注册事件：
- oninput：输入时。
- oninvalid：验证失败时。
设置自定义信息：dom.setCustomValidity("这里输入提示信息");。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}" id="telInput">
    <br/>
    <input type="submit">
</form>
</body>
</html>
<script>
    var telInput = document.getElementById("telInput");
    // 正在输入时
    telInput.oninput=function () {
        this.setCustomValidity("请正确输入您的手机号码");
    }
    // 验证失败时
    telInput.oninvalid=function(){
        this.setCustomValidity("您输入的手机号码不正确，请重新输入");
    };

</script>

优点：HTML5自带的验证使用便捷，不需要额外的js框架。

缺点：兼容性问题，如果想要兼容所有浏览器，建议使用js验证框架。

1.4.3 新表单元素

除了在input标签中增加了一些新的type属性以外，H5也推出了一些新的表单元素。由于浏览器的兼容问题，使用频率并不广，了解即可。

datalist：该元素规定了输入区域的选项列表，可以让用户有一些选项。

datalist：id属性，想要使用该datalist的元素需要通过list=id的方式来指定。
option：
- value：指定具体的值。
- label：提示信息。
如果input的type为url，option中对应的value需要使用http://开始。

<!--注：测试代码只是body内部的代码。-->
网址:<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
    <option label="W3School" value="http://www.W3School.com.cn"/>
    <option label="Google" value="http://www.google.com"/>
    <option label="Microsoft" value="http://www.microsoft.com"/>
</datalist>

电话: <input type="tel" list="tel_list">
<datalist id="tel_list">
    <option value="186xxx" label="移动">移动</option>
    <option value="187xxx" label="联通">联通</option>
    <option value="135xxx" label="天翼">天翼</option>
</datalist>

~~keygen~~：使用频率很低。

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate），即实现非对称加密。

目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
~~output~~：使用频率很低。

属于新的语义标签：用来放置输出的内容，但是不能自动的计算结果，依旧需要通过js的方式来动态修改结果，只是相比于其他的标签语义性更强。

1.4.4 新表单属性

属性	用法	含义
placeholder	<input type="text" placeholder="请输入用户名">	占位符
autofocus	<input type="text" autofocus>	自动获得焦点
multiple	<input type="file" multiple>	多文件上传
autocomplete	<input type="text" autocomplete="off">	自动完成
form	<input type="text" form="某表单ID">
novalidate	<form novalidate></form>	关闭验证
required	<input type="text" required>	必填项
pattern	<input type="text" pattern="\d">	自定义验证

autocomplete（自动完成）：
1. 能够记录用户的输入，并且给予提示，这就是autocomplete的作用。
2. 取值：on开启，off关闭。
3. 一般用在input标签中。
4. 标签需要添加name属性。
5. 只有提交了一次以后才会出现提示。
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" >
    <input type="text" autocomplete="on" name="userName">
    <input type="submit">
</form>
</body>
</html>
```
autofocus（获取焦点）：
1. 当某一页有很多个可供输入的元素时，用户需要使用鼠标点选元素进行输入，为了提升用户体验，我们可以通过autofocus属性来指定页面中默认选中的元素。
2. 需要哪个表单元素获得焦点，只需要添加该属性即可，不需要赋值。
3. 如果页面中多个元素设置了该属性，最后一个会获得焦点。
4. 在没有该属性之前，能够使用JavaScript来指定元素。
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" >
    姓名:<input type="text"  name="userName">
    <br/>
    年龄<input type="number" name="telNum" autofocus>
    <input type="submit">
</form>
</body>
</html>
```
form（表单关联）：
1. 当我们想要提交数据时，需要把表单元素放到对应的form标签中，这个属性的出现让表单元素的放置位置不再受到约束。
2. 想要某个表单外元素与该表建立联系，只需要为元素添加属性form="表单id"设置为想要建立联系的表单id即可。
3. 虽然这个属性可以让元素的放置位置不再成为限制，但是编码时依旧建议将元素放置到对应的表单中，除了兼容性问题以外，也为了提升代码的可读以及可维护性。
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" id="userForm" >
    姓名:<input type="text"  name="userName">
    <br/>
    年龄:<input type="number" name="telNum" autofocus>
    <br/>
    <input type="submit">
</form>

<br/>
爱好:<input type="text" name="habbit" form="userForm">
</body>
</html>
```
multiple（多选）：
1. 如果想要在某个input标签中选择多个值，可以使用该属性。
2. 该属性可以用在type为file标签内。
3. 选择多文件时，需要按住ctrl按钮。
```
<input type="file" multiple >
```
placeholder（占位提示）：
1. 输入元素内默认显示一些提示信息，当用户输入之后自动消失，这种效果我们需要使用JavaScript来实现，直到出现了placeholder这个属性。
2. 如不想通过JavaScript来实现提示功能，直接为该属性赋值想要提示的内容即可。
```
<input type="text"placeholder="输入用户名">
```

1.5 多媒体

1.5.1 多媒体标签

HTML5为了解决使用Flash的各种问题推出了多媒体标签。
由于视频格式问题，不同的浏览器对于相同格式的视频支持不同，需要准备多份视频。
无法对播放的视频提供很好的保护效果,因为用户可以直接对视频文件另存为。

1.5.2 音频 audio标签

不考虑兼容性：
1. src：音频的地址。
2. controls：音频播放控制器。
3. autoplay：自动播放。
4. loop：循环。
```
<audio src="song.ogg" controls="controls" autoplay loop></audio>
```
考虑兼容性：
1. source：指定多个音频，如果找到了当前浏览器支持的，那么会直接使用；如果所有的source标签格式都不支持，会显示最后的文本内容。
```
<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  您的浏览器不支持此种格式
</audio>
```

1.5.3 视频 Video标签

Video标签用来播放视频，用法跟audio标签十分类似。

不考虑兼容性：
1. src：视频地址。
2. controls：控制器。
3. autoplay：自动播放。
4. loop：循环。
5. poster：指定视频不播放时显示的封面。
6. width：宽度。
7. height：高度。
```
<video src="movie.ogg" controls autoplay loop width = "200px" height = "200px"></video>
```
考虑兼容性：
1. source：指定多个视频，如果找到了当前浏览器支持的，那么会直接使用；如果所有的source标签格式都不支持，会显示最后的文本内容。
```
<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持video标签
</video> 
```

1.5.4 多媒体加强

方法：加载load()、播放play()、暂停pause()。
属性：当前URLcurrentSrc、当前时间currentTime、总时间duration。
事件：播放时持续触发ontimeupdate，结束时触发onended等。

1.6 两种进度条

在HTML5之前如果我们想要使用进度条，可以通过一些前端框架，或者自己使用控件搭建出类似的外观。但是在HTML5中推出了两个进度条控件，两种进度条都能够用来显示进度，由于兼容性以及语义性的问题，在实际开发中需要结合实际情况决定是否使用它们或者是使用对应的前端框架。

1.6.1 process

作用：
- 用来显示任务的进度（进程）。
- 如果想要用来显示度量值（比如容量使用情况），请使用meter标签。
属性：
- max：总工作量。
- value：已完成工作量。
兼容性：
- 为了保证显示效果，可以在progress标签中写入内容，在当前浏览器无法显示该控件时，会转而显示内容。

1.6.2 meter

外观：通过属性值的搭配能够显示出多重不同的变化。
常见属性：
- high：规定较高的值。
- low：规定较低的值。
- max：规定最大值（可以超过,但是进度条已经满了）。
- min：规定最小值。
- value：规定度量的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<meter class="class1" high="80" low="30" max="100" min="10" value="21" ></meter>
<br/>
<meter class="class2" high="80" low="30" max="100" min="10" value="60"></meter>
<br/>
<meter class="class3" high="80" low="30" max="100" min="10" value="90" ></meter>
<br/>
<meter class="class4" high="80" low="30" max="100" min="10" value="100" optimum="10" ></meter>
<br/>
</body>
</html>

1.7 DOM扩展

在jQuery中我们可以通过选择器快速获取元素，在HTML5中也提供了一些类似的方法。

1.7.1 获取元素

querySelector：返回当前文档中第一个匹配特定选择器的元素。
```
var node = document.querySelector(css选择器);
```
querySelectorAll：返回当前文档中所有匹配特定选择器的元素（返回值是数组）。
```
var nodeLists = document.querySelectorAll(css选择器);
```

1.7.2 类名操作 classList

这个元素返回的是dom元素的class列表，这个属性本身是只读的，但是我们可以通过几个方法去操作元素的class。

add ：添加一个class到元素的class列表中。
```
Node.classList.add('class')
```
remove ：从元素的class列表中移除一个class。
```
Node.classList.remove('class')
```
toggle ：切换一个class是否存在于一个元素的class列表中。
```
Node.classList.toggle('class')
```
contains ：查询一个指定的class是否存在于元素的class列表中。
```
Node.classList.contains('class')
```

Node指一个有效的DOM节点，是一个通称。

1.7.3 自定义属性 data-

定义属性：
1. data-xxx：data-是固定格式，xxx是自定义的值。
2. 属性名不应该包含任何大写字母，并且在前缀data-之后必须有至少一个字符。
3. 属性值可以是任意字符串。
4. 不要使用纯数字、特殊字符等作为自定义值。
```
<div id="demo" data-name="jack" data-age="10">
<div data-my-name="bob">
```
获取属性：
1. 在js中获取了元素之后，通过dataset["key"]即可获取保存的值，其中key为data-xxx中xxx的字符。
2. 如果data-之后使用-连接多个值，取值时，需要使用驼峰命名。
```
var demo = document.querySelector('#demo');

demo.dataset['name'];
demo.dataset['age'];

demo.dataset['name'] = 'rick';

Node.dataset['myName'];
```

1.8 新增API

1.8.1 网络连接状态

获取网络状态：
```
 window.navigator.onLine
```

网络连接、断开事件：

// 网络连接
window.ononline = function(){
      alert('网络已连接');
  }
// 网络断开
window.onoffline= function(){
      alert('网络已断开');
  }

1.8.2 全屏

HTML5规范允许用户自定义网页上任一元素全屏显示。

开启全屏显示：
```
Node.requestFullScreen()
```
关闭全屏显示：
```
Node.cancelFullScreen()
```
由于其兼容性原因，不同浏览器需要添加前缀如：
- webkit内核浏览器：
```
webkitRequestFullScreen、webkitCancelFullScreen
```

Gecko内核浏览器�：

mozRequestFullScreen、mozCancelFullScreen

检测当前是否处于全屏：

  document.fullScreen
  <!--不同浏览器需要添加前缀-->
  document.webkitIsFullScreen
  document.mozFullScreen

1.8.3 文件读取

使用js对象FileReader，配合File对象可以指定读取本地文件，可以读取选取的文件，也可以读取DataTransfor。

获取文件：
1. 由于File标签支持多文件上传，所以我们想要获取到选取的文件，需要配合索引。
```
// 其中this为file标签
    this.files[0]
```

读取文件：

读取文件需要使用js对象FileReader。

var reader = new FileReader; //实例化一个对象
reader.readAsDataURL(this.files[0]) //以DataURL形式读取文件,获取的值可以用在任意通过链接指定的地方
// 通过onload事件监测加载完毕
reader.onload = function (){
  // result 就是我们需要的结果
    console.log(this.result);
  //可以用在指定连接地址的元素中比如
  // 设置图片
  document.querySelector('#img').src = this.result;
  // 设置图像
  document.querySelector("#video").src= this.result;
  // 设置CSS
  document.querySelector("#link").href = this.result;
}

1.8.4 文件拖拽

在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

拖拽元素：添加了draggable="true" 属性即可实现拖拽，其中<img>、<a>标签默认是可以被拖拽的。
目标元素：拖拽元素的放置位置。任意元素都可以成为目标元素。
支持事件：
1. 拖拽元素：
  - ondrag：整个拖拽过程都会调用。
  - ondragstart：当拖拽开始时调用。
  - ondragend：当拖拽结束时调用。
  - ondragleave：当鼠标离开拖拽元素时调用。
2. 目标元素：
  - ondrop：当在目标元素上松开鼠标时调用。
  - ondragover：当停留在目标元素上时调用。
  - ondragenter：当拖拽元素进入时调用。
  - ondragleave：当鼠标离开目标元素时调用。
3. 注意事项：
  
  如果想要调用ondrop事件，必须在ondragover中使用事件参数阻止浏览器的默认行为。
```
thirdBox.ondragover = function (argument) {
   // 在 ondragover时 必须阻止默认行为 才能够 看到拖放效果
   argument.preventDefault();
}
```
4. 数据传递：
  - 配合事件对象的dataTransfor 可以实现数据的传递。
  - setData(key,value) 设置数据。
  - getData(key) 获取数据。
```
dom1.ondragstart = function (argument) {
   argument.dataTransfer.setData("fox",this.id);
}

//dom2为拖放的目标元素
dom2.ondrop = function (argument) {
   console.log(argument);
   var fromBoxID =argument.dataTransfer.getData("fox");
}
```

1.8.5 地理定位

获取地理信息

通过IP地址、三维坐标、GPS、Wi-Fi、手机信息等多种方式获取地址信息，不同获取方式的优缺点并不相同，浏览器会自动以最优方式去获取用户地理信息。
安全性

HTML5 Geolocation 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。

语法

获取当前地理信息：

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)

重复获取当前地理信息：

navigator.geolocation.watchPosition(successCallback, errorCallback, options)

当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。
当获取地理信息失败后，会调用errorCallback，并返回错误信息error。
可选参数options对象可以调整位置信息数据收集方式。
1. enableHighAccuracy：高精度模式。
2. timeout：超时设置，单位为ms。
3. maximumAge：表示浏览器重新获取位置信息的时间间隔，单位为ms。

navigator.geolocation.getCurrentPosition(function(position){
    // 定位成功会调用该方法
    // position.coords.latitude 纬度
    // position.coords.longitude 经度
    // position.coords.accuracy 精度
    // position.coords.altitude 海拔高度
}, function(error){
    // 定位失败会调用该方法
    // error 是错误信息
}, )

应用：

在现实开发中，通过调用第三方API（如百度地图）来实现地理定位信息，这些API都是基于用户当前位置的，并将用位置位置（经/纬度）当做参数传递，就可以实现相应的功能。

1.8.6 Web存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。

使用特点：
1. 设置读取方便（通过键值对）。
2. 容量较大，sessionStorage大约5m，localStorage大约20m。
3. 如果要保存json数据，可以使用JSON.stringify()将对象编码后保存。
window.sessionStorage：
1. 生命周期为关闭浏览器窗口。
2. 在同一个窗口下数据可以共享。
window.localStorage：
1. 永久生效，除非手动删除。
2. 可以多窗口共享。

使用方法：

两种存储方式，只是前缀不同，调用方法是一致的。

setItem(key, value) // 设置存储内容
getItem(key)      // 读取存储内容
removeItem(key)   // 删除键值为key的存储内容
clear()           // 清空所有存储内容
key(n)                // 以索引值来获取存储内容

二、CSS3

2.1 CSS3简介

CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。但是由于浏览器的兼容性问题，所以并不是所有的浏览器都能够使用，为了保证显示效果，我们在使用某些属性的时候需要添加额外的前缀。

Trident内核(IE)：          // 前缀为 -ms
Gecko内核(FireFox)：       // 前缀为 -moz
Presto内核(Opera)：        // 前缀为 -o
Webkit内核(Chrome,Safari)：// 前缀为 -webkit

2.2 CSS3选择器

CSS3中给了我们更多的选择器让我们来获取元素，极大程度提高了查找元素的精度以及准确性，并且绝大多数的选择器语法与jQuery中兼容。

2.2.1 属性选择器

属性选择器的作用就是，根据标签的属性去筛选对应的元素，属性选择器从CSS2推出，在CSS3中增加了几个新的属性。

以属性名 attr 为例：
E[attr]:            包含att属性
E[attr="val"]:      属性值为val
E[attr^="val"]:     属性值以val开头
E[attr$="val"]:     属性值以val结尾
E[attr*="val"]:     属性中包含val
E[attr~="val"]:     属性值使用空格进行分割,有一个为val
E[attr|="val"]:     属性以‘-’分割，其中有val值（如果属性只有val,那么也会被选中）

2.2.2 兄弟选择器

选择器1 ~ 选择器2 ：选择相同父元素中，选择器1之后的所有满足选择器2的元素。
选择器1 + 选择器2 ：选择相同父元素中，选择器1之后的第一个满足选择器2的元素。

2.2.3 伪类选择器

结构伪类：以某元素（E）相对于其父元素或兄弟元素的位置来获取无素，并对应位置的子元素或兄弟元素必须是该元素（E）。
1. E:first-child：其父元素的第一个子元素�。
2. E:last-child：其父元素的最后一个子元素。
3. E:nth-child(n)：第n个子元素，计算方法是E元素的全部兄弟元素。
4. E:nth-last-child(n)：跟E:nth-child(n)类似，只是倒着计算。
5. 注意：其中n的取值范围是：0，1，2，3，4... 线性累加，可以传入表达式，比如2n，2n+1等等，也可以传入特殊字符：even(偶数)，odd(奇数)。
空伪类：E:empty：选中没有任何子节点的E元素（使用不是非常广泛）。
目标伪类：E:target：结合锚点进行使用，处于当前锚点的元素会被选中。
排除伪类：E:not(任意选择器)：不满足括号内选择器条件的元素E会被选中。

2.2.4 伪元素选择器

E::before和E::after：

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

注意：E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
E::first-letter：

获取的是内容的第一个文字，根据语言的不同会有细微差别，如中文、日文、韩文等。
E::first-linet：

获取的是内容的第一行，可以配合P标签使用。
E::selection：

可改变选中文本的样式，目前只能设置的属性为：background-color，color，text-shadow。

2.3 颜色

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，跟opacity相比，它们不具有继承性，不会影响子元素的透明度。

RGBA：
1. Red：0-255；Green：0-255；Blue：0-255；Alpha：0-1(小数)。
2. 不使用A那么认为没有透明度。
```
color:RGBA(100,100,100,0.3);
color:RGB(100,100,100);
```
HSLA：
1. Hue(色调)：0-360；Saturation(饱和度)：0-100%；Lightness(亮度)：0-100%；Alpha(透明度)：0-1(小数)。
```
color: hsla(308, 85%, 58%, 1);
color: hsl(308, 85%, 58%);
```
关于CSS透明度：
1. opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度，是作为CSS的属性来使用的。
2. transparent不可调节透明度，始终完全透明，是作为颜色的取值来使用的color:transparent。

2.4 字体阴影 text-shadow

取值：

第1个长度值用来设置对象的阴影水平偏移值，可以为负值。
第2个长度值用来设置对象的阴影垂直偏移值，可以为负值。
如果提供了第3个长度值则用来设置对象的阴影模糊值，不允许负值。
设置对象的阴影的颜色。
可以通过,来分隔不同的阴影，从而为字体设置多个阴影。

text-shadow: 10px 10px 5px red;
text-shadow: 1px 1px #fff,-1px -1px #000;

2.5 盒子模型 box-sizing

CSS3中可以通过box-sizing来指定盒模型，即可指定为content-box或是border-box，这样我们计算盒子大小的方式就发生了改变。

content-box：默认取值，盒子模型大小为width + padding + border。
border-box：盒子模型的大小为width。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .first {
            border: 10px solid red;
            padding: 20px;
            margin:20px;
            box-sizing: content-box;
        }
        .second{
            border: 10px solid red;
            padding: 20px;
            margin:20px;
            box-sizing: border-box;
        }

    </style>
</head>
<body>
<div class="first">first盒子</div>
<div class="second">second盒子</div>
</body>
</html>

2.6 边框

2.6.1 边框圆角 border-radius

赋值方法：

border-radius:20px;                 /*设置四周的圆角*/
border-radius: 50px 10px;           /*上左下右,上右下左*/
border-radius: 50px 30px 10px;      /*上左,上右下左,下右*/
border-radius: 50px 40px 30px 20px; /*上左,上右,下右,下左*/
border-radius: 50px/100px;          /*上下的圆角/左右的圆角*/
border-top-left-radius: 40px;       /*上左*/
border-top-right-radius: 10px;      /*上右*/
border-bottom-left-radius: 20px;    /*下左*/
border-bottom-right-radius: 50px;   /*下右*/

2.6.2 边框阴影 box-shadow

赋值方法：

h-shadow：必需。水平阴影的位置。允许负值。
v-shadow：必需。垂直阴影的位置。允许负值。
blur：可选。模糊距离。
spread：可选。阴影的尺寸。
color：可选。阴影的颜色。
inset：可选。将外部阴影 outset 改为内部阴影。
多个影子的添加只需要使用逗号分隔即可。

box-shadow: 5px 5px 20px pink;          /*x偏移值,y偏移值,影子四周模糊程度,影子颜色*/
box-shadow: inset 0px 0px 100px yellow; /*添加了inset以后,影子会往内部伸展,其他的都是一样的*/
box-shadow: 5px 5px yellow,-5px -5px blue,10px 10px green; /*多个影子需要使用逗号分隔*/

注：设置边框阴影不会改变盒子的大小，不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感，符合渐进增强，实际开发中可以大胆使用。

2.6.3 边框图片 border-image

border-image为复合属性：

border-image: url("img/border-image.png") 17 / 17px / 17px round;

图片路径border-image-source：设置或检索对象的边框是否用图像定义样式或图像来源路径。
```
border-image-source: url("img/border-image.png");
```

图片切片border-image-slice：设置或检索对象的边框背景图的分割方式。

取值：
1-4个值(不需要单位),对应的关系跟margin一致；
1-4个百分比,对应的关系跟margin一致；
fill(可选):是否需要中间的区域；

图片宽度border-image-width：设置或检索对象的边框厚度，这个值的大小不会影响到盒子的大小。
```
取值：1-4个值,单位为(px,em,%),对应关系跟margin一致。
border-image-width: auto;
```

图片凹凸border-image-outset：设置或检索对象的边框背景图的扩展。

取值：1-4个值,单位为(px,em,%),对应关系跟margin一致。
border-image-outset: 10px;

图片重复border-image-repeat：设置或检索对象的边框图像的平铺方式。

取值：
stretch： 指定用拉伸方式来填充边框背景图。 
repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。 
round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。 
space： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

2.7 背景

背景属性在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

background-size：
1. 通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
2. 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）。
3. 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
4. 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
```
background-size: 10px;            /* 宽度10 高度根据宽度计算 */
background-size: 10px 10px;       /* 宽度10 高度 10 */
background-size: auto;            /* 背景图片原始大小 */
background-size: cover;           /* 背景图片原比例缩放到完全填满 可能会超出 */
background-size: contain;     /* 背景图片原比例缩放到 高度 或者宽度 跟容器一样 可能会有空白 */
```

background-origin：

可以设置背景图片定位(background-position)的参照原点。

可选值为border-box，padding-box，content-box。

border-box     以边框做为参考原点；
padding-box        以内边距做为参考原点；
content-box        以内容区做为参考点；

background-clip：

可以设置对背景区域进行裁切，即改变背景区域的大小。

取值：

border-box     裁切边框以内为背景区域；
padding-box        裁切内边距以内为背景区域；
content-box        裁切内容区做为背景区域；

background-repeat：
1. 在原来只能设置平铺与不平铺的基础上增加了两个属性，让我们在设置背景图时更为灵活。
2. 取值：
```
background-repeat:round;   /* 自动缩放 直到填满 */
background-repeat:space;   /* 缩放,直到某一边充满容器为止 */
```

多背景：以逗号分隔可以设置多背景，可用于自适应布局。

background: url('image/01.jpg') no-repeat  200px 300px,
          url('image/02.jpg') no-repeat  100px 200px/100px 100px;

2.8 渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

2.8.1 线性渐变

线性渐变linear-gradient，指沿着某条直线朝一个方向产生渐变效果。

/*语法组合方式 可以添加多个颜色*/
background-image: linear-gradient(方向,开始颜色 开始位置 ,颜色2 开始位置,颜色3 开始位置.....);

/* 具体代码  */
/* 朝着 右上角 从红色到黄色*/
background-image: linear-gradient(to top left,red,yellow);

/* 朝着 顺时针45度 从红色到黄色*/
background-image: linear-gradient(45deg,red,yellow);

/* 朝着 顺时针45度 红色,黄色,绿色*/
background-image: linear-gradient(45deg,red,yellow,green);

/* 朝着 顺时针45度 红色到 10px结束 黄色从 20px开始 */
background-image: linear-gradient(45deg,red 10px,yellow 20px);

/* 朝着 顺时针45度 红色到10%结束 黄色从 20%开始 */
background-image: linear-gradient(45deg,red 10%,yellow 20%);

/* 注意：如果上一个颜色的结束 与 下一个颜色的开始相等,那么不会出现过渡 */
background-image: linear-gradient(45deg,red 10%,yellow 10%);

2.8.2 径向渐变

径向渐变radial-gradient，指从一个中心点开始沿着四周产生渐变效果。

/* 圆形渐变写法 */
background:radial-gradient(半径  ,颜色1,颜色2等等);

/* 椭圆渐变写法 */
background:radial-gradient(横向半径,竖向半径  ,颜色1,颜色2等等);

/* 设置位置 */
background:radial-gradient(横向半径,竖向半径  at 位置,颜色1,颜色2等等);

/*具体代码*/
/*半径100px 红色 绿色*/
background:radial-gradient(100px,red,green);

/*横向半径100px 竖向半径200px 红色 绿色*/
background:radial-gradient(100px 200px,red,green);

/*横向半径100px  红色10px 绿色 20px*/
background:radial-gradient(100px 200px,red 10px,green 20px);

/*横向半径100px  红色10% 绿色20%*/
background:radial-gradient(100px 200px,red 10%,green 10%);

/*横向半径100px  红色10% 绿色20% 在100px 100px位置*/
background:radial-gradient(100px 200px at 100px 100px,red 10%,green 10%);

/*注意：如果上一个颜色的结束,跟下一个颜色的开始相等,那么不会出现过渡*/
background-image: radial-gradient(100px,red 10%,yellow 10%);

2.9 过渡

过渡transition�是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

属性	含义
transition-property	设置过渡属性
transition-duration	设置过渡时间
transition-timing-function	设置过渡速度
transition-delay	设置过渡延时

语法：

/*语法组合方式*/
transition:过渡CSS属性 持续时间 动画方式 延迟时间;

/* 多属性过渡组合写法  通过逗号分隔*/
transition:过渡1,过渡2....

/*具体代码*/
/* 所有属性 1s动画 ease-in动画方式 延迟1s*/
transition: all 1s ease-in 1s;

/*
top属性 1s动画 ease-in动画方式 
left属性 1s动画 ease-out动画方式 延迟1s
width属性 1s动画 liner动画方式 延迟2s
height属性 1s动画 ease-in-out动画方式 延迟3s 
*/
transition: top 1s ease-in,
          left 1s  ease-out 1s,
          width 1s  ease-liner 2s,
          height 1s  ease-in-out 3s;

动画方式：

贝塞尔曲线动画
- 在设置动画曲线的位置通过cubic-bezier()的方式进行设置。
- [计算贝塞尔曲线在线网址][http://cubic-bezier.com]
```
/* 其中 需要传入四个值,并且每个值都是0-1的小数*/
transition: top 1s cubic-bezier(0.1,0.2,0.3,0.4);
```

step动画：

设置动画完成的步数。

/* 1s动画 每隔 1/6 s 完成一次  在每次间隔的 末尾 开始动画  */
transition: top 1s steps(6,end);
/* 1s动画 每隔 1/6 s 完成一次  在每次间隔的 开始 开始动画  */
transition: top 1s steps(6,start);

2.10 2D转换

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

2.10.1 移动 translate

语法：transform:translate(x,y);。
移动位置相当于自身原来位置。
x、y可为负值，x轴正方向向右，y轴正方向朝下。
除了可以像素值，也可以是百分比，相对于自身的宽度或高度。

2.10.2 缩放 scale

语法：transform:scale(x,y);。
可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数。

2.10.3 旋转 rotate

语法：transform:rotate(deg);。
可以对元素进行旋转，正值为顺时针，负值为逆时针。
当元素旋转以后，坐标轴也跟着发生的转变。
调整顺序可以解决，把旋转放到最后。

2.10.4 倾斜 skew

语法：transform:skew(xdeg,ydeg);。
可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

2.10.5 组合写法

tranform:translate(10px,10px) rotate(180deg) scale(1.5,1.5);    /* 多个值 通过空格分隔*/

2.10.6 transform-origint

可以调整元素转换的原点。

/*x:50px y:中心 作为原点*/
transform-origin:50px;

/*x:50px y:50px 作为原点*/
transform-origin:50px 50px;

/*x:10% y:20% 作为原点*/
transform-origin:10% 20%;

/* 传入单词 
可选:top,left,right,center,bottom
*/
/* 左上 作为原点 */
transform-origin:right top;
/* 中心作为原点 */
transform-origin:center center;

2.11 3D转换

3D转换对应的属性依旧是transform，只是多了一个Z轴而已，Z轴的方向是垂直于屏幕，其中正方向指向我们的面部。

2.11.1 3D旋转

左手定则：3D旋转遵循左手定则，即：大拇指指向旋转轴的正方向，其余四指弯曲的方向就是旋转的方向。

/* x方向旋转180°*/
transform:rotateX(180deg)
/* y方向旋转180°*/
transform:rotateY(180deg)
/* z方向旋转180°*/
transform:rotateZ(180deg)

2.11.2 透视 perspective

perspective（透视，视角）这个属性能让图像具有立体感，呈现近大远小的效果。

用法：
1. 作为一个属性，设置给父元素，作用于所有3D转换的子元素。
2. 作为transform属性的一个值，做用于元素自身。
3. 一般我们建议添加到不进行变换的父容器中。
```
/*直接添加给transform:标签 距离 显示屏 1000px*/
transform:perspective(1000px)

/*直接使用perspective 属性赋值:标签 距离 显示屏 1000px*/
perspective:1000px
```

2.11.3 视角方向 perspective-origin

默认我们是直直的看着屏幕，通过该属性可以修改查看屏幕的角度。

2.11.4 3D呈现 transform-style

设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为转换原素。3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形，即让浏览器开启3D渲染。

flat：所有子元素在 2D 平面呈现。
preserve-3d：开启3D空间。

2.11.5 backface-visibility

设置元素背面是否可见。

2.12 动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

2.12.1 过渡的局限性

transition需要事件触发，所以没法在网页加载时自动发生。
transition是一次性的，不能重复发生，除非一再触发。
transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。

2.12.2 必要元素

通过@keyframes指定动画序列。
通过百分比将动画序列分割成多个节点。
在各节点中分别定义各属性。
通过animation将动画应用于相应元素。

/*动画名为:sevenColor
    开始背景为红色
    中途背景为橘色
    结束为黄色
*/
@keyframes changeColor{
            0%{background-color:red;}
            50%{background-color:orange;}
            100%{background-color:yellow;}
}    

/*动画名为:changeColor
   效果跟上面的一样,只是使用关键字
   from 开始
   to 结束
*/
@keyframes sevenColor{
            from{background-color:red;}
            50%{background-color:orange;}
            to{background-color:yellow;}
}   

/*动画名为:someProperty
   效果跟上面的一样,只是使用关键字
    添加了多个属性
*/
@keyframes someProperty{
            from{
                background-color:red;
                width:100px;
            }
            50%{
                background-color:orange;
                transform:rotate(100deg);
            }
            to{
                background-color:yellow;
                height:200px;
            }
}

2.12.3 动画属性

animation-name：设置动画序列名称。
animation-duration：动画持续时间。
animation-delay：动画延时时间。
animation-timing-function：动画执行速度，linear、ease等。
animation-play-state：动画播放状态，running、paused等。
animation-direction：动画逆播，alternate等。
animation-fill-mode：动画执行完毕后状态，forwards、backwards等。
animation-iteration-count：动画执行次数，inifinate等。
steps(60)：表示动画分成60步完成。
复合写法：第一个时间必须为动画时间，第二个时间必须为动画延迟时间，其余属性的位置可以任意写。

animation-name: sevenColor;                 /*动画名*/
animation-duration: 1s;                     /*持续时间*/
animation-delay: 1s;                        /*延迟时间*/
animation-fill-mode: forwards;              /*动画播放完毕时的状态 (还原,结束值)*/
animation-iteration-count: infinite;        /*动画次数(具体次数,或者无限次)*/
animation-timing-function: ease-in;         /*动画的播放过渡类型*/
animation-play-state: running;              /*动画状态 running 或者pause*/
animation-direction: alternate;             /*动画的方向 正向 方向 正方,反向交替 方向,正向交替*/

animation: animationName 1s infinite  ease-in forwards 1s;  /*复合写法*/

2.13 伸缩布局

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

必要属性：

对于想要使用伸缩盒子布局的元素，需要为他们的父盒子添加display:flex属性，才能够开启该选项。
```
display:flex  /* 开启弹性布局 */
```

宽度设置：

在不设置弹性盒子的方向时，默认是从左往右进行布局。
如果元素有宽度，那么可以使用自身宽度。
也可以通过flex:数字的方式设置宽度比例，实现等比例效果。

/* 会使用设置的宽度 */
width:100px;

/* 使用比例宽度
    假设父容器中 有3个子元素 ,flex都为1 那么 每个宽度为
    100%/3
    有3个子元素 ,flex分别为1,2,3 那么 宽度依次为
    (100%/(1+2+3))*1
    (100%/(1+2+3))*2
    (100%/(1+2+3))*3
*/
flex:1;

轴设置：
- flex-direction：可调整主轴方向。
  1. 默认情况下横向叫做主轴，竖向叫做副轴。
  2. 需要通过作为容器的父盒子进行修改。
```
display:flex;
flex-direction:column;/* 设置纵轴为主轴 */
```
- justify-content：调整主轴对齐方式。
  1. space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于flex-start。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
  2. space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于center。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
```
justify-content:space-between;  /* 水平方向对齐方式  这个值为间距相等 两边顶边 */
```
- align-items：调整副轴对齐方式。
```
align-items: center;    /*  副轴的 元素排布 */
```
换行：
1. flew-wrap默认为nowrap。
2. 当我们设置的子元素宽度一行无法装下时，配合该属性可以设置换行。
3. 多行文本的对齐使用align-content来设置。
4. 如果使用flex按照比例，只会切割一行，无法实现换行，需要使用数值的尺寸(px,%,em)。
```
flex-wrap:wrap;           /*设置换行*/
align-content:center; /*设置多行对齐方式*/
```

三、补充

3.1 开发者工具

IDE：集成开发环境，功能强大，绝大多数开发者并没有使用到全部功能，需要占用和消耗较多的性能。

常见的有：webstorm、Dreamweaver、vistual studio、HBuilder。
编辑器：轻量级，本身自带功能较少，支持通过插件扩展从而能够实现很多IDE类似的功能。

常见的有：sublime、atom、vscode。