网站前端技术（HTML5+CSS3+JavaScript+jQuery）（双色）（含微课）
￥68.00定价
作者： 梁玲，韩迎红，畅玉洁，王冬梅
出版时间：2021-06
出版社：航空工业出版社
- 航空工业出版社
- 9787516526217
- 1版
- 422341
- 48257315-1
- 2021-06
- 工学
- 计算机科学与技术
- 计算机类
- 中职 五年制高职 本科 高职 高职本科（应用型本科）
内容简介
本书采用简洁通俗的语言，结合实用美观的案例，按照由易到难、由简到繁的原则，全面介绍了网站前端技术的相关知识。本书共分为6章，内容包括网站建设概述、HTML与HTML5、CSS与CSS3、JavaScript基础、JQuery常用函数、开发者商务网站建设。
本书内容全面，兼顾1+X认证Web前端开发（初级）考试，可作为各类院校计算机应用与软件技术、数字媒体艺术、电子商务等专业的教材，也可供广大网站制作爱好者学习参考使用。
本书内容全面，兼顾1+X认证Web前端开发（初级）考试，可作为各类院校计算机应用与软件技术、数字媒体艺术、电子商务等专业的教材，也可供广大网站制作爱好者学习参考使用。
目录
第1章 网站建设概述
本章导读
学习目标
素质目标
1.1 认识网站与网页
1.1.1 网站、网页和首页
1.1.2 其他相关概念
1.2 网站建设技术方向
1.2.1 UI设计方向
1.2.2 Web前端开发方向
1.2.3 后台程序开发方向
1.3 网站建设流程
1.4 行业优势与前景
1.4.1 网站建设行业优势分析
1.4.2 网站建设行业前景
思考总结
本章习题
第2章 HTML与HTML5
本章导读
学习目标
素质目标
2.1 HTML基础
2.1.1 什么是HTML
2.1.2 HTML的主要功能
2.1.3 HTML标签的基本语法
2.1.4 HTML的基本结构
2.1.5 HTML标签的分类
2.1.6 HTML注释
2.1.7 HTML的常用编辑工具
2.2 HTML5
2.2.1 HTML5概述
2.2.2 HTML5的优势
2.2.3 HTML5的语法变化
2.3 HTML头部
2.3.1标签<br />
2.3.2 <meta>标签<br />
2.4 HTML无语义标签<br />
2.4.1 <span>标签<br />
2.4.2 <div>标签<br />
2.5 HTML文字相关标签<br />
2.5.1 标题标签<h1>～<h6><br />
2.5.2 段落标签<p><br />
2.5.3 换行标签<br /><br />
2.5.4 水平线标签<hr /><br />
2.5.5 文字样式标签<font><br />
2.5.6 倾斜文字标签<i>和<em><br />
2.5.7 加粗文字标签<b>和<strong><br />
2.5.8 文字下划线标签<u><br />
2.5.9 预留字符的使用<br />
2.6 HTML图像标签<br />
2.6.1 网页中的图像文件类型<br />
2.6.2 网页中的相对地址和绝对地址<br />
2.6.3 图像标签<img><br />
2.6.4 图像对齐方式align<br />
2.6.5 水平间距hspace和垂直间距vspace<br />
2.7 HTML超链接标签<br />
2.7.1 超链接标签<a><br />
2.7.2 超链接属性target<br />
2.7.3 锚点链接<br />
2.7.4 图像链接<br />
2.7.5 图像热区链接<br />
2.7.6 空链接<br />
2.7.7 E-mail链接<br />
2.7.8 JavaScript链接<br />
2.8 HTML列表标签<br />
2.8.1 无序列表<br />
2.8.2 有序列表<br />
2.8.3 定义列表<br />
2.9 HTML表单标签<br />
2.9.1 表单标签<form><br />
2.9.2 表单控件<input><br />
2.9.3 多行文本域<textarea><br />
2.9.4 下拉列表<select><br />
2.10 HTML框架标签<br />
2.10.1 框架标签<iframe><br />
2.10.2 滚动条显示属性scrolling<br />
2.11 HTML表格标签<br />
2.11.1 表格标签<table><br />
2.11.2 单元格合并<br />
2.11.3 表格分组标签<br />
2.11.4 表格列属性设置标签<br />
2.12 HTML多媒体标签<br />
2.12.1 多媒体标签<embed>插入视频<br />
2.12.2 多媒体标签<object>插入音频<br />
2.12.3 背景音乐标签<bgsound><br />
2.13 HTML5新增常用标签及通用属性<br />
2.13.1 语义化标签<br />
2.13.2 文本格式化标签<br />
2.13.3 页面增强标签<br />
2.13.4 多媒体标签<br />
2.13.5 HTML5新增通用属性<br />
2.14 HTML5新增表单控件及属性<br />
2.14.1 表单控件<input>的新增类型<br />
2.14.2 新增表单控件<output><br />
2.14.3 HTML5表单控件的新增属性<br />
2.15 综合案例——百度首页<br />
思考总结<br />
本章习题<br />
实训作业<br />
<br />
第3章 CSS与CSS3<br />
本章导读<br />
学习目标<br />
素质目标<br />
3.1 了解CSS样式<br />
3.1.1 什么是CSS样式<br />
3.1.2 CSS样式的发展<br />
3.2 CSS样式语法<br />
3.2.1 CSS样式基本语法<br />
3.2.2 CSS注释<br />
3.3 CSS样式的引用方法<br />
3.3.1 内联样式<br />
3.3.2 内部样式<br />
3.3.3 引入外部样式文件<br />
3.3.4 导入外部样式文件<br />
3.4 CSS选择器<br />
3.4.1 基本选择器<br />
3.4.2 关系选择器<br />
3.4.3 伪类选择器<br />
3.4.4 伪元素选择器<br />
3.4.5 属性选择器<br />
3.5 CSS的继承性、层叠性与优先级<br />
3.5.1 继承性<br />
3.5.2 层叠性<br />
3.5.3 优先级<br />
3.6 CSS的尺寸与颜色<br />
3.6.1 CSS尺寸<br />
3.6.2 CSS颜色<br />
3.7 CSS文本控制<br />
3.7.1 字体样式<br />
3.7.2 文本样式<br />
3.8 CSS盒子模型<br />
3.8.1 盒子的宽和高<br />
3.8.2 盒子的边框border<br />
3.8.3 盒子的外边距margin<br />
3.8.4 盒子的内边距padding<br />
3.8.5 盒子的背景background<br />
3.8.6 盒子尺寸的计算方式box-sizing<br />
3.8.7 盒子的阴影box-shadow<br />
3.8.8 圆角属性border-radius<br />
3.9 CSS浮动和定位布局<br />
3.9.1 浮动float<br />
3.9.2 定位position<br />
3.9.3 显示display<br />
3.10 CSS弹性布局（flex）<br />
3.10.1 主轴方向flex-direction<br />
3.10.2 换行方式flex-wrap<br />
3.10.3 综合设置flex-flow<br />
3.10.4 主轴对齐justify-content<br />
3.10.5 交叉轴对齐align-items<br />
3.10.6 多轴线对齐align-content<br />
3.11 CSS表格控制<br />
3.11.1 边框合并border-collapse<br />
3.11.2 分隔单元格边框距离border-spacing<br />
3.11.3 标题位置caption-side<br />
3.11.4 单元格文本垂直对齐vertical-align<br />
3.12 CSS列表控制<br />
3.12.1 标记类型list-style-type<br />
3.12.2 标记图片list-style-image<br />
3.12.3 标记定位list-style-position<br />
3.12.4 标记样式简写list-style<br />
3.13 CSS多列控制<br />
3.13.1 多列控制column-count<br />
3.13.2 列之间的间隔column-gap<br />
3.13.3 列之间的分割线column-rule<br />
3.14 CSS过渡<br />
3.14.1 过渡效果应用的属性transition-property<br />
3.14.2 过渡效果花费的时间transition-duration<br />
3.14.3 过渡效果的速度曲线transition-timing-function<br />
3.14.4 过渡效果的等待时间transition-delay<br />
3.14.5 过渡属性transition<br />
3.15 2D或3D转换<br />
3.15.1 2D转换<br />
3.15.2 3D转换<br />
3.16 CSS动画控制<br />
3.16.1 动画变化规则@keyframes<br />
3.16.2 动画的应用<br />
3.17 自适应屏幕@media screen<br />
3.17.1 尺寸最小法min-width<br />
3.17.2 尺寸最大法max-width<br />
3.17.3 尺寸区间法min-width and max-width<br />
3.18 综合案例——制作婚礼策划机构首页<br />
思考总结<br />
本章习题<br />
实训作业<br />
<br />
第4章 JavaScript基础<br />
本章导读<br />
学习目标<br />
素质目标<br />
4.1 JavaScript概述<br />
4.1.1 认识JavaScript<br />
4.1.2 JavaScript的作用<br />
4.1.3 JavaScript代码嵌入HTML中的方法<br />
4.2 JavaScript语法<br />
4.2.1 JavaScript代码格式<br />
4.2.2 大小写规范<br />
4.2.3 注释<br />
4.2.4 JavaScript中的保留字<br />
4.2.5 输出方法<br />
4.3 JavaScript常量与变量<br />
4.3.1 常量<br />
4.3.2 变量<br />
4.4 JavaScript数据类型<br />
4.4.1 数值型<br />
4.4.2 字符串型<br />
4.4.3 布尔型<br />
4.4.4 未定义型<br />
4.4.5 null型<br />
4.5 JavaScript运算符<br />
4.5.1 算术运算符<br />
4.5.2 关系运算符<br />
4.5.3 赋值运算符<br />
4.5.4 逻辑运算符<br />
4.5.5 条件运算符<br />
4.6 流程控制语句<br />
4.6.1 if语句<br />
4.6.2 switch语句<br />
4.6.3 for语句<br />
4.6.4 while语句<br />
4.6.5 do…while语句<br />
4.7 函数<br />
4.7.1 函数的定义及函数的形参<br />
4.7.2 函数的调用及函数的实参<br />
4.7.3 变量的作用域<br />
4.7.4 函数的嵌套<br />
4.7.5 时间函数<br />
4.8 数组<br />
4.8.1 数组的声明<br />
4.8.2 数组元素的引用<br />
4.8.3 数组的属性和方法<br />
4.8.4 数组的遍历<br />
4.9 对象<br />
4.9.1 对象的声明<br />
4.9.2 对象的构造<br />
4.9.3 对象属性的访问<br />
4.9.4 对象方法的访问<br />
4.10 JavaScript内置对象<br />
4.10.1 Date对象<br />
4.10.2 Math对象<br />
4.10.3 string对象<br />
4.10.4 array对象<br />
4.11 正则表达式<br />
4.11.1 正则表达式的组成<br />
4.11.2 正则表达式相关方法<br />
4.12 文档对象模型DOM<br />
4.12.1 获取元素<br />
4.12.2 获取和修改HTML内容<br />
4.12.3 查看和修改DOM元素CSS属性<br />
4.12.4 查看和修改DOM元素的属性<br />
4.12.5 创建、添加、删除、替换DOM元素<br />
4.12.6 DOM事件<br />
4.13 浏览器对象模型BOM<br />
4.13.1 JavaScript Window<br />
4.13.2 JavaScript Screen<br />
4.13.3 JavaScript Location<br />
4.13.4 JavaScript History<br />
4.14 综合案例——美丽的时钟<br />
思考总结<br />
本章习题<br />
实训作业<br />
<br />
第5章 JQuery常用函数<br />
本章导读<br />
学习目标<br />
素质目标<br />
5.1 JQuery捕获及创建HTML元素<br />
5.1.1 捕获元素<br />
5.1.2 创建HTML元素<br />
5.1.3 获取同类名元素的下标值<br />
5.2 JQuery设置及获取HTML相关内容或属性<br />
5.2.1 设置及获取文本text()<br />
5.2.2 设置及获取内容html()<br />
5.2.3 设置及获取属性attr()<br />
5.2.4 设置及获取窗口滚动条顶端位置scrollTop()<br />
5.2.5 获取窗口宽度width()与高度height()<br />
5.3 JQuery设置HTML元素CSS样式<br />
5.3.1 隐藏和显示元素<br />
5.3.2 设置HTML元素的CSS样式<br />
5.4 JQuery删除、查找及克隆元素<br />
5.4.1 删除元素remove()<br />
5.4.2 查找父元素parent()<br />
5.4.3 查找子元素find()<br />
5.4.4 克隆元素clone()和追加元素appendTo()、append()<br />
5.5 JQuery常用事件及典型案例<br />
5.5.1 案例——选项卡效果<br />
5.5.2 案例——自动显示与隐藏的返回顶部按钮<br />
5.5.3 案例——弹性布局的图片展示<br />
5.6 综合案例——轮播图<br />
思考总结<br />
本章习题<br />
实训作业<br />
<br />
第6章 开发者商务网站建设<br />
本章导读<br />
学习目标<br />
素质目标<br />
6.1 布局首页<br />
6.1.1 布局首页头部<br />
6.1.2 布局搜索行<br />
6.1.3 布局一级导航<br />
6.1.4 布局banner图<br />
6.1.5 布局商品展示区<br />
6.1.6 布局脚部与返回顶部按钮<br />
6.2 实现首页人机交互效果<br />
6.2.1 微信二维码的显示与隐藏<br />
6.2.2 二级导航的插入与选项卡效果<br />
6.2.3 banner图轮播效果实现<br />
6.2.4 返回顶部效果实现<br />
6.2.5 导航栏实时固定于顶部效果实现<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.3.7 制作后台管理页<br />
<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="987689">
<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="http://www.wdp.com.cn/book/bookIndex.action">武汉大学出版社</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-2025 新华国采教育网络科技有限责任公司 版权所有
</div>
<ul>
<li style="width:25%;">
<p>客服热线：010-88362023、010-88361712</p>
<p><a target="_blank" href="https://beian.miit.gov.cn/" class="icp_num">京ICP备16053406号</a></p>
</li>
<li style="width:35%;">
<p>出版物经营许可证：新出发京零字第西160035号</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>
<script>
(function () {
var script = document.createElement("script");
script.src = "https://log.aijiaocai.cn/static/app/dist/api-v1-fetch.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(script, s);
if (script.addEventListener) {
script.addEventListener('load', function () {
browseLog();
}, false);
} else if (script.attachEvent) {
script.attachEvent('onreadystatechange', function () {
var target = window.event.srcElement;
if (target.readyState == 'loaded') {
browseLog();
}
});
}
function browseLog() {
var options = {sysCode: 'xhgc.aijiaocai.textbooking.web', sysName: '采选系统PC端', autoBrowse: false};
var info = {
operateType: 'browse',
userCode: '',
realName: '',
orgCode: '',
content: {login_type: ''}
};
var logCenterLogger = new logCenter.Logger(options);
logCenterLogger.log(info);
}
})();
</script>
本章导读
学习目标
素质目标
1.1 认识网站与网页
1.1.1 网站、网页和首页
1.1.2 其他相关概念
1.2 网站建设技术方向
1.2.1 UI设计方向
1.2.2 Web前端开发方向
1.2.3 后台程序开发方向
1.3 网站建设流程
1.4 行业优势与前景
1.4.1 网站建设行业优势分析
1.4.2 网站建设行业前景
思考总结
本章习题
第2章 HTML与HTML5
本章导读
学习目标
素质目标
2.1 HTML基础
2.1.1 什么是HTML
2.1.2 HTML的主要功能
2.1.3 HTML标签的基本语法
2.1.4 HTML的基本结构
2.1.5 HTML标签的分类
2.1.6 HTML注释
2.1.7 HTML的常用编辑工具
2.2 HTML5
2.2.1 HTML5概述
2.2.2 HTML5的优势
2.2.3 HTML5的语法变化
2.3 HTML头部
2.3.1