第一章 Web前端开发技术综述
本专栏以 《Web前端开发技术》（清华大学出版社，储久良 著） 为主要参考资料，旨在配合课程教学与实践练习使用。文章内容将结合理论与实践，深入讲解前端开发技术，帮助读者系统掌握 Web 前端开发技能。
我会一直连载，如果你喜欢本系列内容，欢迎 订阅专栏 或者关注我，这样就不会错过后续更多前端教程、实战案例与技术分享。
文章目录
1.1 Web 概述
1.1.1 Web 的起源
- Web（World Wide Web，万维网）诞生于 1990 年代，由蒂姆·伯纳斯-李提出。
- 最初目的是通过 超文本（HTML） 实现科研信息共享。
- Web 技术的三大核心：HTML（超文本标记语言）、HTTP（超文本传输协议）、URL（统一资源定位符）。
1.1.2 Web 的特点
- 跨平台：浏览器即运行环境，几乎所有设备可访问。
- 超链接：资源之间通过链接相互关联。
- 交互性：支持用户输入与反馈。
- 多媒体融合：支持文本、图像、音频、视频等。
- 快速迭代：Web 应用可随时更新，无需用户手动安装。
1.1.3 Web 的工作原理
- 用户在浏览器输入 URL。
- 浏览器通过 DNS 解析获取服务器 IP。
- 浏览器向服务器发送 HTTP 请求。
- 服务器返回 HTML/CSS/JS 等资源。
- 浏览器解析并渲染页面，执行脚本，呈现结果。
1.1.4 Web 的相关概念
- 前端：用户直接接触的界面与交互。
- 后端：负责业务逻辑与数据存储的服务器端。
- 全栈开发：既懂前端又能进行后端开发的工程师。
- Web 应用：运行在浏览器上的软件，如电商、社交平台。
1.2 Web 前端开发工程师的职业需求
1.2.1 Web 前端开发的由来
- 早期网页多为静态 HTML，只有少量样式和表单交互。
- 随着 JavaScript、AJAX、CSS3 的发展，网页逐渐具备应用特性。
- 前端逐渐从“网页制作”转向“工程化开发”。
1.2.2 Web 前端开发工程师的职业需求
- 必备技能：
- 掌握 HTML、CSS、JavaScript。
- 熟悉框架：Vue、React、Angular。
- 能够适配多端设备（PC、移动端、小程序）。
- 工程化能力：
- 熟悉模块化与构建工具（Webpack、Vite）。
- 使用 Git 进行版本管理。
- 了解自动化测试与 CI/CD。
- 综合素质：
- 用户体验与性能优化意识。
- 安全防护（XSS、CSRF）。
- 团队协作与沟通能力。
1.3 Web 前端开发技术
1.3.1 HTML
-
结构化语言，用于定义网页内容。
-
常见元素：
<h1>~<h6>标题<p>段落<a>超链接<img>图片<form>表单
-
发展至 HTML5，新增语义化标签（
<header>、<article>）、多媒体支持（<audio>、<video>）。
1.3.2 CSS
- 用于描述网页样式与布局。
- 核心功能：
- 选择器与样式规则。
- 盒模型（Box Model）。
- 定位与浮动。
- Flex 与 Grid 布局。
- 响应式设计（Media Query）。
- CSS3 新特性：动画（animation）、过渡（transition）、阴影（shadow）。
1.3.3 JavaScript
- 网页的脚本语言，负责逻辑与交互。
- 核心内容：
- DOM 操作：增删改查页面元素。
- 事件处理：监听点击、输入等用户操作。
- 异步编程：回调、Promise、async/await。
- ES6+ 新特性：模块化、解构赋值、箭头函数。
- 生态：Node.js、前端框架、前端工程化工具。
1.4 Web 前端开发工具
1.4.1 Visual Studio Code
- 轻量级、插件丰富的编辑器。
- 特点：智能提示、调试功能、Git 集成、前端开发插件（如 ESLint、Prettier）。
1.4.2 HBuilder X
- 专为 Web 和移动开发设计的 IDE。
- 支持 HTML5、Vue、小程序开发。
- 内置真机调试与打包功能，适合跨端开发。
1.5 浏览器工具
1.5.1 Microsoft Edge
- 基于 Chromium 内核。
- 特点：安全性高、内置开发者工具、与 Windows 系统深度集成。
1.5.2 Google Chrome
- 全球使用率最高的浏览器。
- DevTools 强大，支持网络分析、性能优化、Lighthouse 测试。
1.5.3 Mozilla Firefox
- 开源浏览器，注重隐私保护。
- 提供强大的 CSS Grid/Flex 调试工具。
1.5.4 Safari
- 苹果生态默认浏览器。
- 对 HTML5 与 CSS3 支持领先，尤其在移动端表现优秀。
1.5.5 Opera
- 以轻量化和创新功能著称。
- 内置广告拦截、VPN。
1.6 思政案例 1 —— 社会主义核心价值观
此案例仅作展示，请继续往下学习
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>社会主义核心价值观</title>
<style type="text/css">
body {
text-align: center;
margin: 0 50px;
}
p {
font-size: 20px;
text-indent: 2em;
text-align: left;
}
h3 {
font-size: 28px;
text-shadow: 0px 0px 5px yellow;
color: red;
}
</style>
</head>
<body>
<h3>社会主义核心价值观基本内容</h3>
<div id="">
<img src="image-1-1.jpg" alt="加载失败，图片内容为社会主义核心价值观">
</div>
<p>
党的十八大报告提出，要大力加强社会主义核心价值体系建设，“倡导富强、民主、文明、和谐，倡导自由、平等、公正、法治，倡导爱国、敬业、诚信、友善，积极培育和践行社会主义核心价值观”。</p>
<a href="http://paper.people.com.cn/">来源：人民网－人民日报</a>
<script type="text/javascript">
alert("我们要努力成为德智体美劳全面发展的社会主义建设者和接班人！");
</script>
</body>
</html>
练习 1
答案仅供参考
一、选择题
-
HTML 是一种（ ）语言。
A. 编译型
B. 超文本标记
C. 面向对象的编程
D. 高级程序设计答案：B
-
世界上第一个网页是（ ）。
A. http://www.w3c.org
B. http://info.cern.ch
C. http://www.microsoft.com
D. http://www.baidu.com答案：B
-
访问 FTP 站点使用的协议类型是（ ）。
A. http
B. ftp
C. https
D. mailto答案：B
-
设计 JavaScript 语言的公司是（ ）。
A. Netscape
B. Microsoft
C. Sun
D. Google答案：A
二、填空题
-
HTML 文档是由 ______ 构成的 ______ 文件。
答案：标签，文本
-
世界上第一个网站的发明人是 ______。
答案：Tim Berners-Lee
三、简答题
-
简述Web的工作原理。
答案：Web的工作原理是客户端（浏览器）通过HTTP协议向服务器请求网页，服务器接收到请求后返回相应的HTML、CSS、JavaScript等资源，浏览器解析并渲染网页，最终展示给用户。用户的操作如点击和输入会触发新的请求或页面交互。
-
写出URL的标签，并说明它的组成及作用。
答案：URL的标签是统一资源定位符（Uniform Resource Locator），它由协议（如http/https/ftp）、主机名（域名）、端口号（可选）、路径、查询参数、锚点（可选）组成。其作用是唯一定位互联网上的资源，如网页、图片等。
-
分别说明HTML、CSS、JavaScript在Web网页设计中的作用。
答案：HTML用于网页内容结构的定义，决定网页的信息和布局；CSS负责网页的样式和美化，如颜色、字体、排版等；JavaScript用于网页的交互和动态效果，实现如表单验证、动画、数据交互等功能。
-
HTML的全称是________，URL的全称是________，CSS的全称是________。
答案：HTML的全称是 HyperText Markup Language（超文本标记语言），URL的全称是 Uniform Resource Locator（统一资源定位符），CSS的全称是 Cascading Style Sheets（层叠样式表）。
3180
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
