阶段目标：掌握HTML、CSS常用布局技巧，能够独立制作网页。

目标：掌握标签基本语法，能够独立布局文章页。

今日目标：掌握标签基本语法，能够独立布局文章页。

核心技术点

网页组成

排版标签

多媒体标签及属性

综合案例一 - 个人简介

综合案例二 - Vue 简介

 

HTML 超文本标记语言——HyperText Markup Language。

超文本：链接

标记：标签，带尖括号的文本

标签结构

标签要成对出现，中间包裹内容

<>里面放英文字母（标签名）

结束标签比开始标签多 /

标签分类：双标签和单标签

html：整个网页

head：网页头部，用来存放给浏览器看的信息，例如 CSS

title：网页标题

body：网页主体，用来存放给用户看的信息，例如图片、文字

提示

VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键

作用：明确标签的书写位置，让代码格式更整齐

父子关系（嵌套关系）：子级标签换行且缩进（Tab键）

兄弟关系（并列关系）：兄弟标签换行要对齐

 

概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。

注释不会再浏览器中显示。

在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

显示特点：

文字加粗

字号逐渐减小

独占一行（换行）

经验

h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo

h2 ~ h6 没有使用次数的限制

一般用在新闻段落、文章段落、产品描述信息等等。

显示特点：

独占一行

段落之间存在间隙

换行：br

水平线：hr

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

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

作用：在网页中插入图片

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

图像属性

属性语法

属性名="属性值"

属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

概念：路径指的是查找文件时，从起点到终点经历的路线。

路径分类：

相对路径：从当前文件位置出发查找目标文件

绝对路径：从盘符出发查找目标文件

Windows 电脑从盘符出发

Mac 电脑从根目录出发

相对路径

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

特殊符号：

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

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

.. 表示当前文件的上一级文件夹 → ../

绝对路径

查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发

提示

Windows 默认是 ，其他系统是 /，建议统一写为 /

特殊的绝对路径 → 文件的在线网址：https://www.itheima.com/images/logo.png "，应用场景：网页底部友情链接

作用：点击跳转到其他页面。

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

超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。

拓展：开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

常用属性

拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。

常用属性

网页制作思路：从上到下，先整体再局部，逐步分析制作

分析内容 → 写代码 → 保存 → 刷新浏览器，看效果

目标：掌握嵌套关系标签的写法，使用列表标签布局网页

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

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

无序列表

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

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

注意事项：

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

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

有序列表

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

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

注意事项：

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

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

定义列表

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

注意事项：

dl 里面只能包含dt 和 dd

dt 和 dd 里面可以包含任何内容

网页中的表格与 Excel 表格类似，用来展示数据。

基本使用

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

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

表格结构标签-了解

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

提示：表格结构标签可以省略。

合并单元格

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

合并单元格的步骤：

明确合并的目标

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

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

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

删除其他单元格

注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）。

作用：收集用户信息。

使用场景：

登录页面

注册页面

搜索区域

input 标签

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

 

input 标签占位文本

占位文本：提示信息，文本框和密码框都可以使用。

单选框

常用属性

提示：name 属性值自定义。

上传文件

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

多选框

多选框也叫复选框，默认选中：checked。

下拉菜单

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

默认显示第一项，selected 属性实现默认选中功能。

文本域

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

注意点：

实际开发中，使用 CSS 设置 文本域的尺寸

实际开发中，一般禁用右下角的拖拽功能

label 标签

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

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

写法一

label 标签只包裹内容，不包裹表单控件

设置 label 标签的 for 属性值 和表单控件的 id 属性值相同

写法二：使用 label 标签包裹文字和表单控件，不需要属性

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

按钮

提示：按钮需配合 form 标签（表单区域）才能实现对应的功能。

无语义的布局标签

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

div：独占一行

span：不换行

有语义的布局标签

目标：掌握 CSS 属性基本写法，能够使用文字相关属性美化文章页。

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

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

提示：属性名和属性值成对出现 → 键值对。

内部样式表：学习使用

CSS 代码写在 style 标签里面

外部样式表：开发使用

CSS 代码写在单独的 CSS 文件中（.css）

在 HTML 使用 link 标签引入

行内样式：配合 JavaScript 使用

CSS 写在标签的 style 属性值里

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

标签选择器

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

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

​

注意：标签选择器无法差异化同名标签的显示效果。

类选择器

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

步骤：

定义类选择器 → .类名

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

注意：

类名自定义，不要用纯数字或中文，尽量用英文命名

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

一个标签可以使用多个类名，类名之间用空格隔开

开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd。

id选择器

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

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

步骤：

定义 id 选择器 → #id名

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

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

通配符选择器

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

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

经验：通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距。

字体大小

属性名：font-size

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

经验：谷歌浏览器默认字号是16px。

字体样式（是否倾斜）

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

属性名：font-style

属性值

正常（不倾斜）：normal

倾斜：italic

行高

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

属性名：line-height

属性值

数字 + px

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

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

单行文字垂直居中

垂直居中技巧：行高属性值等于盒子高度属性值

注意：该技巧适用于单行文字垂直居中效果

字体族

属性名：font-family

属性值：字体名

拓展（了解）：font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找

font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体

font复合属性

使用场景：设置网页文字公共样式

复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。

font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）

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

文本缩进

属性名：text-indent

属性值：

数字 + px

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

文本对齐方式

作用：控制内容水平对齐方式

属性名：text-align

text-align本质是控制内容的对齐方式，属性要设置给内容的父级。

文本修饰线

属性名： text-decoration

color 文字颜色

提示：只要属性值为颜色，都可以使用上述四种颜色表示方式，例如：背景色。

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

打开调试工具

浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查

F12

使用调试工具

网页制作思路：

从上到下，先整体再局部

先标签，再 CSS 美化

HTML标签

CSS样式

HTML标签

CSS样式

目标：掌握复合选择器作用和写法；使用background属性添加背景效果

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

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

后代选择器

后代选择器：选中某元素的后代元素。

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

子代选择器

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

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

​

并集选择器

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

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

交集选择器

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

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

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

伪类选择器

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

鼠标悬停状态：选择器:hover { CSS 属性 }

超链接伪类

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

经验：工作中，一个 a 标签选择器设置超链接的样式， hover状态特殊设置

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

继承性

层叠性

优先级

继承性

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

注意：如果标签有默认文字样式会继承失败。 例如：a 标签的颜色、标题的字体大小。

层叠性

特点：

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

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

注意：选择器类型相同则遵循层叠性，否则按选择器优先级判断。

优先级

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

基础选择器

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

公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

（选中标签的范围越大，优先级越低）

复合选择器-叠加

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

公式：（每一级之间不存在进位）

规则：

从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较

!important 权重最高

继承权重最低

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

HTML标签

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

背景图

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

属性名：background-image（bgi）

属性值：url(背景图 URL)

提示：背景图默认有平铺（复制）效果。

平铺方式

属性名：background-repeat（bgr）

背景图位置

属性名：background-position（bgp）

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

关键字

提示：

关键字取值方式写法，可以颠倒取值顺序

可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中

背景图缩放

作用：设置背景图大小

属性名：background-size（bgz）

常用属性值：

关键字

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

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

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

数字 + 单位（例如：px）

div {

提示：工作中，图片比例与盒子比例相同，使用 cover 或 contain 缩放背景图效果相同。

背景图固定

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

属性名：background-attachment（bga）

属性值：fixed

背景复合属性

属性名：background（bg）

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

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

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

块级元素

特点：

独占一行

宽度默认是父级的100%

添加宽高属性生效

行内元素

特点：

一行可以显示多个

设置宽高属性不生效

宽高尺寸由内容撑开

行内块元素

特点：

一行可以显示多个

设置宽高属性生效

宽高尺寸也可以由内容撑开

转换显示模式

属性：display

HTML标签

CSS样式

HTML标签

CSS样式

 

目标：掌握盒子模型组成部分，使用盒子模型布局网页区域

结构伪类选择器

基本使用

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

:nth-child(公式)

提示：公式中的n取值从 0 开始。

伪元素选择器

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

注意点：

必须设置 content: ””属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可

伪元素默认是行内显示模式

权重和标签选择器相同

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

开发面板（自动智能识别）

设计面板（手动测量尺寸和颜色）

使用方法：创建项目 → 输入 项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击按钮【添加】，导入设计稿

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

盒子模型-组成

内容区域 – width & height

内边距 – padding（出现在内容与盒子边缘之间）

边框线 – border

外边距 – margin（出现在盒子外面）

边框线

四个方向

属性名：border（bd）

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

单方向边框线

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

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

内边距

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

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

提示：添加 padding 会撑大盒子。

padding 多值写法

技巧：从上开始顺时针赋值，当前方向没有数值则与对面取值相同。

尺寸计算

默认情况：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

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

解决：

手动做减法，减掉 border / padding 的尺寸

內减模式：box-sizing: border-box

外边距

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

属性名：margin

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

版心居中

左右 margin 值 为 auto（盒子要有宽度）

清除默认样式

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

元素溢出

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

属性名：overflow

外边距问题

合并现象

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

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

外边距塌陷

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

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

解决方法：

取消子级margin，父级设置padding

父级设置 overflow: hidden

父级设置 border-top

行内元素 – 内外边距问题

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

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

圆角

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

属性名：border-radius

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

提示：属性值是圆角半径

多值写法

技巧：从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。

正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%

胶囊形状：给长方形盒子设置圆角属性值为 盒子高度的一半

盒子阴影（拓展）

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

属性名：box-shadow

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

注意：

X 轴偏移量 和 Y 轴偏移量 必须书写

默认是外阴影，内阴影需要添加 inset

CSS 书写顺序：

盒子模型属性

文字样式

圆角、阴影等修饰属性

HTML标签

CSS样式

整体布局

标题区域

内容区域