本篇文章主要用来记录前端H5中html、css相关的知识点，主要是css的记录
html
首先html是标记语言，怎么理解呢，就是通过一个个的标签，来表达不同的意思，突出不同的样式，例如<a>标签表示链接,<p>标签表示段落等。
但是html发展到现在这个阶段，其实html在表现样式这方面越来越弱化，主要还是用来表示结构，样式部分都是由css来进行控制的。所以html部分我们主要介绍的是标签，样式控制部分在css中介绍
html基本结构
html文档的基本结构如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
</head>
<body>
<script>
</script>
</body>
</html>
head中放style样式，style标签用于引入css文件，或者直接写css语法 body的底部一般放script标签，用于js的引入。为什么放在底部呢，因为html文档是从上到下的顺序被解析的，所以js放到底部，这时dom结构就已经有了
html主要标签
- div 最重要的块元素标签
- span 行内元素
- input 输入框 有不同的type，例如button等
- a 链接
- img 图片
- ul li 列表 这个很常用
这些标签在项目中是比较常用到的，html主要是做结构用的，样式是css负责的事情
css
css中最主要的内容就是样式，布局，主要介绍这样几个内容： 选择器、盒子模型、boder、float浮动、position布局、flex布局等，主要还是介绍项目中经常用到的。
选择器
- 类选择器 "."标识符
.button {
}
- id选择器 "#"标识符
#button {
}
- 交集选择器 写在一起
/*class为button的div元素*/
div.button{
}
- 并集选择器 样式相同的一些元素可以写成并集选择器 以逗号分割
/*div 或者p元素*/
div, p {
}
- 后代选择器 以空格分开
/*选择div里面的p元素*/
div p {
}
- 子选择器 以>分割
/*p必须是div的子元素，这个要和后代选择器区分开，后代选择器可以是儿子的儿子，子选择器只能是儿子*/
div > p {
}
- 伪类选择器 伪类选择器主要介绍一下几个
:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */
注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。 love hate 爱上了讨厌 记忆法
- 伪元素 ::before ::after
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素
/*在span元素里面的前面加个伪元素*/
span::before {
content:"1"
}
层叠性 继承性 优先级
- 层叠性
如果发生样式冲突，会按照权重来决定应用哪个样式
- 继承性
子元素可以继承父元素的某些属性，只有部分属性是可以被继承的
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
- 优先级
解决样式发生冲突的时候，使用哪个的问题。根绝下表计算优先级，使用优先级大的
| 继承或者* 的贡献值 | 0,0,0,0 |
|---|---|
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 | ∞ 无穷大 |
注意：
1.数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
2.继承的 权重是 0
总结优先级：
1. 使用了 !important声明的规则。
2. 内嵌在 HTML 元素的 style属性里面的声明。
3. 使用了 ID 选择器的规则。
4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
5. 使用了元素选择器的规则。
6. 只包含一个通用选择器的规则。
7. 同一类选择器则遵循就近原则。
