HTML+CSS+JavaScript网页制作从入门到精通第4版_宋丽娜史笑颜刘西杰晁代远_9787115565235

本书从零开始，全面讲解开发网页的全过程，使读者能够迅速掌握核心知识点及对应的编程能力。本书共有17章内容，第1章～第7章介绍HTML中常用的标签；第8章～第11章介绍了CSS中的常见样式，其中包括浮动和定位两种网页布局方式；第12章介绍了HTML5中的新增元素和属性；第13章介绍了CSS3中的新增属性；第14章介绍了flex布局的用法，并用案例的方式讲解了移动端网页的实现方法；第15章和第16章讲解了JavaScript的基础知识并提供了大量示范案例；第17章以一个商业网站为案例，对全书重点内容进行综合实战练习，案例中使用了HTML+CSS+JavaScript的核心知识点。本书提供配套视频教程，并附有HTML、CSS、JavaScript的技巧精讲。书中提供的练习题和章节任务，可以帮助读者及时进行自我检测，查漏补缺。本书知识点全面、讲解详细，适合零基础的编程初学者阅读，也适合具备基础知识、想要提升编程能力的读者阅读。

第01章　创建一个HTML网页 1.1　认识HTML.2 1.2　HTML标签.2 1.3　HTML文件的基本结构3 1.4.Chrome的开发者工具3 1.5　在记事本中编写HTML文件5 1.6.使用编辑器创建HTML文档6 1.6.1.下载 Hbuilder X6 1.6.2.使用Hbuilder X.8 1.7　编写第一个HTML网页9 1.8　练习题11 1.9　章节任务11 第02章　HTML基本标签 2.1.HTML文档头部13 2.2.网页标题13 2.3.元信息<meta>13 2.3.1.设置网页关键字14 2.3.2.设置网页说明14 2.3.3.添加作者信息15 2.3.4.规定字符编码15 2.3.5.设置网页的定时跳转15 2.4　HTML注释.16 2.5　HTML标题<h1>~<h6>17 2.6　HTML段落<p> .18 2.7　换行<br> 19 2.8　水平线<hr>.20 2.9　文本格式化20 2.10.HTML字符实体22 2.10.1　不间断的空格22 2.10.2　插入特殊符号23 2.11　练习题.23 2.12.章节任务.24 第03章　建立超链接 3.1　超链接的基础知识26 3.1.1　绝对路径26 3.1.2　相对路径27 3.1.3　超链接27 3.2　在新窗口打开链接28 3.3　创建锚点链接29 3.3.1　锚点链接29 3.3.2　链接同一网页中的锚点.30 3.3.3　链接到其他网页中的锚点31 3.4　外部链接33 3.4.1　链接到外部网站33 3.4.2　链接到E-mail.34 3.4.3　链接到FTP34 3.4.4　链接到Telnet35 3.4.5　下载文件35 3.5　练习题35 3.6.章节任务36 第04章　使用图像 4.1　图像的格式38 4.1.1.GIF格式.38 4.1.2.JPEG格式38 4.1.3.PNG格式38 4.2　<img>标签基础语法38 4.3　图像的路径src 39 4.4　图像的提示文字alt .39 4.5　图像的宽度（width）和高度（height）.40 4.6　图像的超链接40 4.6.1　图像的超链接.41 4.6.2　图像热区链接41 4.7　练习题43 4.8.章节任务43 第05章　使用列表 5.1　有序列表45 5.1.1　<ol>标签45 5.1.2　有序列表的序号类型type.46 5.1.3　有序列表的起始数值start.47 5.2　无序列表48 5.3　定义列表<dl>.49 5.4　列表的嵌套49 5.5　练习题50 5.6　章节任务50 第06章　使用表格 6.1　创建表格52 6.1.1　表格的基本构成<table>、<tr>、<td>52 6.1.2　设置表格的标题<caption>53 6.1.3　表头<th>53 6.2　表格基本属性54 6.2.1　表格宽度width.55 6.2.2　表格的边框border.56 6.2.3　单元格间距cellspacing 57 6.2.4　表格内文字与边框间距cellpadding57 6.3　表格的行属性58 6.3.1　行内文字的水平对齐方式align58 6.3.2　行内文字的垂直对齐方式valign.59 6.4　单元格属性59 6.4.1　单元格跨列colspan .60 6.4.2　单元格跨行rowspan61 6.5　表格结构61 6.6　练习题62 第07章　使用表单 7.1　form元素创建表单65 7.1.1　提交表单action65 7.1.2　表单名称name65 7.1.3　传送方法method 66 7.2　插入input元素.66 7.2.1　文本框text 68 7.2.2　密码框password .69 7.2.3　单选按钮radio 69 7.2.4　复选框checkbox 70 7.2.5　普通按钮button .70 7.2.6　提交按钮submit 70 7.2.7　重置按钮reset71 7.2.8　图像域image .72 7.3.HTML5新增输入类型72 7.3.1　数值number72 7.3.2.时间选择器DatePicker73 7.4　下拉菜单74 7.5　文本域textarea.75 7.6　创建表单案例75 7.7　练习题78 7.8　章节任务78 第08章　使用CSS样式表 8.1　CSS基础语法80 8.1.1　认识CSS80 8.1.2.CSS语法结构80 8.1.3.CSS选择器81 8.2　添加CSS的方法82 8.2.1.链接外部样式表82 8.2.2.内部样式表82 8.2.3.导入外部样式表83 8.2.4.内嵌样式83 8.3　字体属性83 8.3.1　字体font-family.83 8.3.2　字号font-size.84 8.3.3　字体样式font-style85 8.3.4　加粗字体font-weight86 8.3.5　小写字母转为大写字母font-variant.87 8.3.6　字体复合属性88 8.4　颜色属性color89 8.5　背景属性90 8.5.1　背景颜色background-color90 8.5.2　背景图像background-image91 8.5.3　背景大小background-size92 8.5.4　背景重复background-repeat93 8.5.5　背景位置background-position.94 8.5.6　背景附件background-attachment.96 8.5.7　背景复合属性background97 8.6　段落属性98 8.6.1　单词间隔word-spacing98 8.6.2　字符间隔letter-spacing.99 8.6.3　文字修饰text-decoration.100 8.6.4　水平对齐方式text-align.101 8.6.5　垂直对齐方式vertical-align 102 8.6.6　文本转换text-transform103 8.6.7　文本缩进text-indent104 8.6.8　文本行高line-height105 8.6.9　处理空白white-space106 8.7　练习题.107 8.8　章节任务.107 第09章　盒模型布局 9.1　认识盒模型109 9.1.1.盒模型的构成109 9.1.2.查看元素的盒模型.109 9.2.内容区content.110 9.3.边框border112 9.3.1　边框样式border-style112 9.3.2　边框宽度border-width113 9.3.3　边框颜色border-color114 9.4.内边距padding.114 9.4.1.分别设置4个方向的内边距.115 9.4.2　内边距的复合属性padding116 9.5.外边距margin119 9.5.1　分别设置4个方向的外边距.119 9.5.2　外边距复合属性margin121 9.6.盒模型的大小.123 9.7　块元素和内联元素124 9.7.1.块元素和内联元素的特点124 9.7.2.display属性规定元素的类型126 9.8.初始化页面样式127 9.9.练习题.128 9.10 章节任务.128 第 10章　浮动与定位 10.1.文档流131 10.2　浮动属性float131 10.3.图文环绕134 10.4　清除浮动clear.135 10.5　定位方式position139 10.6　元素位置top、right、bottom、left139 10.7.相对定位140 10.8.绝对定位142 10.9.固定定位143 10.10.层叠顺序z-index.144 10.11　练习题.146 10.12.章节任务.147 第 11章　Web标准与CSS网页布局实例 11.1　Web标准149 11.2　DIV+CSS布局网页基础.149 11.2.1　认识DIV149 11.2.2　一列固定宽度149 11.2.3　一列自适应152 11.2.4　两列固定宽度153 11.2.5　两列宽度自适应155 11.2.6　两列布局右列宽度自适应.156 11.3　使用CSS设计网站导航栏157 11.3.1　有鼠标指针移入效果的导航栏157 11.3.2　横向导航159 11.4　使用CSS设计表单样式161 11.4.1　改变按钮的背景颜色和文字颜色.161 11.4.2　设计文本框的样式.162 11.4.3　设计文本框中的提示文字.163 11.5　使用CSS设计表格样式164 11.5.1.折叠边框165 11.5.2.设计表格的字体样式.166 11.6　使用CSS设置链接样式167 11.6.1　去掉超链接的下画线167 11.6.2　改变鼠标指针的类型.167 11.6.3　设置超链接不同状态的样式.168 11.7　练习题169 11.8.章节任务170 第 12章　HTML5新增元素 12.1　认识HTML5 172 12.2　HTML5与HTML4的区别.173 12.2.1　HTML5的文件特征173 12.2.2　HTML5的SEO.173 12.3　HTML5废除的元素和属性.174 12.3.1　废除的元素174 12.3.2　废除的属性175 12.4　HTML5新增的结构元素.176 12.5　HTML5新增的多媒体元素.178 12.5.1.视频元素video178 12.5.2　链接不同的视频文件.179 12.5.3.音频元素audio181 12.6　HTML5新增的画布元素canvas181 12.6.1.创建canvas元素181 12.6.2　绘制矩形183 12.6.3　绘制路径184 12.6.4.颜色渐变185 12.7.练习题187 12.8.章节任务187 第 13章　CSS3新增属性 13.1　边框189 13.1.1　圆角边框border-radius.189 13.1.2　边框图像border-image.191 13.1.3　边框阴影box-shadow192 13.2　背景194 13.2.1　背景图像尺寸background-size194 13.2.2　背景图像定位区域background-origin195 13.2.3　背景绘制区域background-clip.198 13.3　文本201 13.3.1　文本阴影text-shadow201 13.3.2　强制换行word-wrap.202 13.3.3　文本溢出text-overflow.203 13.4　多列.204 13.4.1　创建多列column-count205 13.4.2　列的宽度column-width206 13.4.3　列的间隔column-gap206 13.4.4　列的规则column-rule207 13.5　2D转换208 13.5.1　移动translate()208 13.5.2　旋转rotate()209 13.5.3　缩放scale().210 13.6　过渡212 13.7　动画213 13.7.1　@keyframes规则声明动画.213 13.7.2　animation动画214 13.8　用户界面215 13.8.1　box-sizing.216 13.8.2　resize218 13.9　实例应用219 13.9.1.使用移动方法实现完全居中219 13.9.2　照片墙效果221 13.10　练习题223 13.11.章节任务223 第 14章　移动端网页 14.1.flex布局225 14.1.1.flex相关概念225 14.1.2.flex布局225 14.2.移动端基本概念231 14.2.1.两种像素231 14.2.2.移动端的3个视口231 14.2.3.设备像素比.233 14.3.移动端开发234 14.3.1.移动端单位——vw适配234 14.3.2.开发一个移动端网页238 14.4.媒体查询247 14.5　练习题.250 14.6.章节任务251 第 15章　JavaScript脚本基础 15.1　JavaScript简介253 15.2　JavaScript基本语法254 15.2.1　常量和变量.254 15.2.2.数据类型.255 15.2.3　表达式和运算符256 15.2.4　基本语句.257 15.2.5.JavaScript注释263 15.2.6.JavaScript代码调试263 15.3　JavaScript事件264 15.3.1　onclick事件264 15.3.2　onchange事件.265 15.3.3　onfocus事件.266 15.3.4　onblur事件267 15.3.5.onmouseover事件.268 15.3.6　onmouseout事件269 15.3.7　ondblclick事件 270 15.3.8　其他常用事件.271 15.4　HTML DOM对象.272 15.4.1.DOM元素对象获取页面中的元素.272 15.4.2.DOM属性对象修改元素的属性274 15.5　浏览器的其他内部对象275 15.5.1　navigator对象276 15.5.2　windows对象276 15.5.3　location对象.278 15.5.4　history对象279 15.6　练习题.280 15.7.章节任务281 第 16章　JavaScript 网页特效 16.1　时间特效283 16.1.1　显示当前时间.283 16.1.2　显示当前日期.285 16.1.3.制作倒计时特效.287 16.2　图像特效289 16.2.1　图像闪烁效果.289 16.2.2　图像轮播.290 16.3　窗口特效291 16.3.1　打开新窗口291 16.3.2　定时关闭窗口.293 16.4　鼠标指针特效294 16.4.1　返回鼠标指针的位置信息294 16.4.2　跟随鼠标指针移动的图像295 16.5　练习题.296 16.6.章节任务297 第 17章　PC端实战——制作购物网页 17.1.项目结构299 17.2.制作网页前的准备301 17.2.1.分辨率301 17.2.2.内容居中301 17.3.项目布局302 17.4.<header>部分难点讲解304 17.4.1.<header>布局.304 17.4.2.图文对齐.305 17.5.<main>部分难点讲解308 17.5.1.<main>布局308 17.5.2.复杂网页的选择器使用.310 17.6.实现图像的 JavaScript 动效311 17.6.1.图像的切换311 17.6.2.收藏和取消312 17.7.总结313 </div> </div> <div class="clear"></div> <script type="text/javascript"> function tab(a,b,c) { for(i=1;i<=b;i++){ if(c==i) { // 判断选择模块 document.getElementById(a+"_mo_"+i).style.display = "block"; // 显示模块内容 document.getElementById(a+"_to_"+i).className = "no"; // 改变菜单为选中样式 } else{ // 没有选择的模块 document.getElementById(a+"_mo_"+i).style.display = "none"; // 隐藏没有选择的模块 document.getElementById(a+"_to_"+i).className = "q"; // 清空没有选择的菜单样式 } } } </script> <div class="b-comment"> <div class="mt"> <span> 你还可能感兴趣</span> </div> </div> <div class="d-comment"> <ul> <li><a href="bookshow.asp?id=1981561" target="_blank"><img src="/uploadfile/202012/9787560658131.jpg" alt="Java应用开发与实践" name="Pic" onerror="showImgDelay(this,'/uploadfile/202012/9787560658131.jpg',2);" width="148" height="148"></a><br><a href="bookshow.asp?id=1981561" title="Java应用开发与实践" target="_blank">Java应用开发与实践</a></li><li><a href="bookshow.asp?id=1833778" target="_blank"><img src="/uploadfile/202003/20200326155464906490.jpg" alt="土木工程材料" name="Pic" onerror="showImgDelay(this,'/uploadfile/202003/20200326155464906490.jpg',2);" width="148" height="148"></a><br><a href="bookshow.asp?id=1833778" title="土木工程材料" target="_blank">土木工程材料</a></li><li><a href="bookshow.asp?id=1897499" target="_blank"><img src="/uploadfile/202009/20200916164475967596.jpg" alt="机器学习算法框架实战：Java和Python实现" name="Pic" onerror="showImgDelay(this,'/uploadfile/202009/20200916164475967596.jpg',2);" width="148" height="148"></a><br><a href="bookshow.asp?id=1897499" title="机器学习算法框架实战：Java和Python实现" target="_blank">机器学习算法框架实战：Java和Python实现</a></li><li><a href="bookshow.asp?id=2585027" target="_blank"><img src="/uploadfile/202310/9787302636175.jpg" alt="JSP+Servlet+Tomcat应用开发从零开始学（第3版）" name="Pic" onerror="showImgDelay(this,'/uploadfile/202310/9787302636175.jpg',2);" width="148" height="148"></a><br><a href="bookshow.asp?id=2585027" title="JSP+Servlet+Tomcat应用开发从零开始学（第3版）" target="_blank">JSP+Servlet+Tomcat应用开发从零开始学（第3版）</a></li><li><a href="bookshow.asp?id=1446683" target="_blank"><img src="/uploadfile/e/TSTP/078907-01.jpg" alt="Java项目开发全程实录（第4版）" name="Pic" onerror="showImgDelay(this,'/uploadfile/e/TSTP/078907-01.jpg',2);" width="148" height="148"></a><br><a href="bookshow.asp?id=1446683" title="Java项目开发全程实录（第4版）" target="_blank">Java项目开发全程实录（第4版）</a></li> </ul> </div> <div class="b-comment"> <div class="mt"> <span> 我要评论</span> </div> </div> <div class="c-comment"> <form method="post" name="comment" action="/book_comment.asp"> <table border="0" cellspacing="1" cellpadding="3" class="commentlist"> <input name=id type=hidden value="2170805"> <input name=title type=hidden value="HTML+CSS+JavaScript网页制作从入门到精通第4版"> <tr> <th>您的姓名</th> <td><input type="text" name="name" size="20" maxlength="20" class="form" /> 验证码：<input name="verifycode" type="text" size="7" style=" height:18px;" /> <img src="safecode.asp?" onClick="this.src+=Math.random()" alt="图片看不清？点击重新得到验证码" style="cursor:hand;" height="18" /></td> </tr> <tr> <th>留言内容</th> <td><textarea name="content" id="content" cols="46" rows="3" class="form-textarea" wrap=physical onKeyDown="checkMaxInput(this.form)" onKeyUp="checkMaxInput(this.form)" style="overflow:auto"></textarea></td> </tr> <tr> <td colspan="2"><input type="submit" value=" 发表评论 " name="cmdok" class="button" /><input type="hidden" name="do" value="save" /></td> </tr> </table> </form> </div>  </div> </td> </tr> </table> <div id="footer"> <div class="end_list"><a href="aboutus.asp" title="">公司介绍</a><a href="Honor.asp" title="">荣誉资质</a><a href="/zxbooks.asp" title="">定向推荐书目</a><a href="/cbs_dc.asp" title=""><strong><font color="#f8e81f">采访数据下载(EXCEL格式)</font></strong></a><a href="http://www.gpcffw.com/download.asp" title=""><strong><font color="#f8e81f">采访数据下载(ISO格式)</font></strong></a><a href="/myadmin/login.asp" title="" target="_blank">出版社登录</a><a href="lxwm.asp" target="_blank" title="">联系我们</a></div> <div class="copyright_n"> Copyright 1993-2024 <a href="http://jx.tsxcfw.com/">jx.tsxcfw.com</a> Inc.All Rights Reserved<br> 公司名称：中国馆配区域联盟公司地址：南昌市庐山南大道1999号10号写字楼联系电话：0791-88529527 <br>技术支持：山东中教产业发展股份有限公司<script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F34a0559de8bca702f061988709fd9a88' type='text/javascript'%3E%3C/script%3E")); </script> </div>  </div> </body> </html> </body></html>