本书是Web前端网页设计的基础性教材，为深入实施“科教兴国战略”，服务“强化现代化建设人才支撑”，加快建设“网络强国，数字中国”，本书紧贴互联网行业发展对Web前端开发的岗位要求，按照“1+X”证书《Web前端开发职业技能等级标准》的要求，从初学者角度出发，讲解Web前端网页设计相关基础知识。本书按照认知递进的过程组织为6个单元，单元1对Web前端开发做了总体概述，单元2介绍使用HTML搭建网页基本结构，单元3介绍使用CSS对网页进行基本布局和美化。在对网页的基本“结构”和“表现”有了完整介绍后，单元4和单元5分别介绍HTML5及CSS3中的新增特性，并以更简洁高效的代码，进一步优化网页结构、美化网页表现。最后，单元6在前面单元打下的基础之上，以综合项目实战的形式对响应式页面设计“神器”—Bootstrap进行了介绍，以作为全书的可选扩展模块。本书适合作为高职高专院校、应用型本科院校网页设计课程的教材，也可以作为Web 前端“课赛证”融通的培训教材，并适合广大计算机爱好者自学使用。

随着互联网特别是移动互联网行业的蓬勃发展，竞争日趋激烈。开发平台对Web 界面的外观精美性、操作友好性提出了更高的要求，Web 前端从业人员数量猛增，需求和待遇大幅度提升。本书积极贯彻党的二十大精神，为深入实施“科教兴国战略”，服务“强化现代化人才支撑”，加快建设“网络强国，数字中国”，紧贴互联网行业发展对Web 前端开发的岗位要求，结合众多高职院校教师和学生的教学反馈编写。 本书是Web 前端网页设计的基础性教材，按照“1+X”证书《Web 前端开发职业技能等级标准》的要求，从初学者角度出发，讲解Web 前端网页设计相关基础知识。本书按照认知递进的过程组织为6 个单元，单元1 对Web 前端开发做了总体概述，单元2 介绍使用HTML 搭建网页基本结构，单元3 介绍使用CSS 对网页进行基本布局和美化。在对网页的基本“结构”和“表现”有了完整介绍后，单元4 和单元5 分别介绍HTML5 及CSS3 中的新增特性，并以更简洁高效的代码，进一步优化网页结构、美化网页表现。最后，单元6 在前面单元打下的基础之上，以综合项目实战的形式对响应式页面设计“神器”—Bootstrap 进行了介绍，以作为全书的可选扩展模块。 本书特点概括如下。 ? 内容模块化：Web 前端开发涉及技术种类较多，本书内容组织模块化，内容结构清晰，相对独立，便于读者根据需要进行有选择的模块化学习。 ? 知识点精炼：本书不要求面面俱到，紧扣网页设计所需基本知识和技能的主脉分解知识点，符合“应用型”技能人才的培养定位。 ? 案例丰富实用：本书根据“做中学”的一体化教学原则，通过精心设计的案例加深读者对重要知识点的理解与运用。 ? 融合思政育人：本书在讲解专业知识的同时，兼顾思政教育。将社会主义核心价值观和中华优秀传统文化教育巧妙地融入教学内容及案例设计中，以期达到“润物细无声”的思政育人目的。 ? “课赛证”融通：本书本着“课赛证”融通的理念编写，兼顾Web 前端网页设计基础知识、Web 前端开发职业技能标准及Web 前端开发赛项辅导需求。 ? 配套资源完善：本书提供案例源码、在线练习及答案等电子资源。 本书适用于以下读者。 1．高职高专院校及应用型本科院校相关专业学生：本书可作为软件技术、人工智能、大数据应用、网络技术等计算机相关专业网页设计课程的基础性教材。 2．参加Web 前端开发职业技能等级初级证书考试和Web 开发赛项人员，本书可作为“课赛证”融通的培训教材。 3．社会从业者：社会上从事Web 前端开发的相关技术人员，对基础入门知识有所需求的人员。 本书单元1 由刘斌编写，单元2 由王明宇编写，单元3 由刘心美编写，单元4 由谭东编写，单元5 由权小红编写，单元6 由刘燕婷编写，全书由权小红统稿。本书在编写过程中，参阅了大量文献资料和网上资源，在此向相关作者表示感谢！尽管做了最大努力，书中的不妥疏漏之处仍在所难免，欢迎广大读者批评指正，若对本书有任何意见或建议，欢迎发送电子邮件至395713213@qq.com 联系我们。若教师备课需要PPT、教学大纲、教学设计等参考资源，也欢迎通过上述邮箱联系索取。 编 者

单元1 Web前端开发概述 1.1 Web概述 1.1.1 Web系统原理 1.1.2 前端与后端 1.1.3 网站与网页 1.1.4 主流浏览器介绍 1.2 前端常用技术 1.2.1 前端常用技术概述 1.2.2 前端技术的发展前景 1.3 HBuilderX开发工具 1.3.1 常用前端开发工具 1.3.2 HBuilderX的下载及使用 1.3.3 HBuilderX常用快捷键 单元2 HTML基础 2.1 HTML概述 2.1.1 什么是HTML 2.1.2 HTML文档的基本结构 2.1.3 HTML标签与元素 2.1.4 HTML属性 2.2 文本类标签 2.2.1 标题标签 2.2.2 段落标签 2.2.3 换行标签与水平线标签 2.2.4 文本格式化标签 2.2.5 转义字符 2.3 图片及路径 2.3.1 ＜img＞标签 2.3.2 相对路径与绝对路径 2.4 超链接 2.4.1 ＜a＞ 标__________签 2.4.2 锚点超链接 2.4.3 图片超链接 2.5 列表 2.5.1 有序列表 2.5.2 无序列表 2.5.3 定义列表 2.6 表格 2.6.1 表格的基本结构 2.6.2 单元格的合并 2.7 表单 2.7.1 ＜form＞标签 2.7.2 表单控件 2.8 容器与框架 2.8.1 ＜div＞标签 2.8.2 ＜span＞标签 2.8.3 ＜iframe＞标签 单元3 CSS基础 3.1 CSS概述 3.1.1 什么是CSS 3.1.2 CSS的基本语法 3.1.3 网页引入CSS 的方法 3.2 CSS 选择器 3.2.1 基本选择器 3.2.2 组合选择器 3.2.3 属性选择器 3.2.4 伪选择器 3.3 CSS文本样式 3.3.1 设置字体样式 3.3.2 设置文本缩进与对齐 3.3.3 设置行高与间距 3.3.4 设置文本修饰 3.4 CSS 背景和边框样式 3.4.1 设置背景颜色 3.4.2 设置背景图片 3.4.3 设置边框样式 3.5 CSS盒子模型 3.5.1 盒子模型 3.5.2 设置显示模式 3.5.3 设置内边距与外边距 3.5.4 外边距合并 3.6 CSS设置超链接和列表样式 3.6.1 超链接伪类 3.6.2 设置超链接样式 3.6.3 设置鼠标样式 3.6.4 设置列表样式 3.7 CSS设置表格和表单样式 3.7.1 设置表格样式 3.7.2 设置表单样式 3.8 CSS浮动布局 3.8.1 标准文档流 3.8.2 设置浮动 3.8.3 清除浮动 3.9 CSS定位布局 3.9.1 position属性 3.9.2 定位偏移 3.9.3 z-index属性 3.10 CSS的继承性与优先级 3.10.1 CSS样式的层叠性 3.10.2 CSS样式的继承性 3.10.3 CSS样式的优先级 单元4 HTML5新特性 4.1 HTML5概述 4.1.1 HTML5的优势 4.1.2 HTML5的文档声明 4.1.3 HTML5的语法变化 4.2 HTML5新增元素及通用属性 4.2.1 HTML5新增结构语义元素 4.2.2 HTML5新增其他语义元素 4.2.3 HTML5新增多媒体元素 4.2.4 HTML5新增通用属性 4.3 HTML5智能表单 4.3.1 input元素新增type 类型 4.3.2 表单新增属性 单元5 CSS3新特性 5.1 CSS3概述 5.1.1 CSS3的发展史 5.1.2 CSS3的模块化 5.1.3 CSS3的浏览器兼容性 5.1.4 CSS3支持的颜色表示 5.1.5 CSS3支持的长度单位 5.2 CSS3新增选择器 5.2.1 新增属性选择器 5.2.2 结构伪类选择器 5.2.3 UI伪类选择器 5.3 CSS3文本新特性 5.3.1 CSS3新增文本相关属性 5.3.2 CSS3设置多列文本及自定义字体 5.4 CSS3背景和边框新特性 5.4.1 CSS3新增背景相关属性 5.4.2 CSS3设置渐变背景色 5.4.3 CSS3新增边框相关属性 5.5 CSS3盒子模型新特性 5.5.1 盒子模型box-sizing属性 5.5.2 CSS3设置弹性盒子 5.6 CSS3动效新特性 5.6.1 CSS3过渡 5.6.2 CSS3变形 5.6.3 CSS3动画 单元6 Bootstrap综合项目实战 6.1 项目描述 6.2 预备知识 6.2.1 Bootstrap概述 6.2.2 Bootstrap布局容器 6.2.3 Bootstrap网格系统 6.2.4 Bootstrap导航栏 6.2.5 Bootstrap表单 6.2.6 Bootstrap按钮 6.2.7 Bootstrap轮播插件 6.3 项目分析 6.4 代码实现 6.4.1 区域代码实现 6.4.2 完整代码实现 194