前端入门系列--HTML5与CSS3

前面讲完了HTML与CSS的基本内容，本篇将介绍html5与css3中的常用标签与属性等等…

1、HTML5

1.1语义化标签

之前的html中我们很多时候都是使用div、li这些标签进行包裹，虽然可用但是其并没有具体的语义，而html5中新增了语义化的标签，有着提升搜索引擎优化的效果，并且这些标签在移动端的使用中比较友好，一些新增的标签如下：

• header — 头部标签
  
• nav — 导航标签
  
• article — 内容标签
  
• section — 块级标签
  
• aside — 侧边栏标签
  
• footer — 尾部标签
  
  如下图所示：

注意事项如下：

• 语义化标签主要针对搜索引擎
• 新标签可以使用一次或者多次
• 在 IE9 浏览器中，需要把语义化标签都转换为块级元素
• 语义化标签，在移动端支持比较友好，
  -HTML5 还有很多的语义化标签

1.2多媒体相关

1.2.1音频audio

单独写法·1

<audio src="./media/snow.mp3" 属性="属性值"></audio> 

其一些属性如下图所示：

但要注意谷歌浏览器把autoplay禁用了（这也导致后面的video要想在谷歌中自动播放必须先静音）
目前audio之前3中音频格式，但是很多浏览器都只是部分支持（不包括3者所以我们写的时候要注意准备多集中格式写全），各浏览器所支持的格式如下：

  <audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg" />
     <source src="./media/snow.ogg" type="audio/ogg" />
  </audio>

当第一行格式不支持时则会自动跳转到第二行，如果第一行支持则不会继续往下走；

1.2.2视频video

一些电商产品通常有视频播放效果（如手机的介绍页中）

<video src="./media/video.mp4" 属性="属性值"></video>

其各属性如下图：

如音频一样，视频也是不同的浏览器有不同的支持格式，如下图所示：

也可以像音频一样写多行代码来克服这个缺点：

<video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>

1.3表单相关

1.3.1input的新类型

html5中新增了input标签的新类型如下：

有了这些type值，当我们在使用输入框时就可以自动判断输入的类型是否相符，如果不符合会有提示并且无法提交；

1.3.2表单的新属性

这里的属性placeholder与之前的value是有区别的：value的字体是和正常的输入字体一样，而placeholder的字体则是浅灰色而且写的时候会自动覆盖掉，value的话写必须先删掉默认的value文字；

2、CSS3

2.1CSS3选择器

2.1.1属性选择器

属性选择器如下图所示：
好处是元素的选择更加精确了，如我们想给被设置了禁用disabled属性后的元素改变鼠标样式，则可直接通过属性及属性值进行选择，在之前的无法达到这样的效果
注意：属性选择器与类选择器、伪类选择器一样权重都是10

2.1.2结构伪类选择器

之前我们学过链接伪类选择器如a:hover这些，而结构伪类选择器如下图所示：

//第三个子元素背景色改为红色
ul li:nth-child(3) {
  background-color: red;
}

且对于nth-child(n),有如下注意点：

• 注意：本质上就是选中第几个子元素

• n 可以是数字、关键字、公式

• n 如果是数字，就是选中第几个

• 常见的关键字有 even 偶数、odd 奇数

• 还可以使用公式，如2n…

2.1.3伪元素选择器

区别伪类选择器只有一个冒号，伪元素选择器有两个冒号；
其作用主要是当我有了个元素后，直接在样式部分写伪元素选择器可以多一个与上相关元素（即元素与css一起写在css部分而不是html部分）

注意：

• before 和 after 必须有 content 属性，如果content为空可以在里面只写引号内容留空
• before 在内容前面，after 在内容后面
• before 和 after 创建的是一个元素，但是属于行内元素，要给大小记得转换
• 创建出来的元素在 Dom 中查找不到，所以称为伪元素
• *伪元素和标签选择器一样，权重为 1；*如div::before{}权重就是2（1+1）

2.2transition渐变

当我们在页面中需要实现一些效果时，如鼠标移动到盒子上面时盒子跑到另一个位置，通常如果只用普通的hover单独来做，则鼠标一放上去时会直接闪到指定位置，效果并不好；
而transition通常配合hover使用，控制一些效果的变化过程；

transition：要过渡的属性 花费时间 运动曲线 何时开始，下一个要过渡的属性 花费时间 运动曲线 何时开始…
很多时候写：transition：all 花费时间 就行了
且过渡语句transition要写到要变化的元素样式中（且必须是谁过渡就给谁写，如div中包含img，则必须给img写而非div）上而不是hover属性上

2.3二维平面上的转换

改变盒子在二维平面上的位置和形状

1、对于translate其是将盒子进行移动，虽然移动盒子外边距、定位等都可以实现（但其优点是元素移动后不会影响其他元素）
还有若给其百分数，则移动的距离是其本身大小的百分数（可用于之前的绝对定位居中对齐走父亲一半再走自己一半方法的自己一半代码中）

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

2、对于rotate旋转是将盒子进行旋转

transform: rotate(度数) 

• rotate 里面跟度数，单位是 deg
• 角度为正时，顺时针，角度为负时，逆时针
• 默认旋转的中心点是元素的中心点,可以通过transform-origin: x y;设置旋转中心点，xy可以是百分数，也可以是方位名词如top、center…
  
  利用旋转可以使手打的>符号变成上下方向的等等…
  3、对于scale是将所选盒子进行放大缩小

transform: scale(x, y)

如果scale只写了一个参数，则xy都是该参数，可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子，如果通过改变width，height这些来进行缩放则会影响其他盒子
这个效果通常用于如鼠标移到盒子上时，盒子内的商品图片变大等效果…
4、如果所有属性一起使用： transform: translate() rotate() scale()

2.4动画效果

动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果；
分为两步：
1、先定义动画，下面只写了初始状态和最终状态，但是可以写任意的百分数状态的

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

2、 在调用定义好的动画，下面是在div盒子中调用上面定义好的动画

div {
	/* 调用动画 */
    animation-name: 动画名称（上面写好的名称）;
 	/* 持续时间 ，其他属性见下图*/
 	animation-duration: 持续时间（单位是s）；
}

动画常见的属性如下：

如对某一div进行动画效果，则这些属性是写到div里去的（除了play-state属性一般与鼠标经过这些一起用而已）
1、动画的简写如下：

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

2、动画的timing-function可以设置动画运动过程中的速度，其可选值如下：

很多场合将默认的ease改为linear，且steps（）也有很大用处（可以将一个长图如奔跑中各态的熊划分成各个步态后形成动画的效果）

2.5三维平面上的转换

注意z轴是往屏幕外面方向为正，反之为负；
与2d转换一样，3d转换也是transform，也有位移和旋转属性；

2.5.1三维移动translate3d`

• transform: translateZ(100px)：仅仅是在 z 轴上移动
• transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离，注意值不能省略，可以写0
  
  

2.5.2三维旋转rotate3d

• transform: rotateZ(45deg) – 沿着 z 轴正方向旋转 45 度
• transform: rotate3d(x, y, z, 45deg) – 沿着自定义轴旋转 45 deg 为角度，比如xy为1而z为0则是绕着xy中间的45°线进行旋转

旋转的方向由左手准则来判定，大拇指指向转轴的正方向，其他四指则为旋转的方向；

2.5.3透视perspective

我们在使用透视效果时，必须给其父元素或者比它高级的元素加上perspective属性，否则看不到透视效果），如：

body {
  perspective: 1000px;
}

其中的数值越大，则盒子越小，很多时候都写300px-400px

2.5.4三维呈现transform-style

• 控制子元素是否开启三维立体环境（如果不开则子盒子会以二维呈现）
• transform-style: flat 代表子元素不开启 3D 立体空间，默认的
• transform-style: preserve-3d 子元素开启立体空间
• 代码写给父级（和perspective一样，则写给父盒子时将两个都写上），但是影响的是子盒子