（二）HTML5 + CSS3学习笔记

---

前言

本次学习参考黑马程序员《HTML5+CSS3移动端系》系列网课

---

一、语义化标签（HTML5）

1.新增标签<header> <nav> <article> <section> <aside> <footer>

2.移动端（webkit内核，不需要兼容）

二、音频视频（HTML5）

1.<video>（视频）
-.mp4（常见）
-autoplay = “autoplay”(chrome禁用了，可用muted=“muted”（静音播）解决）
-controls（js）
-loop(循环）
-preload= “auto/none(忽略)”
-poster（海报）

2.<audio>（音频）
-.mp3（常见）
-controls
-autoplay（Chrome禁用 js）
-loop

三、表单（HTML5）

1.新增type = “email” “url” “date” “time” “month” “week” “number” “tel” “search” “color”
（限制用户输入）

2.表单属性
-repuired 表单内容不为空
-placeholder 提示文本
-autofocus 自动聚焦
-autocomplete on/off 记录输入内容
-multiple 多选文件
-readonly 只读

四、选择器（CSS3）

1.属性选择器
-input [type = text] {…} //所有input标签type等于text
-<div [class^ =icon] {…} //类名以icon开头的
-\section [class$ =data} {…} //以data结尾的类名
注：属性选择器、类、伪类选择器 权重为 10

2.结构伪类选择器

ul li :first-child、:last-child
ul li :nth-child(n)  //(-n+3)前三个、(2n)偶数项

div :first-of-type / :last-of-type
div :nth-of-type(n) //区别：不指定标签排列序号，first-child必须是第一个

3.伪元素选择器（简化HTML结构，不需要父元素中插入div）

::before //元素内部的前面插入内容
::after //元素内部的后面插入内容

注：before和after创建一个元素，属于行内元素
-在文档树中找不到，so叫伪元素
-必须有content属性
-伪元素选择器与标签选择器一样权重为1	

五、CSS函数（CSS3）

1.滤镜（模糊或颜色偏差）

filter： 函数（）;
filter：blur(5px);

2.calc函数（计算/也可用less)

width: calc(10%-30px);
//括号中使用+、-、*、/ 来计算

代码如下（示例）：

六、动画与过渡

1.过渡（transition）

transition: 过渡元素 花费时间 运动曲线 何时开始；

-属性：想要变化的CSS属性，要所有属性变化可以写all
-花费时间：单位s（必须有单位）
-运动曲线：ease（default；逐渐变慢）/linear（匀速）/ease-in（加速）/ease-out（减速）/ease-in-out（先加速后减速）
-何时开始：单位s（必需）设置延迟触发时间

2.动画（animation）

//相比过渡，动画实现更多、连续自动
-定义动画
@keyframes 动画名 {
	0%{...}
	100%{...}
}
-调用动画
animation:
animation-name //动画名
animation-duration //动画持续时间
animation-time-function  （函数steps（4，end）//运动曲线
animation-delay //动画何时开始
animation-iteration-count （1/infinite）//动画播放次数
animation-direction （normal/alternate逆向)//动画是否下一周期逆向播放
animation-fill-mode (backwards恢复/forwards保持)//动画结束后状态
animation-play-state (running/paused) //动画是否在运行

六、2D转换

1.移动（2D转换）

transform: translate(x,y) / transformX(n) / transformY(n);

-2D转换中移动X、Y轴
-最大优点：不影响其他元素位置
-百分比单位相对于自身元素 translate(50%，50%)
-对行内标签没有效果

2.旋转（2D转换）

transform: rotate(..deg);

//设置元素中心点
transform-origin: x y; //默认中心点（50% 50%）；也可用方位词top..

-必需带deg单位
-角度为正，顺时；负，为逆时针
-默认中心点为元素中心点
代码如下（示例）：

3.缩放（2D转换）

transform: scale(x y); //数字不跟单位，倍数的意思

-scale不会影响其他元素
-可设中心点

4.2D转换综合写法

-transform：translate(x y) rotate() scale();
-顺序会影响效果
-同时有位移其他属性，需要把位移写在前面

六、3D转换

·近大远小，后面遮挡后看不见
·三维坐标系
·x轴：水平向右 注：x向右为正，向左为负
·y轴：垂直向下 注：y向下是正，向上是负
·z轴：垂直屏幕 注：向外是正，向内是负

1.3D移动

transform: translate(x,y,z);

2.3D旋转

transform: rotate(x,y,z,deg);
transform: rotateX();
transform: rotateY();
transform: rotateZ();

3.3D呈现

//控制子元素是否开启三维立体环境，代码写给父级，影响的是子盒子
transform-style: flat(默认，不开启3D立体空间）/preserve-3d(子元素开启立体空间）;

七、其他

1.浏览器私有前缀（兼容老版本浏览器写法）

-moz- ：代表Firefox浏览器私有属性
-ms- ：代表IE浏览器私有属性
-webkit- ：代表Safari、Chrome浏览器私有属性
-o- ：代表Opera浏览器私有属性

2.CSShack
-尽量避免使用危及用户体验实现
a.CSS前缀法（在CSS属性名前加上一些只有特定浏览器才能识别的hack前缀
b.条件注释法（IE浏览器专有）

---

总结

通过本次黑马程序员的网课教学，让我对网页设计层面的结构与渲染了解更加深入。