共计 7477 个字符，预计需要花费 19 分钟才能阅读完成。
第一章、初识 HTML5
1、了解 HTMLL5 优势：跨平台、兼容性、各大浏览器厂商的支持
2、HTML5 新增元素以及属性
2.1、H5 新增的结构元素：header、nav、section、article、aside、footer
2.2、H5 新增网页元素：video（视频）、audio（音频）、canvas（画布）、datalist、time、mark（高亮）、process（进度条）
2.3、H5 新增全局属性：contentEditable（是否允许用户编辑内容）、designMode（整个页面是否可编辑）、hidde（是否对元素进行隐藏）、spellcheck（是否对元素进行拼写或语法检查）
3、CSS3 高级选择器：
p:first-of-type // 选择所有属于其父元素的第一个 p 类型的元素
p:last-of-type // 选择所有属于其父元素的最后一个 p 类型的元素
p:first-child // 选择所有属于其父元素的第一个子元素的 p 元素
p:last-child // 选择所有属于其父元素的最后一个子元素的 p 元素
p:nth-child(n) // 选择所有属于其父元素的第 n 个子元素的 p 元素
p:nth-child(odd) // 选择所有属于其父元素的第奇数个子元素的 p 元素
p:nth-child(even) // 选择所有属于其父元素的第偶数个子元素的 p 元素
p:before // 在每个 p 元素的内容之前插入内容
p:after // 在每个 p 元素的内容之后插入内容 第二章、HTML5 表单
1、H5 新增的 input 类型
1.1、H5 之前版本支持的 input 类型
1.2、H5 新增的 input 类型
email：电子邮电地址文本框，提交时表单回自动验证 Email 值
url：网页的 URL，提交表单时会自动验证 URL 值
number：只能录入数字
range：特定范围内的数字选择器，以滑块形式呈现
search：用于搜索引擎的搜索框
Datepicker：拥有多个可供选取日期的新输入类型，又称日期选择器
2、H5 新增的 input 属性
autofocus：自动获取焦点
required：必填，即输入不能为空
placeholder：提示，输入数据后消失
pattern：正则表达式
第三章、CSS3 应用
1、CSS3 边框效果
border-radius：设置边框圆角，有 1 - 4 个值
![]()
// 一个值
img {
width: 200px;
height: 200px;
border-radius: 50%;
}
// 2 个值
img {
width: 200px;
height: 200px;
border-radius: 10px 50px;
}
border-image：设置图片边框
box-shadow：设置盒子阴影，一共 6 个参数:h-shadow 水平阴影位置、v-shadow 垂直阴影位置、blur 模糊距离（可选）、spread 阴影的尺寸（可选）、color 阴影的颜色（可选）、inset 内部阴影（默认外部阴影 outset）
box-shadow：h-shadow v-shadow blur spread color inset
img {
width: 200px;
height: 200px;
border-radius: 20px;
box-shadow: 10px 5px 6px 3px #ccc;
}
2、CSS3 文本效果
text-shadow：设置文本阴影，使用方法与盒子阴影相同，一共 6 个参数：h-shadow 水平阴影位置、v-shadow 垂直阴影位置、blur 模糊距离（可选）、spread 阴影的尺寸（可选）、color 阴影的颜色（可选）、inset 内部阴影（默认外部阴影 outset）
text-shadow：h-shadow v-shadow blur spread color inset
text-shadow 浮雕效果 body {
background-color: #000;
text-align: center;
}
div {
padding: 30px;
font-size: 60px;
font-weight: 700;
color: #ddd;
background-color: #ccc;
text-shadow: -1px -1px #fff,2px 2px #222;
}浮雕效果：
word-wrap：设置自动换行，防止单词太长产生溢出现象
this is a long word this is a long word this is a long word this is a long word this is a long word this is a long word this is a long word this is a long word this is a long word
p {
border: 1px solid #000;
width: 300px;
word-wrap: break-word;
}
3、CSS3 背景与渐变效果应用
background-size：设置背景图片大小
div {
width: 200px;
height: 130px;
border: 1px solid pink;
background: url("../img//7.png") no-repeat;
/* background-size: auto; */
/* background-size: cover; 填满元素 */
background-size: 120px 100px;
}
渐变：background: linear-gradient();
div {
width: 200px;
height: 130px;
background: linear-gradient(to top,pink,skyblue);
}
第四章、CSS3 高级应用
1、CSS3 2D 变形应用
1.1、平移：x 为正值，向 x 轴右边移动；负值则向 x 轴左边移动
transform: translate(x,y);
transform: translateX();
transform: translateY();
Document
1.2、缩放：0-1 表示缩小 >1 表示放大
transform: scale(1.5); // 表示同时放大 1.5 倍
transform: scale(x,y);
transform: scaleX(0.5);
transform: scaleY(1.2);
Document
1.3、旋转：rotate() 函数只接收一个值 a 代表角度
transform: rotate(90deg);
1.4、倾斜：x > 0 向右倾斜 y > 0 向上倾斜
transform: skewX(40deg);
transform: skewY(-20deg);
transform: skew(40deg,-20deg);
2、CSS3 3D 变形应用
1、3D 位移：transform: translate3d(x,y,z);
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(300px);
transform: translate3d(100px,100px,300px);
Document
![]()
![]()
2、3D 旋转：transform: rotate3d(x,y,z,a);
transform: rotate3d(1,0,1,45deg);
3、3D 缩放：transform: scale3d(x,y,z);
transform: scale3d(1.2,0.5,3);
第五章、使用 CSS3 制作动画
1、CSS3 过渡实现动画效果
transition: 过渡名称 | 过渡所需时间 | 过渡动画函数 | 过渡延迟时间;
transition: transition-property | transition-duration| transition-timing-function | transition-delay;
transition-property：规定过渡的 CSS 属性名称
transition-duration：定义过渡效果花费的时间
transition-timing-function：规定过渡效果的时间曲线
transition-delay：规定过渡效果何时开始
Document
2、CSS3 动画的使用
animation: 动画名字 | 动画播放时间 | 动画播放方式 | 开始播放动画的时间 | 动画播放的次数 | 动画的播放方向 | 动画的播放状态 | 动画时间外操作;
animation: animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-play-state | animation-fill-mode;
animation-name：规定 @keyframs 动画的名称
animation-duration：规定动画完成一个周期所花费的时间
animation-timing-function：规定动画的速度曲线 默认是 ease
animation-delay：规定动画何时开始
animation-iteration-count：动画的播放次数
animation-direction：动画的播放方向
animation-play-state：动画的播放状态
animation-fill-mode：动画时间外操作
Document
第六章、HTML5 媒体元素
1、音频元素：audio
| src | 规定音频文件的 URL |
| controls | 向用户显示音频控件（比如播放、暂停按钮） |
| loop | 当音频结束时重新开始播放 |
| autoplay | 音频在就绪后马上播放 |
| muted | 音频输出为静音 |
| preload | 当网页加载时，音频是否被默认加载以及如何被加载 |
2、视频元素：video
| src | 要播放视频的 URL |
| controls | 向用户显示控件，比如播放按钮 |
| autoplay | 视频在就绪后马上播放 |
| loop | 当媒体文件完成播放后再次播放 |
| preload | 视频页面加载时就开始加载，并预备播放，如果使用 autoplay，则忽略改属性 |
| poster | 规定视频正在加载时显示的图像，直到用户单击播放按钮 |
| width、height | 设置视频播放器的宽高 |
3、自定义视频播放器
3.1 播放器需要的属性：
| controls | 显示或隐藏用户控制界面 |
| autoplay | 媒体是否自动播放 |
| loop | 媒体是否循环播放 |
| pause | 媒体是否暂停（只读属性） |
| ended | 媒体是否播放完毕（只读属性） |
| currentTime | 当前的播放进度 |
| duration | 媒体播放总时间 |
| volume | 0.0 到 1.0 的音量相对值 |
| muted | 是否静音 |
| play() | 媒体播放 |
| Pause() | 媒体暂停 |
| Timeupdate() | 时间更新 |
| Canplay() | 可以播放 |
第七章、Canvas 基础
1、Canvas 概述以及应用：
1.1 canvas 可应用于游戏、做炫酷效果以及各种图形，比如电视剧《点燃我，温暖你》里面的李峋 爱心❤ 就是使用 canvas 开发的
1.2 创建 canvas 步骤：①：创建 canvas 元素 ②：使用 id 获取 canvas 元素 ③：创建 canvas 对象（创建上下文绘图环境）
2、使用 Canvas 绘制基本图形：
2.1 绘制直线
cxt.moveTo(x,y) 定义线条的开始坐标
cxt.lineTo(x,y) 定义线条的结束坐标
cxt.stroke() 绘制已定义的路径
cxt.strokeStyle = “pink” 设置线条的颜色值
cxt.lineWidth = “5” 设置线条的粗细
Document
2.2 绘制三角形
fillStyle() 设置填充颜色
fill() 设置填充
Document
2.3 绘制矩形
strokeRect(x,y,width,height) 描边矩形 空心
fillRect(x,y,width,height) 填充矩形 实心
Document
2.4 绘制圆形
x 坐标 y 坐标 圆的半径 起始角 结束角 true(逆时针) false(顺时针)
arc(x,y,r,start,stop,true/false)
Document
2.5 清空画布
ctx.clearRect(x,y,width,height) 清除矩形区域
3、使用 Canvas 绘制贝塞尔曲线：
3.1 二次方贝塞尔曲线：quadraticCurveTo()
3.2 三次方贝塞尔曲线：bezieCurveTo()
原文地址: HTML5 CSS3 基础知识梳理
