DAY04_HTML&CSS_从表单到样式的完整学习指南

目录

• 一、课程回顾与知识体系
• 二、表单的深度应用
• 三、iframe内联框架详解
• 四、HTML特殊字符与实体
• 五、HTML全局属性详解
• 六、meta元信息配置
• 七、CSS基础入门
• 八、VSCode开发工具配置

---

一、课程回顾与知识体系

1.1 前置知识结构图

HTML基础知识
列表
表格
表单
无序列表 ul li
有序列表 ol li
定义列表 dl dt dd
表格结构
table属性
单元格跨行跨列
form表单整体
9种表单控件
表单控件属性

1.2 已学核心知识点

列表知识点

• 无序列表：ul + li
• 有序列表：ol + li
• 定义列表：dl + dt + dd

表格知识点

• 表格结构标签：table、caption、thead、tbody、tfoot、tr、td、th
• table属性：width、height、border、cellspacing、cellpadding
• 单元格属性：rowspan（跨行）、colspan（跨列）
• 对齐方式：align（水平）、valign（垂直）

表单基础知识

• 表单整体：form标签的action、target属性
• 9种表单控件类型：文本框、密码框、单选框、复选框、提交按钮、重置按钮、普通按钮、文本域、下拉选项
• 通用属性：name、value、disabled

---

二、表单的深度应用

2.1 label标签 - 提升用户体验的关键

label标签是表单中最重要但最容易被忽视的标签，它的作用是关联描述文字和表单控件，大幅提升用户体验。

2.1.1 label的两种使用方式

方式一：使用for属性关联（推荐用于输入框）

<!-- 关联文本输入框 -->
<label for="usernameInp">用户名：</label>
<input type="text" id="usernameInp">

<!-- 关联密码输入框 -->
<label for="passwordInp">密码：</label>
<input type="password" id="passwordInp">

<!-- 关联下拉选项 -->
<label for="jobSel">职业：</label>
<select id="jobSel">
    <option>程序员</option>
    <option>设计师</option>
    <option>产品经理</option>
</select>

<!-- 关联文本域 -->
<label for="des">自我介绍：</label>
<textarea cols="30" rows="10" id="des"></textarea>

方式二：标签嵌套方式（推荐用于单选/复选框）

<!-- 单选框示例 -->
性别：
<label>
    <input type="radio" name="gender" value="male">男
</label>
<label>
    <input type="radio" name="gender" value="female">女
</label>

<!-- 复选框示例 -->
爱好：
<label>
    <input type="checkbox" name="hobby" value="reading">阅读
</label>
<label>
    <input type="checkbox" name="hobby" value="music">音乐
</label>
<label>
    <input type="checkbox" name="hobby" value="sports">运动
</label>

2.1.2 label标签的优势对比

用户体验差
用户体验好
未使用label
必须精确点击小按钮
使用label
点击文字即可选中

2.1.3 完整的表单示例

<form action="register.php" method="POST">
    <table>
        <tbody>
            <tr>
                <td><label for="nameInp">姓名：</label></td>
                <td><input type="text" id="nameInp" name="username"></td>
            </tr>
            <tr>
                <td><label for="ageInp">年龄：</label></td>
                <td><input type="text" id="ageInp" name="age"></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <label><input type="radio" name="gender" value="male">男</label>
                    <label><input type="radio" name="gender" value="female">女</label>
                </td>
            </tr>
            <tr>
                <td><label for="jobSel">职业：</label></td>
                <td>
                    <select id="jobSel" name="job">
                        <option value="civil">公务员</option>
                        <option value="programmer">程序员</option>
                        <option value="designer">设计师</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td valign="top"><label for="des">自我介绍：</label></td>
                <td><textarea cols="30" rows="10" id="des" name="description"></textarea></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button type="submit">提交</button>
                    <button type="reset">重置</button>
                </td>
            </tr>
        </tbody>
    </table>
</form>

2.2 fieldset与legend标签 - 表单分组

fieldset和legend标签用于对表单进行逻辑分组，为表单添加外围边框和标题。

2.2.1 基本使用

<form action="register.php">
    <fieldset>
        <legend>基本信息</legend>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name"><br><br>
        
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email">
    </fieldset>
    
    <fieldset>
        <legend>详细信息</legend>
        <label for="address">地址：</label>
        <input type="text" id="address" name="address"><br><br>
        
        <label for="phone">电话：</label>
        <input type="tel" id="phone" name="phone">
    </fieldset>
    
    <button type="submit">提交</button>
</form>

2.2.2 视觉效果

fieldset会自动为内部表单控件添加边框，legend会显示为边框上的标题，效果类似：

┌─ 基本信息 ────────────┐
│ 姓名：[_________]     │
│ 邮箱：[_________]     │
└───────────────────────┘

2.3 表单标签完整总结表

表单标签体系
容器标签
输入标签
辅助标签
form 表单包裹
fieldset 分组容器
input 多类型输入
button 按钮
textarea 文本域
select + option 下拉
label 关联标签
legend 分组标题

标签名	语义和功能	核心属性	标签类型
form	表单包裹元素	action：提交地址 target：打开方式（_self/_blank）	双标签
input	各种类型的表单控件	type：控件类型（text/password/radio/checkbox等） maxlength：最大输入长度 checked：默认选中 name：控件标识 value：控件值 disabled：禁用	单标签
button	各种类型的按钮	type：按钮类型（submit/reset/button） disabled：禁用	双标签
textarea	多行文本域	rows：默认行数 cols：默认列数 name：控件标识 disabled：禁用	双标签
select	下拉选项包裹元素	name：控件标识 disabled：禁用	双标签
option	下拉的选项	value：选项值 selected：默认选中 disabled：禁用	双标签
label	关联表单控件	for：目标控件的id	双标签
fieldset	设置外围边框	无	双标签
legend	设置表单标题（配合fieldset）	无	双标签

重要提示

input的type属性
text 默认
password
radio
checkbox
submit
reset
button
button的type属性
submit 默认
reset
button

---

三、iframe内联框架详解

3.1 iframe基本概念

iframe（inline frame）是内联框架，可以将其他HTML页面、图片、视频、PDF等各种资源嵌入到当前页面中。

3.1.1 iframe基本语法

属性	说明	取值
src	目标文件地址	URL或相对路径
width	宽度	像素值或百分比
height	高度	像素值或百分比
frameborder	是否显示边框	0（无边框）/1（有边框）
name	框架名称	字符串（配合target使用）

3.2 iframe使用示例

3.2.1 嵌入网页

<!-- 嵌入外部网站 -->
<iframe src="https://www.163.com/news/" 
        width="1000" 
        height="400" 
        frameborder="0">
</iframe>

<!-- 嵌入本地页面 -->
<iframe src="./about.html" 
        width="800" 
        height="600" 
        frameborder="0">
</iframe>

3.2.2 嵌入多媒体文件

<!-- 嵌入图片 -->
<iframe src="./images/photo.jpg" 
        frameborder="0" 
        width="400" 
        height="300">
</iframe>

<!-- 嵌入视频 -->
<iframe src="./videos/tutorial.mp4" 
        frameborder="0" 
        width="800" 
        height="450">
</iframe>

<!-- 嵌入PDF文档 -->
<iframe src="./docs/manual.pdf" 
        frameborder="0" 
        width="100%" 
        height="800">
</iframe>

<!-- 嵌入文本文件 -->
<iframe src="./data/info.txt" 
        frameborder="0" 
        width="600" 
        height="400">
</iframe>

3.3 iframe与target联动

iframe配合超链接的target属性，可以实现在指定iframe中打开链接的效果。

3.3.1 基本示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>iframe和target联动</title>
</head>
<body>
    <h1>内容导航</h1>
    
    <!-- 导航链接，target指向iframe的name -->
    <a href="https://www.baidu.com" target="contentFrame">百度</a> |
    <a href="https://www.taobao.com" target="contentFrame">淘宝</a> |
    <a href="https://www.jd.com" target="contentFrame">京东</a> |
    <a href="./page1.html" target="contentFrame">页面1</a> |
    <a href="./page2.html" target="contentFrame">页面2</a>
    
    <hr>
    
    <!-- iframe设置name属性 -->
    <iframe src="./default.html" 
            name="contentFrame" 
            width="1200" 
            height="600" 
            frameborder="1">
    </iframe>
</body>
</html>

3.3.2 target属性值详解

target属性值
_self 当前窗口
_blank 新窗口
_parent 父窗口
_top 顶层窗口
iframe的name 指定iframe

3.4 iframe的应用场景

iframe应用场景
嵌入第三方内容
广告系统
评论系统
视频播放
地图服务
页面布局
后台管理系统
邮件客户端
多页面切换
安全隔离
沙箱环境
第三方组件

3.5 iframe的注意事项

1. 安全问题 ：部分网站（如京东、淘宝）禁止被iframe嵌入，会返回X-Frame-Options响应头
2. 性能影响：过多iframe会影响页面加载速度
3. SEO问题：搜索引擎可能无法正确索引iframe内容
4. 响应式设计：iframe需要手动设置尺寸，不利于响应式布局
5. 浏览器兼容：现代浏览器都支持，但要注意frameborder属性的兼容性

---

四、HTML特殊字符与实体

4.1 为什么需要字符实体

在HTML中，某些字符具有特殊含义（如<、>、&），如果直接输入会被浏览器解析为HTML代码，因此需要使用**字符实体（Character Entity）**来表示这些特殊字符。

4.2 常用字符实体汇总

4.2.1 核心字符实体表

显示效果	描述	实体名称	实体编号	使用场景
（空格）	不间断空格	 	 	强制空格显示
<	小于号	&lt;	&#60;	显示HTML标签
>	大于号	&gt;	&#62;	显示HTML标签
&	和号	&amp;	&#38;	显示&符号
"	双引号	&quot;	&#34;	属性值中显示引号
'	单引号	'	&#39;	属性值中显示引号
¥	人民币符号	&yen;	&#165;	价格显示
©	版权符号	&copy;	&#169;	版权声明
®	注册商标	&reg;	&#174;	商标标识
×	乘号	&times;	&#215;	数学运算
÷	除号	&divide;	&#247;	数学运算

4.3 实际应用示例

4.3.1 显示HTML代码

<!-- 错误写法：会被解析为实际标签 -->
<p>
    今天我们学习了<h1>标签
</p>

<!-- 正确写法：使用字符实体 -->
<p>
    今天我们学习了&lt;h1&gt;标签，该标签用于表示一级标题
</p>

<!-- 显示效果 -->
<!-- 今天我们学习了<h1>标签，该标签用于表示一级标题 -->

4.3.2 控制空格显示

html
<!-- HTML会将多个空格合并为一个 -->
<p>小乐                                       雪丽</p>
<!-- 显示：小乐 雪丽 -->

<!-- 使用&nbsp;强制显示多个空格 -->
<p>小乐&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;雪丽</p>
<!-- 显示：小乐         雪丽 -->

<!-- 使用实体编号也可以 -->
<p>小乐&#160;&#160;&#160;&#160;&#160;雪丽</p>

4.3.3 显示特殊符号

<!-- 显示&符号本身 -->
<p>
    &amp;nbsp; 这个字符实体表示空格
</p>
<!-- 显示：&nbsp; 这个字符实体表示空格 -->

<!-- 价格显示 -->
<p>商品价格：&yen;299.00</p>
<!-- 显示：商品价格：¥299.00 -->

<!-- 版权信息 -->
<p>&copy; 2023 教育科技有限公司 版权所有</p>
<!-- 显示：© 2023 教育科技有限公司 版权所有 -->

<!-- 数学运算 -->
<p>3 &times; 4 = 12</p>
<p>12 &divide; 3 = 4</p>
<!-- 显示：3 × 4 = 12 -->
<!-- 显示：12 ÷ 3 = 4 -->

4.4 字符实体的两种表示方法

字符实体
实体名称
实体编号
易记忆
& 更通用

实体名称 ：以&开头，以;结尾，中间是助记词（如nbsp、lt、copy）

• 优点：易于记忆和理解
• 缺点：并非所有字符都有实体名称

实体编号 ：以&#开头，以;结尾，中间是Unicode编码

• 优点：所有字符都可以用编号表示
• 缺点：不易记忆

4.5 更多字符实体参考

更完整的字符实体列表，请参考：

• W3C School：https://www.w3school.com.cn/html/html_entities.asp
• W3C School符号：https://www.w3cschool.cn/htmltags/html-symbols.html

---

五、HTML全局属性详解

5.1 什么是全局属性

全局属性（Global Attributes）是指所有HTML标签都具有的属性 ，无论是div、p、span还是input等任何标签都可以使用。

5.2 核心全局属性

HTML全局属性
标识类
id 唯一标识
name 名称标识
class 类名标识
样式类
style 行内样式
title 提示文字
语言类
lang 语言设置
交互类
tabindex 焦点顺序
accesskey 快捷键

5.3 全局属性详解表

属性	作用	取值示例	应用场景
id	唯一标识符	id="header"	1. CSS选择器 2. 锚点跳转 3. JavaScript操作 4. label的for关联
name	名称标识	name="username"	1. 表单控件标识 2. iframe命名 3. 表单数据提交
class	类名（可多个）	class="box active"	1. CSS选择器 2. JavaScript批量操作 3. 样式复用
style	行内CSS样式	style="color:red;"	直接设置元素样式
title	提示文字	title="点击查看详情"	鼠标悬停显示提示
lang	语言设置	lang="zh-CN"	1. 搜索引擎优化 2. 屏幕阅读器 3. 浏览器翻译

5.4 详细示例

5.4.1 id属性 - 唯一标识

<!-- 用作CSS选择器 -->
<style>
    #main-title {
        color: #900;
        font-size: 32px;
    }
</style>
<h1 id="main-title">网站标题</h1>

<!-- 用作锚点跳转 -->
<a href="#section1">跳转到第一章</a>
...
<div id="section1">
    <h2>第一章内容</h2>
</div>

<!-- 用作label关联 -->
<label for="email-input">邮箱：</label>
<input type="email" id="email-input">

5.4.2 name属性 - 名称标识

<!-- 表单控件名称 -->
<form action="register.php">
    <input type="text" name="username">
    <input type="password" name="password">
    <button type="submit">提交</button>
</form>
<!-- 提交时数据格式：username=张三&password=123456 -->

<!-- iframe命名（配合target） -->
<iframe src="default.html" name="contentFrame"></iframe>
<a href="page1.html" target="contentFrame">页面1</a>

5.4.3 class属性 - 类名

<!-- 单个类名 -->
<div class="container">内容区域</div>

<!-- 多个类名（空格分隔） -->
<div class="box active highlight">活动商品</div>

<!-- CSS样式 -->
<style>
    .box {
        padding: 20px;
        border: 1px solid #ccc;
    }
    .active {
        background: #ff0;
    }
    .highlight {
        border-color: #f00;
    }
</style>

5.4.4 style属性 - 行内样式

<!-- 单个样式 -->
<p style="color: red;">红色文字</p>

<!-- 多个样式（分号分隔） -->
<div style="width:600px; padding:20px; border:2px solid #099; background:#ccc;">
    这是一个带样式的盒子
</div>

<!-- 图片尺寸设置 -->
<img src="aaa.jpg" alt="照片" style="width:400px; height:300px;">

5.4.5 title属性 - 提示文字

<!-- 超链接提示 -->
<a href="https://www.atguigu.com" title="访问官网">iewioeiwoeiw</a>

<!-- 图片提示 -->
<img src="" alt="图标" title="这是一个功能图标">

<!-- 按钮提示 -->
<button type="submit" title="点击提交表单">提交</button>

<!-- 缩写词提示 -->
<abbr title="HyperText Markup Language">HTML</abbr>

5.4.6 lang属性 - 语言设置

<!-- 整个页面设置为中文 -->
<html lang="zh-CN">
    ...
</html>

<!-- 局部设置为英文 -->
<p lang="en">Hello World</p>

<!-- 日语 -->
<p lang="ja">こんにちは</p>

<!-- 法语 -->
<p lang="fr">Bonjour</p>

常用语言代码：

语言	代码	完整代码
中文（简体）	zh	zh-CN
中文（繁体）	zh	zh-TW
英语	en	en-US
日语	ja	ja-JP
韩语	ko	ko-KR
法语	fr	fr-FR
德语	de	de-DE

更多语言代码参考：https://www.w3school.com.cn/tags/html_ref_language_codes.asp

5.5 全局属性使用对比

唯一标识
批量操作
表单提交
临时样式
用户提示
国际化
选择合适的全局属性
需求场景
使用id
使用class
使用name
使用style
使用title
使用lang
CSS #选择器

JavaScript操作

锚点跳转
CSS .选择器

样式复用

批量处理
表单数据key

iframe命名
快速调试

特殊样式
操作提示

信息补充
SEO优化

屏幕阅读器

---

六、meta元信息配置

6.1 meta标签的作用

meta标签位于<head>中，用于提供页面的元信息（metadata），这些信息不会显示在页面上，但对搜索引擎、浏览器、其他Web服务非常重要。

6.2 meta标签分类

meta元信息
字符编码
SEO优化
视口设置
页面行为
charset属性
keywords关键字
description描述
viewport视口
refresh刷新

6.3 各类meta详解

6.3.1 字符编码设置

<!-- HTML5推荐写法（简洁） -->
<meta charset="UTF-8">

<!-- HTML4/XHTML写法（完整） -->
<meta http-equiv="content-type" content="text/html;charset=utf-8">

作用： 告诉浏览器使用UTF-8编码解析页面，避免中文乱码

6.3.2 SEO优化meta

<!-- 网页关键字：8-12个以英文逗号隔开的单词/词语 -->
<meta name="keywords" content="HTML教程,CSS教程,前端开发,Web开发,JavaScript">

<!-- 网页描述信息：80字以内的一段话，与网站内容相关 -->
<meta name="description" content="前端培训课程，涵盖HTML、CSS、JavaScript等核心技术，从零基础到项目实战，助你成为前端开发工程师。">

<!-- 作者信息 -->
<meta name="author" content="教育">

<!-- 版权信息 -->
<meta name="copyright" content="教育科技有限公司">

SEO优化示例对比：
抓取关键字
显示摘要
搜索引擎
keywords
description
影响搜索排名
影响点击率

优秀的description示例：

<!-- 电商网站 -->
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，在线销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品。">

<!-- 教育网站 -->
<meta name="description" content="是一家专注于IT技术培训的教育机构，提供Java、前端、大数据、Python等多个方向的线上线下课程，已培养数万名IT精英。">

<!-- 新闻网站 -->
<meta name="description" content="网易新闻是中国领先的新闻门户网站，提供国内国际最新新闻资讯、财经、体育、娱乐、科技、汽车等新闻信息。">

6.3.3 移动端视口设置（重要！）

<!-- 完美视口设置（移动端必备） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport参数详解：

参数	说明	取值	推荐值
width	视口宽度	数值/device-width	device-width
height	视口高度	数值/device-height	-
initial-scale	初始缩放比例	0.0 - 10.0	1.0
minimum-scale	最小缩放比例	0.0 - 10.0	1.0
maximum-scale	最大缩放比例	0.0 - 10.0	1.0
user-scalable	是否允许用户缩放	yes/no	yes

完整配置示例：

<!-- 禁止用户缩放（部分场景需要） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- 允许用户缩放（推荐） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0">

6.3.4 页面刷新和跳转

<!-- 每3秒自动刷新当前页面 -->
<meta http-equiv="refresh" content="3">

<!-- 10秒后跳转到指定网址 -->
<meta http-equiv="refresh" content="10; url=https://www.atguigu.com">

<!-- 0秒后立即跳转（常用于重定向） -->
<meta http-equiv="refresh" content="0; url=https://www.baidu.com">

应用场景：

• 活动倒计时页面
• 支付成功后自动跳转
• 临时维护页面跳转
• 旧域名跳转到新域名

6.3.5 其他常用meta

<!-- IE浏览器兼容性设置（使用最新渲染引擎） -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 禁止百度转码（手机浏览器访问时） -->
<meta http-equiv="Cache-Control" content="no-siteapp">

<!-- 浏览器内核设置（360浏览器等） -->
<meta name="renderer" content="webkit">

<!-- 移动端状态栏样式（iOS Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- 禁止自动识别电话号码 -->
<meta name="format-detection" content="telephone=no">

<!-- 禁止自动识别邮箱 -->
<meta name="format-detection" content="email=no">

6.4 完整的head配置模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 字符编码 -->
    <meta charset="UTF-8">
    
    <!-- IE兼容性 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <!-- 移动端视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- SEO优化 -->
    <meta name="keywords" content="HTML,CSS,JavaScript,前端开发">
    <meta name="description" content="这是一个优秀的前端学习网站，提供HTML、CSS、JavaScript等技术教程">
    <meta name="author" content="谷">
    
    <!-- 页面标题 -->
    <title>前端学习平台 -</title>
    
    <!-- 网站图标 -->
    <link rel="icon" href="favicon.ico">
    
    <!-- 外链样式 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

---

七、CSS基础入门

7.1 HTML与CSS的关系

负责
负责
HTML
页面结构
CSS
页面样式
内容组织
语义化标签
颜色字体
布局排版
动画效果

核心理念：

1. HTML实现页面结构 ，CSS实现页面样式
2. CSS样式需要作用在HTML元素上才能生效
3. 结构与样式分离，提高代码可维护性

7.2 HTML元素关系（重要概念）

在学习CSS之前，必须理解HTML元素之间的关系，因为CSS选择器正是基于这些关系来选择元素的。
HTML元素关系
父子关系
祖先后代关系
兄弟关系
直接包含
隔代包含
同级元素

7.2.1 元素关系示例

<div class="container">           <!-- 父元素、祖先元素 -->
    <header>                       <!-- 子元素、兄弟元素、祖先元素 -->
        <h1>网站标题</h1>          <!-- 后代元素、子元素 -->
        <nav>                      <!-- 后代元素、子元素、兄弟元素 -->
            <a href="#">首页</a>   <!-- 后代元素 -->
            <a href="#">关于</a>   <!-- 后代元素、兄弟元素 -->
        </nav>
    </header>
    
    <main>                         <!-- 子元素、兄弟元素 -->
        <article>                  <!-- 后代元素、子元素 -->
            <p>文章内容</p>        <!-- 后代元素 -->
        </article>
    </main>
</div>

关系说明：

• 父元素 ：直接包含某元素的元素（.container是<header>的父元素）
• 子元素 ：被某元素直接包含的元素（<h1>是<header>的子元素）
• 祖先元素 ：包含某元素的所有上级元素（.container和<header>都是<h1>的祖先元素）
• 后代元素 ：被某元素包含的所有下级元素（<h1>、<nav>、<a>都是.container的后代元素）
• 兄弟元素 ：具有相同父元素的元素（<header>和<main>是兄弟元素）

7.3 CSS的三种使用方式

CSS使用方式
行内式
内嵌式
外链式
直接写在标签上
优先级最高
不推荐使用
写在style标签中
当前页面生效
适合单页面
独立CSS文件
多页面复用
最推荐使用

7.3.1 方式一：行内式（Inline Style）

语法：

<标签 style="CSS属性:值; CSS属性:值; ..."></标签>

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>行内式CSS</title>
</head>
<body>
    <!-- 设置标题样式 -->
    <h1 style="font-size:100px; color:#900;">CSS的使用</h1>
    
    <hr>
    
    <!-- 设置段落样式 -->
    <p>这是普通段落</p>
    
    <p style="width:600px; padding:20px; border:2px solid #099; background:#ccc;">
        这是一个带样式的段落，具有固定宽度、内边距、边框和背景色
    </p>
    
    <p>这是普通段落</p>
    
    <!-- 设置图片样式 -->
    <img src="photo.jpg" alt="照片" style="width:400px; height:300px;">
</body>
</html>

行内式的特点：

优点	缺点	适用场景
优先级最高	代码臃肿，难以维护	临时调试
直接生效	无法复用	特殊个例样式
无需选择器	HTML和CSS混在一起	动态生成的样式

7.3.2 方式二：内嵌式（Internal Style）

语法：

<style>
    选择器 {
        属性名: 值;
        属性名: 值;
        ...
    }
</style>

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内嵌式CSS</title>
    <style>
        /* 设置所有h1元素的样式 */
        h1 {
            font-size: 100px;
            color: #900;
            font-weight: normal;
        }
        
        /* 设置所有p元素的样式 */
        p {
            width: 600px;
            padding: 20px;
            border: 2px solid #099;
            background: #ccc;
        }
    </style>
</head>
<body>
    <h1>CSS使用</h1>
    <hr>
    <p>第一个段落，自动应用样式</p>
    <p>第二个段落，自动应用样式</p>
    <p>第三个段落，自动应用样式</p>
</body>
</html>

内嵌式的特点：

优点	缺点	适用场景
结构与样式分离	只在当前页面生效	单页面应用
样式可复用（同一页面）	多页面无法共享	页面特有样式
便于维护	增加HTML文件大小	小型项目

重要提示： <style>标签可以放在页面的任意位置 都能生效，但建议放在<head>中，这是最佳实践！

7.3.3 方式三：外链式（External Style）- 最推荐！

语法：

<link rel="stylesheet" href="CSS文件地址">

示例：

HTML文件（index.html）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外链式CSS</title>
    
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="./css/default.css">
</head>
<body>
    <h1>CSS的使用 外链式</h1>
    <hr>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
</body>
</html>

CSS文件（css/default.css）：

/* 全局样式设置 */
* {
    margin: 0;
    padding: 0;
}

/* 标题样式 */
h1 {
    font-size: 100px;
    color: #900;
    font-weight: normal;
    text-align: center;
    margin: 30px 0;
}

/* 段落样式 */
p {
    width: 600px;
    padding: 20px;
    margin: 20px auto;
    border: 2px solid #099;
    background: #ccc;
    line-height: 1.8;
}

外链式的特点：

优点	缺点	适用场景
完全分离HTML和CSS	需要额外HTTP请求	多页面网站（推荐）
多页面共享样式	首次加载稍慢	团队协作项目
样式统一管理	-	大中型项目
浏览器可缓存CSS	-	需要样式复用的场景
便于维护和更新	-	所有正式项目

重要提示： <link>标签可以放在页面的任意位置 都能生效，但建议放在<head>中！

7.3.4 三种方式对比总结

临时调试
单页面
多页面
选择CSS使用方式
项目规模
行内式
内嵌式
外链式
不推荐
可以使用
强烈推荐

对比项	行内式	内嵌式	外链式
位置	标签style属性	<style>标签内	独立.css文件
优先级	⭐⭐⭐⭐⭐ 最高	⭐⭐⭐ 中等	⭐⭐⭐ 中等
复用性	❌ 无法复用	✅ 当前页面复用	✅ 多页面复用
维护性	❌ 难以维护	⚠️ 一般	✅ 易于维护
加载速度	✅ 无额外请求	✅ 无额外请求	⚠️ 需要额外请求
适用场景	临时调试、特殊样式	单页面、特有样式	多页面、正式项目
推荐指数	⭐	⭐⭐⭐	⭐⭐⭐⭐⭐

7.4 CSS基本语法结构

7.4.1 内嵌式和外链式的语法结构

选择器 {
    属性名: 值;
    属性名: 值;
    属性名: 值;
}

语法组成部分：
CSS规则
选择器
声明块
声明1
声明2
声明N
属性名
值

• 选择器（Selector）：用于选择要设置样式的HTML元素
• 声明块（Declaration Block） ：选择器后面的大括号{}，包含多条声明
• 声明（Declaration） ：每条声明以分号;结尾，由CSS属性和值组成
• 属性名（Property） ：要设置的样式属性（如color、font-size）
• 值（Value） ：属性对应的值（如red、20px）

示例解析：

/* 选择器：h1 - 选择所有h1元素 */
h1 {
    /* 声明1：设置字体大小为100像素 */
    font-size: 100px;
    
    /* 声明2：设置文字颜色为深红色 */
    color: #900;
    
    /* 声明3：设置字体粗细为正常 */
    font-weight: normal;
}

/* 选择器：.box - 选择所有class="box"的元素 */
.box {
    width: 600px;
    padding: 20px;
    border: 2px solid #099;
    background: #ccc;
}

/* 选择器：#header - 选择id="header"的元素 */
#header {
    height: 80px;
    background: #333;
    color: #fff;
}

7.4.2 行内式的语法结构

<标签名 style="属性名:值; 属性名:值; 属性名:值;"></标签名>

行内式没有选择器 ，直接写在style属性中，多个声明用分号;分隔。

<!-- 正确写法 -->
<div style="width:600px; height:400px; background:#ccc;">内容</div>

<!-- 错误写法：缺少分号 -->
<div style="width:600px height:400px background:#ccc">内容</div>

<!-- 错误写法：使用了选择器 -->
<div style="div { width:600px; }">内容</div>

7.5 区分HTML属性和CSS属性（重要！）

这是初学者最容易混淆的概念！必须区分清楚。
元素属性
HTML属性
CSS属性
写在标签上
控制标签行为
不同标签属性不同
写在style中
控制元素样式
所有元素通用

7.5.1 HTML属性示例

<!-- img标签的HTML属性 -->
<img src="photo.jpg"          <!-- src属性：图片地址 -->
     alt="照片"               <!-- alt属性：替代文本 -->
     width="400"             <!-- width属性：宽度（HTML属性） -->
     height="300">           <!-- height属性：高度（HTML属性） -->

<!-- input标签的HTML属性 -->
<input type="text"           <!-- type属性：输入类型 -->
       name="username"       <!-- name属性：表单名称 -->
       value="张三"          <!-- value属性：默认值 -->
       maxlength="20"        <!-- maxlength属性：最大长度 -->
       disabled>             <!-- disabled属性：禁用 -->

<!-- table标签的HTML属性 -->
<table width="800"           <!-- width属性：表格宽度（HTML属性） -->
       height="400"          <!-- height属性：表格高度（HTML属性） -->
       border="1"            <!-- border属性：边框粗细 -->
       cellspacing="0"       <!-- cellspacing属性：单元格间距 -->
       cellpadding="10">     <!-- cellpadding属性：单元格内边距 -->
</table>

7.5.2 CSS属性示例

<!-- 使用CSS属性设置图片尺寸（推荐） -->
<img src="photo.jpg" 
     alt="照片" 
     style="width:400px; height:300px; border:2px solid #ccc;">

<!-- 使用CSS属性设置表格样式（推荐） -->
<table style="width:800px; height:400px; border:1px solid #000; border-collapse:collapse;">
    <tr>
        <td style="padding:10px; background:#f5f5f5;">单元格</td>
    </tr>
</table>

<!-- 使用CSS属性设置输入框样式 -->
<input type="text" 
       style="width:300px; height:40px; padding:10px; border:1px solid #ddd; font-size:16px;">

7.5.3 对比表格

对比项	HTML属性	CSS属性
位置	直接写在标签上	写在style属性或CSS规则中
作用	控制标签的行为和特性	控制元素的外观样式
通用性	不同标签有不同属性	大部分属性适用于所有元素
写法	width="400"	width: 400px;
单位	通常不带单位或特定单位	必须带单位（px、em、%等）
分隔符	空格分隔	分号分隔
示例	<img width="400">	style="width:400px;"

7.5.4 完整对比示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML属性 VS CSS属性</title>
</head>
<body>
    <h1>HTML属性和CSS属性对比</h1>
    
    <!-- 方式1：使用HTML属性设置图片尺寸 -->
    <h2>使用HTML属性</h2>
    <img src="./images/photo.jpg" 
         alt="照片" 
         width="400" 
         height="300">
    
    <hr>
    
    <!-- 方式2：使用CSS属性设置图片尺寸（推荐） -->
    <h2>使用CSS属性</h2>
    <img src="./images/photo.jpg" 
         alt="照片" 
         style="width:400px; height:300px; border:5px solid #900; border-radius:10px;">
    
    <hr>
    
    <!-- 方式3：混合使用（HTML属性 + CSS属性） -->
    <h2>混合使用</h2>
    <img src="./images/photo.jpg" 
         alt="照片" 
         width="400"                                  <!-- HTML属性 -->
         style="height:300px; border:3px solid #099;"> <!-- CSS属性 -->
</body>
</html>

推荐做法：

• ✅ 样式相关的设置（尺寸、颜色、边框等）使用CSS属性
• ✅ 功能相关的设置（src、alt、type、name等）使用HTML属性
• ❌ 避免混用造成混淆

7.6 CSS的层叠性（Cascading）

层叠性 是CSS的核心特性之一，指的是多个来源、多种方式设置的样式都会叠加到同一个元素上。
元素最终样式
行内式样式
内嵌式样式
外链式样式
浏览器默认样式
优先级最高
根据选择器权重
根据选择器权重
优先级最低

7.6.1 层叠性示例

外部CSS文件（default1.css）：

div {
    width: 800px;
    height: 200px;
    background: yellow;
}

HTML页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS层叠性</title>
    
    <!-- 外链式CSS -->
    <link rel="stylesheet" href="./default1.css">
    
    <!-- 内嵌式CSS -->
    <style>
        div {
            padding: 20px;
            border: 2px solid #900;
        }

        .item {
            background: #ccc;
            background: green;  /* 后面的会覆盖前面的 */
        }

        #box {
            color: #900;
        }
    </style>
</head>
<body>
    <!-- 行内式CSS -->
    <div id="box" class="item" style="width:600px;">
        这个div元素同时受到了外链式、内嵌式、行内式三种方式的样式影响
    </div>
</body>
</html>

最终生效的样式：

div {
    width: 600px;          /* 行内式（优先级最高） */
    height: 200px;         /* 外链式 */
    padding: 20px;         /* 内嵌式 */
    border: 2px solid #900;/* 内嵌式 */
    background: green;     /* 内嵌式（class选择器，且后声明） */
    color: #900;           /* 内嵌式（id选择器） */
}

7.6.2 层叠性的规则

CSS层叠规则
不冲突的属性
冲突的属性
全部叠加生效
优先级高的生效
行内式 > ID选择器 > 类选择器 > 标签选择器
优先级相同时
后声明的覆盖先声明的

规则1：不冲突的属性会全部叠加

/* 规则1 */
.box {
    width: 600px;
    height: 400px;
}

/* 规则2 */
.box {
    padding: 20px;
    border: 1px solid #ccc;
}

/* 最终效果：两个规则的属性都生效 */
.box {
    width: 600px;      /* 来自规则1 */
    height: 400px;     /* 来自规则1 */
    padding: 20px;     /* 来自规则2 */
    border: 1px solid #ccc; /* 来自规则2 */
}

规则2：冲突的属性，优先级高的生效

<div class="box" style="width:800px;">内容</div>

<style>
    .box {
        width: 600px;    /* 被行内式覆盖 */
        height: 400px;   /* 生效 */
    }
</style>

<!-- 最终：width是800px（行内式优先级高），height是400px -->

规则3：优先级相同，后声明的覆盖先声明的

.box {
    background: red;
    background: blue;  /* 后声明，覆盖前面的red */
}

/* 最终background是blue */

7.7 CSS注释

CSS注释用于解释代码、临时禁用代码、标记代码块，不会被浏览器解析，不会影响页面显示。

7.7.1 CSS注释语法

/* 这是单行注释 */

/* 
   这是多行注释
   可以写多行内容
   用于详细说明
*/

7.7.2 CSS注释的应用

/* ====================
   1. 全局样式
   ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ====================
   2. 页面头部样式
   ==================== */
#header {
    width: 100%;
    height: 80px;
    background: #333;
    /* position: fixed; */  /* 临时禁用定位 */
}

/* logo样式 */
.logo {
    float: left;
    width: 200px;
    height: 80px;
}

/* 导航栏样式 */
.nav {
    float: right;
}

/* ====================
   3. 页面主体样式
   ==================== */
#main {
    width: 1200px;
    margin: 20px auto;
    /* TODO: 后续需要添加响应式布局 */
}

/* ====================
   4. 页面底部样式
   ==================== */
#footer {
    width: 100%;
    height: 200px;
    background: #f5f5f5;
    text-align: center;
    padding: 50px 0;
}

/* 版权信息 */
.copyright {
    color: #666;
    font-size: 14px;
    /* font-weight: bold; */  /* 暂时不需要加粗 */
}

7.7.3 注释的最佳实践

/* ✅ 好的注释：说明意图和原因 */
.button {
    padding: 10px 20px;
    /* 使用相对单位以支持用户字体缩放 */
    font-size: 1rem;
    /* 避免双击误选文字 */
    user-select: none;
}

/* ❌ 不好的注释：只描述代码做了什么（代码本身已经很清楚） */
.button {
    /* 设置内边距为10px 20px */
    padding: 10px 20px;
    /* 设置字体大小为1rem */
    font-size: 1rem;
}

/* ✅ 使用注释分隔代码块 */
/* ========================================
   响应式布局 - 平板设备
   ======================================== */
@media (max-width: 768px) {
    /* 样式代码 */
}

/* ✅ 使用注释标记待办事项 */
.feature {
    /* TODO: 添加动画效果 */
    /* FIXME: 修复IE11兼容性问题 */
    /* HACK: 临时解决Safari的渲染bug */
}

7.7.4 HTML注释 VS CSS注释

对比项	HTML注释	CSS注释
语法	<!-- 注释内容 -->	/* 注释内容 */
位置	HTML文件中	CSS文件或<style>标签中
作用	注释HTML代码	注释CSS代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注释对比</title>
    <style>
        /* 这是CSS注释 */
        .box {
            width: 600px;
            /* height: 400px; */  /* 临时禁用高度 */
        }
    </style>
</head>
<body>
    <!-- 这是HTML注释 -->
    <div class="box">
        内容区域
    </div>
    
    <!-- 
        <div class="temp">
            临时禁用的HTML代码
        </div>
    -->
</body>
</html>

重要提示： CSS中不能使用HTML注释<!-- -->，HTML中也不能使用CSS注释/* */！

---

八、VSCode开发工具配置

8.1 VSCode的使用方式

VSCode使用方式
打开整个项目目录
在VSCode中新建文件
在VSCode中新建文件夹
拖拽目录到VSCode
文件>打开文件夹

推荐工作流程：

1. 将整个项目目录拖进VSCode
2. 在VSCode内部新建文件和目录
3. 使用VSCode的集成终端运行命令
4. 使用VSCode的扩展增强功能

8.2 常用设置配置

打开设置：文件 > 首选项 > 设置 或快捷键 Ctrl + ,

8.2.1 基础设置

设置项	设置名称	推荐值	说明
自动保存	Auto Save	afterDelay	延迟后自动保存
字体大小	Font Size	14-16	根据屏幕分辨率调整
目录缩进	Tree: Indent	20	目录结构缩进距离
合并单个目录	Compact Folders	取消勾选	显示完整目录结构
制表符大小	Tab Size	2或4	代码缩进空格数
保存时格式化	Format On Save	勾选	保存时自动格式化

8.2.2 详细设置步骤

1. 设置自动保存

设置 -> 搜索 "Auto Save" -> 选择 "afterDelay"

2. 设置字体大小

设置 -> 搜索 "Font Size" -> 设置为 14

3. 设置目录缩进

设置 -> 搜索 "Tree: Indent" -> 设置为 20

4. 取消合并单个目录

设置 -> 搜索 "Compact Folders" -> 取消勾选

5. 设置颜色主题

文件 > 首选项 > 颜色主题 (或按 Ctrl+K Ctrl+T)
推荐主题：Dark+ (默认)、One Dark Pro、Dracula

6. 设置文件图标主题

文件 > 首选项 > 文件图标主题
推荐：Material Icon Theme、vscode-icons

8.3 常用快捷键

VSCode快捷键
编辑操作
格式化代码
Alt+Shift+F
复制当前行
Ctrl+C Ctrl+V
删除当前行
Ctrl+Shift+K
移动行
Alt+↑/↓
文件操作
新建文件
Ctrl+N
保存文件
Ctrl+S
全部保存
Ctrl+K S
查找替换
查找
Ctrl+F
替换
Ctrl+H
全局查找
Ctrl+Shift+F
视图操作
命令面板
Ctrl+Shift+P
终端
Ctrl+`
侧边栏
Ctrl+B

功能	Windows/Linux	Mac	说明
代码自动格式化	Alt + Shift + F	Option + Shift + F	自动调整代码格式
复制当前行	Ctrl+C Ctrl+V	Cmd+C Cmd+V	连续按两次
向上/下移动行	Alt + ↑/↓	Option + ↑/↓	移动当前行
向上/下复制行	Shift+Alt+↑/↓	Shift+Option+↑/↓	复制当前行
删除当前行	Ctrl+Shift+K	Cmd+Shift+K	删除整行
多行光标	Alt+鼠标点击	Option+鼠标点击	多处同时编辑
选中相同内容	Ctrl+D	Cmd+D	逐个选中相同内容
注释/取消注释	Ctrl+/	Cmd+/	切换注释状态
保存文件	Ctrl+S	Cmd+S	保存当前文件
查找	Ctrl+F	Cmd+F	当前文件查找
替换	Ctrl+H	Cmd+H	当前文件替换
全局查找	Ctrl+Shift+F	Cmd+Shift+F	整个项目查找
打开终端	Ctrl+`	Ctrl+`	集成终端

8.4 Emmet快捷键

Emmet是一个强大的HTML/CSS快速编写工具，VSCode内置支持。

8.4.1 HTML快捷键

Emmet HTML
基础结构
标签生成
属性设置
内容填充
! 生成HTML5模板
div 生成标签
div#id 设置ID
div.class 设置类名
div{文本} 填充文本

基础模板：

输入：!
按：Tab
生成：

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    
</body>
</html>

标签生成：

输入：div
按：Tab
生成：<div></div>

输入：p
按：Tab
生成：<p></p>

输入：input
按：Tab
生成：<input type="text">

ID和类名：

输入：div#header
按：Tab
生成：<div id="header"></div>

输入：div.container
按：Tab
生成：<div class="container"></div>

输入：div#app.wrapper
按：Tab
生成：<div id="app" class="wrapper"></div>

输入：div.box.active
按：Tab
生成：<div class="box active"></div>

子元素（>）：

输入：ul>li
按：Tab
生成：
<ul>
    <li></li>
</ul>

输入：div>p>span
按：Tab
生成：
<div>
    <p><span></span></p>
</div>

兄弟元素（+）：

输入：div+p+span
按：Tab
生成：
<div></div>
<p></p>
<span></span>

重复（*）：

输入：ul>li*5
按：Tab
生成：
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

编号（$）：

输入：ul>li.item$*3
按：Tab
生成：
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

文本内容（{}）：

输入：div{Hello World}
按：Tab
生成：<div>Hello World</div>

输入：ul>li{项目$}*3
按：Tab
生成：
<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

属性设置（[]）：

输入：a[href="https://www.baidu.com"]
按：Tab
生成：<a href="https://www.baidu.com"></a>

输入：input[type="password" name="pwd"]
按：Tab
生成：<input type="password" name="pwd">

综合示例：

输入：div.container>header.header>h1{网站标题}+nav>ul>li*4>a[href="#"]{菜单$}
按：Tab
生成：

<div class="container">
    <header class="header">
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">菜单1</a></li>
                <li><a href="#">菜单2</a></li>
                <li><a href="#">菜单3</a></li>
                <li><a href="#">菜单4</a></li>
            </ul>
        </nav>
    </header>
</div>

8.4.2 CSS快捷键

输入：w100
按：Tab
生成：width: 100px;

输入：h50
按：Tab
生成：height: 50px;

输入：m20
按：Tab
生成：margin: 20px;

输入：p10
按：Tab
生成：padding: 10px;

输入：bgc#f00
按：Tab
生成：background-color: #f00;

输入：fz16
按：Tab
生成：font-size: 16px;

输入：c#333
按：Tab
生成：color: #333;

8.4.3 设置Emmet语言为中文

1. 打开设置（Ctrl+,）
2. 搜索 "Emmet: Variables"
3. 点击 "在 settings.json 中编辑"
4. 添加配置：

{
    "emmet.variables": {
        "lang": "zh-CN"
    }
}

5. 保存后，使用!快捷键生成的HTML模板会默认使用lang="zh-CN"

更多Emmet语法：https://docs.emmet.io/abbreviations/syntax/

8.5 常用扩展（Extensions）

VSCode扩展
语言支持
Chinese 中文语言包
HTML CSS Support
JavaScript ES6
开发辅助
Live Server 实时预览
Open in Browser 浏览器打开
Auto Rename Tag 自动重命名标签
Auto Close Tag 自动闭合标签
代码美化
Prettier 代码格式化
Beautify 代码美化
Indent Rainbow 缩进彩虹
效率工具
Chinese Lorem 中文假文
Path Intellisense 路径智能提示
CSS Peek CSS定义跳转
主题图标
Material Icon Theme 图标主题
One Dark Pro 颜色主题

8.5.1 必装扩展

扩展名	功能	使用场景
Chinese (Simplified) Language Pack	中文语言包	界面汉化
Live Server	实时预览服务器	开发时自动刷新
Open in Browser	在浏览器中打开	快速预览HTML
Auto Rename Tag	自动重命名配对标签	修改标签名
Auto Close Tag	自动闭合标签	自动补全结束标签
Chinese Lorem	生成中文假文	填充测试内容

8.5.2 推荐扩展

扩展名	功能	使用场景
Prettier	代码格式化	统一代码风格
HTML CSS Support	HTML中CSS智能提示	编写CSS类名
Path Intellisense	路径智能提示	引入文件
CSS Peek	查看CSS定义	快速定位样式
Indent Rainbow	缩进彩虹高亮	提高代码可读性
Bracket Pair Colorizer 2	括号配对着色	快速识别代码块
Material Icon Theme	文件图标主题	美化文件树

8.5.3 扩展安装步骤

1. 点击左侧活动栏的"扩展"图标（或按 Ctrl+Shift+X）
2. 在搜索框中输入扩展名
3. 点击"安装"按钮
4. 安装完成后可能需要重启VSCode

8.5.4 Live Server使用

方式1：右键HTML文件 -> Open with Live Server
方式2：点击右下角的 "Go Live" 按钮
方式3：快捷键 Alt+L Alt+O

效果：自动在浏览器中打开页面，修改代码后自动刷新
默认地址：http://127.0.0.1:5500/文件名.html

8.5.5 Chinese Lorem使用

输入：
clorem10     生成10个字的中文假文
clorem50     生成50个字的中文假文
clorem100    生成100个字的中文假文

按Tab键即可生成中文假文内容

---

九、课程总结与知识体系

9.1 本节课知识体系图

Day04 HTML与CSS基础
表单深化
label标签
for关联
嵌套关联
fieldset和legend
表单分组
边框标题
iframe框架
基本使用
嵌入网页
嵌入多媒体
target联动
指定框架打开
HTML进阶
字符实体
空格nbsp
标签符号lt gt
特殊符号
全局属性
id name class
style title lang
meta元信息
字符编码
SEO优化
视口设置
CSS入门
三种使用方式
行内式
内嵌式
外链式
基本语法
选择器
声明块
属性值
核心概念
元素关系
层叠性
属性区分

9.2 CSS样式特点总结

通过本节课的学习，我们总结出CSS的以下核心特点：

9.2.1 CSS的三大特性

CSS三大特性
层叠性 Cascading
继承性 Inheritance
优先级 Specificity
多个样式可以叠加
子元素继承父元素样式
选择器权重决定生效

1. 层叠性（Cascading）

• 多个来源的样式会叠加到同一元素上
• 不冲突的属性全部生效
• 冲突的属性根据优先级决定

2. 继承性（Inheritance）（下节课详讲）

• 子元素会继承父元素的某些样式（如字体、颜色等）
• 并非所有属性都会被继承

3. 优先级（Specificity）

• 行内式 > ID选择器 > 类选择器 > 标签选择器
• 优先级相同时，后声明的覆盖先声明的

9.2.2 CSS使用方式对比表

特性	行内式	内嵌式	外链式
分离程度	❌ HTML和CSS混合	⚠️ 部分分离	✅ 完全分离
复用性	❌ 无法复用	⚠️ 单页面复用	✅ 多页面复用
维护性	❌ 难以维护	⚠️ 一般	✅ 易于维护
优先级	⭐⭐⭐⭐⭐ 最高	⭐⭐⭐ 中等	⭐⭐⭐ 中等
加载性能	✅ 无额外请求	✅ 无额外请求	⚠️ 需额外请求（可缓存）
团队协作	❌ 不适合	⚠️ 小团队可用	✅ 非常适合
推荐指数	⭐ 不推荐	⭐⭐⭐ 可使用	⭐⭐⭐⭐⭐ 强烈推荐

9.3 学习建议

学习建议
多动手实践
理解核心概念
掌握工具使用
建立知识体系
每个示例都要敲一遍
尝试修改参数观察效果
理解HTML和CSS的关系
理解元素关系
理解层叠性
熟练使用VSCode
掌握Emmet快捷键
使用Live Server
绘制思维导图
整理笔记
总结规律

具体建议：

1. 多动手实践

   • 每个示例都要亲自敲一遍代码，不要只看不练
   • 尝试修改参数，观察不同效果
   • 完成课后作业和练习

2. 理解核心概念

   • HTML负责结构，CSS负责样式
   • 掌握HTML元素之间的父子、兄弟、祖先后代关系
   • 理解CSS的层叠性和优先级

3. 掌握工具使用

   • 熟练使用VSCode编辑器
   • 掌握Emmet快捷键提高编码效率
   • 使用Live Server实时预览效果

4. 建立知识体系

   • 绘制思维导图梳理知识点
   • 整理笔记，记录易错点
   • 总结规律，形成自己的理解

9.4 下节课预告

下节课（Day05）将深入学习CSS，内容包括：
Day05 CSS进阶
长度单位和颜色
CSS选择器
盒子模型
常用CSS属性
px em % 单位
颜色名 rgb hex
标签选择器
类选择器
ID选择器
通配选择器
block 块级
inline 行内
inline-block 行内块
字体样式
文本样式
背景样式

---

十、附录：完整示例代码

10.1 表单综合示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册表单</title>
    <style>
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            background: #f5f5f5;
            padding: 50px;
        }
        
        form {
            max-width: 600px;
            margin: 0 auto;
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        fieldset {
            border: 2px solid #e0e0e0;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        legend {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            padding: 0 10px;
        }
        
        table {
            width: 100%;
        }
        
        td {
            padding: 10px 5px;
        }
        
        label {
            display: inline-block;
            width: 100px;
            text-align: right;
            margin-right: 10px;
        }
        
        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="tel"],
        select,
        textarea {
            width: 100%;
            max-width: 300px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        button {
            padding: 10px 30px;
            margin-right: 10px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        
        button[type="submit"] {
            background: #4CAF50;
            color: white;
        }
        
        button[type="reset"] {
            background: #f44336;
            color: white;
        }
        
        button:hover {
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <form action="register.php" method="POST">
        <h1 style="text-align:center; color:#333;">用户注册</h1>
        
        <fieldset>
            <legend>基本信息</legend>
            <table>
                <tr>
                    <td><label for="username">用户名：</label></td>
                    <td><input type="text" id="username" name="username" required></td>
                </tr>
                <tr>
                    <td><label for="password">密码：</label></td>
                    <td><input type="password" id="password" name="password" required></td>
                </tr>
                <tr>
                    <td><label for="email">邮箱：</label></td>
                    <td><input type="email" id="email" name="email" required></td>
                </tr>
            </table>
        </fieldset>
        
        <fieldset>
            <legend>个人信息</legend>
            <table>
                <tr>
                    <td><label for="realname">真实姓名：</label></td>
                    <td><input type="text" id="realname" name="realname"></td>
                </tr>
                <tr>
                    <td><label>性别：</label></td>
                    <td>
                        <label><input type="radio" name="gender" value="male" checked>男</label>
                        <label><input type="radio" name="gender" value="female">女</label>
                    </td>
                </tr>
                <tr>
                    <td><label for="phone">电话：</label></td>
                    <td><input type="tel" id="phone" name="phone"></td>
                </tr>
                <tr>
                    <td><label for="job">职业：</label></td>
                    <td>
                        <select id="job" name="job">
                            <option value="">请选择</option>
                            <option value="student">学生</option>
                            <option value="programmer">程序员</option>
                            <option value="designer">设计师</option>
                            <option value="teacher">教师</option>
                            <option value="other">其他</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td valign="top"><label for="intro">自我介绍：</label></td>
                    <td><textarea id="intro" name="intro" rows="5" cols="30"></textarea></td>
                </tr>
            </table>
        </fieldset>
        
        <fieldset>
            <legend>其他信息</legend>
            <table>
                <tr>
                    <td><label>兴趣爱好：</label></td>
                    <td>
                        <label><input type="checkbox" name="hobby" value="reading">阅读</label>
                        <label><input type="checkbox" name="hobby" value="music">音乐</label>
                        <label><input type="checkbox" name="hobby" value="sports">运动</label>
                        <label><input type="checkbox" name="hobby" value="travel">旅游</label>
                    </td>
                </tr>
            </table>
        </fieldset>
        
        <div style="text-align:center; padding-top:20px;">
            <button type="submit">立即注册</button>
            <button type="reset">重置表单</button>
        </div>
    </form>
</body>
</html>

10.2 CSS三种方式综合示例

创建项目结构：

project/
├── index.html
├── inline.html
├── internal.html
├── external.html
└── css/
    └── style.css

style.css：

/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.6;
    background: #f9f9f9;
    padding: 20px;
}

/* 标题样式 */
h1 {
    font-size: 48px;
    color: #2c3e50;
    text-align: center;
    margin: 30px 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

h2 {
    font-size: 32px;
    color: #34495e;
    margin: 20px 0;
    border-left: 5px solid #3498db;
    padding-left: 15px;
}

/* 段落样式 */
p {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    font-size: 16px;
    color: #555;
}

/* 代码块样式 */
pre {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background: #2c3e50;
    color: #ecf0f1;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.5;
}

/* 导航栏样式 */
nav {
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    background: #3498db;
    border-radius: 8px;
    text-align: center;
}

nav a {
    display: inline-block;
    margin: 0 10px;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    background: rgba(255,255,255,0.2);
    border-radius: 5px;
    transition: all 0.3s;
}

nav a:hover {
    background: rgba(255,255,255,0.4);
    transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 768px) {
    h1 {
        font-size: 32px;
    }
    
    h2 {
        font-size: 24px;
    }
    
    p, pre {
        padding: 15px;
    }
}

---

结语

通过Day04的学习，我们完成了从HTML到CSS的完整过渡：

1. 表单部分：掌握了label、fieldset等高级表单元素的使用
2. iframe部分：学会了在页面中嵌入各种资源
3. HTML进阶：理解了字符实体、全局属性、meta元信息的重要性
4. CSS入门：掌握了CSS的三种使用方式和基本语法
5. 工具使用：学会了VSCode的配置和Emmet快捷键

这些知识为后续深入学习CSS打下了坚实基础。继续加油！

---

课程信息：

• 课程名称：Web前端培训课程
• 课程日期：2023年10月
• 授课讲师：教学团队
• 整理时间：2026年4月

参考资料：

• W3C HTML规范：https://www.w3.org/TR/html/
• W3C CSS规范：https://www.w3.org/Style/CSS/
• MDN Web文档：https://developer.mozilla.org/
• 菜鸟教程：https://www.runoob.com/

---

© 2023-2026 教育科技有限公司 版权所有