1. 使用查询元素：HTML5元素周期表
2. 查询各种互联网标准：万维网联盟w3c。网址：w3.org
3. 查询官方文件：mozilla(MDN)

1. 在HTML想直接从直接从一行转到下一行:Ctrl 回车
2. 在HTML想直接从直接从一行转到上一行:Ctrl shift 回车
3. 加缩进：选择代码，tab 缩进：选择代码，shift tab
4. 元素的自动生成 以下(以标题为例):

h$*6>{$级标题} 

5. 乱数假文（lorem）：没有实际意义的文字主要用于测试。lorem不要使用大括号 以下(以段落为例):

p*3>lorem 

在lorem1:只生成一个单词(以此类推)

1. title：鼠标位置放在上面时，显示一个完整的描述，有点类似于文本框
2. id：文档中唯一的元素编号

1. 多个标题一次生成：

h$*6>{$级标题} 

“$:表示占位符。从1开始，每生成一个元素后，下一个自增1。 “*六、表示重复六次 “>表示子元素 {}

1. 生成一个段落

1. 无语义，可用于设计风格
2. span默认不换行
3. 过去，有些元素在显示时会独占一行(块级元素)，而有些元素不会(行级元素) HTML5.这种说法已经被抛弃(因为语义化而被抛弃)

1. 空白折叠:源代码中的连续空白字符(空格、换行、tab），页面显示将被折叠成空格
2. pre元素:不会空白折叠，什么是源代码？
3. 它通常用于在网页上显示一些代码

显示代码时，通常外套code元素，code代码区表示

4. pre元素本质:有默认css属性

1. 实体常用于显示保留字符(这些字符将被分析为 HTML 代码)和不可见字符(如不换行空格)
2. 实体格式：& 文本 ; 或 & 数字 ;
3. 常见实体：(MDN上搜索entity) “<” < “<” > " "  

hyper reference：跳转地址通常表示

1. 跳转地址(网址)
2. 跳转锚点(类似于网页中的目的）
3. 跳转网址要写全，跳转锚点要在id属性前加上#

连接：a[href="#chapter$"]*6>{章节$}
标题+段落：((h2[id="chapter$"]>{章节$})+p>lorem10)*6

4. 回到顶部：#后不加任何东西

<a href="#">回到顶部</a>

5. 功能链接：点击后，触发某个功能

• 触发JS代码：（javascript:）

<a href="javascript:alert('hello world!')">弹出你好</a>

• 发送邮件：（mailto:） 要求用户计算机上安装邮件发送软件：exchange等
• 拨号：（tel:） 手机端触发或电脑安装拨号软件
• 等等等等

表示跳转窗口位置 target的取值（通常两种）：

1. _self:在当前页面窗口中打开，默认值
2. _blank:在新窗口打开

全局属性，表示元素在文档中的唯一编号

1. 绝对路径：站外资源

• 协议名://主机名:端口号/路径

https://www.baidu.com/

2. 相对路径：站内资源

• 以./开头 ./ 表示当前资源所在目录 …/ 表示返回上一级 相对路径中./可以省略

1. src属性（source）：插入图片的地址（相对路径，绝对路径）
2. alt属性：当图片资源失效时，使用该属性的文字替代图片
3. 可以将图片元素和其他元素联合使用

• 和a元素连用（点击图片执行跳转）

    <a href="">
        <img src="" alt="">
    </a>

• 和map元素连用（点击图片某个区域执行跳转） 具体使用方法参考网路，或bilibili渡一教育.图片元素章节.13分钟
• 和figure元素连用（通常用于把图片、图片标题、描述包裹起来），为了语义化

1. video：视频
2. audio：音频
3. 一些属性： 布尔属性：不写或取值为属性名

• controls（布尔属性）：控制控件的显示
• autoplay（布尔属性）：自动播放
• muted（布尔属性）：静音播放
• loop（布尔属性）：循环播放

ol元素（父元素） li元素（子元素） type属性：列表的序号类型，可以不写默认为1（一般不用，用CSS描述） reverse属性（布尔属性）：反序 例：

<ol type="1">
   <li>first</li>
   <li>second</li>
</ol>

把ol改为ul 无序列表常用于制菜单或新闻列表

通常用于一些术语的定义 dl元素（父元素）：定义列表 dt元素（子元素）：术语的标题 dd元素（子元素）：术语描述

<dl>
   <dt>html</dt>
   <dd>超文本标记语言...</dd>
   <dt>c++</dt>
   <dd>编程语言...</dd>
</dl>

该元素代表一个区域，内部用于放置其他元素

没有语义

header元素：通常用于表示页头，也可以用于表示文章的头部 footer元素：通常用于表示页脚，也可以用于表示文章的尾部 article元素：通常用于表示文章正文 section元素：通常用于表示章节 aside元素：通常用于表示额外信息（侧边栏）

• 容器元素中可以包含任意元素
• a元素几乎可以包含任意元素
• 某些元素有固定的子元素（ul>li,ol>li,dl>dt+dd）
• 标题元素和段落元素不可以互相嵌套，并且不能包含容器元素
• 具体能否包含可以上MDN查询

例：

h2
{ 
        
    color: aqua;
    background-color: blue; 
}

CSS规则：选择器+声明块

• 选择器：选中元素
• 声明块 出现在大括号中，包含很多声明（属性），每一个声明（属性）表达了某一方面的样式

1. 内部样式表 书写在style元素中（如上例）
2. 内联样式表，元素样式表 直接书写在元素的style属性中
3. 外部样式表（开发最常使用） 将样式书写在外部独立的CSS文件中 需要连接自己写的CSS文件 例：

<link rel="stylesheet" href="./CSS/index.css">

• 外部样式可以减少重复代码书写
• 有利于浏览器缓存，从而提高页面响应速度
• 有利于代码分离（HTML和CSS）更容易阅读和维护

1. color 元素内部的颜色

• 预设值：定义好的单词
• 三原色（色值）：光学三原色（红、绿、蓝），每个颜色可以用0~255之间的数字来表达（色值）

rgb表示法：
color:rgb(57, 197, 187)
hex（16进制）表示法：
color:#39c5bb

2. background-color 元素背景颜色

3. font-size 元素内部文字的尺寸大小 两种单位： （1）px：像素，绝对单位 （2）em：相对单位，相对于父元素的字体大小

4. font-weight 文字粗细程度，可以取值数字，可以取值预设值

label：重要不能忽略的内容（默认加粗）

5. font-family 文字类型 必须用户计算机存在的字体才会显示，可以使用多个字体以匹配不同环境

font-family: consolas,微软雅黑,Arial,sans-serif

• sans-serif：非衬线字体（如果上述字体都没有，就让电脑自己选一个）

6. font-style 字体样式，通常用它设置字体倾斜 italic：斜体

i元素：特殊的文本（专业术语等）（实际使用中通常当图标） em元素：表示强调的元素

normal：正常

7. text-decoration 文本修饰，给文本加线

a元素：超链接 del元素：错误的内容 s元素：过期的内容

8. text-indent 首行文本缩进 可以书写数字表示缩进像素，也可以写几em表示缩进几个字体大小

9. line-height 每行文本的高度（该值越大，每行文本的距离越大） 设置行高为容器的高度，可以让单行文本垂直居中 行高可以设置为纯数字，表示当前数字的字体大小倍数

10. width 宽度

11. height 高度

12. letter-space 文字间隙

13. text-align 元素内部文字的水平排列样式（居左、中、右等）

帮助你精准的选中你想要的元素

1. ID选择器：选中的是对应ID值的元素（ID前加一个“#”）
2. 元素选择器：选中某个元素的所有（如上述例子）
3. 类选择器（最常见）：类似于C语言中的class，使用方便（ class前加一个“.”） 例：

head中（先加载，放body也行但不好）： .lei
{ 
        
    color: blue;
    font-size: small;
}
.st{ 
        
    text-align: center;
}

body中：
<h2 class="lei st">
    123
</h2>
<h2 class="lei">
    1
</h2>

4. 通配选择器 选中所有元素

*{ 
        
    color:red;
}

5. 属性选择器 根据属性名和属性值选中元素 例1：选中所有具有href属性的元素

[href]{ 
        
    color:red;
}

例2：选中所有href元素值等于https://www.baidu.com 的元素

[href="https://www.baidu.com"]{ 
        
    color:red;
}

还有很多写法，具体可以上MDN上查询

6. 伪类选择器 选中某些元素的某种状态

• link：超链接未被访问时的状态 写法同上

• visited：超链接已被访问时的状态 写法同上

• hover：鼠标移动上边的状态

/* 选中鼠标悬停时的a元素（a位置可以不写，即为所有元素） */
a:hover{ 
        
    color:red;
}

• active：激活状态，鼠标按下状态 写法同上

！写法要按顺序（爱恨法则）:l-v-h-a

7. 伪元素选择器

• before
• after 例: 选中span元素之前 content：插入文本 color：插入的文本颜色

span::before{ 
        
    content:"<";
    color:blue;
}

1. 后代元素 —— 空格
2. 子元素 —— >
3. 相邻兄弟元素 —— +
4. 兄弟元素 —— ~
5. 并且 —— .

• 举个例子(后代选择器)：

.me .he
{ 
        
    color: #39c5bb;
}

<div class="me">
    <p>Lorem.</p>
    <p class="he">Aut?</p>
    <p>Unde?</p>
</div>

多个选择器用逗号分隔，减少代码量

• 声明冲突：同一个样式多次运用到同一个元素
• 层叠：解决生名冲突的过程，浏览器自动处理

比较顺序如下：

1. 比较重要性 重要性从高到低：

• 作者样式表中的!important样式(一般不要加)

color:#39c5bb !important

• 作者样式表（开发者书写的样式）
• 浏览器默认样式表

2. 比较特殊性 看选择器 总体规则：选择器选择的范围越窄，越特殊 具体规则（讲透）：通过选择器，计算出一个4位数（xxxx）（256进1），谁大选谁 千位：如果是内联样式记为1，否则记为0 百位：等于选择器中所有id选择器的数量 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量 个位：等于选择器中所有元素选择器、伪元素选择器的数量

3. 比较源次序 代码书写靠后的胜出

4. 应用

• 重置样式表 书写一些作者样式，覆盖浏览器的默认样式 常见的重置样式表（网上的模板）normalize.css、reset.css、meyer.css

子元素会继承父元素的某些CSS属性 通常跟文字相关的属性都可以被继承（背景不会继承）

一个元素，从所有属性都没有值，到所有属性都有值这个计算过程，叫做属性值计算过程

特殊的两个CSS取值：

• inherit:手动（强制）继承，将父元素的值取出应用到该元素
• initial:初始值，将该属性的值设置为默认值

1. 确定声明值：参考样式表中没有冲突的声明，作为CSS的属性值
2. 层叠冲突：对样式表有冲突的声明使用重叠规则，确定CSS的属性值 1）比较重要性 2）比较特殊性 3）比较源次序
3. 使用继承：对仍没有值的属性，若可继承，则继承父元素的值

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子） 盒子类型：

• 行盒：display属性等于inline的元素
• 块盒：display属性等于block的元素

注：

1. 行盒在页面中不换行、块盒独占一行
2. display属性默认值为inline
3. 常见的块盒：容器元素、h1~h6、p
4. 常见的行盒：span、a、img、video、audio

无论是行盒还是块盒，都由下面几个部分组成，从内到外分别是：

1. 内容 content 属性width、height，设置的是盒子内容的宽高 内容部分通常叫做整个盒子的内容盒 content

2. 填充（内边距） padding 盒子边框到盒子内容的距离 属性：padding-left、padding-right、padding-top、padding-bottom 简写属性：padding

padding:上 左 下 右

padding:上下 左右

padding:上下左右

填充区 + 内容区 = 填充盒 padding-box

3. 边框 border 三个属性

• 边框宽度：border-width
• 边框样式：border-style
• 边框颜色：border-color CSS3：
• 边框弧度：border-radius (圆形为50%)

简写属性：border

border: 宽度 样式 颜色

边框 + 填充区 + 内容区 = 边框盒 border-box

4. 外边距 margin 边框到其他盒子的距离 属性：margin-left、margin-right、margin-top、margin-bottom 速写属性：margin

margin:上 左 下 右

margin:上下 左右

margin:上下左右

默认情况下，width和height设置的是内容盒宽高 衡量设计稿尺寸时，往往使用的是边框盒，但设置width和height时则是内容盒 解决方法：

1. 精确计算
2. CSS3：box-sizing

默认情况下，背景覆盖边框盒 可以通过background-clip进行修改

overflow属性，控制内容溢出边框后的处理方式 text-overflow属性，控制文本溢出边框后的处理方式 例：(文本溢出后，变为…)

text-overflow: ellipsis;

word-break属性，控制文字在什么位置断行

white-space属性是用来设置如何处理元素中的空白

常见的行盒：包含具体内容的元素 span、label、em、i、img、video、audio

1. 盒子沿着内容延申
2. 行盒不能设置宽高 （调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整）
3. 内边距（填充区） 水平方向有效，垂直方向不会实际占用空间
4. 边框 水平方向有效，垂直方向不会实际占用空间
5. 外边距 水平方向有效，垂直方向不会实际占用空间

display:inline-block 的盒子

1. 不独占一行
2. 盒模型中所有尺寸都有效

空白折叠，发生在行盒内部 或 行盒之间

非可替换元素：大部分元素，页面上显示的结果，取决于元素内容 可替换元素：少部分元素，页面上显示的结果，取决于元素属性,(img、audio、video…)

• 绝大部分可替换元素为行盒
• 可替换元素类似于行块盒，盒模型中所有尺寸都有效

• 盒模型：规定单个盒子的规则
• 视觉格式化模型（布局规整）：页面中多个盒子的排布规则 视觉格式化模型，大体分为以下三种：

1. 常规流
2. 浮动
3. 定位

常规流也成为，文档流、普通文档流、常规文档流 所有元素，默认情况下，都属于常规流布局 总体规则：块盒独占一行，行盒水平以此排列

• 包含快（containing block）:每个盒子都有它的包含快，包含快决定了盒子的排列区域 绝大部分情况下：盒子的包含快，为其父元素的内容盒

块盒

1. 每个块盒的总宽度，必须等于包含块的宽度 width属性默认值是auto（将剩余空间吸收） margin属性默认值是0（也可以设置为auto） width吸收能力大于margin 若宽度、边框、内边距、外边距计算后，仍有剩余空间，该剩余空间被margin-right全部吸收 · 在常规流中，块盒在其包含快中居中：设定宽度，左右margin设置为auto

2. 每个块盒垂直方向上的auto值 height ：auto适应内容的高度 margin ：auto表示0

3. 百分比取值 padding、weight、height、margin取值可以为百分比取值 以上所有百分比相对于包含块的宽度

4. 上下外边距合并 两个常规流块盒，上下外边距相邻，会进行合并 合并规则：两个值取最大值

1. 文字环绕
2. 横向排列

修改float的属性值为：

• left：左浮动，元素向上靠左
• right：右浮动，元素向上靠右

默认值为none

1. 当一个元素浮动后，该元素变为块盒（更改display属性为block）
2. 浮动元素的包含块，和常规流一样，为父元素的内容盒

1. 宽度为auto时，表示适应内容宽度
2. 高度为auto时，和常规流一样，为适应内容的高度
3. margin为auto，表示0
4. 边框、内边距，百分比设置与常规流一样

1. 左浮动的盒子靠上靠左
2. 右浮动的盒子靠上靠右
3. 浮动盒子在包含块中排列时，回避开常规流块盒
4. 常规流块盒在排列时，无视浮动盒子
5. 行盒在排列时，会避开浮动盒子

如果文字没有在行盒中，浏览器会自动生成一个匿名行盒包裹文字

6. 外边距不会发生合并

高度坍塌的原因：常规流盒子的自动高度，在计算时，不会考虑浮动盒子

解决方法：清除浮动（css属性clear）

• 默认值：none
• left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
• right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
• both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

一般解决方法：在所有的浮动盒子下面手动添加常规流元素，之后设置其clear属性，使其出现在所有浮动盒子下方，这样高度就不会坍塌

手动控制元素在包含块中的精准位置

涉及CSS属性：position

• 默认值：static ,静态定位（不定位）
• relative：相对定位
• absolute：绝对定位
• fixed：固定定位

定位元素：它的position属性的取值不是static

定位元素会脱离文档流（相对定位除外）

一个脱离了文档流的元素：

1. 文档中的元素摆放时，会忽略脱离了文档流的元素
2. 文档流中元素自动计算高度时，会忽略脱离了文档流的元素

绝对定位、固定定位一定为块盒 绝对定位、固定定位一定不是浮动 定位没有外边距合并

不会导致元素脱离文档流，只是让元素在原来的位置进行偏移

可以通过四个CSS属性对其设置位置

• left
• right
• top
• bottom

盒子的偏移不会对其盒子造成任何影响

一般为绝对定位提供包含块

1. 宽高为auto，盒子尺寸适应内容
2. 包含块变化：找祖先元素中第一个定位元素，该元素的填充盒为其包含块。若找不到，则他的包含块为整个网页（初始化包含块）

可以通过四个CSS属性对其设置位置 表示距离其包含块的距离

• left
• right
• top
• bottom

其他情况和绝对定位一样。

包含块不同：固定为视口（浏览器的可视窗口）

某个方向居中

1. 定宽（高）
2. 将左右（上下）距离设置为0
3. 将左右（上下）margin设置为auto

• 绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间

设置z-index，通常情况下，该值越大，越靠近用户

• 只有定位元素设置z-index有效
• z-index可以为负数，如果是负数，则遇到常规流元素会被常规流元素覆盖