网页设计与制作教程:Web前端开发

前 言
“Web前端开发”课程（以前称“网页制作”）是计算机类专业的专业支撑课程。随着移动互联网技术的高速发展，Web前端开发技术被应用到众多领域，已经成为网站开发、App开发及智能终端设备界面开发的主要技术，因而前端开发岗位出现了极为明显的人才短缺。《国家职业教育改革实施方案》《国务院办公厅关于深化产教融合的若干意见》《国家信息化发展战略纲要》对培养人才提出了新的要求，工业和信息化部教育与考试中心依据《职业技能等级标准开发指南》中的相关要求，制定了《Web前端开发职业技能等级标准》。
《网页设计与制作教程——Web前端开发（第6版）》依据《Web前端开发职业技能等级标准（初级）》和部分示范院校的《Web前端技术课程教学标准》编写，内容包括Web页面制作基础、HTML5和CSS3开发基础与应用、JavaScript程序设计和现代标准的社区新闻网站制作实例。《网页设计与制作教程——Web前端开发（第6版）》以模块化的结构来组织章节，选取静态网站设计与制作的典型应用作为教学案例。以网站建设和网页设计为中心，以实例为引导，把介绍知识与实例设计、制作、分析融于一体，贯穿于教材之中。考虑到网页制作较强的实践性，本书配备大量的例题并提供源码和网页效果图，能够有效地帮助读者理解所学习的理论知识，系统全面地掌握Web 前端开发技术。每章附有练习题，并提供习题答案，供读者在课外巩固所学的内容。
《网页设计与制作教程——Web前端开发（第6版）》采用考试中心的HBuilder X编辑网页代码，在Google Chrome或Microsoft Edge浏览器中调试运行，同时详细讲解了浏览器开发者工具的使用。
为配合教学，方便教师讲课，编者精心制作了微课视频、电子课件、授课计划、课程标准、模拟题及答案素材和源代码等教学资源。其中，微课视频可以搭建网络课程，扫描书中二维码即可观看；课件浓缩了本书的教学要点可作为教师的板书来演示；老师们可从机械工业出版社教育服务网（http://www.cmpedu.com）下载。
《网页设计与制作教程——Web前端开发（第6版）》适合作为高等院校Web前端技术课程、网页设计与制作课程的教材，也可以作为1 X证书中Web前端开发职业技能等级（初级）的教学及参考用书。
《网页设计与制作教程——Web前端开发（第6版）》由刘瑞新担任主编，曹利、张红娟担任副主编，参与编写的作者有刘瑞新（第1、2、5、10章）、曹利（第3、9、11章）、张红娟（第4、8章）、侯燕萍（第6章）、孙立友（第7章），第12章及资料的收集整理由徐维维完成。全书由刘瑞新教授统稿。
由于作者水平有限，书中疏漏和不足之处难免，敬请广大师生指正。

编 者

《网页设计与制作教程——Web前端开发（第6版）》依据《Web 前端开发职业技能等级标准（初级）》和部分示范院校的《Web 前端技术课程教学标准》编写，内容包括Web页面制作基础、HTML5和CSS3开发基础与应用、JavaScript程序设计和现代标准的社区新闻网站制作实例。《网页设计与制作教程——Web前端开发（第6版）》以模块化的结构来组织章节，选取静态网站设计与制作的典型应用作为教学案例。
《网页设计与制作教程——Web前端开发（第6版）》适合作为高等院校 Web 前端技术课程、网页设计与制作课程的教材，也可以作为1 X证书中Web前端开发职业技能等级（初级）的教学及参考用书。
《网页设计与制作教程——Web前端开发（第6版）》配有微课视频、电子课件、授课计划、课程标准、模拟题及答案，以及书中所有例题、习题、实训的素材和源代码等资源，其中微课视频扫描书中二维码即可观看，需要其他配套资源的教师可登录www.cmpedu.com免费注册，审核通过后下载，或联系编辑索取（微信：15910938545，电话：010-88379739）。

刘瑞新教授，从事计算机教学30余年，见证和经历了微型计算机在中国的发展历程，至今仍从事教学，他编写的教材来源于教学实践，是教学实践的升华。自1993年开始创作编写计算机教材至今，他一直进行不倦的探索和创新，研究教学方法，并把这些改革和创新应用到所编写的教材中，使教材理论与实践结合得恰到好处，具有鲜明的特色，非常适合教师讲授和学生自学，其多部著作获评全国畅销书奖及*佳销量奖、“十五”“十一五”“十二五”国家规划教材及北京市高等教育精品教材。他在2013年全国计算机教材核心作者中获排名（刊于《现代阅读——教育与出版》2013年第9期），成为当今计算机著作上创作*为丰硕、*具有活力和探索精神的作者之一。

目 录
前言

第1章 HTML5概述
1.1 Web的基本概念
1.1.1 WWW
1.1.2 Web服务器
1.1.3 网页浏览器
1.1.4 网站
1.1.5 网页
1.1.6 URL
1.1.7 标记语言
1.1.8 网页标准
1.2 HTML5的基本结构和语法规则
1.2.1 HTML5文档的基本结构
1.2.2 HTML5的基本语法
1.2.3 HTML的全局属性
1.2.4 元素的分类
1.2.5 HTML的字符实体和颜色表示
1.2.6 HTML5开发人员编码规范
1.3 编辑HTML文件
1.3.1 常用HTML编辑软件
1.3.2 网页文件的创建
1.4 实训——制作社区网版权信息
习题1
第2章 块级元素
2.1 基本块级元素
2.1.1 标题元素hl～h6
2.1.2 段落元素p和换行元素br
2.1.3 水平线元素hr
2.1.4 注释元素
2.2 列表元素
2.2.1 无序列表元素ul
2.2.2 有序列表元素ol
2.2.3 定义列表元素dl
2.2.4 嵌套列表
2.3 表格元素table
2.3.1 基本表格
2.3.2 跨行跨列表格
2.3.3 表格数据的分组
2.3.4 调整列的格式
2.4 表单
2.4.1 表单元素form
2.4.2 输入元素input
2.4.3 标签元素label
2.4.4 选择栏元素select
2.4.5 按钮元素button
2.4.6 多行文本元素textarea
2.5 分区元素div
2.6 缩排元素blockquote
2.7 实训——制作精选信息版块
习题2
第3章 行内元素
3.1 格式化元素
3.1.1 字体样式元素
3.1.2 短语元素3
3.2 图像元素img
3.3 超链接元素a
3.4 图像热区超链接元素map、area
3.5 范围元素span
3.6 多媒体元素
3.6.1 音频元素audio
3.6.2 视频元素video4
3.7 用HBuilder X编辑HTML文档
3.8 实训—制作广告版块
习题3
第4章 CSS3基础
4.1 CSS简介
4.1.1 CSS的发展历史
4.1.2 CSS设计与编写原则
4.2 在HTML中使用CSS的方法
4.2.1 行内样式
4.2.2 内部样式
4.2.3 链入外部样式表文件
4.2.4 导入外部样式表文件
4.3 CSS的两个主要特性
4.4 CSS的基本语法
4.5 CSS的选择器
4.5.1 元素选择器
4.5.2 通配符选择器
4.5.3 属性选择器
4.5.4 派生选择器
4.5.5 兄弟选择器
4.5.6 id选择器
4.5.7 class选择器
4.5.8 伪类选择器
4.5.9 UI元素状态伪类选择器
4.5.10 结构伪类选择器
4.5.11 其他伪类选择器
4.5.12 伪元素选择器
4.6 属性值的写法和单位
4.6.1 长度、百分比单位
4.6.2 色彩单位
4.7 HTML文档结构与元素类型
4.7.1 文档结构的基本概念
4.7.2 元素类型
4.8 实训——制作内容详情页
习题4
第5章 CSS3的属性
5.1 CSS背景属性
5.1.1 背景颜色属性background-color
5.1.2 背景图像属性background-image
5.1.3 重复背景图像属性background-repeat
5.1.4 固定背景图像属性background-attachment
5.1.5 背景图像位置属性background-position
5.1.6 背景图像大小属性background-size
5.1.7 背景属性backgroud
5.1.8 背景覆盖区域属性background-clip
5.1.9 背景图像起点属性background-origin
5.1.10 背景渐变属性background-image
5.2 CSS字体属性
5.2.1 字体类型属性font-family
5.2.2 字体尺寸属性font-size
5.2.3 字体倾斜属性font-style
5.2.4 小写字体属性font-variant
5.2.5 字体粗细属性font-weight
5.2.6 字体简写属性font
5.2.7 CSS3新增使用服务器字体
5.3 CSS文本属性
5.3.1 文本颜色属性color
5.3.2 文本方向属性direction
5.3.3 字符间隔属性letter-spacing
5.3.4 行高属性line-height
5.3.5 文本水平对齐方式属性text-align
5.3.6 为文本添加装饰属性text-decoration
5.3.7 段落首行缩进属性text-indent
5.3.8 文本的阴影属性text-shadow
5.3.9 文本的大小写属性text-transform
5.3.10 元素内部的空白属性white-space
5.3.11 单词之间的间隔属性word-spacing
5.3.12 文本的截断效果属性text-overflow
5.3.13 文本的换行方式属性word-break
5.3.14 单词断字属性word-wrap
5.4 CSS尺寸属性
5.4.1 宽度属性width
5.4.2 高度属性height
5.4.3 小宽度属性min-width
5.4.4 宽度属性max-width
5.4.5 小高度属性min-height
5.4.6 高度属性max-height
5.5 CSS列表属性
5.5.1 图像作为列表项标记属性list-style-image
5.5.2 列表项标记位置属性list-style-position
5.5.3 列表项标记类型属性list-style-type
5.5.4 列表简写属性list-style
5.6 CSS表格属性
5.6.1 合并边框属性border-collapse
5.6.2 边框间隔属性border-spacing
5.6.3 标题位置属性caption-side
5.6.4 单元格无内容显示方式属性empty-cells
5.6.5 表格设置方式属性table-layout
5.7 CSS内容属性
5.8 CSS属性的应用
5.8.1 设置图像样式
5.8.2 设置链接
5.8.3 创建导航菜单
5.9 实训——制作社区网页面
5.9.1 制作通知公告版块
5.9.2 制作导航栏
习题5
第6章 CSS的盒模型
6.1 CSS盒模型的组成和大小
6.1.1 盒子的组成
6.1.2 盒子的大小
6.1.3 块级元素与行内元素的宽度和高度
6.2 CSS盒模型的属性
6.2.1 CSS内

《网页设计与制作教程——Web前端开发（第6版）》依据《Web 前端开发职业技能等级标准（初级）》和部分示范院校的《Web 前端技术课程教学标准》编写，内容包括Web页面制作基础、HTML5和CSS3开发基础与应用、JavaScript程序设计和现代标准的社区新闻网站制作实例。《网页设计与制作教程——Web前端开发（第6版）》以模块化的结构来组织章节，选取静态网站设计与制作的典型应用作为教学案例。
《网页设计与制作教程——Web前端开发（第6版）》适合作为高等院校 Web 前端技术课程、网页设计与制作课程的教材，也可以作为1 X证书中Web前端开发职业技能等级（初级）的教学及参考用书。
《网页设计与制作教程——Web前端开发（第6版）》配有微课视频、电子课件、授课计划、课程标准、模拟题及答案，以及书中所有例题、习题、实训的素材和源代码等资源，其中微课视频扫描书中二维码即可观看，需要其他配套资源的教师可登录www.cmpedu.com免费注册，审核通过后下载，或联系编辑索取（微信：15910938545，电话：010-88379739）。

刘瑞新教授，从事计算机教学30余年，见证和经历了微型计算机在中国的发展历程，至今仍从事教学，他编写的教材来源于教学实践，是教学实践的升华。自1993年开始创作编写计算机教材至今，他一直进行不倦的探索和创新，研究教学方法，并把这些改革和创新应用到所编写的教材中，使教材理论与实践结合得恰到好处，具有鲜明的特色，非常适合教师讲授和学生自学，其多部著作获评全国畅销书奖及*佳销量奖、“十五”“十一五”“十二五”国家规划教材及北京市高等教育精品教材。他在2013年全国计算机教材核心作者中获排名（刊于《现代阅读——教育与出版》2013年第9期），成为当今计算机著作上创作*为丰硕、*具有活力和探索精神的作者之一。