前端-html+CSS基础到高级(一)html基础

此系列文章分为两大模块，首先是HTML基础认知，然后是HTML标签学习

 一、综合案例

 1. 综合案例1：招聘页面制作

案例特征：
模拟企业招聘岗位介绍页面
包含职位描述、岗位要求、工作地址等典型模块
文本内容结构化展示
技术要点：
使用HTML实现文章页排版
文本段落的分区处理
列表项的有序排列

2. 综合案例2：今日热词页面制作

交互特性：
包含可点击的蓝色热词链接
鼠标悬停时显示手型指针
点击后跳转至多媒体页面

多媒体功能：
音频播放器功能（阿卡贝拉案例）
视频播放器功能（翻唱案例）
播放进度条控制

音频实现：
支持播放/暂停功能
显示当前播放进度（0:07/4:31）
音频文件嵌入技术

视频实现：
点击触发视频显示
支持播放控制（0:09/3:32）
响应式交互设计

二、基础认知

1）网页组成

网页由哪些部分组成？

常见元素：文字、图片、音频、视频、超链接是网页中最常见的五大组成部分
用户视角：日常浏览网页时看到的所有内容都属于这些类别，其中文字和图片是最基础的元素
交互元素：超链接是特殊的网页元素，鼠标悬停会变成小手形状，点击可实现页面跳转

2）网页本质 

我们看到的网页背后本质是什么？

开发本质：所有网页内容都是通过前端开发人员编写的代码实现的
岗位关联：前端工程师/开发程序员的职责就是编写这些代码
转换过程：代码需要经过浏览器处理后才能呈现为可视化的网页内容

3）网页代码 

查看方式：在网页空白处右键选择"检查"可查看网页源代码
代码特点：由大量英文单词和符号组成，但学习后很快就能掌握
开发工具：实际开发时使用VS Code等专业编辑器编写这些代码

代码示例：展示了京东首页的实际HTML代码结构
学习曲线：虽然初看复杂，但经过系统学习后都能理解

4）应用案例 

例题:网页组成回答问题题目解析
问题1：确认网页由文字、图片、音频、视频、超链接五大部分组成
问题2：强调网页背后本质是前端程序员编写的代码

前端的代码是通过什么软件转换成用户眼中的页面的？
问题3：指出浏览器是将代码转换为可视化页面的关键软件
专业术语：浏览器处理代码的过程专业称为"渲染和解析"
实践建议：开发时必须安装浏览器(推荐Chrome)来测试代码效果

5）五大浏览器和渲染引擎



• 定义: 浏览器是网页显示、运行的平台，是前端开发必备利器
• 常见五大浏览器:
  • IE浏览器（Windows系统自带）
  • 火狐浏览器(Firefox) - 图标特征：小狐狸抱着紫色球
  • 谷歌浏览器(Chrome) - 程序员最喜爱的浏览器（四色图标）
  • Safari浏览器（苹果电脑自带）
  • 欧朋浏览器(Opera) - 虽属五大但日常较少见
• 选择建议: 程序员特别推荐使用Chrome浏览器，因其内置众多辅助开发功能

 1.浏览器市场份额

• 市场主导: Chrome浏览器市场份额稳定在60%-70%之间
• 使用建议: 开发时应确保安装Chrome浏览器以便调试

2. 渲染引擎



• 核心功能:
  • 将HTML代码转换为可视化的网页内容
  • 又称"浏览器内核"
• 厂商差异:
  • 不同浏览器使用不同渲染引擎
  • 导致相同网页在不同浏览器中显示效果存在差异
• 性能影响:
  • 内核差异会影响代码加载速度、渲染效果
  • 类比：不同电脑硬件配置影响运行速度
• 注意点：
• 渲染引擎不同，导致解析相同代码时的 速度、性能、效果也不同

3. 内容小结

• 核心记忆:
  • 五大浏览器名称及特点
  • 浏览器通过渲染引擎解析代码
• 关键理解:
  • 网页在不同浏览器中显示效果不完全一致
  • 开发首选Chrome浏览器
• 记忆技巧: 通过图标特征记忆各浏览器（如狐狸图标对应火狐）