HTML+CSS+JavaScript网页制作（Web前端开发）（第3版）
定价：￥65.00
作者： 刘瑞新，张兵义，朱立等
出版时间：2021-09-26
最新印次日期：2025-7
出版社：机械工业出版社
“十二五”职业教育国家规划教材
试读- 机械工业出版社
- 9787111686064
- 3-11
- 67267715-0
- 16开
- 2021-09-26
- 427
- 电子与信息大类
- 计算机类
- 数字媒体技术
- 高职
内容简介
本书依据部分“双高”院校的《Web前端技术课程教学标准》，并依据1+X证书《Web前端开发职业技能等级标准（初级）》编写，内容包括HTML5、CSS3、JavaScript、jQuery开发技术基础和典型HTML5网站开发综合案例。本书以模块化的结构来组织章节，以“爱心包装”网站的开发为主线，通过对模块中每个任务相应知识点的讲解，引导读者学习Web前端开发的基本知识，熟悉项目开发、测试的完整流程。
本书适合作为高职高专院校Web前端技术课程、网页设计与制作课程的教材，也可作为1+X证书《Web前端开发职业技能等级标准（初级）》的考试参考用书。
本书适合作为高职高专院校Web前端技术课程、网页设计与制作课程的教材，也可作为1+X证书《Web前端开发职业技能等级标准（初级）》的考试参考用书。
目录
目录
前言
第1章 HTML5概述
1.1 Web简介
1.1.1 WWW和浏览器的基本概念
1.1.2 URL
1.1.3 超文本
1.1.4 超文本标记语言HTML
1.1.5 HTTP
1.2 Web标准
1.2.1 什么是Web标准
1.2.2 理解表现和结构相分离
1.3 HTML简介
1.3.1 Web技术发展历程
1.3.2 HTML5的特性
1.3.3 HTML5元素
1.4 HTML5的基本结构
1.4.1 HTML5语法结构
1.4.2 HTML5编写规范
1.4.3 HTML5文档结构
1.5 创建HTML文件
1.6 支持HTML5的浏览器
习题1
第2章 HTML5基础
2.1 head元素
2.1.1 页面标题标签<br/>2.1.2 元信息标签<meta><br/>2.1.3 关联标签<link><br/>2.1.4 脚本标签<script><br/>2.2 文本元素<br/>2.2.1 标题文字标签<h><br/>2.2.2 特殊符号<br/>2.3 文本层次语义元素<br/>2.3.1 时间和日期标签<time><br/>2.3.2 标记标签<mark><br/>2.3.3 引用标签<cite><br/>2.4 基本排版元素<br/>2.4.1 段落标签<p><br/>2.4.2 换行标签<br/>2.4.3 预格式化标签<pre><br/>2.4.4 缩排标签<blockquote><br/>2.4.5 水平线标签<hr/><br/>2.4.6 案例—制作爱心包装品牌简介页面<br/>2.5 列表元素<br/>2.5.1 无序列表<br/>2.5.2 有序列表<br/>2.5.3 定义列表<br/>2.5.4 嵌套列表<br/>2.6 图像元素<br/>2.6.1 网页图像的常用格式<br/>2.6.2 图像标签<img><br/>2.6.3 设置网页背景图像<br/>2.6.4 图文混排<br/>2.6.5 案例—制作爱心包装经营模式图文简介页面<br/>2.7 超链接<br/>2.7.1 超链接概述<br/>2.7.2 超链接的应用<br/>2.7.3 案例—制作爱心包装下载专区页面<br/>2.8 div元素<br/>2.9 span元素<br/>2.9.1 基本语法<br/>2.9.2 <span>与<div>标签的区别<br/>2.9.3 使用<div>和<span>标签布局网页内容<br/>习题2<br/>第3章 HTML5页面的布局与交互<br/>3.1 使用结构标签构建网页布局<br/>3.1.1 区段标签<section><br/>3.1.2 导航标签<nav><br/>3.1.3 页眉标签<header><br/>3.1.4 页脚标签<footer><br/>3.1.5 独立内容标签<article><br/>3.1.6 附属信息标签<aside><br/>3.1.7 分组标签<br/>3.1.8 案例—制作爱心包装新品发布页面<br/>3.2 页面交互元素<br/>3.2.1 <details>标签和<summary>标签<br/>3.2.2 <progress>标签<br/>3.3 表格<br/>3.3.1 表格的结构<br/>3.3.2 表格的基本语法<br/>3.3.3 表格的属性<br/>3.3.4 不规范表格<br/>3.3.5 表格数据的分组<br/>3.3.6 案例—使用表格布局爱心包装产品展示页面<br/>3.4 表单<br/>3.4.1 表单的基本概念<br/>3.4.2 表单标签<br/>3.4.3 表单元素<br/>3.4.4 案例—制作爱心包装会员注册表单<br/>3.4.5 表单分组<br/>3.4.6 使用表格布局表单<br/>3.4.7 表单的高级用法<br/>习题3<br/>第4章 CSS3基础<br/>4.1 CSS简介<br/>4.1.1 什么是CSS<br/>4.1.2 CSS的开发环境<br/>4.1.3 CSS编写规则<br/>4.2 CSS的引用方法<br/>4.2.1 定义行内样式<br/>4.2.2 定义内部样式表<br/>4.2.3 链入外部样式表<br/>4.2.4 导入外部样式表<br/>4.3 CSS语法基础<br/>4.3.1 CSS样式规则<br/>4.3.2 基本选择符<br/>4.3.3 复合选择符<br/>4.3.4 通配符选择符<br/>4.3.5 特殊选择符<br/>4.4 CSS的属性单位<br/>4.4.1 长度单位和百分比单位<br/>4.4.2 色彩单位<br/>4.5 文档结构<br/>4.5.1 文档结构的基本概念<br/>4.5.2 继承<br/>4.5.3 样式表的层叠、特殊性与重要性<br/>4.5.4 元素类型<br/>4.5.5 案例—制作爱心包装新闻更新局部页面<br/>习题4<br/>第5章 CSS盒模型<br/>5.1 盒模型概述<br/>5.2 盒模型的属性<br/>5.2.1 边框<br/>5.2.2 外边距<br/>5.2.3 内边距<br/>5.2.4 案例—盒模型属性之间的关系<br/>5.3 盒模型的大小<br/>5.3.1 盒模型的宽度与高度<br/>5.3.2 设置块级元素与行级元素的宽度和高度<br/>5.4 盒子的定位<br/>5.4.1 定位属性<br/>5.4.2 定位方式<br/>5.5 浮动与清除浮动<br/>5.5.1 浮动<br/>5.5.2 清除浮动<br/>5.5.3 案例—爱心包装登录页面的整体布局<br/>习题5<br/>第6章 使用CSS美化页面<br/>6.1 设置字体样式<br/>6.1.1 字体类型<br/>6.1.2 字体大小<br/>6.1.3 字体粗细<br/>6.1.4 字体倾斜<br/>6.1.5 设置字体样式综合案例<br/>6.2 设置文本样式<br/>6.2.1 文本水平对齐方式<br/>6.2.2 行高<br/>6.2.3 文本的修饰<br/>6.2.4 段落首行缩进<br/>6.2.5 首字下沉<br/>6.2.6 文本的截断<br/>6.2.7 文本的颜色<br/>6.2.8 文本的背景颜色<br/>6.2.9 设置文本样式综合案例<br/>6.3 设置图像样式<br/>6.3.1 图像缩放<br/>6.3.2 图像边框<br/>6.3.3 图像的不透明度<br/>6.3.4 背景图像<br/>6.3.5 背景重复<br/>6.3.6 背景图像大小<br/>6.4 设置表格样式<br/>6.4.1 常用的CSS表格属性<br/>6.4.2 案例—使用斑马线表格制作包装项目年度排行榜<br/>6.5 设置表单样式<br/>6.5.1 使用CSS修饰常用的表单元素<br/>6.5.2 案例—制作爱心包装用户调查页面<br/>6.6 设置超链接样式<br/>6.6.1 设置文字超链接的外观<br/>6.6.2 设置图文超链接的外观<br/>6.7 设置列表<br/>6.7.1 表格布局的缺点<br/>6.7.2 列表布局的优势<br/>6.7.3 CSS列表属性<br/>6.7.4 案例—制作爱心包装二维码名片<br/>6.8 创建导航菜单<br/>6.8.1 纵向导航菜单<br/>6.8.2 横向导航菜单<br/>习题6<br/>第7章 使用CSS布局页面<br/>7.1 Div+CSS布局技术概述<br/>7.1.1 认识Div+CSS布局<br/>7.1.2 正确理解Web标准<br/>7.2 Div的嵌套布局<br/>7.2.1 将页面用Div分块<br/>7.2.2 案例—制作爱心包装活动发布页面<br/>7.3 常见的CSS布局样式<br/>7.3.1 两列布局样式<br/>7.3.2 三列布局样式<br/>7.4 综合案例—制作爱心社区页面<br/>7.4.1 页面布局规划<br/>7.4.2 页面的制作过程<br/>习题7<br/>第8章 JavaScript语言基础<br/>8.1 JavaScript简介<br/>8.2 在网页中插入JavaScript的方法<br/>8.2.1 在HTML文档中嵌入脚本程序<br/>8.2.2 链接脚本文件<br/>8.2.3 在HTML标签内添加脚本<br/>8.3 JavaScript的基本数据类型和表达式<br/>8.3.1 基本数据类型<br/>8.3.2 常量<br/>8.3.3 变量<br/>8.3.4 运算符和表达式<br/>8.4 JavaScript的程序结构<br/>8.4.1 简单语句<br/>8.4.2 程序控制流程<br/>8.5 函数<br/>8.5.1 函数的定义<br/>8.5.2 函数的调用<br/>8.5.3 全局变量与局部变量<br/>8.6 基于对象的JavaScript语言<br/>8.6.1 对象<br/>8.6.2 对象的属性<br/>8.6.3 对象的事件<br/>8.6.4 对象的方法<br/>8.7 JavaScript的内置对象<br/>8.7.1 数组对象<br/>8.7.2 字符串对象<br/>8.7.3 日期对象<br/>8.8 自定义对象<br/>习题8<br/>第9章 DOM对象及编程<br/>9.1 DOM模型<br/>9.2 window对象<br/>9.2.1 window对象的属性<br/>9.2.2 window对象的方法<br/>9.3 document对象<br/>9.3.1 document对象的属性<br/>9.3.2 document对象的方法<br/>9.4 location对象<br/>9.4.1 location对象的属性<br/>9.4.2 location对象的方法<br/>9.5 history对象<br/>9.6 form对象<br/>9.6.1 form对象的属性<br/>9.6.2 form对象的方法<br/>9.7 JavaScript的对象事件处理程序<br/>9.7.1 对象的事件<br/>9.7.2 常用的事件及处理<br/>9.7.3 表单对象与交互性<br/>9.7.4 案例—使用form对象实现Web页面信息交互<br/>习题9<br/>第10章 使用JavaScript制作网页特效<br/>10.1 文字特效<br/>10.1.1 制作颜色变换的欢迎词<br/>10.1.2 打字效果<br/>10.2 菜单与选项卡特效<br/>10.2.1 制作爱心包装导航菜单<br/>10.2.2 制作Tab选项卡切换效果<br/>10.3 广告特效<br/>习题10<br/>第11章 HTML5的多媒体播放和绘图<br/>11.1 多媒体播放<br/>11.1.1 HTML5的多媒体支持<br/>11.1.2 音频标签<br/>11.1.3 视频标签<br/>11.1.4 HTML5多媒体API<br/>11.2 Canvas绘图<br/>11.2.1 创建canvas元素<br/>11.2.2 构建绘图环境<br/>11.2.3 通过JavaScript绘制图形<br/>习题11<br/>第12章 jQuery基础<br/>12.1 jQuery概述<br/>12.2 编写jQuery程序<br/>12.2.1 下载与配置jQuery<br/>12.2.2 编写一个简单的jQuery程序<br/>12.3 jQuery对象和DOM对象<br/>12.3.1 jQuery对象和DOM对象简介<br/>12.3.2 jQuery对象和DOM对象的相互转换<br/>12.4 jQuery插件<br/>12.4.1 下载jQuery插件<br/>12.4.2 引用jQuery插件的方法<br/>12.5 jQuery选择器<br/>12.5.1 jQuery的工厂函数<br/>12.5.2 jQuery选择器定义<br/>12.6 基础选择器<br/>12.6.1 ID选择器<br/>12.6.2 元素选择器<br/>12.6.3 类名选择器<br/>12.6.4 复合选择器<br/>12.6.5 通配符选择器<br/>12.7 层次选择器<br/>12.7.1 ancestor descendant选择器<br/>12.7.2 parent>child选择器<br/>12.7.3 prev+next选择器<br/>12.7.4 prev~siblings选择器<br/>12.8 过滤选择器<br/>12.8.1 简单过滤器<br/>12.8.2 内容过滤器<br/>12.8.3 可见性过滤器<br/>12.8.4 子元素过滤器<br/>12.9 表单选择器<br/>习题12<br/>第13章 jQuery动画与UI插件<br/>13.1 jQuery的动画方法<br/>13.2 显示与隐藏效果<br/>13.2.1 隐藏元素的方法<br/>13.2.2 显示元素的方法<br/>13.3 淡入淡出效果<br/>13.3.1 淡入效果<br/>13.3.2 淡出效果<br/>13.3.3 元素的不透明效果<br/>13.3.4 交替淡入淡出效果<br/>13.4 滑动效果<br/>13.4.1 向下展开效果<br/>13.4.2 向上收缩效果<br/>13.4.3 交替伸缩效果<br/>13.5 jQuery UI概述<br/>13.5.1 jQuery UI简介<br/>13.5.2 jQuery UI的下载<br/>13.5.3 jQuery UI的使用<br/>13.5.4 jQuery UI的工作原理<br/>13.6 jQuery UI的常用插件<br/>13.6.1 折叠面板插件<br/>13.6.2 日期选择器插件<br/>13.6.3 标签页插件<br/>习题13<br/>第14章 爱心包装网站开发综合案例<br/>14.1 网站的开发流程<br/>14.2 网站结构<br/>14.2.1 创建站点目录<br/>14.2.2 网站页面的组成<br/>14.3 网站技术分析<br/>14.4 制作首页<br/>习题14<br/>参考文献 </div>
<a href="javascript:void(0);" class="tpml-all"></a>
</div>
</div>
<!-- 评价 -->
<div class="tab-main" style="display: none;">
<form id="search_form" action="" method="get">
<input type="hidden" value="evaluate" name="cur">
<input type="hidden" name="textbook_id" value="995249">
<input type="hidden" name="page" id="search_form_page" value="1">
</form>
<div class="table-H">
<span>好评度</span>
</div>
<ul class="pjBox">
<li>
<div class="pjStar">
<p>内容评价
<label class="star-box">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</label>
</p>
<p>质量评价
<label class="star-box">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</label>
</p>
</div>
</li>
</ul>
<div class="table-H">
<span>全部评价</span>
</div>
<ul class="pjBox">
<div class="no-content">暂无评价信息</div>
</ul>
<div id="page" class="page_div"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var cur = "default";
if (cur == 'evaluate') {
$('#evaluate').addClass('cur').siblings('a').removeClass('cur');
$('.tab-main').hide().eq($('#evaluate').index()).show();
} else if (cur == 'default') {
$('#default').addClass('cur').siblings('a').removeClass('cur');
$('.tab-main').hide().eq($('#default').index()).show();
}
if ($('.tpml').height() > 250) {
$('.tpml-all').html('展开更多')
$('.tpml').css('height', '250px')
}
if ($('.content-caixuan').height() > 85) {
$('.content-caixuan-all').html('查看全部')
$('.content-caixuan').css('height', '85px')
}
if ($('.author').height() > 50) {
$('.author-all').html('查看全部')
$('.author').css('height', '50px')
}
});
Look = {};
Look.tanBox = function (box_id) {
tanBox(box_id);
};
$("#page").paging({
pageNo: $("#search_form_page").val(),
totalPage: 0,
totalSize: 0,
callback: function (num) {
jumpto(num)
}
});
$('.author-all').click(function () {
if ($(this).html() === '查看全部') {
var $con = $(this).html('收起').prev('div');
$con.css('height', '100%');
} else {
var $con = $(this).html('查看全部').prev('div');
$con.css('height', '50px');
$con.css('overflow', 'hidden');
}
});
$('.content-caixuan-all').click(function () {
if ($(this).html() === '查看全部') {
var $con = $(this).html('收起').prev('div');
$con.css('height', '100%');
} else {
var $con = $(this).html('查看全部').prev('div');
$con.css('height', '85px');
$con.css('overflow', 'hidden');
}
});
$('.tpml-all').click(function () {
if ($(this).html() === '展开更多') {
var $con = $(this).html('收起').prev('div');
$con.css('height', '100%');
} else {
var $con = $(this).html('展开更多').prev('div');
$con.css('height', '250px');
$con.css('overflow', 'hidden');
}
});
$(".table-tab a").click(function () {
$(this).addClass('cur').siblings('a').removeClass('cur');
$('.tab-main').hide().eq($(this).index()).show();
$(".table-radio label:visible").attr("style", "border:0");
if ($(".table-radio label:visible").length == 1) {
$(".table-radio").hide();
}
})
</script>
<div class="fri-link foot-link">
<span class="fri-link-dt">友情链接</span>
<a class="fri-link-item fri-link-item1" href="http://cn.cnpubg.com/" target="_blank">中国出版集团公司</a>
<a class="fri-link-item" target="_blank" href="http://www.xhsdzd.com/">新华书店总店</a>
<a class="fri-link-item" target="_blank" href="http://www.pac.org.cn/">中国出版协会</a>
<a class="fri-link-item" target="_blank" href="http://www.crs1992.com/">中国编辑学会</a>
<a class="fri-link-item" target="_blank" href="http://www.hep.com.cn/">高等教育出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.cmpedu.com/">机械工业出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.sciencep.com/">科学出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.cip.com.cn/">化学工业出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.cepp.sgcc.com.cn/">中国电力出版社</a>
<a class="fri-link-item" target="_blank" href="https://www.phei.com.cn/">电子工业出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.ccpcl.com.cn/">人民交通出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.crup.com.cn/">中国人民大学出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.pup.cn/">北京大学出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.tup.tsinghua.edu.cn/index.html">清华大学出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.ryjiaoyu.com.cn">人民邮电出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.ccap.com.cn/">中国农业出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.cabp.com.cn/">中国建筑工业出版社</a>
<a class="fri-link-item" target="_blank" href="https://www.pmph.com/">人民卫生出版社</a>
<a class="fri-link-item" target="_blank" href="http://dutp.dlut.edu.cn">大连理工大学出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.bitpress.com.cn/">北京理工大学出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.zzup.cn/">郑州大学出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.bnump.com/">北京师范大学出版社</a>
<a class="fri-link-item" target="_blank" href="https://nkup.nankai.edu.cn/">南开大学出版社</a>
<a class="fri-link-item" target="_blank" href="https://www.wdp.com.cn/">武汉大学出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.textbookcenter.cn">北京出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.gph.com.cn/">地质出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.dufep.cn">东北财经大学出版社有限责任公司</a>
<a class="fri-link-item" target="_blank" href="http://www.lawpress.com.cn/">法律出版社有限公司</a>
<a class="fri-link-item" target="_blank" href="http://www.castp.cn/">中国农业科学技术出版社</a>
<a class="fri-link-item" target="_blank" href="https://press.ustc.edu.cn/">中国科学技术大学出版社</a>
<a class="fri-link-item" target="_blank" href="https://www.cqup.com.cn/">重庆大学出版社</a>
<a class="fri-link-item" target="_blank" href="http://xdcbs.com/">西南大学出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.jiaodapress.com.cn/">上海交通大学出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.waterpub.com.cn/">中国水利水电出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.ecnupress.com.cn/">华东师范大学出版社</a>
<a class="fri-link-item" target="_blank" href="https://www.fltrp.com/">外语教学与研究出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.fudanpress.com/">复旦大学出版社</a>
<a class="fri-link-item" target="_blank" href="http://www.cptcm.com/">中国中医药出版社</a>
</div>
<!--页面底部 start-->
<div class="footer">
<div class="footerBox">
<div class="footerTop">
© 2018-2026 新华国采教育网络科技有限责任公司 版权所有 <a href="/static/营业执照正本.pdf">营业执照</a>
</div>
<ul>
<li style="width:25%;">
<p>客服热线：010-88362023、010-88361712、010-88361551</p>
<p><a target="_blank" href="https://beian.miit.gov.cn/">京ICP备16053406号</a></p>
</li>
<li style="width:35%;">
<p>出版物经营许可证：<a href="/static/出版物经营许可证.pdf">新出发京零字第西160035号</a></p>
<p>京公网安备 11010202007778号<img src="/images/ip.jpg"></p>
</li>
<li style="width: 40%;">
<p>信息系统安全等级保护（三级）备案证明编号：11010243697-20001</p>
<p>增值电信业务经营许可证编号：京B2-20170886</p>
</li>
</ul>
</div>
</div>
<!--页面底部 end-->
</body>
</html>
<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?8c456308ba2e540841c85599c32c7d67";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
前言
第1章 HTML5概述
1.1 Web简介
1.1.1 WWW和浏览器的基本概念
1.1.2 URL
1.1.3 超文本
1.1.4 超文本标记语言HTML
1.1.5 HTTP
1.2 Web标准
1.2.1 什么是Web标准
1.2.2 理解表现和结构相分离
1.3 HTML简介
1.3.1 Web技术发展历程
1.3.2 HTML5的特性
1.3.3 HTML5元素
1.4 HTML5的基本结构
1.4.1 HTML5语法结构
1.4.2 HTML5编写规范
1.4.3 HTML5文档结构
1.5 创建HTML文件
1.6 支持HTML5的浏览器
习题1
第2章 HTML5基础
2.1 head元素
2.1.1 页面标题标签