复习HTML,前端的一些复习。
学习总结:
定义音频内容和定义视频内容
<!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> </head> <body> <!-- 1999年HTML4.01里程碑版本,在HTML4.01中的几个标签已经被废弃,这些元素在HTML5里有的被删除了,有的被重新定义。HTML5在2012年稳定的版本。 H5新增: 画布,多媒体,重力感应,地图,websocket。 --> <!-- 定义音频内容 --> <audio src="123.mp3" autoplay controls></audio> <!-- 定义视频内容 --> <video src="123.mp4" autoplay controls></video> </body> </html>
<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>
<!-- 2.内联样式 -->
<style> h1 { background-color: green; } span{ background-color: yellow; } </style>
<!-- 3.外部样式 -->
<link rel="stylesheet" href="css/style.css"> </head> <body>
<!-- 1.行内样式 -->
<p style="">我是P标签</p> <h1>我是h1标签</h1> <span>我是span标签</span> <a href="#">我是超级链接</a> </body>
css选择器
写在<style></style>里面
选择你想要的元素
在使用类选择器选择css样式时,可以选择多个,中间用空格隔开即可。
<body>里写的
<body> <input type="text" name="username"> <input type="password" name="password"> <p class="fontStyle backgroudStyle">我爱你中国!</p> <p id="fontStyle2">我爱你长春!!!</p> <h1>我是h1标签</h1> <div>我是div标签</div> <div> 我是div <p>我是div里的p</p> <span> <p>我是div里的span里的p</p> </span> </div> <p>我是div后面的p</p> </bod
类选择器:名字前加 . 下面用的时候不用加 .
fontStyle是类的名字
.fontStyle { color: red; font-size: 20px; } .backgroudStyle { background-color: yellow; }
id选择器:上面名字前加的是#
fontStyle2是名字,随便起
每个标签元素的id是唯一不能重复
#fontStyle2 { color: blue; font-size: 30px; }
标签选择器:
p{ }
通配符,全部选择器:
页面初始化
*{ }
and选择器:组合选择器
h1,div { font-size: 50px; }
后代选择器:只要是这个标签,里面出现的都一样执行
div p{ }
子选择器:只有儿子辈的执行样式,孙子还有以后的都不行
div > p{ }
紧跟着div的p元素:
div + p{ }
属性选择器:
input[name]{ height: 100px; font-size: 50px; } input[name=username] { color: red; }
伪类选择器:初始,鼠标悬停,访问过的,还有获取焦点 <head>里的<style>
<style> /* 初始状态 */ a:link { color: red; } /* 鼠标悬停 */ a:hover { color: green; } /* 激活状态 */ a:active{ color: black; } /* 访问过的 */ a:visited { color: yellow; } /* 获得焦点 */ input:focus { height: 100px; font-size: 50px; } </style>
鼠标放上去就变大
<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> img:hover { width: 400px; border: 1px red solid; } </style> </head> <body> <img src="../img/libai.jpeg" width="100"> </body>
标签:22,color,标签,08,2022,div,font,选择器,size From: https://www.cnblogs.com/wxp0909/p/16613893.html