HTML中的标签、CSS中选择器以及定位
一、HTML中的标签
注释：一般的标签均是成对出现的,如：<div> </div>等等，但是还有以一些自结束标签如：<img>、<iuput>等。
1.meta标签：用于设置网页中的元数据（非用户看的数据）
属性值：
- charset：网页中的字符集
- name：指定的数据名称
- content：指定的的数据内容
- keywords：表示网站的关键字（可以同时指定多个关键字）
- description:用于网页的描述
2.title标签：其内容会作为搜索结果的超链接上的文字显示
3.标题标签：
h1至h6（共六级标题，重要性依次递减，在一般的网页的中h1只出现一次，而h4到h5一般不用）
4.p标签：用于段落
5.布局（结构化）标签
<header>:用于表示网页的头部(可以有多个）
<main>:用于表示网页的主题部分（一般只有一个）
<footer>：表示网页的页脚
<nav>：表示网页中的导航
<aside>：侧边栏
<ariticle>：表示独立的文章
<section>：独立的区块
<div>：独立的区块
<span>：一般用于在网页中选中文
6.图片标签：img（自结束标签）
其余标签不一一列举，可查看W3school⽂档
总结：
HTML中标签分为:
- 文本标签：p、span、a、b、i、u、em
- 容器级标签：div、h系列、li、dt、dd
CSS中标签分为：
- 行内标签：除p标签以外的所有文本标签
- 块级标签：P标签以及所有的容器级标签
图解：
二、CSS中选择器以及定位
1.内敛样式
如<p style=" color : red ;font-size :60px">xxxx</p>
2.外敛样式：常用选择器
元素选择器：
作用：根据标签名来选定的元素
语法：标签名 {}
例子：p{}、 h1{}、div{}
id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：<head>
<style>
#box{}
</style>
</head>
<body>
<div id="box"></div>
</body>
类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值{}
例子：<head>
<style>
.box{}
</style>
</head>
<body>
<div class="box"></div>
</body>
通配选择器
作用：选择页面的所有元素
语法：*{}
复合选择器
交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1 选择器2 ...选择器n{}
注意：*交集选择器中如果有元素选择器，必须使用元素选择器开头*
并集选择器
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，...，选择器n{}
关系选择器
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素>子元素
后代选择器
作用：选中指定元素內的指定后代元素（范围大）
语法：祖先（空格）后代
选择下一个兄弟
语法：前一个 + 后一个
选择(下面）所有的兄弟
语法：兄 ~ 弟
属性选择器
【属性名】选择含有指定属性的元素（title）
【属性名=属性值】选择含有指定属性和属性值的元素
【属性名^=属性值】选择属性值以指定值开头的元素
【属性值￥/$=属性值】选择属性值以指定值结尾的元素
【属性名*=属性值】选择属性值中含有某值的元素的元素
伪类（不存在的类、特殊的类）
一般情况下都是：开头
：frist-child 第一个子元素
：last-child 最后一个子元素
：nth-child（）第n个子元素
：frist-of-type
：last-of-type
：nth-of-type（）
----这几个伪类的功能和上述的类似，不同在于在同类型元素中进行排序
：not() 否定伪类---将符合的条件的元素从选择器中去除
：：frist-letter表示第一个字母
：：frist-line 表示第一行
：：selection 表示选中的内容（鼠标选中）
：：before 元素的开始
：：after 元素的结尾
-----before 和 after 必须结合content属性来使用
超链接的伪类
：link 用来表示没访问过的连接（正常的链接）
：visited 用来表示访问过的链接
由于隐私原因：所以visited这个伪类只能修改链接的颜色
：hover 用来表示鼠标移入的状态
：active 用来鼠标点击
选择器的权重
内联样式 1，0，0，0
id选择器 0，1，0，0
类和伪类选择器 0，0，1，0
元素选择器 0，0，0，1
通配选择器 0，0，0，0
继承的样式 没有优先级
注意：比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器如div、p、span单独计算）选择器对的累加不会超过其最大的数量级，若优先级相同，优先使用靠下的样式。
3.定位（position）
一种更加高级的布局手段
通过定位可以将元素摆到任意位置
可选值：
static:默认值 静止
相对定位 relative
---当元素的position属性设置为relative时则开启了元素的相对定位
特点：1.开启相对定位以后，不设置偏移量时元素不会发生任何变化
2.相对定位参照与元素在文档流中的位置进行定位的
3.相对定位会提高元素的层级
4.元素不会脱离文档流
5.元素的性质不改变
注释：偏移量
当元素开启了定位以后，可以通过偏移量来设置元素的位置
top 定位元素与定位位置上边的距离
bottom 定位元素与定位位置下边的距离
left 定位元素与定位位置左边的距离
right 定位元素与定位位置右边的距离
绝对定位 absolute
---当元素的position属性设置为absolute时则开启了元素的绝对定位
特点：1.开启相对定位以后，不设置偏移量时元素位置不会发生任何变化
2.相对于包含块进行定位的
3.会提高元素的层级
4.元素会脱离文档流
5.元素的性质发生改变（行内元素会变为块级元素）
注释：包含块
---正常情况下：包含块就是距离当前元素最近的祖先元素
---绝定定位下: 距离当前元素最近的开启了定位的祖先元素
若祖先元素均未开启定位，则包含块就是根元素
固定定位 fixed
---当元素的position属性设置为fixed时则开启了元素的固定定位
特点：大部分与绝定定位一样
不同：1.固定定位永远参照与浏览器的视口进行定位
2.固定定位的元素不会随网页的滚动条滚动
粘滞定位 sticky
---当元素的position属性设置为sticky时则开启了元素的粘滞定位
特点：大部分与相对定位一样
不同：使元素达到某位置时将其固定
2932
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
