html,css一些知识点
html
基础结构
HTML 文档由<!DOCTYPE html>声明开头，包含<html>、<head>（元信息）和<body>（可见内容）三部分。
常用标签：
- 文本：
<h1>-<h6>、<p>、<span>、<div> - 列表：
<ul>、<ol>、<li> - 媒体：
<img>、<video>、<audio> - 表单：
<form>、<input>、<textarea>、<button>、<select>、<label>
css
选择器
基础选择器
1.标签选择器
结构：标签名 { css属性名：属性值； }
作⽤：通过标签名，找到⻚⾯中所有这类标签，设置样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>、 <style> p { color: red } </style> </head> <body> <p>标签选择器</p> </body> </html> 2.类选择器
结构：.类名 { css属性名：属性值； }
作⽤：通过类名，找到⻚⾯中所有带有这个类名的标签，设置样式
注意点：
1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2. 类名可以由数字、字⺟、下划线、中划线组成，但不能以数字或者中划线开头
3. ⼀个标签可以同时有多个类名，类名之间以空格隔开
4. 类名可以重复，⼀个类选择器可以同时选中多个标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>、 <style> .one { color: blue } </style> </head> <body> <div class="one">类选择器</div> </body> </html> 3.id选择器
结构：#id属性值 { css属性名：属性值； }
作⽤：通过id属性值，找到⻚⾯中带有这个id属性值的标签，设置样式
注意点：
1. 所有标签上都有id属性
2. id属性值类似于身份证号码，在⼀个⻚⾯中是唯⼀的，不可重复的！
3. ⼀个标签上只能有⼀个id属性值
4. ⼀个id选择器只能选中⼀个标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>、 <style> #one { color: red } </style> </head> <body> <div id="one">id选择器</div> </body> </html>4.通配符选择器
结构：***** { css属性名：属性值； }
作⽤：找到⻚⾯中所有的标签，设置样式
注意点：
1. 开发中使⽤极少，只会在极特殊情况下才会⽤到
2. 在基础班⼩⻚⾯中可能会⽤于去除标签默认的margin和padding
* { margin: 0; padding: 0; }复合选择器
1.后代选择器：空格
作⽤：根据 HTML 标签的嵌套关系，选择⽗元素 后代中 满⾜条件的元素
选择器语法：选择器1 选择器2 { css }
结果：在选择器1所找到标签的后代（⼉⼦、孙⼦、重孙⼦…）中，找到满⾜选择器2的标签，设置样式
注意点：
1. 后代包括：⼉⼦、孙⼦、重孙⼦……
2. 后代选择器中，选择器与选择器之前通过 空格 隔开
2.子代选择器 >
作⽤：根据 HTML 标签的嵌套关系，选择⽗元素 ⼦代中 满⾜条件的元素
选择器语法：选择器1 > 选择器2 { css }
结果：在选择器1所找到标签的⼦代（⼉⼦）中，找到满⾜选择器2的标签，设置样式
注意点：
1. ⼦代只包括：⼉⼦
2. ⼦代选择器中，选择器与选择器之前通过 > 隔开
3.并集选择器
作⽤：同时选择多组标签，设置相同的样式
选择器语法：选择器1 ， 选择器2 { css }
结果：找到 选择器1 和 选择器2 选中的标签，设置样式
注意点：
1. 并集选择器中的每组选择器之间通过 , 分隔
2. 并集选择器中的每组选择器可以是基础选择器或者复合选择器
3. 并集选择器中的每组选择器通常⼀⾏写⼀个，提⾼代码的可读性
4.hover伪类选择器
作⽤：选中⿏标悬停在元素上的状态，设置样式
选择器语法：选择器**:hover** { css }
注意点：
1. 伪类选择器选中的元素的某种状态
5.结构伪类选择器
作⽤与优势：
作⽤：根据元素在HTML中的结构关系查找元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常⽤于查找某⽗级选择器中的⼦元