掌握 HTML/CSS/JavaScript 核心体系，熟练运用 Vue/React 主流框架与 TypeScript 强类型工程化开发，即可快速入行。
课程结构
前端技术结构图
就业方向介绍
初级入门专注网页、H5、小程序开发，精通 HTML/CSS/JavaScript 核心体系，熟练运用 Vue/React 主流框架与 TypeScript 强类型工程化开发，即可快速入行。岗位覆盖互联网、政企、电商、教育等全行业，人才需求旺盛、就业面极广，是数字化时代的基础技术入口。
进阶跃升可向 Node.js 全栈开发 纵深发展，打通前后端全链路研发；亦可深耕 跨端统一开发，借助 Electron、Flutter、Taro 等技术栈实现 “一次开发、多端部署”，大幅提升研发效率与产品覆盖度，薪资竞争力与技术天花板同步拉高。垂直赛道可聚焦 数据可视化、3D 交互、Web3D / 元宇宙、游戏前端、低代码平台、AI 前端融合 等高价值领域，形成差异化技术壁垒，成为细分领域稀缺专家。
资深巅峰成长为 前端架构师、技术负责人、研发总监，主导大型前端工程化体系建设，负责技术架构设计、性能优化、质量管控与团队管理。统筹微前端、模块化、CI/CD、监控告警、跨团队协作等全流程，驱动产品体验升级与技术效能最大化，成为企业数字化转型的核心技术决策者。
HTML 文档的结构
HTML 的编辑工具
网页的摘要信息 2-1
本门课程目标
学完本门课程后，你能够：
制作界面美观大方、面向企业应用的静态商业网站
掌握 Web 开发的行业规范和标准
课程项目展示
贵美商城
首页
商品展示页（点击左边“商品分类”任一链接）
具体商品详细介绍页（点击任一商品图片）
购物车页面（点击“立刻购买”按钮）
登录页（点击右上方的导航菜单）
注册页（点击右上方的导航菜单）
帮助中心客服页面（点击右上方的导航菜单）
预习检查
HTML 文档的基本结构是什么？
什么是块级、行级标签？
、
、
分别代表什么？
插入一条直线用什么标签？
本章任务
本章目标
使用 HTML 的基本结构创建网页
使用行级和块级标签组织页面内容
使用图像标签实现图文并茂的页面
什么是 HTML
HTML 页面中的块和行
块级标签
根据使用场合，块级标签又细分为：
基本块级标签
常用于布局的块级标签
基本块级标签 3-1
基本块级标签 3-2
基本块级标签 3-3
练习——基本块级标签
常用于布局的块级标签 7-1
常用于布局的块级标签 7-2
常用于布局的块级标签 7-3
常用于布局的块级标签 7-4
常用于布局的块级标签 7-5
常用于布局的块级标签 7-6
常用于布局的块级标签 7-7
小结
1、div-ul(ol)-li ：常用于分类导航或菜单等
2、div-dl-dt-dd ：常用于图文混编的场合
3、table-tr-td ：常用于图文布局或显示数据
4、form-table-tr-td：常用于布局表单
练习——常用于布局的块级标签
共性问题集中讲解
行级标签 3-1
行级标签 3-2
行级标签 3-3
为什么需要 W3C 标准
W3C 提倡的 Web 结构
XHTML 1.0 基本规范
练习——行级元素
总结
行级和块级标签有什么区别？用途？
块级标签分为几类，分别包含哪些？
常用的 4 种块状结构是什么？
W3C 提倡的 Web 页结构是什么？
XHTML 基本规范是什么？
