当前位置：首页 > news >正文

HTML5+CSS3回顾总结

news 文章来源：https://blog.csdn.net/m0_73560798/article/details/139368035 2025/4/20 6:20:39

一、HTML5新特性

1.语义化标签

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

2.多媒体标签

2.1视频标签vedio

》常规写法（尽量都使用mp4）

 <video src="media/mi.mp4"></video>

》兼容性写法source

<video  controls="controls"  width="300"><source src="move.ogg" type="video/ogg" ><source src="move.mp4" type="video/mp4" >您的浏览器暂不支持 <video> 标签播放视频
</ video >

上面这种写法，浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

》vedio属性

2.2音频标签audio

常规写法

兼容写法

< audio controls="controls"  ><source src="happy.mp3" type="audio/mpeg" ><source src="happy.ogg" type="audio/ogg" >您的浏览器暂不支持 <audio> 标签。
</ audio>

》audio属性

3.新增表单类型，表单属性

3.1新增表单type类型

》常见输入类型

text password radio checkbox button file hidden submit reset image

》新的输入类型
在这里插入图片描述

类型很多，我们现阶段重点记忆三个： number tel search

3.2新增表单input属性

4.canvas绘图

HTML5的十大新特性-CSDN博客

【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！_html canvas-CSDN博客

学习 HTML5 Canvas 这一篇文章就够了 | 菜鸟教程

HTML5 Canvas | 菜鸟教程

》基本用法

创建画布（只有属性id和width/height 默认宽高为300*150）

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

使用javascript来绘制

<script>// 1.找到 <canvas> 元素let canvas = document.getElementById('myCanvas');// 2.创建 context 对象。getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法let ctx = canvas.getContext('2d');</script>

》常用的canvasAPI

（1）获取上下文：使用 getContext('2d') 获取上下文对象，在该对象上进行图形绘制和变换。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

（2）绘制形状

// 矩形
ctx.fillRect(x, y, width, height);               // 填充矩形
ctx.strokeRect(x, y, width, height);             // 描边矩形// 圆形或弧形
ctx.beginPath();                                // 开始一条路径描述
ctx.arc(x, y, radius, startAngle, endAngle);     // 绘制弧形或圆形
ctx.closePath();                                // 关闭路径
ctx.fill();                                     // 填充当前绘图（路径区域）
ctx.stroke();                                   // 描边当前绘图（路径）// 多边形
ctx.beginPath();                                // 开始一条路径描述
ctx.moveTo(x1, y1);                             // 将绘图位置移动到 x1, y1
ctx.lineTo(x2, y2);                             // 连接到 x2, y2
// ...                                          // 更多的点连接
ctx.closePath();                                // 关闭路径
ctx.fill();                                     // 填充当前绘图（路径区域）
ctx.stroke();                                   // 描边当前绘图（路径）// 文本
ctx.font = '16px serif';                        // 设置字体
ctx.fillStyle = '#000';                         // 设置字体颜色
ctx.fillText(text, x, y);                       // 填充文本
ctx.strokeText(text, x, y, maxWidth);           // 描边文本

》用例 1 ：绘制矩形

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

<script>var c = document.getElementById('myCanvas');var ctx = c.getContext('2d');ctx.fillStyle = '#FF0000';ctx.fillRect(0, 0, 150, 75);</script>

》用例 2 ：绘制线条

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
然后使用 stroke() 方法来绘制线条

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

》用例 3 ：绘制圆形

arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。一般startAngle是0，anticlockwise是2*Math.PI（2π）。anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。

<script>var c = document.getElementById('myCanvas');var ctx = c.getContext('2d');// 空心圆形ctx.beginPath();ctx.arc(120, 50, 40, 0, 2 * Math.PI);ctx.strokeStyle="blue";//设置描边线条颜色ctx.lineWidth=5;//描边线条宽度ctx.stroke();// 实心圆形ctx.beginPath();ctx.arc(120, 50, 40, 0, 2 * Math.PI);ctx.fill();</script>

》用例4：文本效果（实心、空心）

font - 定义字体和大小
fillText(text,x,y) - 在 canvas 上绘制实心的文本。text是写的内容，xy是距离左边和上边的距离。
strokeText(text,x,y) - 在 canvas 上绘制空心的文本。text是写的内容，xy是距离左边和上边的距离。

var c = document.getElementById('myCanvas');var ctx = c.getContext('2d');ctx.font = '30px Arial';// 实心文本// ctx.fillText('Hello World', 10, 50);// 空心文本ctx.strokeText("Hello World",10,50);

》用例5：图像

drawImage(image, x, y) 方法可以在 Canvas 上绘制图片，需要传入 Image 对象、图片位置的 x 坐标和 y 坐标。

var c = document.getElementById('myCanvas');var ctx = c.getContext('2d');const img = new Image();img.src = 'https://img.yzcdn.cn/vant/cat.jpeg';img.onload = function () {ctx.drawImage(img, 20, 20);};

》用例6：动画

【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！_html canvas-CSDN博客

5.SVG绘图

6.地理定位

7.拖放API draggable

8.新增web Storage

9. 新增web worker

10.新增webbSocket

二、Css3新特性

1.选择器（权重=类=伪类=10）

》属性选择器

》结构伪类选择器（权重=类、属性=10.）

》伪元素选择器（权重=1=标签选择器）

2.弹性盒布局

CSS中flex弹性盒子——弹性容器属性，弹性元素属性（附图）_css flex-CSDN博客

》父盒子属性

开启display:flex/inline-flex;

父容器属性	属性值	含义
flex-directiion	`row`（默认值）：主轴为水平方向，起点在左端。 `row-reverse`：主轴为水平方向，起点在右端。 `column`：主轴为垂直方向，起点在上沿。 `column-reverse`：主轴为垂直方向，起点在下沿。	主轴的方向，即项目的排列方向
flex-wrap	nowrap默认不换行 wrap换行，第一行在上方 wrap-reserve换行，第一行在下方	如果一条轴线排不下，是否换行
flex-flow	默认值为row/nowrap	是flex-direction和flex-wrp的简写
justify-content	`flex-start`（默认值）：左对齐 `flex-end`：右对齐 `center`：居中 `space-between`：两端对齐，项目之间的间隔都相等。 `space-around`：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。	项目在主轴的对齐方式
align-items	`flex-start`：交叉轴的起点对齐。 `flex-end`：交叉轴的终点对齐。 `center`：交叉轴的中点对齐。 `baseline`: 项目的第一行文字的基线对齐。 `stretch`（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度	项目在交叉轴的对齐方式
align-content	flex-start \| flex-end \| center \| space-between \| space-around \| stretch;	多根轴线的对齐方式

》子元素属性

子元素属性	属性值	含义
order	默认为0，数值越小排列越靠前	项目的排列顺序
flex-grow	默认为0；如果所有项目的`flex-grow`属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的`flex-grow`属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。	项目的放大比例
flex-shrink	默认为1，即如果空间不足，该项目将缩小；如果所有项目的`flex-shrink`属性都为1，当空间不足时，都将等比例缩小。如果一个项目的`flex-shrink`属性为0，其他项目都为1，则空间不足时，前者不缩小。负值无效	项目的缩小比例
flex-basis	默认值为`auto`，即项目的本来大小。可以设为跟`width`或`height`属性一样的值（比如350px），则项目将占据固定空间。（如果和width同时存在将会干掉width）	在分配多余空间之前，项目占据的主轴空间（main size），就是项目的初始大小
flex	默认值为`0 1 auto`。	`flex-grow`, `flex-shrink` 和 `flex-basis`的简写，
align-self	默认值为`auto`，表示继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`。	单个项目有与其他项目不一样的对齐方式

》flex:1代表什么？

flex-grow：1；flex-shrink:1; flex-basis:0%;

表示子项目将会占用容器中所有可用的剩余空间，实现均匀分布。

3.grid网格布局

CSS 网格布局 | 菜鸟教程

grid布局属性介绍-CSDN博客

》父容器属性

》项目属性

3.过渡效果，转换效果，动画效果

CSS3动画详解（图文教程）_css3动画教程-CSDN博客

》过渡transition

transition-property	width height all	上什么属性发生过渡
transitin-duration	1s	过渡的持续时间
transition-timing-function	linear线性 ease减速 ease-in加速 ease-out减速 ease-in-out先加速在减速	运动曲线
transition-delay	1s	延迟多长时间再次执行这个动画

》2D转换transform

（1）缩放scale：

transform: scale(x, y);

transform: scale(2, 0.5);

参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。

取值：大于1表示放大，小于1表示缩小。不能为百分比。

（2）位移translate :

transform: translate(水平位移, 垂直位移);

transform: translate(-50%, -50%);

参数解释：

参数为百分比，相对于自身移动。

正值：向右和向下。负值：向左和向上。如果只写一个值，则表示水平移动。

（3）旋转rotate:

transform: rotate(角度);

transform: rotate(45deg);

参数解释：正值顺时针；负值：逆时针。

》3D转换

1、旋转：rotateX、rotateY、rotateZ

	transform: rotateX(360deg);    //绕 X 轴旋转360度transform: rotateY(360deg);    //绕 Y 轴旋转360度transform: rotateZ(360deg);    //绕 Z 轴旋转360度

2. 移动：translateX、translateY、translateZ

	transform: translateX(100px);    //沿着 X 轴移动transform: translateY(360px);    //沿着 Y 轴移动transform: translateZ(360px);    //沿着 Z 轴移动

3.透视：perspective

4.3D呈现（transform-style）

》动画!!!!!animation

》动画的属性：

animation: 定义的动画名称持续时间执行次数是否反向运动曲线延迟执行。(infinite 表示无限次)

animation: move1 1s alternate linear 3;

animation: move2 4s;

（1）动画名称：

	animation-name: move;

（2）执行一次动画的持续时间：

	animation-duration: 4s;

备注：上面两个属性，是必选项，且顺序固定。

（3）动画的执行次数：

	animation-iteration-count: 1;       //iteration的含义表示迭代

属性值infinite表示无数次。

（3）动画的方向：

	animation-direction: alternate;

属性值：normal 正常，alternate 反向。

（4）动画延迟执行：

	animation-delay: 1s;

（5）设置动画结束时，盒子的状态：

	animation-fill-mode: forwards;

属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。

（6）运动曲线：

	animation-timing-function: ease-in;

属性值可以是：linear（线性） ease-in-out（先加速在减速） steps()等。

注意，如果把属性值写成steps()，则表示动画不是连续执行，而是间断地分成几步执行。我们接下来专门讲一下属性值 steps()。

》案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 100px;height: 100px;margin: 100px;background-color: red;/* 调用动画*//* animation: 动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。infinite 表示无限次*/animation: move1 1s  alternate linear 3;animation: move2 4s;}/* 方式一：定义一组动画*/@keyframes move1 {from {transform: translateX(0px) rotate(0deg);}to {transform: translateX(500px) rotate(555deg);}}/* 方式二：定义多组动画*/@keyframes move2 {0% {transform: translateX(0px) translateY(0px);background-color: red;border-radius: 0;}25% {transform: translateX(500px) translateY(0px);}/*动画执行到 50% 的时候，背景色变成绿色，形状变成圆形*/50% {/* 虽然两个方向都有translate，但其实只是Y轴上移动了200px。因为X轴的500px是相对最开始的原点来说的。可以理解成此时的 translateX 是保存了之前的位移 */transform: translateX(500px) translateY(200px);background-color: green;border-radius: 50%;}75% {transform: translateX(0px) translateY(200px);}/*动画执行到 100% 的时候，背景色还原为红色，形状还原为正方形*/100% {/*坐标归零，表示回到原点。*/transform: translateX(0px) translateY(0px);background-color: red;border-radius: 0;}}</style>
</head>
<body><div class="box"></div>
</body>
</html>

4.边框圆角阴影背景

border-radius （四个值顺时针）
box-shadow（水平偏移垂直偏移模糊距离阴影颜色）
background-image: url()
background-size:宽高

5.文本、文字样式

》文本

（1）text-overflow: clip（默认一刀切）ellipsis（省略号）给定字符串">>>"

切记！一定要配合whhite-space:nowrap和overflow:hidden来使用

（2）text-shadow:

》文字

（3）字体类型font-family:name"隶书、宋体"

（4）艺术字体font-style:normal/italic斜体/oblique倾斜的字体

（5）字体粗细font-weight:normal/400正常/700加粗

（6）text-decoration:normal/underline下划线、blink闪烁，line-through贯穿，overline上划线

6.线性、径向渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

三、HTML回顾

1.常见标签

（1）DOCTYPE,lang以及字符集

（2）标题标签h1-h6

（3）p（双）和br（单）

（4）文本格式化标签（双）

（5）div和span

span是行内标签，一行可以多个span

（6）img标签（单）和相对/绝对路径

相对路径：以引用文件所在位置为参考基础，图片相对于HTML页面的位置
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。，但是这种严禁使用，原因如下：
1）绝对路径只在当前计算机生效，若将网站转移服务器，则路径会失效
2）通过绝对路径打开图片使用的是 file 协议，但网页中使用的是 http 协议，因此会出现跨域问题，造成图片无法显示
网络地址：使用网络上的图片链接。但是，一般不使用网络地址，原因是网络图片可能由于各种原因被删除、转移位置，使图片无法打开

（7）a超链接标签和锚点

target 属性-blank跳转新的窗口打开 -self（默认）在当前窗口打开

<a href="#top">返回顶部</a>

<a href="./快捷键.html#bottom">链接到快捷键页面底部</a>

（8）特殊字符

2.表格标签

（1）table :tr（行）: th（头） td（每行的单元格）

》table的属性

cellspacing	边框和边框的距离
cellpadding	边框和内容的距离

》行和列的属性

colspan跨列，rowspan跨行

（2）表格结构标签thead tbody

1）caption：表格的标题，通常出现在表格的顶部。
2）thead：定义表格表头，通常表现为标题行。
3）tbody：定义一段表格主体，一个表格可以有多个主体，可以按照行来进行分组。
4）tfoot：定义表格的脚尾，通常表现为总计行

3.列表标签

（1）无序列表ul li

（2）有序列表ol li。ol的属性

（3）自定义列表dl > dt dd

4.表单标签

（1）表单域form，form属性

（1）get 方法的特点使用 URL（统一资源定位符）传递参数：http://服务器地址?name1=value1&name2= value2，其中“?”符号表示要进行参数传递，“?”符号后面采用“name=value”的形式传递，多个参数之间，用“&”符号连接。URL 传递的数据量有限，只能传递少量数据。而且使用 URL 传递参数并不安全，所有信息可在地址栏中看到，并且可以通过地址栏随意传递其他数据。
（2）post 方法的特点将数据封装后使用 http 请求传递，信息在地址栏中不可见，比较安全，并且传递的数据量理论上没有限制。综上所述，虽然 get 方法是表单提交的默认方法，但是通常采用 post 方法传递数据。

（2）表单控件input

》input属性

》type属性

》注意

1.name 和 value 属性需同时存在，提交时，提交的是 value 中的属性值
2.radio 凭借 name 属性区分是否为同一组。name 相同，为同组，同组中只能选择一个
3.checked=“checked” 默认选中。radio 只能选一个，checkbox 可以选多个

（3）提示信息