《HTML+CSS+JavaScript网页制作简明教程》PDF电子书免费下载

作者:  王爱华

出版社: 清华大学出版社

出版年: 2014年

ISBN: 9787302373803

目录

第1章HTML、CSS、JavaScript基础知识和基本语法 1
1.1Web网页的基本概念 1
1.1.1网页 1
1.1.2网站 3
1.1.3Web标准 4
1.2网页的工作原理与制作工具 5
1.2.1网页的工作原理 5
1.2.2网页制作工具 5
1.3HTML、CSS、JavaScript简介与示例 6
1.3.1HTML超文本标记语言 6
1.3.2CSS层叠样式表 7
1.3.3JavaScript脚本语言 8
1.4HTML文档结构和基本语法 8
1.4.1HTML文档结构 8
1.4.2HTML基本语法 9
1.4.3HTML文档的标记与分类 11
1.5XHTML文档结构和文档类型 11
1.6HTML文档头部的相关标记 12
1.6.1设置页面标题 12<br />1.6.2定义页面元信息<meta/> 13<br />1.6.3引用外部文件<link/> 14<br />1.7习题 15<br />第2章CSS样式表基础与盒子模型 17<br />2.1CSS概述 17<br />2.2CSS样式规则与内联CSS样式 17<br />2.2.1CSS样式规则 17<br />2.2.2内联CSS样式 18<br />2.3CSS样式表 19<br />2.3.1CSS样式表的结构和使用 19<br />2.3.2基本选择符 20<br />2.3.3群组与通用选择符 24<br />2.3.4包含与子对象选择符 25<br />2.3.5相邻选择符 28<br />2.3.6属性选择符 30<br />2.3.7伪对象(伪元素)选择符 33<br />2.4样式规则的优先级 34<br />2.4.1样式规则的优先级原则 35<br />2.4.2用!important提高样式优先级 37<br />2.5CSS中的颜色与鼠标指针 38<br />2.5.1CSS颜色的属性值 38<br />2.5.2CSS设置鼠标形状cursor 39<br />2.6块级元素的盒模型 40<br />2.6.1盒模型结构 40<br />2.6.2垂直外边距的合并 46<br />2.6.3网页元素div 47<br />2.7盒子的居中、浮动及显示方式 48<br />2.7.1盒子的居中 48<br />2.7.2盒子的浮动与清除浮动 49<br />2.7.3元素的显示方式 52<br />2.7.4 元素的可见性visibility 52<br />2.8盒子的布局应用举例 53<br />2.9习题 57<br />第3章HTML的基本元素及样式 59<br />3.1HTML文本字符、注释标记<br />及水平线标记 59<br />3.2文本与修饰标记 61<br />3.2.1设置文本标记 61<br />3.2.2文本修饰标记 62<br />3.2.3块级文本标记 63<br />3.2.4样式组织标记<span> 64<br />3.3CSS文本样式规则 65<br />3.3.1CSS大小尺寸量度的属性值 65<br />3.3.2文本字符的CSS样式属性 66<br />3.3.3文本外观CSS样式属性 68<br />3.4图像与图像样式 72<br />3.4.1插入图像 72<br />3.4.2图像样式 73<br />3.4.3使用display:block;将图像转换为块级元素 75<br />3.5小案例:div、图像和文本的综合排版 76<br />3.5.1案例分析 76<br />3.5.2案例代码 77<br />3.6列表标记与相关样式 78<br />3.6.1各种列表标记介绍 79<br />3.6.2列表样式 82<br />3.7超链接标记与伪类 83<br />3.7.1超链接标记及属性 84<br />3.7.2链接到普通文档、图像或多媒体文件 86<br />3.7.3设置锚点和E-mail链接 87<br />3.7.4伪类选择符 89<br />3.8图像映射标记 92<br />3.8.1创建图像映射标记 93<br />3.8.2使用图像映射的<img/>图像 93<br />3.9表格标记及样式 95<br />3.9.1创建表格的基本标记 96<br />3.9.2表格基本标记中的样式属性 98<br />3.9.3表格单元格合并 100<br />3.10小案例:山东商职学院网站首页制作 103<br />3.11课堂练习小案例 110<br />3.12习题 111<br />第4章HTML框架、表单、多媒体 115<br />4.1HTML的浮动框架 115<br />4.1.1浮动框架的基本概念 115<br />4.1.2浮动框架的应用举例 116<br />4.2表单标记 119<br />4.2.1创建表单标记</p><form> 119<br />4.2.2表单输入标记<input/> 120<br />4.2.3文本区标记<textarea> 124<br />4.2.4按钮标记<button> 125<br />4.2.5滚动列表与下拉列表标记<select><option> 126<br />4.2.6控件标签标记<label> 130<br />4.2.7表单分组及标题标记</p><fieldset><legend> 130<br />4.2.8应用div和样式的表单设计 132<br />4.3IE浏览器滚动字幕、背景音乐与多媒体 133<br />4.3.1IE浏览器滚动字幕标记<marquee> 133<br />4.3.2IE浏览器播放背景音乐标记<bgsound/> 135<br />4.3.3IE浏览器播放多媒体标记<embed> 136<br />4.4XHTML播放多媒体标记 137<br />4.4.2用<object>播放Flash文件 139<br />4.4.3<object>使用RealPlayer播放器 140<br />4.4.4<object>使用MediaPlayer播放器 141<br />4.4.5用<object>自动嵌入合适的播放器 142<br />4.5习题 143<br />第5章盒子的定位 145<br />5.1布局定位属性position 145<br />5.1.1自动定位static 146<br />5.1.2相对定位relative 146<br />5.1.3绝对定位absolute 149<br />5.1.4固定定位fixed 153<br />5.2盒子的浮动、相对定位和绝对定位的综合应用 154<br />5.2.1案例分析及方案说明 155<br />5.2.2样式代码及说明 156<br />5.2.3页面代码 157<br />5.2.4脚本代码 159<br />5.3元素的层叠等级 160<br />5.4习题 162<br />第6章JavaScript基础 163<br />6.1JavaScript语言概述 163<br />6.1.1JavaScript语言的特点 163<br />6.1.2JavaScript的使用 164<br />6.2JavaScript常量与变量 166<br />6.2.1数据类型与常量 166<br />6.2.2变量 167<br />6.3JavaScript运算符与表达式 168<br />6.3.1算术运算符与表达式 169<br />6.3.2赋值运算符与表达式 169<br />6.3.3比较、逻辑运算符与表达式 169<br />6.3.4条件运算符与表达式 171<br />6.4JavaScript的语法与流程控制语句 171<br />6.4.1JavaScript的语法 171<br />6.4.2条件语句if-else 171<br />6.4.3多选择开关语句switch 172<br />6.4.4循环语句while、do-while、for 176<br />6.5JavaScript自定义函数 180<br />6.5.1独立函数 180<br />6.5.2内嵌函数与匿名函数 182<br />6.6JavaScript事件处理 183<br />6.6.1JavaScript常用事件 184<br />6.6.2页面相关事件与函数的记忆调用 186<br />6.6.3鼠标相关事件 188<br />6.6.4焦点、按键及表单相关事件 193<br />6.7onerror事件与页面错误提示 196<br />6.7.1用onerror事件捕获错误 197<br />6.7.2用try...catch捕获错误 199<br />6.7.3 用throw抛出错误对象 200<br />6.8习题 201<br />第7章JavaScript对象与系统对象 205<br />7.1面向对象概述 205<br />7.2JavaScript全局对象 206<br />7.2.1 全局对象的属性:全局变量 206<br />7.2.2全局对象的方法:全局函数 206<br />7.3浏览器窗口对象window 209<br />7.3.1window对象的属性 209<br />7.3.2window对象的对话框 209<br />7.3.3window对象的方法 210<br />7.3.4定时器应用小案例:图片轮换与漂浮广告 216<br />7.4浏览器信息对象navigator 219<br />7.5当前页面URL对象location 220<br />7.5.1location对象的属性 220<br />7.5.2location对象的方法 222<br />7.6浏览页面历史对象history 223<br />7.7习题 224<br />第8章JavaScript内置对象与DOM对象 227<br />8.1Date日期时间对象 227<br />8.1.1Date日期时间对象的创建 227<br />8.1.2Date日期时间对象的常用方法 228<br />8.2Array数组对象 229<br />8.2.1数组的创建与属性 229<br />8.2.2数组对象与日期时间对象的综合应用 229<br />8.2.3表单复选框组数据验证的实现 230<br />8.3String字符串对象 232<br />8.4RegExp正则表达式对象 234<br />8.4.1正则表达式的构成 234<br />8.4.2RegExp正则表达式对象的创建与属性 236<br />8.4.3RegExp正则表达式对象的方法 237<br />8.4.4String字符串对象使用正则表达式的方法 240<br />8.4.5自定义删除字符串首尾空格的方法trim(str) 243<br />8.5Math类 244<br />8.6document文档对象 245<br />8.6.1document对象的属性 245<br />8.6.2document对象的方法 245<br />8.7DOM节点对象 247<br />8.7.1DOM节点对象的通用属性 247<br />8.7.2标记对象的所属类 248<br />8.7.3标记对象的属性 248<br />8.7.4标记对象的方法 250<br />8.7.5某些标记对象的专有属性或方法 250<br />8.8event事件对象 254<br />8.9style样式对象 256<br />8.10习题 257<br />第9章JavaScript的应用 261<br />9.1折叠式导航 261<br />9.1.1折叠式导航 261<br />9.1.2动态生成下拉列表 265<br />9.2图像操作 267<br />9.2.1图像翻转器 267<br />9.2.2随机显示一条文本或一幅图像 269<br />9.3表单处理与验证 269<br />9.3.1使用正则表达式验证表单内容 270<br />9.3.2目前流行的通用表单验证方法 272<br />9.3.3表单综合验证示例 276<br />9.4样式表切换器 282<br />附录习题答案 287 </div></p></div></p></div> <style>.erphpdown-box{display:block;}</style><div class="erphpdown-box"><div class="item price"><t>下载价格:</t><span>免费</span></div><a href=https://www.cnbook.top/wp-content/plugins/erphpdown/download.php?postid=4337 target="_blank" class="down"><i class="dripicons dripicons-download"></i> 立即下载</a></div> </div> <div class="article-shares"> <a href="javascript:;" data-url="https://www.cnbook.top/4337.html" class="share-weixin" title="分享到微信"><i class="fa"></i></a><a data-share="qzone" class="share-qzone" title="分享到QQ空间"><i class="fa"></i></a><a data-share="weibo" class="share-tsina" title="分享到新浪微博"><i class="fa"></i></a><a data-share="qq" class="share-sqq" title="分享到QQ好友"><i class="fa"></i></a><a data-share="douban" class="share-douban" title="分享到豆瓣网"><i class="fa"></i></a> </div> <nav class="article-nav"> <span class="article-nav-prev">上一篇<br><a href="https://www.cnbook.top/4335.html" rel="prev">《Web前端开发技术(HTML+CSS+JavaScript)(慕课版)》PDF电子书免费下载</a></span> <span class="article-nav-next">下一篇<br><a href="https://www.cnbook.top/4339.html" rel="next">《Web前端开发实战教程(HTML5+CSS3+JavaScript)(微课版)》PDF电子书免费下载</a></span> </nav> </article> <div class="modown-ad" ><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6834405065340325" crossorigin="anonymous"></script></div> <div class="single-related"><h3 class="related-title">相关推荐</h3><ul class="clearfix"><li><a href="https://www.cnbook.top/11735.html"><img src="http://img3m3.ddimg.cn/93/36/28968483-1_w_6.jpg" class="thumb" alt="《UML基础与Rose建模实用教程(第三版)》PDF电子书免费下载"><h4>《UML基础与Rose建模实用教程(第三版)》PDF电子书免费下载</h4></a> <div class="meta"> <span><i class="dripicons dripicons-preview"></i> 1706</span> <span class="price"><i class="dripicons dripicons-ticket"></i> 免费</span> </div> </li><li><a href="https://www.cnbook.top/11734.html"><img src="http://img3m7.ddimg.cn/35/2/29114747-1_w_2.jpg" class="thumb" alt="《人工智能:模式识别》PDF电子书免费下载"><h4>《人工智能:模式识别》PDF电子书免费下载</h4></a> <div class="meta"> <span><i class="dripicons dripicons-preview"></i> 1551</span> <span class="price"><i class="dripicons dripicons-ticket"></i> 免费</span> </div> </li><li><a href="https://www.cnbook.top/11733.html"><img src="http://img3m2.ddimg.cn/68/10/29176952-1_w_2.jpg" class="thumb" alt="《Java高手是怎样炼成的:原理、方法与实践》PDF电子书免费下载"><h4>《Java高手是怎样炼成的:原理、方法与实践》PDF电子书免费下载</h4></a> <div class="meta"> <span><i class="dripicons dripicons-preview"></i> 1547</span> <span class="price"><i class="dripicons dripicons-ticket"></i> 免费</span> </div> </li><li><a href="https://www.cnbook.top/11732.html"><img src="http://img3m9.ddimg.cn/88/12/27856609-1_w_3.jpg" class="thumb" alt="《Python程序设计实验指导书》PDF电子书免费下载"><h4>《Python程序设计实验指导书》PDF电子书免费下载</h4></a> <div class="meta"> <span><i class="dripicons dripicons-preview"></i> 1492</span> <span class="price"><i class="dripicons dripicons-ticket"></i> 免费</span> </div> </li></ul></div> <div class="modown-ad" ><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6834405065340325" crossorigin="anonymous"></script></div> </div> </div> <aside class="sidebar"> </aside> </div></div><footer class="footer"> <div class="container"> <div class="footer-widgets"> </div> </div> <div class="copyright-area bg-7"> <div class="container"> <!-- Contact address left --> <!-- Contact address left --> <!-- Copyright right --> <div class="row"> <div class="col-md-12"> <div class="copyright-area text-center"> <!-- Copyright social --> <div class="contact-social text-center pt-70 pb-35"> </div> <!-- Copyright social --> <div class="copyright-text"> <p>烟囱电子书 © All Rights Reserved.<br>免责声明:本站所有内容皆由烟囱电子书网(www.cnbookpdf.com)自网络收集整理,版权归原作者和出版社所有.<br>如有侵权请联系我们删除!phonecom007@sina.com</p> </div> <!-- Copyright text --> </div> </div> </div> <!-- Copyright right --> </div> </div></footer><div id="globalSearch" class="js-search search-form search-form-modal fadeZoomIn" role="dialog" aria-hidden="true" > <form method="get" action="https://www.cnbook.top" role="search"> <div class="search-form-inner"> <div class="search-form-box"> <input class="form-search" type="text" name="s" placeholder="键入关键词"> </div> </div> </form></div><div class="rollbar"> <ul> <li><a href="javascript:void(0)" data-toggle="modal" data-target="#globalSearch" data-backdrop="1"><span class="nav-search-btn"><i class="fa"></i></span></a></li> <li><a href="javascript:;" class="totop"><i class="dripicons dripicons-chevron-up"></i></a></li> </ul></div><div class="sign"> <div class="sign-mask"></div> <div class="container"> <div class="signmod-header">登入/注册</div> <div class="sign-tips"></div> <!-- 三方登录 --> <div class="sign-social">知识就是力量</div> <form id="sign-in"> <div class="form-item"><input type="text" name="user_login" class="form-control" id="user_login" placeholder="用户名"></div> <div class="form-item"><input type="password" name="password" class="form-control" id="user_pass" placeholder="密码"></div> <div class="sign-submit"> <input type="button" class="btn signinsubmit-loader" name="submit" value="登录"> <input type="hidden" name="action" value="signin"> </div> <div class="sign-trans">没有账号? <a href="javascript:;" class="signup-loader-reg">注册</a><a href="https://www.cnbook.top/wp-login.php?action=lostpassword" style="float:right" rel="nofollow" target="_blank">忘记密码?</a></div> </form> <form id="sign-up" style="display: none;"> <div class="form-item"><input type="text" name="name" class="form-control" id="user_register" placeholder="用户名"></div> <div class="form-item"><input type="email" name="email" class="form-control" id="user_email" placeholder="邮箱"></div> <div class="form-item"><input type="password" name="password2" class="form-control" id="user_pass2" placeholder="密码"></div> <div class="form-item"> <input type="text" class="form-control" style="width:40%;display: inline-block;" id="captcha" name="captcha" placeholder="验证码"><img src="https://www.cnbook.top/wp-content/themes/iDowns/static/img/captcha.png" class="captcha-clk2" style="height:40px;position: relative;top: -2px;cursor: pointer;"/> </div> <div class="sign-submit"> <input type="button" class="btn signupsubmit-loader" name="submit" value="注册"> <input type="hidden" name="action" value="signup"> </div> <div class="sign-trans">已有账号? <a href="javascript:;" class="signup-loader-login">登录</a></div> </form> </div> </div><script type='text/javascript' src='https://www.cnbook.top/wp-content/themes/iDowns/static/js/lib.js?ver=Version' id='lib-js'></script><script type='text/javascript' src='https://www.cnbook.top/wp-content/themes/iDowns/static/js/main.js?ver=Version' id='main-js'></script><script type='text/javascript' src='https://www.cnbook.top/wp-content/themes/iDowns/static/fancybox/jquery.fancybox.min.js?ver=Version' id='fancybox3-js'></script><script>IDOWNS.init({ias: 0, lazy: 1, water: 0});</script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6834405065340325" crossorigin="anonymous"></script><div class="analysis"><script>var _hmt = _hmt || [];(function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?76600dbd618314840588c2737976a985"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div></body></html> <!--压缩前的大小: 24496 bytes; 压缩后的大小: 22620 bytes; 节约:7.66% -->