本书是Web前端网页设计的基础性教材,为深入实施“科教兴国战略”,服务“强化现代化建设人才支撑”,加快建设“网络强国,数字中国”,本书紧贴互联网行业发展对Web前端开发的岗位要求,按照“1+X”证书《Web前端开发职业技能等级标准》的要求,从初学者角度出发,讲解Web前端网页设计相关基础知识。本书按照认知递进的过程组织为6个单元,单元1对Web前端开发做了总体概述,单元2介绍使用HTML搭建网页基本结构,单元3介绍使用CSS对网页进行基本布局和美化。在对网页的基本“结构”和“表现”有了完整介绍后,单元4和单元5分别介绍HTML5及CSS3中的新增特性,并以更简洁高效的代码,进一步优化网页结构、美化网页表现。最后,单元6在前面单元打下的基础之上,以综合项目实战的形式对响应式页面设计“神器”—Bootstrap进行了介绍,以作为全书的可选扩展模块。本书适合作为高职高专院校、应用型本科院校网页设计课程的教材,也可以作为Web 前端“课赛证”融通的培训教材,并适合广大计算机爱好者自学使用。
权小红,常州信息职业技术学院教师,副教授,工学硕士,软件技术专业,Web全栈方向。先后发表教学、专业论文9篇,其中核心期刊1篇,国家级期刊1篇,获发明专利4项,主持或参与横纵向开发项目10余项;主编教材1部,参编教材3部。主持省级教改课题1项,市级教改课题1项,参与国家在线开放课程建设2门;曾获江苏省职业院校信息化教学大赛先进个人、江苏省优秀毕业设计团队指导教师、优秀社会实践指导教师等荣誉。
单元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