前端H5新增标签和CSS3高级

---

一、CSS3高级技巧

1.精灵图

为什么需要精灵图？
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此为了有效地减少服务器接收和发送请求的次数，提高页面加载速度，出现了CSS精灵技术。

核心原理：将网页中的一些小背景图像整合在一张大图中，这样服务器只需要一次请求就可以了

使用精灵图技术的目的：
为了有效减少服务器接收和发送请求的次数，提高页面的加载速度。

精灵图的使用核心：
1.精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中。
2.这个大图片也称为sprites 精灵图
3.移动背景图片位置，此时可使用background-position
4.一般情况下精灵图位置坐标取值都为负值（网页中的坐标：x轴往右走为正值，左走是负值，y轴同理）

2.字体图标

字体图标使用场景：主要用于显示网页中通用的、常用的一些小图标。
字体图标iconfont的出现是为了弥补精灵图的一些缺点，如图片文件较大，图片放大或缩小会失真等等。字体图标展示的是图标，本质属于字体。

字体图标的一些优点：
轻量级：一个字体图标要比一系列的图像要小，一旦字体加载了，图标马上渲染出来了，减少了服务器的请求。
灵活性：本质是文字，可以随意的改变颜色、产生阴影、透明效果、旋转等。
兼容性：几乎支持所有浏览器。

字体图标是一些网页常见的小图标，可直接网上下载，推荐下载网站：
icomoon字库 ：链接: icommon.
阿里iconfont字库：链接: iconfont.

3.CSS中的三角

网页中一些常见的三角形，使用CSS直接画出来就行，不必做成托爱你或者字体图标。
语法样式如下：

   div{
      width: 0;
      height: 0;
      /*为了照顾兼容性*/
      line-height: 0;
      font-size: 0;
      
      border: 10px solid transparent;
      border-left-color: red;
    }

3.CSS用户界面样式

所谓界面样式就是更改一些用户操作样式，以提高更好的用户体验。
01.更改用户的鼠标样式 cursor，设置或检索在对象上移动的鼠标指针采用何种光标形状。
cursor：pointer小手
cursor：move移动
cursor：text文本
cursor：not-allowed禁止
cursor：default
02轮廓线
给表单添加outline:none样式之后，就可以去掉默认的蓝色边框。
03.防止拖拽文本域 resize
在实际开发中，我们文本域右下角是不可以拖拽的，可给textarea设置resize:none样式

4.vertical-align属性应用

CSS中的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
此属性常用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法：

 vertical-align: middle/baseline/top/bottom;

其中，
baseline：默认，元素放在父元素的基线上。
top：把元素的顶端与行中最高元素的顶端对齐。
middle：把此元素放置在父元素的中部。
bottom：把元素的顶端与行中最低的元素的顶端对齐。

vertical-align：middle：常用于将文字和图片垂直居中

解决图片底部默认空白缝隙问题
图片底侧会有一个空白缝隙，原因是行内块元素和文字的基线对齐。
解决方案主要有两种：
1.给图片添加vertical-align除默认baseline的其它属性即可。
2.把图片转换为块级元素display：block

5.溢出的文字省略号显示

01.单行文本溢出显示省略号
必须满足三个条件：

      /* 1.先强制一行内显示文本 */
      white-space: nowrap;(默认normal自动换行)
      /* 2.超出的部分隐藏 */
      overflow: hidden;
      /* 3.文字用省略号替代超出的部分 */
      text-overflow：ellipsis;

02.多行文本溢出显示省略号
此种情况有较大的兼容问题，只适用于webkit浏览器或移动端（移动端大部分是webkit内核）
语法格式如下：

	  overflow: hidden;
      text-overflow：ellipsis;
      /* 弹性伸缩盒子模型展示*/
      display:-webkit-box;
      /* 限制在一个块元素显示的文本行数 */
      -webkit-line-clamp: 2;
      /* 设置或检索伸缩盒对象的子元素的排列方式 */
      -webkit-box-orient: vertical;

6.常见布局技巧

01.margin负值运用
让每个盒子margin往左移动-1px正好压住相邻盒子边框。
鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（定位的盒子会压住盒子，相对定位保留原来的位置；如果有定位则加z-index）。
02文字围绕浮动元素
巧妙运用浮动元素不会压住文字的特性。
03.行内块巧妙运用
给父元素添加text-align，里面的行内块就自然对齐了。
典型应用：网页下面的许多页码框
04.CSS三角的巧妙运用
左边和下边的边框宽度设置为0，把上边的宽度调大
语法格式如下：

   /* 1.只保留右边的边框有颜色 */
   border-color: transparent red transparent transparent;
   /* 2.样式都是solid */
   border-style: solid;
   /* 3.上边框要大 右边框要小，其余的边框该为0 */
   border-width: 100px 50px 0 0;

6.CSS初始化

简单理解：CSS初始化是指重设浏览器的样式 ，重设浏览器默认的样式值。
不同浏览器对有些标签的的默认值是不同的，为了消除浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们要对CSS初始化。
把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如：
黑体： \9ED1\4F53
宋体：\5B8B\4F53
微软雅黑:\5FAE\8F6F\96C5\9ED1

二、HTM5的新增特性

HTML5的新增特性主要针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

1.新增的语义化标签

-header头部标签
-nav导航标签
-article内容标签
-section定义文档某个区域标签
-aside侧边栏标签
-footer尾部标签

注意

• 这种语义化标签哦主要针对于搜索引擎的。
• 这些小标签页面中可使用多次。
• 在IE9中需要把这些元素转换为块级元素。
• 其实我们移动端更喜欢用这些标签。

2.新增的多媒体标签

新增的媒体标签主要包含两个：音频标签audio和视频标签video。
使用它们可以很方便的在页面中嵌入音频和视频而不再去使用flash和其他浏览器插件。
1.音频标签audio
此标签当前只支持三种格式：
MP3、wav、ogg
语法如下：

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

常用属性如下：
autoplay：音频就绪后自动播放
controls：向用户显示播放控件
loop：当音频结束后循环播放

2.视频标签video
此标签当前只支持三种视频格式：mp4（尽量使用），WebM，Ogg。
语法如下：

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

常用属性如下：
autoplay：视频就绪自动播放（谷歌浏览器还需设置muted属性）。
controls：向用户显示播放控件
loop：播放完是否循环播放
preload：预加载视频（有了autoplay就无需设置）有none和auto两个属性。
poster：加载等待的画面图片
muted：静音播放

谷歌将视频和音频自动播放禁止了。

3.新增的input类型

4.新增的表单属性

三、CSS3的新增特性

新增的CSS3特性有兼容问题，ie9以上才支持；移动端支持要优于PC端。现阶段主要学习：新增选择器和盒子模型以及其他特性。

1.新增选择器

01属性选择器
可以根据元素特定属性来选择元素，这样可以不借助于类和id选择器。

其中上图中第二个是重点务必掌握的
注意：类选择器，属性选择器以及伪类选择器权重都为10

02结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素常用于根据父级选择器里的子元素。

nth-child(n)选择某个父元素的一个或多个特定的子元素。

n可以是数字、关键字和公式：
n如果是数字，就是选择第n个子元素，里面数字从1开始
n如果是关键字：even是偶数，odd是奇数
n可以是公式：常见的公式如下，如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略。n表示选择了所有的孩子。

nth-child和nth-of-type的区别
nth-child会把所有的盒子都排列序号，执行的时候先看nth-child(n)之后会去 看前面匹配的元素

nth-of-type会把指定元素的盒子排列序号，执行的时候先看指定的元素 再看前面第几个孩子

03伪元素选择器
为元素选择器可以帮助我们利用CSS创建标签元素，而不需要HTML标签，从而简化HTML结构

注意：before和after创建一个元素但是属于行内元素，且必须有content属性。伪元素选择器和标签选择器一样，权重为1.
语法：element::before{},before
在父元素内容的前面创建元素，after在父元素的内容后面插入元素。新创建的这个元素在文档树中是找不到的。

伪元素的使用场景1：伪元素字体图标
伪元素的使用场景2：仿土豆效果

伪元素的使用场景3：伪元素清除浮动额外标签法的升级

闭合浮动：双伪元素清除浮动

其中display：table是转换为块级元素并且一行显示。

2.CSS3盒子模型border-box

CSS3中可通过box-sizing来指定盒模型，有2 个值：即可指定为content-box、border-box 。
可分成两种情况：
1.box-sizing：content-box（默认）盒子大小为width+padding+border
2.box-sizing“border-box 盒子大小为width，那padding和border就不会撑大盒子了

3.CSS3其他特性

图片模糊：
CSS3滤镜filter：将模糊或颜色偏移等图形效果运用于元素。
filter：函数(); 例如：filter：blur(5px); blur模糊处理 数值越大越模糊。

calc函数：
calc()此CSS函数让你在声明CSS属性值时执行一些计算
width:calc(100%-30px)
括号里可以使用加减乘除运算符来进行计算。

4.CSS3过渡

过渡动画；是从一个状态渐渐的过渡到另一个状态
语法：

transition:要过渡的属性 花费时间 运动曲线 何时开始；

属性：想要变化的CSS属性，高度宽度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
花费时间：单位是秒(必须些单位)比如0.5s
运动曲线：默认是ease(可以省略)，linear匀速 ease逐渐慢下来 ease-in加速 ease-out减速 ease-in-out先加速后减速
何时开始：单位是秒必须写单位可以设置延迟触发时间，默认是0s（可省）

口诀：谁做过渡给谁加，如果想要写多个属性，利用逗号进行分割

5.2D转换

转换（transform）是CSS3中最有颠覆性的特征之一，可实现元素的位移、旋转、缩放等效果。转换可以理解为变形。2D转换是改变标签在二维平面上的位置和形状的一种技术

移动：translate
可改变元素在页面中的位置，类似定位，语法格式如下：

移动盒子位置的方法：定位、盒子的外边距、2D转换，translate移动盒子最大的优点是不会影响到其他元素的位置。**translate中的百分比单位是相对于自身元素的宽度和高度来对比的。**可以让一个盒子垂直水平居中。
translate对于行内元素是无效的。

旋转：rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转，语法如下：

注意：
rotate里面跟读书，单位是deg比如rotate(45deg),角度为正时，顺时针，负时为逆时针。默认旋转的中心点是元素的中心点。

我们可以设置元素转换的中心点，语法格式如下：

注意：
参数x和y用空格隔开，可给x和y设置像素或者方位名词（top，bottom，left，right，center），x和y默认转换的中心点是元素的中心点

缩放：scale
顾名思义可以放大和缩小，语法格式如下：

注意：
其中x和y用逗号隔开，scale缩放最大的优势，可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子。传统的利用width和
height放大是左右和下方扩大，且会影响到其它盒子。
如果里面参数是数字且不跟单位就是倍数的意思。大于1就是放大，小于1就是缩小。

2D转换的综合写法：
同时使用多个转换其格式为：transform：translate() rotate() scale()…等
其顺序会影响转换的效果，当我们同时有位移和其他属性的时候，记得要将位移放到最前。

6.动画

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

制作动画分为两步：
1.先定义动画；
使用keyframes定义动画（类似定义类选择器）

动画序列
01.百分之0是动画的开始，百分之百是动画的完成。这样的规则就是动画序列。可用from和to关键字来替换。里面的百分比可以理解为总的时间的划分。
02动画是让元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式和任意多的次数。
2.再使用（调用）动画

动画的常用属性：

动画简写属性方式：
格式如下：
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态。
注意前面两个属性是必须要写的。
例如：

速度曲线animation-timing-function属性细节：

其中steps白哦是分多少步来完成动画有了steps就不要写ease或者linear

7.3D转换

三维坐标系
z轴：垂直屏幕，注意往外面是正值，往里面是负值

3D转换在学习工作中最常用的是3D位移和3D旋转
3D位移： translate3d(x,y,z)

注意：translateZ沿着Z轴移动，后面的单位一般跟px；(x,y,z)是不能省略的，如果没有就写0。z就是物体距离屏幕的距离，z轴越大(正值）我们看到的物体就越大。

3D旋转： rotate3d(x,y,z)
3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
语法如下：

transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度

透视： perspective
透视我们也称为视距：视距就是人的眼睛到屏幕的距离，距离视觉点越近的在电脑平面成像越大，越远成像越小。透视的单位是像素。

3D呈现： transform-style

狭义和广义的H5 CSS3

狭义的H5指的是H5结构标签本身，CSS3指的是相关的样式
广义的H5是指H5本身+CSS3+JavaScript

Web服务器

什么是web服务器

服务器（我们也可以称之为主机）是提供计算服务的设备，它也是一台计算机。web服务器一般是指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。
根据服务器在网络中所处的位置不同，又可以分为本地服务器和远程服务器。服务器+域名。

浏览器的私有前缀

浏览器的私有前缀是为了兼容老版本的写法。
1.私有前缀

2.提倡的写法