HTML5与CSS3知识点总结_其他

HTML常用标签总结
手摸手带你学CSS

好好学习，天天向上

本文已收录至我的Github仓库DayDayUP：github.com/RobodLee/DayDayUP，欢迎Star

⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

原文链接：https://blog.csdn.net/weixin_43461520/article/details/113201713

⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

HTML5新增标签

HTML5针对以前的不足，新增了一些新的标签、表单以及表单属性等。

语义化标签

之前在做布局的使用，使用了大量的div，这些div都是没有语义的，我们不能很轻易的就判断出某个div大致是什么内容，所以在HTML5中新增了语义化标签来弥补这个缺陷，现在我们可以根据标签名去推断出其大致内容，方便代码的阅读，而且使用语义化标签也可以提高被搜索引擎检索的概率。

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

多媒体标签

HTML5原生支持音视频文件的播放，其中音频标签和视频标签的使用方式基本一致。

<autdio>：音频

<audio>标签支持三种音频格式，分别是MP3、Wav以及Ogg，其中MP3格式所有的浏览器都支持。

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

<audio>标签常见属性

属性	值	描述
autoplay	autoplay	表示音频在就绪后马上播放
controls	controls	表示向用户显示控件，比如播放按钮
loop	loop	循环播放，即每当音频结束时重新开始播放
src	url	要播放的音频的url

<video>：视频

<video>标签支持三种视频格式，分别是MP4、WebM以及Ogg，其中MP4格式所有的浏览器都支持。

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

其中<video>标签有很多属性，比较常见的有

属性	值	描述
autoplay	autoplay	视频就绪自动播放(谷歌浏览器不会自动播放，需要添加muted属性来自动播放)
controls	controls	向用户显示播放控件
width	pixels(像素)	设置播放器宽度
height	pixels(像素)	设置播放器高度
loop	loop	插放完是否继续播放该视频，循环播放
preload	auto(预先加载视频) none(不加载视频)	规定是否预加载视频 (如果有了 autoplay 就忽略该属性)
src	url	视频ur地址
poster	图片的url	加载等待的画面图片
muted	muted	静音插放

input表单

在HTML5中，增加了一些新的input类型，使其语义化更加明显。

属性值	说明
type=”email”	限制用户输入必须为Email类型
type=”url”	限制用户输入必须为URL类型
type=”date”	限制用户输入必须为日期类型
type=”time”	限制用户输入必须为时间类型
type=”month”	限制用户输入必须为月类型
type=”week”	限制用户输入必须为周类型
type=”number”	限制用户输入必须为数字类型
type=”tel”	手机号码
type=”search”	搜索框
type=”color”	生成一个颜色选择表单

HTML5中不仅新增了一些input类型，还新增了一些表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off / on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=”on”，关闭autocomplete=”off，需要放在表单内，同时加上name属性，并且提交成功过
multiple	multiple	可以多选文件提交

CSS3新增选择器

属性选择器

属性选择器可以在不用借助于类或者id选择器的情况下直接根据元素特定属性来选择元素，它的权重为10。

E[att]：选择具有att属性的E元素

<!-- 将具有value属性的按钮1中文字颜色修改为红色，按钮2因为不具有value属性，所以文字颜色没有改变 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[value] {
            color: red;
        }
    </style>
</head>
<body>
    <input type="button" value="按钮1">
    <input type="button">
</body>

E[att="val"]：选择具有att属性且属性值等于val的E元素

<!-- 将value属性值为 “按钮2” 的button的文字颜色修改为蓝色 -->
<head>
    <style>
        input[value="按钮2"] {
            color: blue;
        }
    </style>
</head>
<body>
    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
</body>

E[att^="val"]：匹配具有att属性且值以val开头的E元素
E[att$="val"]：匹配具有att属性且值以val结尾的E元素
E[att*="val"]：匹配具有att属性且值中含有val的E元素

结构伪类选择器

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

E: first-child：匹配父元素中的第一个子元素E
E: last-child：匹配父元素中最后一个E元素
E: nth-child(n)：匹配父元素中的第n个子元素E，n也可以是关键字even偶数、odd奇数，如果直接写字母n则表示选择所有的子元素

<head>
    <style>
        ul li:first-child {
            background-color: skyblue;
        }
        ul li:last-child {
            background-color: aquamarine;
        }
        ul li:nth-child(2) {
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <ul>
        <li>欢迎关注</li>
        <li>微信公众号：</li>
        <li>Robod</li>
    </ul>
</body>

E: first-of-type：指定类型E的第一个
E: last-of-type：指定类型E的最后
E: nth-of-type(n)：指定类型E的第n个

这三个和上面三个使用起来类似，不过还是有一点区别的，nth-child是对父元素里面所有子元素排序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配；而nth-of-type则是对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个子元素。

<head>
    <style>
        ul li:nth-child(1) {
            /* 先对ul里的所有子元素排序，找到序号为1的元素，发现是p标签而不是li，所以样式不生效 */
            background-color: skyblue;
        }
        div li:nth-of-type(1) {
            /* 先匹配对应的li元素，对li元素进行排序，排序后选择第一个li */
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <ul>
        <p>微信公众号：Robod</p>     <!-- 序号是1 -->
        <li>欢迎关注</li>            <!-- 序号是2 -->
        <li>微信公众号：</li>
        <li>Robod</li>
    </ul>
    <div>
        <p>p</p>
        <li>li1</li>    <!-- 序号是1 -->    
        <li>li2</li>    <!-- 序号是2 -->  
    </div>
</body>

伪元素选择器

有的时候我们只需要一个简单的标签，如果用HTML做的话就会使代码结构变得复杂，这时候就可以用伪元素选择器，它可以帮助我们利用CSS创建新标签元素，从而简化HTML结构。伪元素选择器有两个，分别是::before（在元素内部的前面插入内容）和::after（在元素内部的后面添加内容），需要注意的是它们创建的元素是行内元素，而且在文档树里面是找不到的，这两个选择器必须要有content属性(可以没有值)，伪元素选择器的权重是1，

<!--语法：
	element::before{}
-->
<head>
    <style>
        div {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: aquamarine;
        }
        div::before {
            content: '微信公众号';
        }
        div::after {
            position: absolute;
            font-size: 30px;
            content: "Robod";
            right: 10px;
        }
    </style>
</head>
<body>
    <div>
        :
    </div>
</body>

CSS3新特性

CSS3盒模型

之前我们在定义盒子大小的时候，指定了width属性，可是盒子实际的宽度并不是width，padding和border都会将盒子撑大，也就是实际的盒子宽度是width+padding+border，而现在可以用box-sizing来指定盒模型，box-sizing属性有以下两个值。

content-box：这个是默认值，盒子的宽度是width+padding+border

border-box：盒子的大小为width属性的值

<head>
    <style>
        .box1 {
            width: 400px;
            height: 100px;
            border: 20px solid red;
            background-color: aqua;
            padding: 10px;
            box-sizing: content-box;
        }
        .box2 {
            width: 400px;
            height: 100px;
            border: 20px solid green;
            background-color: blanchedalmond;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box1">请小伙伴们给我的文章来个赞！</div>
    <div class="box2">欢迎关注微信公众号：Robod</div>
</body>

CSS3滤镜filter

filter属性将模糊或颜色偏移等图形效果应用于元素，通常用于调整图像，背景和边框的渲染。常用的几个函数如下：

filter: blur(5px) 该函数用来对图片进行模糊处理，数值越大图片越模糊
filter: contrast(200%) 调整图像的对比度，0%会全黑，100%图像不变，超过100%更低的对比度
filter: grayscale(80%) 将图像转换为灰度图像，100%完全转为灰度图像，0%图像无变化
filter: hue-rotate(90deg) 给图像应用色相旋转

还有其它的一些可以参考https://developer.mozilla.org/en-US/docs/Web/CSS/filter

calc()函数

calc()函数可以在声明CSS属性值时执行一些计算，例如：

width: calc(100% - 30px);		<!-- 表示比父盒子小30像素 -->

CSS3过渡

过渡动画是从一个状态渐渐的过渡到另外一个状态，通常和:hover一起搭配使用。

/*语法：*/
transition:要过渡的属性 花费时间 运动曲线 何时开始
/*参数说明 */
1、属性：想要变化的css属性,宽度高度背景颜色内外边距都可以，如果想要所有的属性都变化过渡,写一个 all 即可
2、花费时间：单位是秒(必须写单位)比如0.5s
3、运动曲线：默认是ease(逐渐慢下来，可以省略)，还可以是linear(匀速)，ease-in(加速)，ease-out(减速)，ease-in-out(先加速后减速)
4、何时开始：单位是秒(必须写单位)，可以设置延迟触发时间默认是0s(可以省略)

<head>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: aqua;
            /* 如果要写多个属性，用逗号隔开即可 */
            /* transition: width 1s ease-in-out .5s,height 1s ease-in-out .5s; */
            /* 如果所有的属性都要过渡，写 all 即可 */
            transition: all 1s ease-in-out .5s;
        }
        div:hover {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>微信公众号：Robod</div>
</body>

2D转换

移动translation

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

/*第一个参数是x方向移动的距离，第二个参数是y方向移动的距离，可以是百分比，值可以为0但不能没有*/
transform: translate(20px,0); 
/*也可以分开写，的一行等同于两行*/
transfrom: translateX(20px);
transform: translateY(30px);

translate的优点就是不会影响到其它元素的位置，如果单位不是px而是百分比的话，表示的就是自身元素的百分比，这种移动方式对行内标签是没有效果的。

<head>
    <style>
        div:first-child {
            width: 100px;
            height: 100px;
            background-color: red;
            transform: translate(50%,20px);
        }
        div:last-child {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>

旋转rotate

2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转。

<!-- rotate中度数的单位是deg，顺时针是正数，逆时针是负数 -->
<!-- transfrom: rotate(度数); -->
<head>
    <style>
        img {
            transition: all 1s;
        }
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/robod.png" alt="">
</body>

现在是以元素的中心为旋转点进行旋转，这也是默认的旋转点，也可以通过transfrom-origin属性更改旋转点。

<!-- 两个参数分别是x方向和y方向的位置，可以是像素也可以是方位名词 -->
<!-- transfrom-origin: x y; -->
<head>
    <style>
        img {
            transform-origin: 50px bottom;
            transition: all 1s;
        }
        img:hover {
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <img src="./images/robod.png" alt="">
</body>

缩放scale

缩放的意思就是可以放大和缩小，可以用scale来设置缩放，这种方式相较于直接修改宽高而言优势就是不影响其它盒子，和rotate一样，也可以通过transform-origin属性来修改缩放中心。

<!-- 第一个参数表示宽缩放为原来的m倍，第二个参数表示高缩放为原来的n倍，如果只填一个参数代表宽高同时缩放为原来的x倍
transform: scale(m,n);
transform: scale(x); -->
<head>
    <style>
        img {
            transition: all 1s;
            transform-origin: right bottom;
        }
        img:hover {
            transform: scale(.5);
        }
    </style>
</head>
<body>
    <img src="./images/robod.png" alt="">
    <p>微信公众号：Robod</p>
</body>

上述的几个转换方式是可以同时使用的，中间用空格隔开即可

transform: translate() rotate() scale()...

需要注意的是，书写顺序会影响转换的效果，比如先旋转会改变坐标轴方向，所以在同时有位移和其它属性的时候，位移要放在最前面。

CSS3 动画

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

动画的基本使用

动画序列

在学习动画之前，要先明确动画序列这个概念
- 0%是动画的开始，100%是动画的结束（0%~100%代表不同阶段的动画，都可以设置）。这样的规则就是动画序列。
- 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to” ，等同于0%和100%。

1、使用@keyframes定义动画

@keyframes 自定义的动画名称 {
    0% {
        xxxxxx；
    }
    100% {
        xxxxxxx；
    }
}

2、元素使用动画

给需要使用动画的元素添加animation-name(调用动画)以及animation-duration(持续时间)这两个属性。

<head>
    <style>
        @keyframes robod_animation {
            0% {
                transform: rotate(0) scale(1);
            }
            to {
                transform: rotate(90deg) scale(0.5);
            }
        }
        img {
            animation-name: robod_animation;
            animation-duration: 2s;
        }
    </style>
</head>
<body>
    <img src="./images/robod.png" alt="">
</body>

常用动画属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称（必须）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0（必须）
animation-timing-funtion	规定动画的速度曲线，默认是 “ease”
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite(无限循环)
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal”，alternate逆播放
animation-play-state	规定动画是否正在运行或暂停，默认是 “running”，还有 “paused”
animation-fill-mode	规定动画结束后状态，保持forwards，回到起始backwards

动画属性也可以采用简写的方式：

animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;

需要注意的是，简写属性里面不包含animation-play-state

速度曲线

上面提到了一个animation-timing-funtion属性用来设置动画的速度曲线，该属性的值一共有6个：

值	描述
linear	动画从头到尾的速度是相同的，匀速
ease	默认，动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps()	指定了时间函数中的间隔数量（步长）

前面几个都很好理解，这个步长的意思就是整个操作划分为多少步，然后一步一步执行，类似于那种一格一格的进度条的感觉，可以做一些有意思的动画。

<head>
    <style>
        @keyframes steeeep {
            from {
                width: 0;
            }
            to {
                width: 160px;
            }
        }
        div {
            width: 160px;
            overflow: hidden;
            white-space: nowrap;
            font-size: 10px;
            background-color: aqua;
            animation: steeeep 2s steps(15) backwards;
        }
    </style>
</head>
<body>
    <div>
        欢迎关注微信公众号：Robod
    </div>
</body>

3D转换

透视 perspective

在了解3D转换之前首要要明确一个概念——“透视”，电脑屏幕是二维的，我们没办法直接看到立体的东西，如果要想看到物体在Z轴上的变化，就得使用透视，透视又称视距，其实就是3D的东西投影在2D平面的效果，下图中的d就是透视，当物体不变时，透视越大，在屏幕上看到的就越小，透视越小，在屏幕上看到的就越大，所谓近大远小。透视的单位是px。

3D移动 translate3d

3D移动和2D移动类似，只不过是多了个Z轴。

/*这三个参数分别代表在xyz轴要移动的距离，z轴一般以px为单位*/
transform: translate3d(x , y , z);
/*也可以分开写*/
translate: translateX(x);
translate: translateY(y);
translate: translateZ(z);

首先给需要移动的元素的父元素添加透视，在透视固定的情况下，改变translateZ的大小，就会改变元素在屏幕上的大小。

<head>
    <style>
        body {
            perspective: 500px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin: 0 auto;
            transform: translateZ(100px);
        }
    </style>
</head>
<body>
    <div></div>
</body>

3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。

transform: rotateX(45deg);	/*沿x轴正方向旋转45度*/
transform: rotateY(45deg);	/*沿y轴正方向旋转45度*/
transform: rotateZ(45deg);	/*沿z轴正方向旋转45度*/
transform: rotate3d(1,1,0,45deg);	/*沿着x轴与y轴的对角线旋转45度*/

那么哪一个方向是旋转正方向呢？这里有一个技巧，就是左手准则，左手大拇指指向某一个轴的正方向，手指弯曲的方向就是旋转的正方向，反之就是反方向。

<head>
    <style>
        body {
            perspective: 500px;
        }
        img {
            transition: all 1s;
        }
        img:hover:first-child {
            transform: rotateX(45deg);
        }
        img:hover:nth-child(2) {
            transform: rotateY(45deg);
        }
        img:hover:nth-child(3) {
            transform: rotateZ(45deg);
        }
        img:hover:last-child {
            transform: rotate3d(1,1,0,45deg);
        }
    </style>
</head>
<body>
    <img src="./images/robod.png" alt="">
    <img src="./images/robod.png" alt="">
    <img src="./images/robod.png" alt="">
    <img src="./images/robod.png" alt="">
</body>

3D呈现 transform-style

3D呈现就是用来控制子元素是否开启三维立体环境，默认是transform-style: flat(不开启)，如果想开启，可以修改为transform-style: preserve-3d。注意：代码是写给父元素的，但影响的子元素。

<head>
    <style>
        body {
            perspective: 500px;
        }
        .box1 {
            width: 200px;
            height: 200px;
            transition: all 2s;
            transform-style: preserve-3d; /*和transform-style: flat*/
        }
        .box2 {
            width: 100%;
            height: 100%;
            background-color: aqua;
            transform: rotateX(45deg);
        }
        .box1:hover {
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

上面代码中的例子，先看一下transform-style: flat的效果：

当鼠标移到上面的时候，先是由本来的绕x轴旋转45度的状态转换为普通的平面图，再由平面图绕y轴进行旋转，这显然不是我们想要的效果。

再来看看transform-style: preserve-3d的效果

现在就是三维的转换效果了，直接由绕x轴旋转45度的状态直接再绕y轴旋转45度。

浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新的版本的浏览器无须忝加。

-moz-：代表 firefox浏览器的私有属性
-ms-：代表ie浏览器私有属性
-webkit-：代表 safari、chrome私有属性
-o-：代表Opera私有属性

比如圆角属性就可以这样写

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

总结

好了，这就是我这段时间学习HTML5和CSS3所总结出来的一些知识点，一方面是怕我自己以后忘了可以拿来复习使用，另一方面也是希望可以帮助到一起学习的小伙伴们！

码字不易，可以的话，给我来个点赞，收藏，关注

如果你喜欢我的文章，欢迎关注微信公众号 『 R o b o d 』

本文已收录至我的Github仓库DayDayUP：github.com/RobodLee/DayDayUP，欢迎Star

⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

原文链接：https://blog.csdn.net/weixin_43461520/article/details/113201713

⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

HTML5与CSS3知识点总结