HTML

HTML

标签关系

父子关系（嵌套关系）

兄弟关系（并列关系）

文本格式化标签

strong、em、ins、del标签自带强调含义（语义）。

图片标签

属性名=“属性值”。

src用于指定图片的位置和名称，是的必须属性。

图片标签-属性

属性的添加没有先后顺序之分。

width，height对图片进行缩放；浏览器对图片的缩放默认是等比例的。

路径

相对路径

从当前文件位置出发查找目标文件

/ 表示进入某个文件夹里面 文件夹名称/

. 表示当前文件所在文件夹

.. 表示进入上一级文件夹中

绝对路径

Windows：电脑从盘符出发查找目标文件

/ Windows也可以使用。

在线网址也是绝对路径。

绝对路径的应用场景：友情链接

超链接

href属性值是跳转地址，是超链接的必须属性。

跳转本地文件：超链接查找

href属性值写#，表示空连接，不会跳转

target="_blank" 新窗口跳转连接

音频标签

在HTML5里面，如果属性名和属性值完全一样，可以简写为一个单词。

视频标签

只有在静音状态下才可以自动播放。

列表

作用：布局内用排列整齐的区域。

列表分类：无序列表、有序列表、定义列表。

无序列表

作用：布局排列整齐的不需要规定顺序的区域。

标签：ul嵌套li，ul是无序列表，li是列表条目。

注意事项：

1、ul标签里面只能包裹li标签

2、li标签里面可以包裹任何内容

有序列表

作用：布局排列整齐的需要规定顺序的区域。

标签：ol嵌套li，ol是有序列表，li是列表条目。

注意事项：

1、ol标签里面只能包裹li标签

2、li标签里面可以包裹任何内容

定义列表

标签： dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情。

注意事项：

1、dl标签里面只能包裹dt和dd标签

2、dt和dd标签里面可以包裹任何内容

表格标签

标签：table嵌套tr，tr嵌套td / th。

在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。

表格结构标签

合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息。

合并步骤：

保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

		- 跨行合并，保留最上单元格，添加属性rowspan
		- 跨列合并，保留最左单元格，添加属性colspan

表单

作用：收集用户信息。

input标签

​ -input标签type属性值不同，则功能不同。

input标签占位文本-palceholder

占位文本：提示信息。

单选框radio

​ checked多选框也适用。

文本域-textarea

作用：多行输入文本的表单控件。

工作中文本域的尺寸一般通过css设置

上传文件 - file

默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能。

下拉菜单

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。

selected 作用：默认选中，属性名与属性值完全一致，简写为一个单词。

label标签

作用：网页中，某个标签的说明文本。

经验：lable 标签绑定文字和表单控件的关系，增大表单控件的点击范围。

提示：支持label标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

按钮-button

button（按钮）需要在form（表单区域）中使用；action是form的属性，action的属性值为发送数据的地址：action=“发送数据的地址。”

无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）

div：独占一行

span：不换行

字符实体

作用：在网页中显示预留字符。

CSS

CSS定义

层叠样式表（Cascading Stytle Sheets，缩写为CSS），是一种样式表语言，用来描述HTML文档的呈现（梅花内容）。

书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。

CSS引入方式

rel：关系，样式表。

选择器

作用：查找标签，设置样式。

标签选择器

作用：使用标签名作为选择器——>选中同名标签设置相同的样式。

例如：p、h1、div、a、img......

将会选中所有的 p 标签并将文字颜色变为红色。

特点：选中同名标签设置相同的样式，无法差异化同名标签的样式。

类选择器

作用：查找标签，差异化设置标签的显示效果。

步骤：

定义类选择器——>.类名

使用类选择器——>标签添加 class="类名"

特点：

一个类选择器可以给多个标签使用。

一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开。

id选择器

作用：查找标签，差异化设置标签的显示效果。

场景：id 选择器一般配合 JavaScript 使用，很少用来设置CSS样式。

步骤：

定义id 选择器——>#id 名

使用id 选择器——>标签添加id="id名"

规则：同一个id选择器在一个网页只能使用一次。

通配符选择器

作用：查找页面所有标签，设置相同样式。

通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式。

通常只有在网页开发初期，清除默认样式才会使用。

文字控制属性

字体大小

属性名：font-size

属性值：文字尺寸，PC 端网页最常用的单位 px。

经验：谷歌浏览器文字有默认大小：16px。

font-size 属性必须有单位，否则属性不生效。

字体粗细

属性名：font-weight

属性值：

数字（开发使用）：

关键字：

字体倾斜

作用：清除文字默认的倾斜效果。

属性名：font-style

属性值：

正常（不倾斜）：normal

倾斜：italic

行高

作用：设置多行文本的间距

属性名：line-height

属性值：

数字 + px

数字（当前标签 font-size 属性值的倍数）

行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。

行高-垂直居中技巧：行高属性值等于盒子高度属性值（只能是单行文字垂直居中）。

字体格式（字体族）

属性名：font-family

属性值：字体名

sans-serif 就是无衬线字体。

字体复合属性

属性名：font

使用场景：设置网页文字公共样式。通常在网页开发初期同一文字样式使用。

注意：字号和字体值必须书写，否则font属性不生效。

文本缩进

属性名：text-indent

属性值：

数字 + px

数字 + em（推荐：1em = 当前标签的字号大小）

文本对齐

属性名：text-align

属性值：

本质：居中的是文字内容，不是标签。

图片居中：

修饰线

属性名：text-decoration

属性值：

颜色

属性名：color

属性值：

调试工具 - 谷歌浏览器

作用：检查、调试代码；帮助程序员发现代码问题、解决问题。

步骤：

复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成。

作用：更准确、更高效的选择目标元素（标签）。

后代选择器

后代选择器：选中某元素的后代元素（会选中所有后代）。

选择器写法：父选择器 子选择器 {CSS属性 }，父子选择器之间用空格隔开。

子代选择器

子代选择器：选中某元素的子代元素（最近的子级）。

选择器写法：父选择器 > 子选择器{CSS属性}，父子选择器之间用 > 隔开。

并集选择器

并集选择器：选中多组标签设置相同的样式。

选择器写法：选择器1，选择器2，选择器3，...，选择器N{CSS属性}，选择器之间用 , 隔开。

交集选择器-了解

交集选择器：选中同时满足多个条件的元素。

选择器写法：选择器1选择器2{CSS属性}，选择器之间连写，没有任何符号。

注意：如果交集选择器中由标签选择器，标签选择器必须书写在最前面。

伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

鼠标悬停状态 ：选中器：hover{CSS}

任何选择器都可以设置鼠标悬停状态。

伪类-超链接（拓展）

超链接一共有四个状态

提示：如果要给超链接设置以上四个状态，需要按LVHA的顺序书写。

CSS特性

CSS特性：化简代码 / 定位问题，并解决问题

继承性

继承性：子集默认继承父级的文字控制属性。

一般给body属性设置css；特殊的可以单独设置。

如果标签有自己的样式则生效自己的样式，不继承。

层叠性

特点：

相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性。

不同的属性会叠加：不同的CSS属性都生效。

color：green 会覆盖 color：red

优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

规则：选择器优先级高的样式生效。

*<div<class<id<style

!important 提权功能，提高权重/优先级到 最高，慎用！（无法保证该标签始终权重永远最高！）

优先级-叠加计算规则

叠加计算：如果是复合选择器，则需要权重叠加计算。

Emmet写法-了解

Emmet写法：代码的简写方式，输入缩写VS Code会自动生成对应的代码。

• HTML

  

• CSS：大多数简写方式为属性单词的首字母

背景图

网页中，使用背景图实现装饰性的图片效果。

属性名：background-image(bgi)

属性值：url(背景图URL)

背景属性

背景图平铺方式

属性名：background-repeat(bgr)

属性值：

背景图位置

属性名：background-position(bgp)

属性值：水平方向位置 垂直方向位置

• 关键字

  

• 坐标（数字 + px，正负都可以）

  水平：正数向右；负数向左

  垂直：正数向上；负数向下

提示：

• 关键字取值方式写法，可以颠倒取值顺序。
• 可与只写一个关键字，另一个方向默认居中；数字只写一个值表示水平方向，垂直方向为居中。

背景图缩放

属性名：background-size(bgz)

属性值：

• 关键字

  cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。

  contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白。

• 百分比：根据盒子尺寸计算图片大小

  100% 图片的宽度和盒子宽度一样 ，图片的高度按照图片比例等比例缩放。

• 数字 + 单位（例如：px）

背景图固定

作用：背景不会随着元素的内容滚动。

属性名：background-attachment(bga)

属性值：fixed

背景复合属性

属性名：background(bg)

属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）

显示模式

显示模式：标签（元素）的显示方式

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。

• 块级元素
  • 独占一行
  • 宽度默认是父级的100%
  • 添加宽高属性生效
• 行内元素
  • 一行可以显示多个
  • 设置宽高属性不生效
  • 宽高尺寸由内容撑开
• 行内块元素
  • 一行可以显示多个
  • 设置宽高属性生效
  • 宽高尺寸也可以由内容撑开

转换显示模式

属性名：display

属性值：

结构伪类选择器

作用：根据元素的结构关系查找元素。

E = 标签名

伪元素标签

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。

注意点：

• 必须设置 content:“ ” 属性，用来设置为元素的内容，如果没有内容，则引号留空即可。
• 伪元素默认是行内显示模式。
• 权重和标签选择器相同。

PxCook

PxCook（像素大厨）是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。

• 开发面板（自动智能识别）
• 设计面板（手动测了尺寸和颜色）

盒子模型

作用：布局网页，摆放盒子和内容。

盒子模型重要组成部分：

• 内容区域 - width & height
• 内边距 - padding （内容与盒子边缘之间）
• 边框线 - border
• 外边距 - margin（出现在盒子外面，拉开两个盒子的距离）

盒子模型-边线框

属性名：border（bd）

属性值：边框线粗细 线条样式 颜色（不区分顺序）

设置单方向边框线

属性名：border - 方位名词（bd + 方位名词首字母，例如，bdl）

属性值：边框线粗细 线条样式 颜色（不区分顺序）。

盒子模型-内边距

作用：设置 内容 与 盒子边缘 之间的距离。

属性名：padding / padding - 方位名词

padding 多值写法（从上方开始，顺时针）

盒子模型-尺寸计算

• 默认情况

  盒子此村 = 内容尺寸 + border 尺寸 + 内边距尺寸

• 结论：给盒子加 border / padding 会撑大盒子

• 解决

  • 手动做减法，减掉 border / padding 的尺寸
  • 内减模式：box-sizing:border-box

盒子模型-外边距

作用：拉开两个盒子之间的距离。

属性名：margin

提示：与 padding 属性值写法、含义相同。

margin 多值写法（与 padding 属性值写法）

版心居中

要求：盒子必须要有宽度。

清除默认样式

清除标签默认的样式，比如：默认的内外边距。

主流有两种方法：

京东：

淘宝：

清除列表的项目符号

盒子模型-元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

属性值：

外边距问题-合并现象

场景：垂直排列的兄弟元素，上下 margin 会合并。

现象：取两个 margin 中较大值生效。

外边距问题-塌陷问题

场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题。

现象：导致父级一起向下移动。

解决方法：

• 取消子级 margin，父级设置 padding+（推荐使用）
• 父级设置 overflow:hidden
• 父级设置 border-top

行内元素-内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置。

解决方法：给行内元素添加 line-height 可以改变垂直位置。

盒子模型-圆角

作用：设置元素的外边框为圆角。

属性名：border-radius

属性值：数字 + px / 百分比。

提示：属性值是圆角半径。

border-radius多值写法

记忆：从左上角顺时针赋值，没有取值的角与对角取值相同。

• 常见应用 - 正圆形状
  • 给正方形盒子设置圆角属性值为 宽高的一半 / 50%（最大值为 50%， 超过50%没有效果）

• 常见应用 - 胶囊形状
  • 给长方形盒子设置圆角属性值为 盒子高度的一半。

盒子模型-阴影（拓展）

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意：

• X 轴偏移量和Y 轴偏移量 必须书写
• 默认是外阴影，内阴影需要添加 inset

浮动

作用：让块元素水平排列

属性名：float

属性值：

• left 左对齐
• right 右对齐

清除浮动

场景：浮动元素会拖标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）。

解决方法：清除浮动（清除浮动带来的影响）。

方法一：额外标签法

• 在父元素内容的最后添加一个块级元素，设置CSS属性 clear:both

方法二：单伪元素法

方法三：双伪元素法（推荐）

父级添加一个 class 属性值 .clearfix 。

方法四：overflow

• 父元素添加CSS属性 overflow:hidden

Flex布局

Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

Flex-组成

设置方式：给父元素设置 display:flex，子元素可以自动挤压或拉伸。

组成部分：

• 弹性容器
• 弹性盒子
• 主轴：默认在水平方向
• 侧轴 / 交叉轴：默认在垂直方向

Flex布局

主轴对齐方式

属性名：justify-content

侧轴对齐方式

属性名

• align-items：当前弹性容器内所有的弹性盒子的侧轴对齐方式（给弹性容器设置）。
• align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）。

弹性盒子在侧轴方向没有设置尺寸才能拉伸。

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向。

属性名：flex-direction

属性值：

弹性伸缩比

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

默认情况下，主轴方向尺寸靠内容撑开；侧轴默认拉伸。

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名：flex-warp

属性值：

• wrap：换行
• nowarp：不换行（默认）

行对齐方式

属性名：align-content

属性值：