目录
1 标签
用尖括号括起来的就被称为标签
1.1 标签分类
- 单标签：有开始标签或者结束标签
- 双标签：有开始标签和结束标签
1.2 标签关系
- 嵌套关系（父子关系） html与head/body
- 并列关系（兄弟关系） head与body
<html>
<head></head>
<body>
今天周六
</body>
</html>1.3 常见标签
（1）标题标签 <h1> ~ <h6>
- 会让字体变大变粗
- h1~h6 重要性递减
- 独占一行（默认宽度100%）
（2）段落标签 <p>
- 段落与段落之间存在间隙（黄色区域：外边距）
- 独占一行（默认宽度100%）
（3）换行标签 <br>
（4）水平线标签 <hr>
（5）文字格式化标签
- 不独占一行（从左往右依次排列）
文本加粗 <b>、<strong>
斜体 <i>、<em>
下划线 <u>、<ins>
删除线 <s>、<del>
（6）特殊字符
- 空格符 只会出现在文字当中
- < 左箭头
- > 右箭头
2 盒子标签 <div>、<span>
- 属性：写在开始标签里
- 格式：属性 = "属性值" （多个属性之间用空格隔开）
2.1 div标签
- 可以设置宽高
- 独占一行
<div style = "width: 200px; height: 100px; background-color:antiquewhite; ">今天周六</div>
<div>我是div标签</div>
<div style = "width: 200px;height: 100px;background-color:blue;">
<div style = "width: 100px;height: 50px;background-color: aquamarine;"></div>
</div> 
2.2 span标签
- 设置宽高不生效
- 不独占一行
<span style = "width: 200px;height: 100px;background-color:antiquewhite;">我是span标签</span>
<span>我是span标签2 </span>
<br>
<br>
<span style = "color:brown;">今天周六</span>，
<span style = "color:blueviolet;">12345678</span> 
3 图像标签 <img>
- 可以设置宽高
- 不独占一行
属性：
- src 引入图片地址（见 4 路径）
- title 鼠标悬停时的提示信息
- alt 图片加载失败时的提示信息
<img src ="https://img1.baidu.com/it/u=3184847983,3621277217&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=554">
<img src ="https://tse2-mm.cn.bing.net/t" alt = "加载失败">
<img src ="https://tse2-mm.cn.bing.net/th/id/OIP-C.6vByiRxGnLemP8pHXTJX5wHaHU?w=187&h=185&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt = "加载失败" title = "修勾"> 
4 路径
4.1 绝对路径
- 网络地址 https://······
- 本地磁盘 C:\Users\penguin\Desktop\day01\img······
<!-- 网络地址 -->
<img src="https://img1.baidu.com/it/u=3622442929,3246643478&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665334800&t=32fc8f0a742874ae750f14f937b6cb6a" alt="">
<!-- 本地磁盘 -->
<img src="C:\Users\penguin\Desktop\day01\img\1.webp" alt="">4.2 相对路径
- ./ 当前文件所在的文件夹
- / 放在后面表示进入文件夹，放在前面表示根目录（浏览器会识别成C盘）
- ../ 当前文件所在文件夹的上一级文件夹
<!-- 相对路径 -->
<img src="./img/2.webp" alt="">5 链接标签 <a>
- 设置宽高不生效
- 不独占一行
5.1 属性
- href 引入链接地址
- target 控制页面跳转方式
_self 在当前页面发生跳转（默认）
_blank 新开一个页面发生跳转
<!-- 网络地址 (加上https://)-->
<a href="https://www.baidu.com">百度一下</a>
<!-- 本地文件 （路径）-->
<a href="./09-图像标签.html">图像文件</a>
<!-- 新开页面跳转-->
<a href="https://www.baidu.com" target="_blank">百度一下</a>5.2 写法规范
a标签不能嵌套a标签，可以嵌套其他任何元素
<a href="https://www.baidu.com">
<a href="https://www.sina.com">百度or新浪</a>
</a>
<!-- 会跳转到新浪 -->5.3 空链接 #
<a href="#">空链接</a>5.4 简单的下载
<a href="./img.zip（文件名）">下载文件</a>6 列表标签
- type 序号的类型【1 A a i I】
- start 从几开始
- reversed 序号反转
6.1 有序列表 ol > li
ol 下面只能嵌套 li 标签
<ol type="I" start="3" reversed>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ol>6.2 无序列表 ul > li
ul 下面只能嵌套 li 标签
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>6.3 自定义列表 dl > dt + dd
<dl>
<dt>选购指南</dt>
<dd>手机</dd>
<dd>电视</dd>
<dd>平板</dd>
<dd>生活</dd>
</dl>6.4 清除列表默认样式
<style>
li {
list-style: none;
}
</style>7 input输入框 <input>
- 可以设置宽高
- 不独占一行
<input type="text" style="height: 200px;width:200px;" value="xioo" name="text">
<input type="password" name="luanx">
<input type="text" placeholder="请输入账号" maxlength="10">
<!-- 单选框radio -->
<input type="radio" name="sex" id="man" value="1"><label for="man">男</label>
<input type="radio" name="sex" id="woman" value="0"><label for="woman">女</label>
<!-- 复选框 checkbox -->
<input type="checkbox" name="hobby" id="" checked>王者
<input type="checkbox" name="hobby" id="" disabled>原神
<input type="checkbox" name="hobby" id="">吃鸡
<!-- 文件上传 -->
<input type="file" value="文件上传" >
<input type="file" value="文件上传" multiple>
<!-- 按钮 -->
<input type="button" value="点击">
<!-- 图片形式的上传按钮 -->
<input type="image" src="./img/1.png" alt="">
<input type="submit" value="提交">8 CSS的引入方式
8.1 行内引入
在 开始标签 里面写 style属性
<body>
<div style="width: 200px;height:200px;"></div>
</body>8.2 内部引入
在 head标签 里面写 style标签，style标签里面写属性
<head>
<style>
div {
background-color: aqua;
}
</style>
</head>8.3 外部引入
在 head标签 里面写 link标签，link标签里面的 href属性 引入css文件
<head>
<link rel="stylesheet" href="./css/index.css">
</head>
8.4 优先级
- 行内引入 > 内部引入 = 外部引入
- 优先级相同的情况下，最后一次被执行的引入方式优先级高
9 基础选择器
9.1 标签选择器
会选择页面上所有同名的标签
作用：一般用来清除默认样式
a {
text-decoration: none;
}
div {
height: 200px;
width: 200px;
background-color: red;
}9.2 类选择器
选择所有同名的类名
.demo .demo1{
background-color: green;
}9.3 id选择器
#test {
color: pink;
}9.4 通配符选择器
会选择页面上所有的元素
* {
margin:0;
padding:0;
}9.5 优先级
行内 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
10 文字属性
（1）字体颜色 color
（2）字体大小 font-size
（3）字体粗细 font-weight
（4）字体样式 font-style
（5）字体 font-family
（6）缩写 font
color: rgb(82, 51, 12);
font-size: 12px;
font-weight: normal;
font-style:italic;
font-family:"宋体";
font: oblique bold 16px "隶书" ;
// 斜体 加粗 字号 字体样式11 文本属性
（1）文本对齐方式 text-align
（2）文本方向 direction
（3）文本修饰 text-decoration
（4）文本转换 text0transform
（5）文本缩进 text-indent
（6）文本阴影 text-shadow
（7）字符间距 letter-spacing
（8）字间距 word-spacing
（9）行高 line-height
（10）垂直居中 vertical-align
12 伪类选择器-链接伪类
- :link 未访问过的链接
- :visited 已访问过的链接
- :hover 鼠标滑过的样式
- :active 鼠标点击的样式
13 复合选择器
13.1 交集选择器
// 既是div标签的，又是在son的类中的
div.son {
color: yellow;
}13.2 并集选择器
// fa类以及son类中的内容
.fa,.son {
color: red;
}13.3 子代选择器
// fa类中的son类下的所有p标签
.fa>.son>p {
color: pink;
}13.4 后代选择器
// fa类下的：son类后代中的p标签，以及所有的span标签
// 也可以写成 span，.fa>.son p
.fa>.son p,span{
color: red;
}13.5 兄弟选择器
// 选中与fa类紧紧相连的div标签（fa类本身并没有被选择）
// 若相邻的下一个“兄弟”不是div标签，则没有任何选择
.fa+div {
color: red;
}// 选中fa类后面所有的兄弟div标签（fa类本身并没有被选择）
// 没有相邻与否的位置要求
.fa~div {
color: red;
}13.6 属性选择器
// type属性为 password 的所有标签
[type="password"] {
background-color: red;
}
// class属性中，属性值以 ab 作为开头的所有标签
[class^="ab"] {
background-color: yellow;
}
// class属性中，属性值中包含有 d 的所有标签
[class*="d"] {
background-color: green;
}
// class属性中，属性值以 e 作为结尾的所有标签
[class$="e"] {
background-color: blue;
}14 CSS三大特性
（1）层叠性
在优先级相同的情况下，写在后面的样式会覆盖前面的相同样式
（2）继承
- 以 color / font / line / text 为开头的会被继承
- 类似 a标签 这种带有自身特点的，不会受继承影响 （ 例如 a标签 不会继承color ）
（3）优先级（权重）
15 display显示模式
15.1 display：block
将元素显示为块级元素
- 独占一行（默认宽度100%）
- 四个方向的 margin / padding 生效
- 可以设置宽高
15.2 display：inline
将元素显示为行内元素
- 不独占一行
- 垂直方向上的 margin / padding 不生效，水平生效
- 设置宽高不生效
15.3 display：inline-block
将元素显示为行内块级元素
- 不独占一行
- 四个方向的 margin / padding 生效
- 可以设置宽高
15.4 display：none
元素消失（位置消失）
如果给一个元素设置了 display: none，那么该元素以及它的所有后代元素都会隐藏。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。
15.5 visibility：hidden
元素消失（位置依然存在）
给元素设置 visibility: hidden 也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。
16 盒子模型
标准盒子模型： content(height + width) + padding + border + margin
怪异盒子模型： (content+padding+border)（height+wdith） + margin
标准盒子 转 怪异盒子：box-sizing:border-box
17 浮动 float
会尽可能向左浮动或者向右浮动，直到碰到另一个元素的边框壁就停止浮动
float: right;
float: left;18 定位 position
position: static; //静态定位（清除定位）
position: relative; //相对定位
position: absolute; //绝对定位
position: fixed; //固定定位
// 偏移量： left / bottom / top / right18.1 相对定位 relative
- 相对于自身进行偏移
- 原来的位置依然存在，不会对其他元素的排列布局造成影响
position: relative;B 相对于 A 进行偏移
- top B顶部距离A顶部的距离
- right B右边距离A右边的距离
- left B左边距离A左边的距离
- bottom B底部距离A底部的距离
18.2 绝对定位 absolute
- 脱离文档流，原来的位置消失
（1）若父级或者祖先元素存在非 static 定位，则相对于父级或者祖先元素进行定位
.fa {
position: relative;
}
.son {
position: absolute;
}（2）若父级或者祖先元素没有定位或者为static定位，则相对于浏览器进行定位
.fa {
position: static;
}
.son {
position: absolute;
}18.3 固定定位 fixed
- 脱离文档流，原来的位置消失
- 始终相对于浏览器进行定位
position: fixed;18.4 子绝父相
如果一个元素要使用定位，一般将 该元素 设置为绝对定位，将其 父元素或祖先元素 设置为 相对定位，让 该元素 相对于 父级或者祖先元素 进行定位。
.fa {
position: relative;
}
.son {
position: absolute;
}
117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
