Web前端核心知识笔记

基于7张教学图像整理的HTML与CSS系统化学习指南，包含详细解释与可运行示例代码

HTML5语义化
CSS3选择器
样式层叠机制

一、HTML核心知识

HTML（超文本标记语言）是网页的骨架，负责定义网页的结构和内容。

1. 基本文档结构

标准HTML5文档结构

一个标准的HTML5文档必须包含以下基本结构元素：

<!DOCTYPE html>
文档类型声明，表示使用HTML5规范
<html lang="zh-CN">
根元素，指定页面语言为简体中文
<head>
包含元数据，如字符编码、标题、样式链接等
<meta charset="utf-8">
设置文档编码为UTF-8，支持中文显示
<title>
定义浏览器标签页上的网页标题
<body>
页面可见内容区域

示例代码

完整HTML5文档示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>九华山皮划艇.net</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

2. 常用HTML标签与属性详解

HTML标签功能速查表

标签 用途说明 常用属性
<header> 定义页眉区域 id, class
<nav> 定义导航栏 id="bar"
<main> 定义主内容区 无特定属性
<h1>–<h6> 标题层级，h1最重要 文本内容
<p> 段落容器 id, class
<span> 行内容器，用于局部样式控制 class="companyname"
<img> 插入图像资源 src, alt, width, height
<a> 超链接或跳转按钮 href, alt（配合图片时）

图像标签示例解析

图像标签属性详解
<img src="皮划艇.gif" alt="九华山皮划艇.net" width="500" height="60">
src
指定图像文件路径
alt
替代文本，在图像无法加载时显示，提升可访问性
width/height
设定图像尺寸，单位为像素

超链接结合图像示例

图像作为可点击链接
<a href="游览项目.html">
    <img src="游览项目.gif" alt="游览项目" width="90" height="35">
</a>

此结构将图像作为可点击链接，常用于菜单按钮设计。

实时示例：
游览项目按钮

点击上方按钮可模拟图像链接效果（已禁用跳转）

3. 实际HTML代码完整示例

旅游网站首页代码片段

以下是一个完整的旅游网站首页代码片段，源自图像中HBuilder X编辑器截图内容：

完整HTML页面代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>九华山皮划艇.net</title>
    <link rel="stylesheet" href="九华山皮划艇样式表.css">
    <style>
        .feature {color: #B33939;}
        #new {color: #227093;}
    </style>
</head>
<body>
    <header>
        <h1><img src="皮划艇.gif" alt="九华山皮划艇.net" width="500" height="60"></h1>
    </header>
    <nav id="bar">
        <a href="网站目录.html"><img src="主页.gif" alt="主页" width="90" height="35"></a> &nbsp;
        <a href="游览项目.html"><img src="游览项目.gif" alt="游览项目" width="90" height="35"></a> &nbsp;
        <a href="预约.html"><img src="预约.gif" alt="预约" width="190" height="35"></a> &nbsp;
        <a href="联系我们.html"><img src="联系我们.gif" alt="联系我们" width="130" height="35"></a>
    </nav>
    <main>
        <h2>您的下一次冒险仅一桨之遥......</h2>
        <img src="英雄.jpg" alt="您的下一次冒险仅一桨之遥......" width="500" height="350">
        <p id="new">在探索风景秀丽的<span class="companyname">九华山</span>时，参加一次有导游带领的皮划艇</p>
    </main>
</body>
</html>
关键点说明：
  • 使用了外部CSS文件（九华山皮划艇样式表.css）进行全局样式管理
  • 同时在 <style> 中定义了两个内嵌样式 .feature 和 #new
  • <span class="companyname"> 对"九华山"进行了特殊样式标识
  • 所有图像均配有 alt 属性，符合无障碍设计规范

二、CSS核心知识

CSS（层叠样式表）是网页的皮肤，负责定义网页的表现形式和布局样式。

1. CSS基本语法结构

CSS样式构成

CSS样式由两部分组成：
组成部分 说明
选择符 指定目标HTML元素，可以是标签名、类名或ID
声明 包含于大括号 {} 内的一组"属性: 值;"，多个声明间用分号分隔
CSS语法可视化：
body {
color: blue;
}
↑ 选择符
↑ 声明块
↑ 属性
↑ 值

实时CSS效果演示

示例代码：
CSS基本语法示例
body {
    color: blue;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
效果演示：

这是一个应用了CSS样式的演示段落。

CSS使这段文字显示为蓝色，背景为浅灰色，字体为Arial。

2. CSS选择符类型对比分析

CSS选择符类型对比

选择符类型 语法格式 用途说明 示例代码
类选择符（class） .类名 应用于一类元素，可重复使用 .feature {color: #B33939;}
ID选择符（id） #ID名 应用于单个唯一元素 #new {color: #227093;}
后代选择符 容器选择符 目标选择符 在特定上下文中设置子元素样式 nav a {color: red;}
类选择符

适用于需要统一风格的多个元素，例如所有特色项目都加红色字体。

.feature {color: #B33939;}
ID选择符

用于唯一元素，如导航栏 id="bar"，确保其样式独立不被干扰。

#new {color: #227093;}
后代选择符

体现"上下文关系"，例如只让导航栏内的链接变红，不影响其他位置的链接。

nav a {color: red;}

3. CSS配置方法汇总

四种CSS配置方法对比

方法 实现方式 作用范围 典型应用场景
内联样式 直接写入HTML标签的 style 属性 仅当前标签 快速调试或强制覆盖样式
嵌入样式 在 <head> 中使用 <style> 标签定义 整个当前HTML文档 单页临时样式
外部样式 创建独立 .css 文件并通过 <link> 引入 多个页面共享 项目级样式复用
导入样式 在CSS文件中使用 @import url(...) 引入其他CSS文件 组织模块化样式表 第三方库引入或主题切换
各方法代码示例：
1 内联样式 
<p style="color: red;">
    这段文字是红色的
</p>
2 嵌入样式 
<style>
    .feature { 
        color: #B33939; 
    }
</style>
3 外部样式 
<link rel="stylesheet" 
      href="site.css">
4 导入样式 
@import url("reset.css");
必须放在CSS文件顶部

三、CSS样式优先级（层叠机制）

CSS样式的应用遵循"层叠"原则，即后定义的样式会覆盖先定义的，但具体优先级有明确层级。

1. 样式优先级从低到高

1

默认样式

浏览器内置的基本样式，如链接的蓝色和下划线。

例如：a { color: blue; text-decoration: underline; }

2

外部样式表

通过<link>引入的外部CSS文件中的样式。

例如：<link rel="stylesheet" href="site.css">

3

嵌入样式

在<style>标签中定义的样式，优先级高于外部样式。

例如：<style> body { color: blue; } </style>

4

内联样式（最高优先级）

直接在HTML标签的style属性中定义的样式。

内联样式示例
<p style="color: red;">
    © 版权信息
</p>

© 此段落的文本颜色设置为红色，并且优先于嵌入样式和外部样式。

这是一个内联样式的实际效果展示

核心原则：内层样式覆盖外层样式

离HTML元素越近的样式，优先级越高。内联样式（在元素标签内）优先级最高，外部样式表优先级最低。

2. 样式优先级示例说明

假设存在以下三种样式设置：

外部样式表 site.css 
/* site.css */
body {
    color: black;         /* 黑色 */
    background-color: yellow;
}
优先级：低
嵌入样式 <style>标签 
<!-- 嵌入样式 -->
<style>
    body {
        color: blue;      /* 蓝色，优先级高于外部样式 */
    }
</style>
优先级：中
内联样式 style属性 
<!-- 内联样式 -->
<p style="color: red;">
    © 版权信息
</p>
优先级：高
最终效果：

此段落应用了外部样式和嵌入样式。注意：嵌入样式中配置的蓝色文本颜色优先于外部样式表中配置的黑色。

© 此段落的文本颜色设置为红色，并且优先于嵌入样式和外部样式。

这是模拟的最终显示效果

效果总结：
  • 背景
    页面背景为黄色（来自外部样式）
  • 文字1
    第一段文字为蓝色（嵌入样式覆盖外部样式）
  • 文字2
    第二段文字为红色（内联样式优先级最高），并正确显示版权符号 ©

四、综合练习示例：验证样式优先级

根据图像中"层叠样式表测试要求.txt"的指导，完成以下任务：

1. 创建文件夹结构

项目目录结构

w3/
└── 层叠样式表/
├── site.css
└── 层叠测试.html

这是一个典型的Web项目目录结构，将CSS文件与HTML文件分离存放，便于管理。

2. 编写 site.css 文件内容

site.css 文件代码

site.css - 外部样式表
/* site.css */
body {
    color: #000000;           /* 文本黑色 */
    background-color: #FFFFCC; /* 背景黄色 */
}
CSS颜色值说明：
#000000
黑色文本
#FFFFCC
浅黄色背景

3. 编写 层叠测试.html 文件

层叠测试.html 文件代码

层叠测试.html - 完整HTML文件
<!DOCTYPE html>
<html>
<head>
    <title>层叠样式应用</title>
    <link rel="stylesheet" href="site.css">
    <style>
        body {
            color: #0000FF; /* 文本蓝色，优先于外部样式 */
        }
    </style>
</head>
<body>
    <p>此段落应用了外部样式和嵌入样式。注意：嵌入样式中配置的蓝色文本颜色优先于外部样式表中配置的黑色。</p>
    <p style="color: red;">© 此段落的文本颜色设置为红色，并且优先于嵌入样式和外部样式。</p>
</body>
</html>
预期效果演示：

此段落应用了外部样式和嵌入样式。注意：嵌入样式中配置的蓝色文本颜色优先于外部样式表中配置的黑色。

© 此段落的文本颜色设置为红色，并且优先于嵌入样式和外部样式。

页面背景

为黄色（来自外部样式表）

第一段文字

为蓝色（嵌入样式覆盖外部样式）

第二段文字

为红色（内联样式优先级最高）

五、JavaScript核心知识（待补充）

当前提供的7张图像中未包含任何关于JavaScript的内容

因此本节为空白占位，建议后续补充以下知识点以形成完整前端技能体系：

待补充主题 说明
基本语法结构 变量声明、数据类型、运算符、流程控制
DOM操作 获取元素、修改内容、动态添加/删除节点
事件处理 click、load、submit等常见事件绑定
函数定义与调用 封装可复用逻辑
BOM与API window对象、定时器、本地存储等
异步编程 Promise、async/await、AJAX请求

提示：可在HTML中通过 <script> 标签引入JS代码

JavaScript引入示例
<script>
    alert("欢迎学习前端开发！");
</script>

六、总结与学习建议

前端知识要点总结

方面 总结要点
HTML 结构是骨架，必须语义化使用标签，保证可读性与SEO友好性
CSS 样式是皮肤，掌握选择符与层叠优先级是关键
推荐实践 优先使用外部样式表，提高代码复用性和维护效率
避免做法 过度使用内联样式，除非用于紧急覆盖或动画控制
缺失环节 JavaScript交互功能尚未涉及，需系统学习补充
开发工具 图像中使用 HBuilder X 4.87，适合新手入门

下一步学习路径建议

  1. 1
    掌握HTML所有常用标签及其语义化使用场景
  2. 2
    深入学习CSS布局技术（Flexbox、Grid）
  3. 3
    学习JavaScript基础语法和DOM操作
  4. 4
    实践响应式设计原理，确保网页适配各种设备
  5. 5
    使用版本控制工具（如Git）管理代码

实用开发工具推荐

Visual Studio Code
微软开发的免费代码编辑器，插件丰富
Chrome DevTools
浏览器内置的开发者工具，用于调试和性能分析
CodePen / JSFiddle
在线代码编辑和分享平台，适合快速测试代码

Web前端学习笔记

基于7张教学图像整理的HTML与CSS核心知识

HTML基础 CSS基础 样式优先级 实战示例

本内容由AI生成，可能存在错误或不准确之处。请在使用前自行核实信息的准确性。

报告撰写时间：2026年3月26日 | 来源依据：用户上传的7张JPG教学图像内容解析