- 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
⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐