HTML&CSS
HTML
==快捷键记录==
! + 回车：建构框架 alt + b：用浏览器打开 ctrl + d：选中
ctrl + /：注释与取消注释
标签结构
标签由< ,>, /,以及英文单词或字母组成，<>包括起来的英文单词或字母叫做标签名。
标签有==双标签==和==单标签==之分，常见的为双标签 （需要确定开始及结束） ，前部分叫开始标签，后部分叫结束延迟，两部分之间包裹内容，少数为单标签 （不需要确定开始及结束） ，只有一部分，自成一体，无法包裹内容。
标签关系
嵌套关系（父子关系）
<head>
<title></title>
</head>
并列关系（兄弟关系）
<head></head>
<body></body>
排版标签
标题标签
标题使用==h系列==标签，分1~6级标题，重要程度从1到6递减。
特点：
- 文字加粗
- 文字变大且从h1到h6逐渐减小
- 独占一行
段落标签
段落使用==p系列==标签，用于分段显示
特点:
- 段落之间存在间隙
- 独占一行
换行标签：代码：<br>
水平分割线：代码：<hr>
文本格式化标签
加粗：b，strong
下划线：u，ins
倾斜：i，em
删除线：s，del
媒体标签
图片标签
代码<img src="" alt="">
特点：
- 单标签
- img标签需要展示对应的效果，需要借助标签的属性进行设置
替换文本（alt） ：图片加载失败时显示的文本，成功时则不显示
提示文本（title） ：鼠标悬停时显示的文本（不仅可用于图片标签，也可用于其他 标签）
高度和宽度（width和height） ：如果只设置width或者height中的一个，则另一 项会等自动比例缩放
路径
路径分绝对路径与相对路径
绝对路径：目录的绝对位置下，可直接到达目标位置，通常从盘符开始的路径
相对路径：
分类：
-
同级目录
方法1：
<img src="目标文件.jpg">方法2：
<img src="./目标文件.jpg"> -
下级目录
方法：
<img src="下级文件夹名/目标图片名.jpg"> -
上级目录
方法：
<img src="../目标图片名.jpg">（点的数量决定返回上几级）
音频标签
代码：<audio src="音频文件路径" controls></audio>
常见属性：
controls：显示播放的控件 autoplay：自动播放（部分浏览器不支持） loop：循环播放
音频文件目前支持三种格式：mp3,wav,ogg
视频标签
代码：<video src="视频文件路径" controls></video>
常见属性同音频
视频标签目前支持三种格式：MP4，WebM,Ogg
链接标签
代码：<a href="跳转地址">超链接</a>
常见属性：
target：目标网页的打开形式
取值为“_self”的时候为默认值，在当前窗口中跳转（覆盖原网页）
取值为“_blank”的时候在新窗口中跳转（保留原网页）
表格
列表
无序列表：
标签：ul：表示无序列表的整体，用于包裹标签。
li：表示无序列表的每一项，用于包含每一行的内容
注意：ul标签中只允许包含li标签，li标签可以包含任意内容
有序列表：
标签：ol：表示有序列表的整体，用于包裹li标签
li：表示有序列表的每一项，用于包含每一行的内容
ol与li关系同ul与li
自定义列表：
标签：dl：表示自定义列表的整体，用于包裹dt/dd标签
dt：表示自定义列表的主题
dd：表示自定义列表的针对主题的每一项内容
注意：dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容
表格标签
==基本标签： ==
table：表格整体，可用于包裹多个tr
tr：表格每行，可用于包裹td
td：表格单元格，可用于包裹内容
嵌套关系：table > tr > td
属性：
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
标题和表头单元格标签：
| 标签名 | 名称 | 说明 |
|---|---|---|
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th | 表头单元格 | 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 |
注意：
- caption标签写在table标签内部
- th标签写在tr标签内部(用于替换td标签)
表格的结构标签
| 标签名 | 名称 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
注意：
- 表格结构标签用于包含tr标签
- 表格的结构标签可以省略
合并单元格
左上原则：上下合并保留最上的，删除其他；左右合并保留最左的，删除其他
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元格的个数 | 跨列合并，将多列的单元格水平合并 |
注意：
只有同一个结构标签中的单元格才能合并，不能跨结构标签合并
表单标签
input系列标签
input标签通过type属性值不同展示不同的效果
| TYPE | 说明 |
|---|---|
| text | 文本框，输入单行文本 |
| password | 密码框，输入密码 |
| radio | 单选框，多选一 |
| checkbox | 多选框，多选多 |
| file | 文件选择，用于之后上传文件 |
| submit | 提交按钮，用于提交 |
| reset | 重置按钮，用于重置 |
| button | 普通按钮，默认无功能，之后配合js添加功能 |
注意：
- 实现按钮功能需配合form标签使用
- form的使用方法：用form标签把表单标签一起包裹起来
placeholder： 占位符，提示用户输入内容，用于text、password
name：分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中（用于radio、checkbox）
checked：默认选中（同上）
multiple：可同时上传多个文件（用于file）
value：用于给按钮添加显示文字（用于submit、reset、button）
select下拉菜单标签
标签组成：
- select标签：下拉菜单的整体
- option标签：下拉菜单的每一项
常见属性：
selected：下拉菜单的默认选中
####textarea文本域标签
标签名：textarea
常见属性：
- cols：规定了文本域内可见宽度
- rows：规定了文本域内可见行数
注意：右下角可以拖拽改变大小
label标签
标签名：label
使用方法1:
- 使用label标签把内容（如：文本）包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
使用方法2：
- 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
性别：
<input type="radio" name="sex" id="nan"><label for="nan">男</label>
<!-- 此处采用方法1 -->
<label> <input type="radio" name="sex">女</label>
<!-- 此处采用方法2 -->
</body>
</html>
语义化标签
没有语义的标签
div：一行只显示一个
span：一行可以显示多个
有语义的标签
有语义的布局标签（手机端适用） ：
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
###字符实体
常见字符实体：
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 |  ； | |
| < | 小于号 | <； |
| 大于号 | >； | |
| & | 和 | &； |
| " | 引号 | "； |
| ' | 撇号 | &apos；（IE不支持） |
| © | 版权 | ©； |
| § | 小节 | §； |
CSS
==CSS来源==
- 作者样式
- 浏览器样式
产生冲突时:
- 通过来源确定样式,按照：作者 > 浏览器
- 同一个来源中,通过优先级判断(!important > 行内样式 > id选择器 > 类选择器，属性选择器，伪类选择器 > 依据类型选择(标签名，伪元素) > 通配符)
- 同优先级，后来的覆盖前面的
所有标签，表现出来的时候，它拥有所有css声明，所有元素拥有所有属性
==css开发技巧==
先写一些预设的功能
CSS含义：层叠样式表
作用：给页面中的HTML标签设置样式
语法规则
CSS写在style标签中，style标签一般写在head标签里面，title标签下面
写法：选择器（选择的标签名） + {CSS属性（属性名加属性值）;}
引入方式：
- 内嵌式：CSS写在style标签中
style标签可写在任意位置，但是通常约定写在head标签中
- 外联式：CSS写在一个单独的.css文件中
需要通过link标签在网页中引入
- 行内式：CSS写在标签的style属性中
配合js使用
基础选择器
标签选择器
结构：==标签名=={css属性名：属性值}
注意：
- 标签选择器选择的是一类标签，而不是单独某一个
- 标签选择器无论嵌套关系有多深，都能找到对应的标签
类选择器
结构：.类名{css属性名：属性值}
注意：
- 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
- 一个标签可以同时有多个类名，类名之间以空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签
id选择器
结构：#id属性值{css属性名：属性值；}
注意：
- 所有标签上都有id属性
- id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
通配符选择器
结构：*{css属性名：属性值；}
作用：找到页面中所有的标签，设置样式
注意：开发中使用极少，只会在极特殊情况下才会用到
字体和文本样式
字体样式：
字体大小：font-size 取值：数字+px（谷歌浏览器默认文字大小是16px）
字体粗细：font-weight 取值：1. 关键字：normal（正常）bold（加粗） 2.纯数 字：1~900的整百数：400-->正常，700-->加粗
字体样式（是否倾斜） ：font-style 取值：normal（正常） italic（倾斜）
字体类型：font-family 取值：具体字体/字体系列
渲染规则：
- 从左往右按顺序查找，如果电脑未安装该字体则显示下一个字体
- 如果都不支持，此时会根据操作系统显示最后字体系列的默认字体
注意：
- 如果字体名称中存在多个单词则推荐使用引号包裹
- 最后一项字体系列不需要引号包裹
- 网页开发时，尽量使用系统常见自带字体
字体类型：font连写 取值：font：style weight size family;
- 只能省略前两个，如果省略了相当于设置了默认值
- 要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面
文本样式：
文本缩进：text-indent
取值：数字+px/数字+em（1em=当前标签的font-size的大小）
文本水平对齐方式：text-align
取值：
| 属性值 | 效果 |
|---|---|
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
注意：视频等需要把text-align加在父标签上
文本修饰：text-decoration
取值：
| 属性值 | 效果 |
|---|---|
| underline | 下划线（常用） |
| line-through | 删除线（不常用） |
| overline | 上划线（几乎不用） |
| none | 无装饰线（常用） |
- 常用text-decoration : none; 来清除a标签默认的下划线
行高：
属性名：line-height
取值：
- 数字 + px
- 倍数（当前标签font-size的倍数）
若使用font连写，格式为：
font: style weight size/line-height family;
选择器进阶
后代选择器：空格
语法：选择器1 选择器2{css}
作用：选择父元素后代中满足条件的元素
结果：在选择器1所找到标签的后代中找到满足选择器2的标签，设置样式
子代选择器：>
语法：选择器1>选择器2{css}
作用：选择父元素子代中满足条件的元素
结果：在选择器1所找到标签的子代中找到满足选择器2的标签，设置样式
子代只包括“儿子”
并集选择器：,
语法：选择器1,选择器2{css}
作用：同时选择多组标签，设置相同的样式
结果：找到选择器1和选择器2选中的标签，设置样式
- 并集选择器中的每组选择器通常一组写一个，提高代码的可读性
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
交集选择器
语法：选择器1选择器2 { css }
作用：选中页面中 同时满足多个选择器的标签
结果：（既又原则）找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式
注意点：
- 交集选择器中的选择器之间是紧挨着的，没有东西分隔
- 交集选择器中如果有标签选择器，标签选择器必须写在最前面
hover伪类选择器
语法：选择器:hover { css }
作用：选中鼠标悬停在元素上的状态，设置样式
emmet语法
作用：通过简写语法，快速生成代码
语法：
| 记忆 | 示例 | 效果 |
|---|---|---|
| 标签名 | div | <div></div> |
| 类选择器 | .red | <div class="red"></div> |
| id选择器 | #one | <div id="one"></div> |
| 交集选择器 | p.red#one | <p class="red" id="one"></p> |
| 子代选择器 | ul>li | <ul><li></li></ul> |
| 内部文本 | ul>li{li的内容} | <ul><li>li的类容</li></ul> |
| 创建多个 | ul>li*3 | <ul><li></li><li></li><li></li></ul> |
###背景相关属性
背景颜色
属性名：background-color（bgc）
属性值：颜色取值：关键字、rgb表示法、rgba表示法、十六进制……
注意点：
- 背景颜色默认值是透明： rgba(0,0,0,0) 、transparent
- 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
背景图片
属性名：background-image（bgi）
属性值：background-image: url('图片的路径');
注意点：
- 背景图片中url中可以省略引号
- 背景图片默认是在水平和垂直方向平铺的
- 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
背景平铺
属性名：background-repeat（bgr）
| 取值 | 效果 |
|---|---|
| repeat | （默认值）水平和垂直方向都平铺 |
| no-repeat | 不平铺 |
| repeat-x | 沿着水平方向平铺 |
| repeat-y | 沿着垂直方向平铺 |
背景位置
属性名：background-position（bgp）
属性值：background-position: 水平方向位置 垂直方向位置；
-
方位 :
- 水平：left，center，right
- 垂直：top，center，buttom
-
坐标（数字+px）
-
坐标系：
- 原点（0,0）：盒子的左上角
- x轴：水平向右
- y轴：垂直向下
-
操作：将图片左上角与坐标点重合
-
连写形式
属性名：background（bg）
属性值：单个属性值的合写，取值之间以空格隔开
书写顺序：推荐：background：color image repeat position
元素显示模式
块级元素
显示特点：
- 独占一行（一行只能显示一个）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
行内元素
显示特点：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
代表标签：a、span 、b、u、i、s、strong、ins、em、del...
行内块元素
显示特点：
- 一行可以显示多个
- 可以设置宽高
代表标签：input、textarea、 button、select……
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
==是什么元素取决于样式（CSS）而不是声明（HTML） ==
####元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
| 属性 | 效果 | 使用频率 |
|---|---|---|
| display: block | 转换成块级元素 | 较多 |
| display: inline-block | 转换成行内块元素 | 较多 |
| display: inline | 转换成行内元素 | 极少 |
CSS特性
继承性
特性：子元素有默认继承父元素样式的特点（子承父业）（自身若本来就有该属性则不会继承）
可以继承的常见属性(文字控制属性都可以继承)
- color
- font-style、font-weight、font-size、font-family
- text-indent、text-align
- line-height
注意：可以通过调试工具判断样式是否可以继承
层叠性
特性：
- 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
- 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
注意：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
优先性
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式：
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
注意：
- !important写在属性值的后面，分号的前面！
- !important不能提升继承的优先级，只要是继承优先级最低！
- 实际开发中不建议使用 !important 。
权重叠加计算
场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
（行内样式的个数，id选择器的个数，内选择器的个数，标签选择器的个数）
比较规则：
- 先比较第一级数字，如果比较出来了，之后的统统不看
- 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
- 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
- !important如果不是继承，则权重最高
盒子模型
盒子的概念:
- 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
- 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
盒子模型:
CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型
内容的宽度和高度
作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
属性：width / height
常见取值：数字+px
边框（border）
作用：给设置边框粗细、边框样式、边框颜色效果
单个属性：
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数字+px |
| 边框样式 | border-style | 实线：solid、虚线：dashed、点线：dotted |
| 边框颜色 | border-color | 颜色取值 |
连写形式：
属性名：border
属性值：单个取值的连写，取值之间以空格隔开
如：border : 10px solid red;
快捷键：bd + tab
单方向设置：
场景：只给盒子的某个方向单独设置边框
属性名：border - 方位名词
属性值：连写的取值
盒子实际大小初级计算公式：
盒子实际大小初级计算公式：
盒子宽度 = 左边框 + 内容宽度 + 右边框
盒子高度 = 上边框 + 内容高度 + 下边框
注意：
- 设置width和height是内容的宽高
- 设置border会撑大盒子
内边距：
作用：设置 边框 与 内容区域 之间的距离
属性名：padding
常见取值：
| 取值 | 实例 | 含义 |
|---|---|---|
| 一个值 | padding: 10px; | 上右下左都设置为10px |
| 两个值 | padding: 10px 20px; | 上下10px，左右20px |
| 三个值 | padding: 10px 20px 30px; | 上10px，左右20px，下30px |
| 四个值 | padding: 10px 20px 30px 40px; | 上10px，右20px，下30px，左40px |
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
单方向设置：
场景：只给盒子的某个方向单独设置内边距
属性名：padding - 方位名词
属性值：数字 + px
==盒子实际大小终极计算公式： ==
盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
内减模式
box-sizing: border-box;
外边距
作用：设置边框以外，盒子与盒子之间的距离
属性名：margin
取值同内边距
单方向设置同内边距
清除默认样式
*{
margin: 0;
padding: 0;
}
外边距折叠现象 – 合并现象
场景：垂直布局 的 块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
解决方法：避免，只给其中一个盒子设置margin即可
外边距折叠现象 – 塌陷现象
场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
结果：导致父元素一起往下移动
解决方法：
- 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
- 给父元素设置overflow：hidden
- 转换成行内块元素
- 设置浮动
浮动
结构伪类选择器
作用：根据元素在HTML中的结构关系查找元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素
| 选择器 | 说明 |
|---|---|
| E:first-child{} | 匹配父元素中的第一个子元素，并且是E元素 |
| E:last-child{} | 匹配父元素中最后一个子元素，并且是E元素 |
| E:nth-child(n){} | 匹配父元素中第n个子元素，并且是E元素 |
| E:nth-last-child(n){} | 匹配父元素中倒数第n个子元素，并且是E元素 |
通过n可以组成常见公式：
| 功能 | 公式 |
|---|---|
| 偶数 | 2n、even |
| 奇数 | 2n+1 、2n-1 、odd |
| 找到前五个 | -n+5 |
| 找到第五个以后 | n+5 |
nth-of-type结构伪类选择器：
E:nth-of-type(n){} ：只在父元素的同类型（E）子元素范围中，匹配第n个
伪元素
伪元素：一般页面中的非主体内容可以使用伪元素
区别：
- 元素：HTML 设置的标签
- 伪元素：由 CSS 模拟出的标签效果
| 伪元素 | 作用 |
|---|---|
| ::before | 在父元素内容的最前添加一个伪元素 |
| ::after | 在父元素内容的最后添加一个伪元素 |
注意：
- 必须设置content属性才能生效
- 伪元素默认是行内元素
标准流
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
浮动
作用： 早期的作用：图文环绕；现在的作用：网页布局
代码：属性名：float，属性值：left（左浮动），right（右浮动）
特点：
- 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动元素有特殊的显示效果
清除浮动
含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
原因：子元素浮动后脱标 → 不占位置
目的：需要父元素有高度，从而不影响其他网页元素的布局
清除浮动的方法：
-
直接设置父元素高度（有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块）
-
额外标签法 （会在页面中添加额外的标签，会让页面的HTML结构变得复杂）
操作：
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置 clear:both
-
单伪元素清除法：用伪元素替代了额外标签
-
双伪元素清除法
-
给父元素设置overflow : hidden
