HTML5总结

1.HTML5由W3C和WHAT组织机构共同研发出来的，于2014年正式发布。

2.HTML5成为了新一代网页开发标准。

3.HTML5新特性（面试）
1）增加了audio和video音频播放，抛弃了Flash
2）新增了canvas画布（绘画，制作动画（如小游戏开发等））
3）地理定位
4）增加了离线缓存
5）硬件加速
6）Web Socket（全双工通信）
7）增加了本地存储
8）新增了一些语义化标签

网页布局标签

header:页首
nav:导航栏
aside:侧边栏
main:主体
section:区块
article:文章
footer:页尾

5.语义化标签
1)mark:高亮显示(行级)
2)details(描述)与summary(摘要):一般用于名词解释或用于封装一个区块等
3)meter:定义度量衡
属性:value/min/max
4)progress:进度条
属性:value/min/max
5)dialog:对话框或窗口
6)figure:用于对元素进行组合（一般用来组合一张图的标题、图片和图片描述等）

6.HTML5多媒体
1)audio
播放音乐或音频。IE9以下的版本不支持。

​ a)支持的格式
​ .mp3/.ogg/.wav

​ b)属性
​ src:文件路径
​ autoplay:自动播放
​ loop:循环
​ controls:控制条
​ muted:静音
​ preload:预加载（当使用autoplay时，preload自动失效）

2)video
加载视频。IE9以下的版本不支持。

​ a)支持的格式
​ .mp4/.ogg/.webm

​ b)属性
​ src:文件路径
​ autoplay:自动播放
​ loop:循环
​ controls:控制条
​ muted:静音
​ preload:预加载（当使用autoplay时，preload自动失效）
​ width:宽度
​ height:高度

​ poster:海报

3)embed
嵌入内容或加载插件。

​ 属性:
​ src:文件路径
​ width:宽度
​ height:高度
​ type:类型

4)canvas
画布。是一个容器元素。

注意：
a.单独使用canvas没有什么意义，它必须结合Javascript使用。它的具体功能体现是通过
Javascript体现现来的。

​ b.canvas的宽高最好不要通过css实现，而是直接使用标签属性width和height实现。

7.HTML5常用属性
1）contentEditable
将标签转换为可编辑状态。可用于所有标签。它的值有true/false。

​ 2）hidden
​ 对元素进行隐藏。一般用来传值或当某个条件成立，执行内容显示。默认值为hidden。

​ 3）data-*
​ 用于存储页面或应用程序的私有自定义数据。一般用于传值。

​ 4）multiple
​ 规定输入域中可选择多个内容。用于表单组件中，如file/select。

​ 5）required
​ 约束表单元素在提交前必须输入值。用于表单组件中，需要结合提交按钮使用。

​ 6）pattern
​ 用于验证输入字段的模式。用于表单组件中，需要结合提交按钮使用。

8.表单组件
1）color：颜色
2）email：邮箱
3）tel：电话号码
4）url：网址
5）number：数字
6）range：范围
7）search：搜索
8）date：日期
9）datetime：日期时间
10）datetime-local：本地日期时间
11）year：年份
12）month：月份
13）time：时间

9.表单属性
1）formaction:修改action数据提交的地方

​ 2）formenctype:修改表单请求的类型

​ 3）formmethod:修改数据提交的方法

​ 4）form:设置表单元素属于哪个表单

​ 5）novalidate:不验证

10.input属性
1）autocomplete:自动完成
用来帮助用户输入，每一次输入的内容，浏览器是否保存输入的值，以备将来使用。值有：
on/off，默认为on。
为了保护敏感数据（如用户帐号、密码等），避免本地浏览器对它们不安全存储，一般需要关闭。

​ 2）autofocus:自动获焦

​ 3）step:步长

​ 4）multiple:多选

​ 5）pattern:正则匹配

​ 6）placeholder:输入提示

​ 7）required:必须输入

CSS3总结

1.CSS3是CSS2.1的一个升级版，它是对CSS的一个扩展。

2.CSS3的主要新特性：
1）选择器
2）阴影
3）形状转换（2D <-> 3D）
4）变形
5）动画（过渡动画、帧动画）
6）边框
7）多重背景
8）反射
9）文字
10）颜色函数（rgba/hsl/hsla）
11）滤镜（filter）
12）弹性布局
13）多列布局
14）栅格布局
15）盒模型
16）Web字体
17）媒体查询

3.CSS3不是属于浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。

​ 1）主流浏览器内核（面试点）
​ a)Trident: IE内核
​ b)Webkit：Chrome和Safari内核
​ c)Gecko：FireFox内核
​ d)Blink（是Webkit的一个分支）： Chrome和Opera内核

Tips（技巧）:
目前国内的浏览器大多都是双核的（IE内核+Chrome内核）

厂商前缀

​ IE： -ms-
​ Chrome&Safari： -webkit-
​ FireFox： -moz-
​ Opera： -o-

CSS3选择器

​ 丰富选择的目的：在标签中减少class和id属性的使用。

​ 1）属性选择器
​ [属性名]：p[class] 查找p标签下的所有class属性

​ [属性名=属性值]： p[class=content] 查找p标签下的所有class属性名=content的属性值

​ [属性名 ^ =属性值]：p[class^=content] 查找class属性值以content开头

​ [属性名 $=属性值]：p[class $=content] 查找class属性值以content结尾

​ [属性名 * =属性值]：p[class * =p] 查找class属性值中包含有p的

 **结构性伪类**

​ :root 匹配html标签,与body选择器效果一样。

​ 子元素选择：匹配父元素中连续的子元素

​ :first-child 第1个子元素 p:first-child
​ :last-child 最后1个子元素 p:last-child
​ :nth-child(n) 第几个子元素 p:nth-child(2) p:nth-child(2n){ 2n表示2的倍数，2、4、6、8……

​ p:nth-child(3n+1){ 3n表示3的倍数加1，4、7、11……

​ :nth-last-child(n) 倒数第n个子元素 p:nth-last-child(4)

​ nth-of-type类：用于匹配父元素中兄弟子元素，可以用于子元素非连续的情况

​ :nth-of-type(n) p:nth-of-type(3){ 找的是p标签中的第三个兄弟p标签，如果第3个不是p标签，将跳过，继续向下查找，直到找到为止。

​ p:nth-child(3){ 找第3个子元素，如果是p标签，就找到了，如果不是，就没找到，且不再继续查找

​ :nth-last-of-type(n) p:nth-last-of-type(4){ 找的是p标签中倒数第4个兄弟p标签，如果第4个不是p标签，将跳过，继续向前查找，直到找到为止。

​ :only-child 父元素中仅有一个子元素 p:only-child{查找父元素中只有的一个标签为p标签，不允许其它标签存在，但在p标签中可以有子标签。
​ :only-of-type 父元素中仅有一个兄弟元素 p:only-of-type{ 选择父元素中p标签是唯一的子元素，可以有其它标签存在。
​ :empty 没有子元素，包含文本元素，即查找空元素

​ 3）目标伪类
​ :target 匹配URL指向的元素 页面链接跳转到对应的文本（页内跳转）

​ 4）UI元素状态伪类
​ :checked (只在Opera浏览器中有效)
​ :disabled
​ :enabled
​ ： :selection 被选中的文本。注意：必须用双冒号！

​ 5）否定伪类
​ :not()

​ 6）通用兄弟元素选择器

​ ~

CSS3文本

​ 1） 文本阴影（主流浏览器都支持，（IE9以上支持））
​ text-shadow: 水平偏移距离 垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色] [inset];

​ 2）文本自动换行（主流浏览器都支持）
​ word-wrap: normal（文本符号处换行）|break-word（长文本换行）;

​ 3）单词拆分（主流浏览器都支持）
​ word-break: normal|break-all|keep-all;

​ 4）文本拆分（所有主流浏览器都不支持）
​ text-wrap: normal|none|unrestricted|suppress;

​ 5）文本溢出
​ a)单行文本溢出（重要）
​ text-overflow: clip|ellipsis|string;

​ 处理文字溢出样式：
​ width: px/%/em/rem…;
​ white-space: nowrap; / 为允许折行 * /*
​ -ms-text-overflow: ellipsis; / 处理IE兼容 /
​ text-overflow: ellipsis;
​ overflow: hidden;

​ b)多行文本溢出（IE9以下的版本不支持，主要是谷歌支持）
​ width: px/%/em/rem…;
​ display: -webkit-box;
​ -webkit-box-orient: vertical;
​ -webkit-line-clamp: 行数;
​ overflow: hidden;

CSS3边框

**1）圆角边框（掌握）**

​ border-radius: 1-4 length| / 1-4 length|%;

​ border-radius后面带一个参数对应四个角；

​ border-radius后面带二个参数，第一个参数对应左上角和右下角，第二个参数对应右上角和左下角；

​ border-radius后面带三个参数，第一个参数对应左上角，第二个参数对应右上角和左下角；第三个参数对应右下角；

​ border-radius后面带四个参数，第一个参数对应左上角，第二个参数对应右上角，第三个参数对应右下角，第四个参数对应左下角；

四个方位的词：top-left/top-right/bottom-left/bottom-right

2）边框阴影（IE9以上支持）

​ box-shadow: 水平偏移距离 垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色] [inset];

3）边框图片(IE11.0及以后版本支持）
border-image：图片 向内偏移距离 宽度 图像区域超出边框的距离 重复效果;

​ 重复效果：round（铺满）/strech（拉伸）/repeat（平铺）

7.CSS3背景
1）多重背景
background: 背景色 背景图片 平铺方式 位置,背景色 背景图片 平铺方式 位置,…

​ 2）background-size：设定背景图像的尺寸。
​ background-size: 固定长度|百分比值|cover|contain;

​ 3）background-origin：指定背景图像的位置区域。
​ background-origin: padding-box(背景图相对于内边距来定位）|border-box(背景图相对于边框来定位）|content-box(背景图相对于内容来定位）;

​ 4）background-clip：设定背景的绘制区域。
​ background-clip: border-box（背景被裁剪到边框）|padding-box（背景被裁剪到内边距框）|content-box（背景被裁剪到内容框);

​ 5）渐变背景
​ background-image: 线性渐变｜径向渐变

8.CSS3颜色函数

​ 1）RGBA
​ rgba(r,g,b,a)
​ r:红色 取值范围：0-255/0-100%
​ g:绿色 取值范围：0-255/0-100%
​ b:蓝色 取值范围：0-255/0-100%
​ a:不透明度 取值范围：0-1的一个小数

​ 2）HSL
​ hsl(h,s,l)
​ h:色调 取值范围：0-360
​ s:饱和度 取值范围：0-100%
​ l:亮度 取值范围：0-100%

​ 3）HSLA
​ hsla(h,s,l,a)
​ h:色调 取值范围：0-360
​ s:饱和度 取值范围：0-100%
​ l:亮度 取值范围：0-100%
​ a:不透明度 取值范围：0-1的一个小数

9.opacity
调整元素的不透明度，大多数情况下用于做元素的遮罩效果。取值范围：0-1的一个小数
IE8及8以下版本不支持opacity，处理兼容的方式，再添加一行代码来处理不透明度：
filter:alpha(opacity=数值） 数值的范围：0-100

10.CSS3渐变
渐变主要用来设置背景或制作三维图。

​ 1）线性渐变
​ background: linear-gradient(方向或角度, 颜色1 百分比, 颜色2 百分比, …);

​ 方向：

​ to left:从右向左渐变

​ to right:从左向右渐变

​ to top:从下向上渐变

​ to bottom:从上向下渐变

​ to top left:从右下角向左上角渐变

​ to top right:从左下角向右上角渐变

​ to bottom left:从右上角向左下角渐变

​ to bottom right:从左上角向右下角渐变

​ 角度：
​ 比如45度角，应该表示为：45deg

​ 颜色取值：
​ 1）表示颜色的单词
​ 2）16进制颜色
​ 3）表示颜色的函数（rgb()/rgba()/hsl()/hsla()…)

2）径向渐变(沿半径方向渐变）
background: radial-gradient(形状 渐变大小 at 位置,颜色1 百分比, …, 颜色n 百分比);

​ 形状：
​ ellipse:椭圆径向渐变（默认）
​ circle:圆径向渐变

​ 渐变大小：
​ farthest-corner:渐变的半径长度为从圆心到离圆心最远的角（默认）
​ closest-side:渐变的半径长度为从圆心到离圆心最近的边
​ closest-corner:渐变的半径长度为从圆心到离圆心最近的角
​ farthest-side:渐变的半径长度为从圆心到离圆心最远的边

​ 位置：
​ center:设置圆心在中心位置（默认）
​ top:设置圆心在顶部位置
​ bottom:设置圆心在底部位置
​ at 圆心橫坐标 圆心纵坐标: 设定圆心的位置在指定的（橫坐标，纵坐标）处

3）文字渐变
background-image: 线性渐变或径向渐变;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

11.box-sizing
允许你以某种方式定义某些元素，以适应指定的区域。
box-sizing: content-box/border-box （火狐和谷歌低版本需要厂商前缀）

1.变形(transform）
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。 位移效果
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。

​ scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。 缩放效果
​ scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
​ scaleY(n) 定义 2D 缩放转换，改变元素的高度。

​ rotate(angle) 定义 2D 旋转，在参数中规定角度（-360deg – 360deg）。 旋转效果

​ skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。 变形效果
​ skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
​ skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

matrix(a,b,c,d,e,f) 定义 2D变形，使用了6个值的矩阵。表示如下：
a c e
b d f
0 0 1

matrix用一个3行3列的矩阵表示，a和b列表示x轴，c和d列表示y轴，e和f列表示z轴
a和d表示缩放（如果没有缩放，值设为1）
b和c表示扭曲（如果没有扭曲，值为0）
e和f表示位移（如果没有位移，值为0）

如果旋转角度为θ,它会影响到a,b,c,d的值：
a = cosθ
b = sinθ
c = -sinθ
d = cosθ
如果扭曲skew(θ1,θ2)，会影响到b和c的值：
b = tanθ1
c = tanθ2

​ 每次旋转和扭曲都会产生一个新矩阵，最终形成的多个矩阵要做乘法运算。
​ 如果对一个元素同时有旋转、扭曲、缩放和位移，这里需要用到多个矩阵相乘，要优先考虑旋转和缩放！！！

2.transform-origin：调整元素的基点。
transform-origin: x-axis y-axis z-axis;

​ 属性值：
​ x-axis ：定义视图被置于 X 轴的何处。可能的值：left，center，right，length，%。
​ y-axis ：定义视图被置于 Y 轴的何处。可能的值：top，center，bottom，length，%。
​ z-axis ：定义视图被置于 Z 轴的何处。可能的值：length。

3.perspective
让子元素获得透视效果。
perspective:length|none;

​ 主流浏览器都不支持，谷歌要加-webkit-，或在长度后加单位。

4. transform-style
   在3D空间中呈现被嵌套的元素(必须与 transform 属性一同使用)。

   transform-style: flat|preserve-3d;

5.rotateZ
沿着Z轴的方向顺指针旋转。

6.transition:过渡动画

​ 1）常规用法：
​ transition-property
​ transition-duration
​ transition-timing-function
​ transition-delay

​ 2）简洁（复合）用法：
​ transition: property-name-list|all duration timing-function delay;

​ a）可以使用的属性有：

​ i) 颜色：
​ color background-color border-color outline-color

​ ii) 位置：
​ background-position left right top bottom

​ iii) 长度：
​ max-height min-height max-width min-width height width
​ border-width margin padding outline-width outline-offset
​ font-size line-height text-indent vertical-align
​ border-spacing letter-spacing word-spacing

​ iv) 数字：
​ opacity visibility z-index font-weight zoom

​ v) 组合：
​ text-shadow transform box-shadow clip

​ vi) 其它
​ gradient

​ b) duration:动画持续时间，一般以秒(s)或毫秒(ms)为单位

​ c) timing-function:动画函数

​ i) linear:匀速

​ ii) ease:变速（先慢后快，最后再慢）

​ iii) ease-in:变速（由慢到快）

​ iv) ease-out:变速（由快到慢）

​ v) ease-in-out:变速（慢速开始，慢速结束）

​ vi) cubic-bezier(n,n,n,n):自行设定变速，n的值在0-1之间

​ d) delay:动画延时时间，一般以秒(s)或毫秒(ms)为单位

7.关键帧动画
步骤：
1）设置关键帧
a) 如果只有两个关键帧
@keyframes 动画名 {
0%:{样式表}
100%:{样式表}
}
或：
@keyframes 动画名 {
from:{样式表}
to:{样式表}
}
b) 如果是多个关键帧
@keyframes 动画名 {
0%:{样式表}
25%:{样式表}
60%:{样式表}
…
100%:{样式表}
}
注意：这里的百分比一般是升序值，可以是0%-100%之间的做任意值，也可以是倒序。

​ 2）实施动画
​ a)常规用法
​ animation-name：来自于@keyframes定义的动画名

​ animation-duration：动画持续时间，一般以秒(s)或毫秒(ms)为单位（默认为0）

​ animation-timing-function：动画函数
​ i) linear:匀速（默认值）
​ ii) ease:变速（先慢后快，最后再慢）
​ iii) ease-in:变速（由慢到快）
​ iv) ease-out:变速（由快到慢）
​ v) ease-in-out:变速（慢速开始，慢速结束）
​ vi) cubic-bezier(n,n,n,n):自行设定变速，n的值在0-1之间

​ animation-delay：动画延时时间，一般以秒(s)或毫秒(ms)为单位

​ animation-iteration-count：动画循环播放的次数
​ 1)number：按设定次数循环播放（默认次数为1次）
​ 2)infinite：一直循环播放

​ animation-direction：动画播放完后是否反向播放
​ 1）normal:不反向（默认值）
​ 2）alternate:反向

​ animation-play-state：动画播放或停止播放
​ 1）paused:停止播放
​ 2）running:播放（默认值）

​ b)简洁用法
​ animation:name duration timing-function delay iteration-count direction;

1.多列（分栏）
1）column-count 规定元素应该被分隔的列数（栏数）。
column-count: number|auto;

​ 2）column-gap 设置栏间距。
​ column-gap: length|normal;

​ 3）column-rule 设置栏间分隔线。
​ a)column-rule-style：设置线型。
​ none 没有分隔线
​ hidden 隐藏线
​ dotted 点线
​ dashed 虚线
​ solid 实线
​ double 双线
​ groove 3D沟槽效果
​ ridge 3D脊状效果
​ inset 3D左上角阴影效果
​ outset 3D右下角阴影效果

注意：
3D线型在分栏中没有3D效果，当实线处理了。

​ b)column-rule-width：设置线宽。

​ c)column-rule-color：设置分隔线颜色。

简洁（复合）写法：
column-rule:width style color;

4）column-width 设置栏宽。
column-width: length|auto;

5）columns：是column-width 和 column-count 的简写方式。
columns: width count;

2.flex弹性布局

​ CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元
素拥有恰当的行为的布局方式。
​ 目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

常用的属性：

​ 1）flex-direction（应用于父元素）
​ flex-direction 指定子元素在父容器中的位置。

语法：
flex-direction: row | row-reverse | column | column-reverse

参数：
row ：横向从左到右排列（左对齐），默认的排列方式。
row-reverse ：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column ：纵向排列。
column-reverse ：反转纵向排列，从后往前排，最后一项排在最上面。

2）justify-content（应用于父元素）

​ 把弹性项沿着弹性容器的主轴线对齐。

语法：
justify-content: flex-start | flex-end | center | space-between | space-around

参数：
flex-start：紧凑方式左对齐（默认值）
flex-end：紧凑方式右对齐
center：紧凑方式居中对齐
*space-between：除了第1个和最后1个子元素外，其它子元素等分空白区域
*space-around：所有子元素等分空白区域

3）align-items（应用于父元素）
子元素在侧轴（纵轴）方向上的对齐方式。此属性作用于父容器。

语法：
align-items: flex-start | flex-end | center | baseline | stretch

参数：
flex-start:沿纵轴顶端对齐（默认值）
flex-end:沿纵轴底端对齐
center:沿纵轴垂直居中对齐
baseline:沿纵轴基线对齐
stretch:纵向拉伸对齐

4）flex-grow（应用于子元素）
子元素的放大比例，默认为0，即如果存在剩余空间，也不放大。
语法：
flex-grow：number;

5）flex（应用于子元素）
用于指定弹性子元素空间分配。
语法：
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
参数：
auto : 等价于 1 1 auto。
initial : 等价于 0 1 auto。
none ：等价于 0 0 auto。
inherit ：从父元素继承。

Tips:
flex可以带1-3个参数。
1）带1个参数
a)无单位，这个数值会被当作flex-grow（放大）的值
b)带单位，这个数值会被当作flex-basis（基本宽度）的值
c)auto（自动宽度）|initial（初始宽度）|none（无）

​ 2）带2个参数
​ 第1个参数必须是一个无单位的数值，它会被当作flex-grow的值。
​ 第2个参数：
​ a)无单位，这个数值会被当作flex-shrink（收缩比率）的值
​ b)带单位，这个数值会被当作flex-basis（基本宽度）的值

​ 3）带3个参数
​ 第1个参数必须是一个无单位的数值，它会被当作flex-grow的值。
​ 第2个参数也必须是一个无单位的数值，它会被当作flex-shrink（收缩比率）的值。
​ 第3个参数必须是一个有效的宽度值（带单位），它会被当作flex-basis（默认基准宽度值）的值

3.响应式布局

​ 1）响应式布局概念
​ Responsive Design，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。
​ 通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

​ 2）响应式布局和自适应布局的区别（面试问题）
​ 响应式布局只开发一套代码，通过检测视口的分辨率，针对不客户端在客户端做代码处理，来展现不同的布局和内容；
​ 自适应需要开发多套界面，通过检测视口的分辨率，来判断当前访问的设备是PC端、平板、手机等，从而请求服务层，返回不同的页面。

​ 响应式布局等同于流动网格布局，而自适应等同于使用固定分割点来进行布局。

​ 自适应布局给出了更多的设计空间，只用考虑几种不同的状态就可以了；
​ 而响应式布局要考虑上百种不同的状态，虽然有些状态差异较小，但也要考虑到。

3）响应式布局开发实现方法
a) 媒体查询

​ b) 百分比布局

​ c) rem布局（相对于根节点（元素）html中的字号布局）

​ d) 视口单位布局(vw/vh)

4）响应式设计步骤
a) 设置meta标签

​ b) 通过媒体查询来设置样式

​ c) 设置多种视图的宽度
​ i)宽度需要使用百分比/rem/vw$vh等
​ ii)处理图片缩放
​ iii)其它属性处理
​ 如pre/iframe/video等，都要缩放其大小，table，建议不要增加padding属性，低分辨率下要使用内容居中操作。

4.媒体查询
步骤：
1）设置meta标签

        <meta name="viewport" content="width=device-width,initial-scale=1.0,maxium-scale=1.0,user-scaleable=no"></meta>说明：以上标签的内容只能被移动设备识别。viewport：视口（移动端）。width=device-width：宽度等于当前设备的宽度。initial-scale=1.0：初始缩放比例（默认为1.0）minimum-scale=1.0：允许用户缩放到的最小比例（默认为1.0）maximum-scale=1.0：允许用户缩放到的最大比例（默认为1.0）user-scaleable=no：用户是否可以手动缩放（默认为no）2）设置IE渲染方式默认为最高版本<meta http-equiv="x-ua-compatible" content="IE=Edge,chrome=1">说明：以上代码表示如果浏览器有chrome插件，将以chrome提供的V8引擎渲染页面；如果没有，将以IE的最高版本渲染页面。3）引入兼容的JS文件<!-- [if lt IE 9]>        条件Hack<script src="https://oss.maxcdn.cm/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.cm/libs/respond.js/1.3.0/respond.min.js"></script><![endif] -->说明：因为IE8及IE8以下版本既不支持html5，也不支持CSS3 Media，所以我们需要加载JS文件来处理这个兼容。上面的代码是一个注释语句，也就是说，IE9及以上的版本不会编译这几行代码。4）进入CSS3提供的媒体查询a）引入外部CSS文件时使用<link rel="stylesheet" href="css/screen480.css" media="screen and (max-width:480px)" >如果屏宽为480px及以下，将加载screen480.css文件。<link rel="stylesheet" href="css/screen800.css" media="screen and (min-width:480px) and (max-width:800px)" >如果屏宽为480px以上且在800px以下，将加载screen800.css文件。<link rel="stylesheet" href="css/screengt800.css" media="screen and (min-width:800px)" >如果屏宽为800px以上，将加载screengt800.css文件。设备：all:所有设备screen:PC端显示器print:打印机或打印预览图handheld:便携设备tv:电视speech:音频合成器braille:盲人点触设备embossed:盲人打印机projection:投影设备tty:固定密度字母栅格设备only:用来排除不支持媒体查询的浏览器b）在style标签中用@media定义如：@media screen and (max-width: 480px){.menu{display: none;}}

5.web字体
开发者引入外部字体。

语法：@font-face {font-family: 字体名;src: url("字体文件.ttf") format("字体文件格式以处理浏览器兼容"),url(字体文件.woff) format(...),...;}说明：可以同时引入多个字体文件，字体一样，文件的扩展名不一样，目的是为了处理浏览器兼容。eg:@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1585647107785'); /* IE9 */src: url('iconfont.eot?t=1585647107785#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAScAAsAAAAACTAAAAROAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqFUIRIATYCJAMUCwwABCAFhG0HSBvUByMRNntQMpL9c4HDS8ZfIO5Y1qSPewjh3vAB27QtWuSZ/vo2fXsLTLhNHImbHhWRS+uQekS1pkLN/4wAWN79HjSSRpTtFiWRkDQt6GKw35w/YDthItSILHpUeG1zVEhfmm770vwGCJAh/ce9qpkTbD77Frc5FiaUC2BoAsWCe3Tawoq1gNhh7OIyngYIoK3ZQrdDbCooiGnrEIDuTlIECjGzuISN5Lo052gs+EBTHr6pywB2uH+P/rAUoCQRbWsiE1YKgXKePAmz/1m42yiQ9OcEAOYUwIAtAA7okeueBdhP28JKaTbHCQBouVDY1zQD+VGe9P8/oXxF2lJ3A6qXf7wYlNLUihAfmOEg55kIoJAbIAAjj0AAQp4kvTFqLjpCA3zgDUA5jWbqk7gCgfCglsLnjxoEvf7vpje0oLt3F5OHdZtux5oKq7tpOrySajri1iEiO6STVnUnjMhcxDXiBu2eEesDm0U1Izot2jUNYlR+cl5lJU1LqxEuryFEViWkFlb1mtJSUlnJVhGniHQ1CSoHExQkFTGZ2l6armQK6moFgspO2HT2rijdXNot6iApFt+7l97P27vuGLGNurI7wq46wbzOXrZPNlDebyitLq+RVbGVEklNrFkqKK3UqhWWVWW/T1QkFXU360iY+pZDU1pldaygtLcIE4pgwpQ673cL1tw4h0pBTiJdFBFX+gIOAt9y1q8h1d4B5Xg4BM3m58aLPffM0x5PV5q3PWjMwsMnOTtO6MdoxBxU9wr8ODiopKFlUnKLfkriyRfSDL4znjylm5OX0F7frBRRIkMYHiKWY99sVcq+OygDjyESnsvz9XNdVltal/yMZdDWQFNBdoxge2GqkmGRKI2yVGL4zbuDMsxDt0AI/Uwx0TnU1GbHpwNpnA3uvbw9npBmpKt+dHQVWUqWQMjaa3sPG281uvTp5lWErtrbLhltNT4Maf6CPwa+3x2K0dU/fPxPvkjYdN3yWcJmCtrjIw5GvJusuP4B7KyYfAfLwAEA4P8H3IwtXS6LjTDLPU49xcHZUXwDJ/0yy9icsS5Q8f2tQK5V38M+B4xC/1kOtBO/d43akh9EUrODI8s0CzcWW02x6OX63lo1JfWVwG/hV/e0H62wdjUAkluEQMmsAMtt0Bz8Drgqe+DJHYG2FXGamCwALIgLwNpGAIHeCIRaP4j0rqBj/BNILH2GVB+G0hnp9a8kzHO9LaMSjCD4AxdSpg2b9LzaE5oyURyVuZwbcuFiMLZ3TOaOmCH3saP4mImIBs2UwgE8D5OEIGfyGMrAiuSboQOT902DkNJKTwiGFIEiIPAHOCGS0XZv0Uv9/gkySgmFS9pKwjeIFdzkYGxgVAN9VGe12s5lduHDmBBC41UaIylwgE6U6GkC8vxFHgqJAdsimdsYom66rnowvja9xmMA0LSruAGFMOIgLuIBfqqs/XPK2e8Wbe9UJlQ2LKVYqQAAAA==') format('woff2'),url('iconfont.woff?t=1585647107785') format('woff'),url('iconfont.ttf?t=1585647107785') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('iconfont.svg?t=1585647107785#iconfont') format('svg'); /* iOS 4.1- */}

6.iconfont图标字体
由阿里巴巴提供的一种图标字体。
步骤：
1）进入官网http://iconfont.cn，注册并登录
2）创建一个项目
3）添加图标到购物车
4）将购物车中的图标添加到项目中
5）下载iconfont文件，解压后，将部分文件复制到我的网页项目中
6）使用字体图标前，先引入iconfont.css文件
7）使用字体图标方法：
a)用类名

            <div class="iconfont icongerenzhongxin"> </div>

​ b)用unicode值（微信小程序开发不支持这种写法）

            <div class="iconfont"> </div>