前端学习笔记

HTML&CSS笔记 {ignore}

查询资料的途径

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：只生成一个单词（以此类推）

HTML中的常见元素的使用方法和属性

一些全局属性

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

标题元素——h元素（h1~h6）

1. 一次性生成多个标题：

h$*6>{$级标题}

“$”：表示占位符。从1开始，每生成1个元素后，下以此就自增1。
“*6”：表示重复6遍
“>”：表示子元素
“{}”：其中为标题的内容为普通文本

段落元素——p元素

1. 生成一个段落

无语义元素——span元素

1. 没有语义，可用于样式的设计
2. span默认不换行
3. 以前：某些元素在显示是会独占一行（块级元素），而某些元素不会（行级元素）
   HTML5中，已经弃用这种说法（由于语义化，所以弃用）

预格式化文本元素（无语义）——pre元素

1. 空白折叠：在源代码中的连续空白字符（空格、换行、tab），在页面显示是会被折叠为一个空格
2. pre元素：不会进行空白折叠，源代码是什么就是什么
3. 通常用于在网页中显示一些代码

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

4. pre元素本质：有一个默认的css属性

实体（entity）

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

a元素（超链接）

href属性

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属性

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

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

id属性

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

路径的写法

1. 绝对路径：站外资源

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

https://www.baidu.com/

2. 相对路径：站内资源

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

图片元素——img元素

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>

容器元素

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

div元素

没有语义

语义化容器元素

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

元素包含关系

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

CSS——为网页添加样式

术语解释

例：

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

CSS规则：选择器+声明块

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

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
   文字粗细程度，可以取值数字，可以取值预设值

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

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、strong、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. 文档流中元素自动计算高度时，会忽略脱离了文档流的元素

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

相对定位（relative）

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

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

• left
• right
• top
• bottom

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

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

绝对定位（absolute）

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

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

• left
• right
• top
• bottom

固定定位（fixed）

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

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

定位下的居中

某个方向居中

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

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

多个定位元素重叠时

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

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