标签
根据有无闭合标签可分为：单标签、双标签
单标签：meta
双标签：html、head、body、div、span
根据页面渲染可分为：块标签、行标签
div(块标签)：独占一行；不设置高时随内容长度；不设置宽时与父盒子等宽；可嵌套
span(行标签)：在一行排列超出父盒子宽度会换行；若单个行标签超出则不换行；不能设置宽高随内容长度变化
css
1. 文件路径的编写
本层文件 => ./文件名.后缀名
上层文件 => ../文件名.后缀名
上上层问价 => ../../文件名.后缀名
下层文件 => 文件夹名／文件名．后缀名
2. css的三种引入方式
1. 行间样式
在标签中通过style属性来写css代码
优点：
优先级高 方便（哪里需要写哪里）
缺点：
不利于维护 显得页面太过于杂乱
2. 内联样式
将css代码写在页面的<style></style>标签中
从编译的将读来讲 style标签可以写在html根标签的任意位置
但是 前端代码规范中规定 一般将style标签写在head的闭合标签的上面
优点：
可复用性高 代码整洁 利于维护
缺点：
会使页面变得很长，所以一般的小型项目及页面 推荐使用内联样式
3. 外联样式
在外部创建一个.css文件，并在html文件中 head 标签内 title标签下 使用link标签引入（link标签中 href属性内 写入要引入的css的文件路径）
优点：
逻辑清晰 页面整洁 易于维护 可复用性高
缺点：
加大了项目所占内存，所以一般多页面项目 推荐使用外联样式
优先级：
行间>内联>外联
2.1 css选择器
-
命名规范 按照W3C规范 命名有以下几种原则（包括类名、文件夹及文件名等所能遇到的所有命名）：
a. 命名中 只能存在 字母、数字、下划线
b. 命名必须以字母开头
c. 命名必须遵守语义化 （好理解 容易记）
d. 不要用拼音及拼音缩写 尽量使用单词两种格式： a. 驼峰命名 例如： 商品列表 商品 => goods 列表 => list => goodsList(小驼峰) 推荐 => GoodsList(大驼峰) b. 地中海明明(匈牙利命名) 例如： 商品列表 => goods_list
2.2类选择器（class选择器）
当同种标签过多时 我们可以使用标签中的class属性给标签起个名字（类名）
然后再css中使用.类名 的方式选择具体的标签并编写样式
一个标签可以有多个类名 中间以空格隔开
类名 可以重复使用
<style>
.d1{
样式名：值
}
</style>
2.3标签选择器
直接在 style中使用标签名的方式来选择具体标签
<style>
.d1{
样式名：值;
}
</style>
2.4 id选择器
需要在标签内使用id这个属性来设置id名
然后在style标签中使用 #id名 的形式选择具体标签
<style>
#first{
}
</style>
注意！！！！！！
id具有唯一性 整个页面中 id不能重复！！！！！
通常情况下 一个标签只能有一个id
不建议使用 id 来写css
区分理解 class 和 id
人名相当于 class 人名可重复
身份证号相当于 id 身份证号不可重复
/* 标签选择器/
div{
width: 200px;
height: 200px;
background: #000;
}
/ 类选择器/
.d4{
width: 80px;
height: 120px;
background: skyblue;
}
/ id选择器/
#first{
width: 50px;
height: 50px;
}
/ 通配符选择器 */
*{
background-color: aquamarine;
}
群组选择器
可以配合着 class 标签 id 等选择器一起使用
多个选择器之间以逗号隔开
选择器1，选择器2，选择器3{
}
组合选择器
详细的描述一个标签的属性或标签名
有几个class就写几个class 写得越详细优先级越高
注意！！！中间不能有空格！！！
后代选择器
父选择器与子孙选择器之间以空格隔开
例如
.f1 .f2 .f3{
}
子选择器
父选择器与子选择器之间以 > 隔开
注意！！
只能选择直属子元素 不能选择后代元素
.f1>.f2{
}
