HTML+CSS+JavaScript网页设计教程（第二版） / 高职高专计算机类专业系列教材
￥47.00定价
作者： 孟宪宁
出版时间：2025-01
出版社：西安电子科技大学出版社
- 西安电子科技大学出版社
- 9787560675626
- 2-1
- 549836
- 16开
- 2025-01
- 自动化技术、计算机技术
- 高职
目录
第1章 网页设计综述 1
1.1 Web的起源 1
1.2 Web的工作原理 1
1.3 浏览器 2
1.4 网页开发工具 3
1.5 网页的基本概念 3
1.6 网页开发技术简介 5
1.6.1 HTML5简介 5
1.6.2 CSS3简介 6
1.6.3 JavaScript简介 8
1.7 一个简单的网页设计实例 9
1.7.1 准备工作 10
1.7.2 编写HTML5代码 10
1.7.3 设计CSS3样式 12
1.7.4 添加CSS3样式后网页的显示效果 12
练习与实践 13
第2章 HTML5 15
2.1 HTML5的基本语法 15
2.2 HTML5文档的基本结构 17
2.3 HTML5文档头部相关标签 17
2.3.1 页面标题标签 18<br />
2.3.2 元信息标签<meta> 18<br />
2.3.3 其他标签 19<br />
2.4 段落与文本格式化 19<br />
2.4.1 字体标签<font> 20<br />
2.4.2 样式标签 20<br />
2.4.3 段落标签<p> 22<br />
2.4.4 换行标签<br> 23<br />
2.4.5 水平分割线标签<hr> 23<br />
2.4.6 内容居中标签<center> 24<br />
2.4.7 预格式化标签<pre> 24<br />
2.4.8 标题标签<h1>～<h6> 26<br />
2.4.9 <div>和<span>标签 26<br />
2.5 列表 27<br />
2.5.1 无序列表标签<ul> 27<br />
2.5.2 有序列表标签<ol> 28<br />
2.5.3 自定义列表标签<dl> 30<br />
2.6 超链接 31<br />
2.6.1 超链接标签<a> 31<br />
2.6.2 路径的表示方法 32<br />
2.6.3 网页内跳转 32<br />
2.7 图像与多媒体 33<br />
2.7.1 图像 33<br />
2.7.2 图像映射 33<br />
2.7.3 音频和视频 36<br />
2.7.4 插入Flash文件 38<br />
2.8 表单 38<br />
2.8.1 表单标签<form> 38<br />
2.8.2 信息输入标签<input> 39<br />
2.8.3 HTML5新增的表单输入类型 41<br />
2.8.4 页面交互元素 44<br />
2.8.5 下拉列表标签<select> 46<br />
2.8.6 多行文本输入标签<textarea> 47<br />
2.8.7 域和域标题 48<br />
2.9 表格 48<br />
2.9.1 表格标签<table> 48<br />
2.9.2 行标签<tr> 51<br />
2.9.3 单元格标签<td> 53<br />
2.10 框架 54<br />
2.10.1 框架集标签<frameset> 54<br />
2.10.2 框架定义标签<frame> 55<br />
2.10.3 浮动框架标签<iframe> 56<br />
2.11 HTML5的结构元素 58<br />
练习与实践 61<br />
<br />
第3章 CSS3 65<br />
3.1 CSS3的规则 65<br />
3.2 引用CSS3样式的方式 66<br />
3.2.1 行内样式 66<br />
3.2.2 内部样式 66<br />
3.2.3 外部样式 68<br />
3.3 CSS3选择器 69<br />
3.3.1 标签选择器 69<br />
3.3.2 id选择器 70<br />
3.3.3 类选择器 71<br />
3.3.4 属性选择器 73<br />
3.3.5 后代选择器 75<br />
3.3.6 子元素选择器 76<br />
3.3.7 普通兄弟选择器（~） 77<br />
3.3.8 相邻兄弟选择器（+） 78<br />
3.3.9 结构性伪类选择器 79<br />
3.3.10 伪类选择器 82<br />
3.3.11 通配符选择器 84<br />
3.3.12 并集选择器 84<br />
3.4 CSS3文本样式 85<br />
3.4.1 字体样式属性：font-family 85<br />
3.4.2 字号属性：font-size 86<br />
3.4.3 字体粗细属性：font-weight 89<br />
3.4.4 字体风格属性：font-style 91<br />
3.4.5 综合字体样式属性：font 91<br />
3.4.6 其他常用的文本样式属性 92<br />
3.5 盒子模型 97<br />
3.5.1 盒子模型概述 97<br />
3.5.2 盒子模型的相关属性 98<br />
3.5.3 盒子的内边距：padding 101<br />
3.5.4 盒子的外边距：margin 103<br />
3.6 背景属性 105<br />
3.6.1 设置背景颜色 105<br />
3.6.2 设置背景图片 106<br />
3.6.3 综合设置背景图片 108<br />
3.6.4 CSS3精灵图 109<br />
3.7 继承、层叠和优先级 109<br />
3.7.1 继承 110<br />
3.7.2 层叠和优先级 111<br />
3.8 浮动与定位 114<br />
3.8.1 浮动：float 114<br />
3.8.2 定位：position 120<br />
3.9 案例：腾讯网首页搜索框布局 125<br />
3.9.1 左、中、右3栏居中布局 126<br />
3.9.2 左侧的腾讯Logo图片 128<br />
3.9.3 中间的搜索框 129<br />
3.9.4 右侧的3个按钮 132<br />
练习与实践 133<br />
<br />
第4章 JavaScript 137<br />
4.1 JavaScript概述 137<br />
4.1.1 使用<script>标签直接嵌入<br />
JavaScript代码 137<br />
4.1.2 引入外部JavaScript代码 138<br />
4.2 标识符、变量和数据类型 139<br />
4.2.1 标识符 139<br />
4.2.2 变量 140<br />
4.2.3 基本数据类型 140<br />
4.2.4 复合数据类型：数组 143<br />
4.2.5 JavaScript对象和this关键字 145<br />
4.3 运算符与表达式 147<br />
4.3.1 赋值运算符 147<br />
4.3.2 算术运算符 147<br />
4.3.3 位运算符 148<br />
4.3.4 比较运算符 149<br />
4.3.5 逻辑运算符 149<br />
4.3.6 条件运算符（三元运算符） 150<br />
4.4 流程控制 150<br />
4.4.1 顺序结构 150<br />
4.4.2 分支结构 150<br />
4.4.3 循环结构 156<br />
4.5 函数 161<br />
4.5.1 定义函数 161<br />
4.5.2 调用函数 161<br />
4.6 事件 163<br />
4.6.1 表单事件 165<br />
4.6.2 鼠标事件 169<br />
4.6.3 键盘事件 171<br />
4.7 DOM 173<br />
4.7.1 获取HTML5元素 174<br />
4.7.2 读取或修改HTML5元素的属性 175<br />
4.8 BOM 180<br />
4.8.1 history对象 181<br />
4.8.2 navigator对象 183<br />
4.8.3 screen对象 184<br />
4.8.4 定时器 185<br />
4.9 案例：腾讯网首页搜索框下拉菜单 190<br />
4.9.1 获取指定的HTML5元素对象 191<br />
4.9.2 设置HTML5对象的响应事件 191<br />
4.9.3 实现下拉菜单的鼠标移入<br />
移出效果 192<br />
4.9.4 实现下拉菜单的鼠标单击效果 192<br />
练习与实践 193<br />
<br />
第5章 网页设计综合案例 197<br />
5.1 网站介绍及定位 197<br />
5.2 准备工作 197<br />
5.2.1 建立站点 197<br />
5.2.2 素材准备 199<br />
5.3 网页布局分析 200<br />
5.3.1 网页整体布局 201<br />
5.3.2 标签页图标和文字显示 202<br />
5.3.3 定义公共样式 202<br />
5.3.4 定义页面大小 203<br />
5.3.5 浮动效果的实现 203<br />
5.4 头部分析与实现 203<br />
5.4.1 效果图分析 203<br />
5.4.2 头部布局分析 204<br />
5.4.3 左侧的腾讯Logo图片 204<br />
5.4.4 中间的搜索框代码实现 205<br />
5.4.5 右侧3个QQ功能按钮的实现 212<br />
5.5 导航部分分析与实现 214<br />
5.5.1 效果图分析 214<br />
5.5.2 导航部分布局整体设计 215<br />
5.5.3 导航部分的CSS3样式 <br />
分析与设计 219<br />
5.6 广告部分分析与实现 222<br />
5.6.1 效果图分析 222<br />
5.6.2 广告部分布局分析与实现 223<br />
5.6.3 广告部分样式分析与实现 223<br />
5.6.4 广告部分动态效果实现 225<br />
5.7 主体部分分析与实现 227<br />
5.7.1 效果图分析 227<br />
5.7.2 要闻部分和今日话题部分的<br />
分析与实现 228<br />
5.7.3 右侧快速链接部分的分析与实现 231<br />
练习与实践 235<br />
<br />
第6章 拓展知识 237<br />
6.1 网页配色 237<br />
6.1.1 色彩概述 237<br />
6.1.2 色彩的基本特性 238<br />
6.1.3 网页配色的基本概念 240<br />
6.1.4 网页配色技巧 248<br />
6.1.5 网页色彩搭配的原则 251<br />
6.2 网页版式设计 251<br />
6.2.1 网页元素的组成 252<br />
6.2.2 网页设计的构成要素 253<br />
6.2.3 网页版式设计的布局分类 256<br />
6.3 切片工具 263<br />
6.3.1 切片的属性设置 263<br />
6.3.2 切片工具的使用 264<br />
6.4 案例：本源食品有限公司网站页面的 <br />
设计与制作 270<br />
6.4.1 网站定位 270<br />
6.4.2 搜集资料 270<br />
6.4.3 网站规划 271<br />
6.4.4 设计网站 272<br />
6.4.5 网站制作 276<br />
6.4.6 网站发布 277<br />
<br />
附录 AI编程助手 278<br />
一、安装Visual Studio Code及插件 278<br />
二、AI辅助编程 282 </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="12787059">
<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>
1.1 Web的起源 1
1.2 Web的工作原理 1
1.3 浏览器 2
1.4 网页开发工具 3
1.5 网页的基本概念 3
1.6 网页开发技术简介 5
1.6.1 HTML5简介 5
1.6.2 CSS3简介 6
1.6.3 JavaScript简介 8
1.7 一个简单的网页设计实例 9
1.7.1 准备工作 10
1.7.2 编写HTML5代码 10
1.7.3 设计CSS3样式 12
1.7.4 添加CSS3样式后网页的显示效果 12
练习与实践 13
第2章 HTML5 15
2.1 HTML5的基本语法 15
2.2 HTML5文档的基本结构 17
2.3 HTML5文档头部相关标签 17
2.3.1 页面标题标签