近年来随着网络信息技术的广泛应用，越来越多的个人、企业都纷纷建立自己的网站，利用网站来宣传、推广自己的产品和服务，网页技术已经成为当代青年学生的知识技能。目前大部分制作网页的方式都是运用可视化的网页编辑软件进行操作，这些软件的功能强大，使用方便，但是对于高级网页制作人员来讲，仍需要了解HTML、CSS等网页设计语言和技术的使用方法，这样才能充分发挥自己的想象力，更加自由地设计符合要求的网页，以实现网页设计软件不能实现的许多重要功能。
本书主要内容
本书围绕网页设计师在网页制作过程中的实际需要和应该掌握的技术，全面介绍了使用HTML、CSS进行网页设计和制作的内容和技巧。本书不仅注重语法讲解，还通过一个个鲜活、典型的案例来帮助读者达到学以致用的目的。每个语法都有相应的实例，大多数章的后面还配有综合实例。
本书共16章，主要内容包括HTML 5入门、用HTML设置文字与段落格式、用HTML创建精彩的图像和多媒体页面、用HTML创建超链接、使用HTML创建表格、创建交互式表单、用HTML 5绘制Canvas和SVG、CSS基础知识、用CSS控制网页文本和段落样式、用CSS设计图片和背景、用CSS制作实用的菜单和网站导航、CSS 3移动网页开发、CSS盒子模型与定位、CSS Div布局方法、JavaScript基础知识、设计制作企业网站等。
本书主要特色 知识系统、全面本书内容完全从网页创建的实际应用出发，将HTML、CSS、JavaScript元素进行归类，每个标记的语法、属性和参数都有完整详细的说明，信息量大，知识结构完善。
典型实例讲解 本书配有大量案例，将基础知识综合贯穿全书，力求达到理论知识与实际操作完美结合的效果。
配合Dreamweaver进行讲解 本书以浅显的语言和详细的步骤讲解，介绍了在可视化网页软件Dreamweaver中，如何运用HTML、CSS代码来创建网页，使网页制作变得更加得心应手。
? 代码支持
本书提供案例的源代码，便于读者在实战中掌握网页设计与制作的每一项技能。
? 配图丰富，效果直观
对于每一个实例代码，本书都配有相应的效果图，读者无须自行编码，也可以看到相应的
运行结果或者显示效果。在不便上机操作的情况下，可根据书中的实例和效果图进行分析和比较。
本书读者对象
? 网页设计与制作人员
? 网站建设与开发人员
? 大中专院校相关专业师生
? 网页制作培训班学员
? 个人网站建设爱好者与自学人员
本书作者
本书主创人员为黔南民族师范学院副教授罗刚和原晋鹏，均为从事计算机教学工作的资深
教师，有着丰富的教学经验和网络开发经验。由于时间所限，书中疏漏之处在所难免，恳请广大读者朋友批评指正。
配套素材及技术支持
本书的配套素材请用微信扫描下面的二维码进行下载，如果在下载过程中碰到问题，请联
系陈老师，联系邮箱：chenlch@tup.tsinghua.edu.cn。
如果有技术性问题，请扫描下面的二维码，联系相关技术人员进行解决。
本书为2020 年贵州省教改项目双创背景下地方高校Java 开发技术课程体系建设（项目号：2020230）、2018 年黔南民族师范学院教育质量提升工程项目软件开发技术核心课程教学团队（项目号：2018xjg0301）研究成果。
作者
2021.6
第1 章 HTML 5 入门 001
1.1 认识HTML 5 001
1.2 HTML 5 的新特性 003
1.3 HTML 5 与HTML 4 的区别 004
1.3.1 HTML 5 的语法变化 … 004
1.3.2 HTML 5 中的标记方法 005
1.3.3 HTML 5 语法中的3 个要点 005
1.4 新增的主体结构元素 … 006
1.4.1 article 元素 … 006
1.4.2 section 元素 008
1.4.3 nav 元素 009
1.4.4 aside 元素 … 011
1.5 新增的非主体结构元素 012
1.5.1 header 元素 012
1.5.2 hgroup 元素 013
1.5.3 footer 元素 … 014
1.5.4 address 元素 015
1.6 本章小结 016
第2 章 用HTML 设置文字与段落格式 … 017
2.1 HTML 页面主体常用设置 … 017
2.1.1 定义网页背景色：bgcolor 017
2.1.2 设置背景图片：background 018
2.1.3 设置文字颜色：text … 019
2.1.4 设置链接文字属性 … 020
2.1.5 设置页面边距 … 022
2.2 页面头部元素
和 … 023
2.3 页面标题元素
… 024<br />2.4 插入其他标记 024<br />2.4.1 输入空格符号 … 025<br />2.4.2 输入特殊符号 … 025<br />2.5 设置文字的格式 … 026<br />2.5.1 字体：face … 026<br />2.5.2 字号：size … 027<br />2.5.3 文字颜色：color 028<br />2.5.4 粗体、斜体、下画线：b、strong、i、em、cite、u … 029<br />2.5.5 上标与下标：sup、sub 030<br />2.5.6 多种标题样式：<h1> ～<h6> … 031<br />2.6 设置段落的排版与换行 032<br />2.6.1 为文字分段：p … 032<br />2.6.2 段落的对齐属性：align … 033<br />2.6.3 不换行标记：nobr 034<br />2.6.4 换行标记：br 035<br />2.7 水平线标记 … 035<br />2.7.1 插入水平线：hr … 036<br />2.7.2 水平线的宽度与高度：width、size 036<br />2.7.3 水平线的颜色：color 037<br />2.7.4 水平线的对齐方式：align 038<br />2.7.5 去掉水平线阴影：noshade 039<br />2.8 综合实例设置页面文本及段落 040<br />2.9 本章小结 042</p>
<p>第3 章 用HTML 创建精彩的图像和多媒体页面 … 043<br />3.1 网页中常见的图像格式 043<br />3.2 插入图像并设置图像属性 … 044<br />3.2.1 图像标记：img … 044<br />3.2.2 图像高度：height 045<br />3.2.3 图像宽度：width 046<br />3.2.4 图像的边框：border … 046<br />3.2.5 图像水平间距：hspace 047<br />3.2.6 图像垂直间距：vspace 048<br />3.2.7 图像相对于文字的对齐方式：<br />align … 049<br />3.2.8 图像的替代文字：alt 050<br />3.3 音频和视频 … 051<br />3.3.1 使用embed 051<br />3.3.2 使用video … 052<br />3.4 综合实例创建多媒体网页 … 054<br />3.5 本章小结 055</p>
<p>第4 章 用HTML 创建超链接 … 056<br />4.1 超链接和路径 056<br />4.1.1 超链接的概念 … 056<br />4.1.2 路径URL … 056<br />4.1.3 HTTP 路径 … 057<br />4.1.4 FTP 路径 … 058<br />4.1.5 邮件路径 … 059<br />4.2 链接元素<a> 060<br />4.2.1 指定路径属性href 060<br />4.2.2 显示链接目标属性target … 061<br />4.2.3 链接的热键属性accesskey 062<br />4.3 创建图像的超链接 064<br />4.3.1 创建链接区域元素<map> 064<br />4.3.2 链接区域的名称属性name 064<br />4.3.3 定义鼠标敏感区元素<area> 065<br />4.3.4 链接的路径属性href、nohref … 066<br />4.3.5 鼠标敏感区坐标属性coords 067<br />4.4 创建锚点链接 069<br />4.5 综合实例为网页添加链接 … 070<br />4.6 本章小结 072</p>
<p>第5 章 使用HTML 创建表格… 073<br />5.1 创建并设置表格属性 … 073<br />5.1.1 表格的基本标记：table、tr、td … 073<br />5.1.2 表格宽度和高度：width、height … 074<br />5.1.3 表格的标题：caption 075<br />5.1.4 表格的表头：th … 077<br />5.1.5 表格对齐方式：align 078<br />5.1.6 表格的边框宽度：border … 080<br />5.1.7 表格的边框颜色：bordercolor … 081<br />5.1.8 单元格间距：cellspacing … 082<br />5.1.9 单元格边距：cellpadding … 083<br />5.1.10 表格的背景色：bgcolor … 084<br />5.1.11 表格的背景图像：<br />background 085<br />5.2 表格的结构标记 … 086<br />5.2.1 设计表头样式：thead 086<br />5.2.2 设计表主体样式：tbody … 088<br />5.2.3 设计表尾样式：tfoot… 089<br />5.3 综合实例使用表格排版网页 091<br />5.4 本章小结 095</p>
<p>第6 章 创建交互式表单 096<br />6.1 表单元素<form> … 096<br />6.1.1 动作属性action … 096<br />6.1.2 发送数据方式属性method 097<br />6.1.3 名称属性name … 097<br />6.2 表单对象<input> … 098<br />6.2.1 文本域text … 099<br />6.2.2 密码域password 100<br />6.2.3 提交按钮submit 101<br />6.2.4 复位按钮reset … 102<br />6.2.5 图像域image 102<br />6.2.6 普通按钮button … 103<br />6.2.7 复选框checkbox 104<br />6.2.8 单选按钮radio … 105<br />6.2.9 隐藏域hidden … 106<br />6.3 综合实例用户注册表单页面 … 107<br />6.4 本章小结 112</p>
<p>第7 章 HTML 5 绘图Canvas 和SVG … 113<br />7.1 Canvas 绘制基本图形 … 113<br />7.1.1 Canvas 元素 113<br />7.1.2 绘制直线 … 114<br />7.1.3 绘制矩形 … 115<br />7.1.4 绘制三角形 118<br />7.1.5 绘制圆弧 … 119<br />7.1.6 绘制贝塞尔曲线 120<br />7.2 颜色和样式选项 … 121<br />7.2.1 应用不同的线型 121<br />7.2.2 绘制线性渐变 … 123<br />7.2.3 绘制径向渐变 … 125<br />7.3 变换 126<br />7.3.1 平移变换 … 127<br />7.3.2 缩放变换 … 128<br />7.3.3 旋转变换 … 129<br />7.4 SVG 129<br />7.4.1 图形绘制 … 130<br />7.4.2 文本与图像 133<br />7.4.3 笔画与填充 134<br />7.5 综合实例绘制精美时钟 134<br />7.6 本章小结 137</p>
<p>第8 章 CSS 基础知识 … 138<br />8.1 CSS 3 简介 … 138<br />8.1.1 CSS 基本概念 … 138<br />8.1.2 CSS 的优点 139<br />8.1.3 CSS 功能 … 140<br />8.1.4 CSS 发展史 140<br />8.2 在HTML 5 中使用CSS 141<br />8.2.1 行内样式 … 141<br />8.2.2 内嵌样式 … 142<br />8.2.3 链接样式 … 143<br />8.2.4 导入样式 … 144<br />8.2.5 优先级问题 144<br />8.3 选择器类型 … 145<br />8.3.1 标签选择器 145<br />8.3.2 类选择器 … 145<br />8.3.3 ID 选择器 … 147<br />8.4 编辑和浏览CSS … 148<br />8.4.1 手工编写CSS … 148<br />8.4.2 利用Dreamweaver 编写CSS 149<br />8.5 综合实例对网页添加CSS 样式 150<br />8.6 本章小结 152</p>
<p>第9 章 CSS 控制网页文本和段落样式 153<br />9.1 通过CSS 控制文本样式 153<br />9.1.1 字体font-family … 153<br />9.1.2 字号font-size 154<br />9.1.3 加粗字体font-weight 156<br />9.1.4 字体风格font-style … 157<br />9.1.5 小写字母转换为大写字母font-variant … 159<br />9.2 通过CSS 控制段落样式 160<br />9.2.1 单词间隔word-spacing 160<br />9.2.2 字符间隔letter-spacing 161<br />9.2.3 文字修饰text-decoration … 161<br />9.2.4 垂直对齐方式vertical-align 162<br />9.2.5 文本转换text-transform … 163<br />9.2.6 水平对齐方式text-align … 164<br />9.2.7 文本缩进text-indent … 165<br />9.2.8 文本行高line-height … 166<br />9.3 综合实例CSS 字体样式综合演练 167<br />9.4 本章小结 170</p>
<p>第10 章 用CSS 设计图片和背景 … 171<br />10.1 设置网页的背景 … 171<br />10.1.1 背景颜色 … 171<br />10.1.2 背景图片 … 173<br />10.2 设置背景图片的样式 … 174<br />10.2.1 背景图片重复 … 174<br />10.2.2 背景图片附件 … 176<br />10.2.3 背景图片定位 … 177<br />10.3 设置网页图片的样式 … 180<br />10.3.1 设置图片边框 … 180<br />10.3.2 图文混合排版 … 183<br />10.4 综合实例 184<br />10.4.1 实例1为图片添加边框 … 184<br />10.4.2 实例2光标移到图片时产生渐变效果 … 185<br />10.5 本章小结 187</p>
<p>第11 章 用CSS 制作实用的菜单和网站导航 … 188<br />11.1 列表的使用 … 188<br />11.2 控制列表样式 188<br />11.2.1 ul 无序列表 189<br />11.2.2 ol 有序列表 190<br />11.2.3 dl 定义列表 191<br />11.2.4 更改列表起始数值 … 192<br />11.3 横排导航 193<br />11.3.1 文本导航 … 193<br />11.3.2 标签式导航 195<br />11.4 竖排导航 197<br />11.5 综合实例 199<br />11.5.1 实例１实现背景变换的导航菜单 … 199<br />11.5.2 实例2利用CSS 制作横向导航 … 201<br />11.5.3 实例3树状导航菜单 201<br />11.6 本章小结 204</p>
<p>第12 章 CSS 3 移动网页开发… 205<br />12.1 预览激动人心的CSS 3 205<br />12.2 边框 209<br />12.2.1 圆角边框 border-radius … 210<br />12.2.2 边框图片border-image … 211<br />12.2.3 边框阴影box-shadow 212<br />12.3 背景 214<br />12.3.1 背景图片尺寸background-size 214<br />12.3.2 背景图片定位区域background-origin … 215<br />12.3.3 背景绘制区域background-clip 216<br />12.4 文本 217<br />12.4.1 文本阴影text-shadow 218<br />12.4.2 强制换行word-wrap 219<br />12.4.3 文本溢出text-overflow … 219<br />12.5 多列 221<br />12.5.1 创建多列column-count … 221<br />12.5.2 列的宽度column-width … 222<br />12.6 转换 223<br />12.6.1 移动translate() … 223<br />12.6.2 旋转rotate() 224<br />12.6.3 缩放scale() 225<br />12.7 综合实例将鼠标放上去移动并旋转图片 … 227<br />12.8 本章小结 228</p>
<p>第13 章 CSS 盒子模型与定位… 229<br />13.1 盒子与模型的概念探究 … 229<br />13.2 border … 230<br />13.2.1 边框样式：border-style … 231<br />13.2.2 属性值的简写形式 … 233<br />13.2.3 边框与背景 234<br />13.3 设置内边距(padding) … 235<br />13.4 设置外边距(margin) 237<br />13.5 盒子的定位 … 240<br />13.5.1 静态定位(static) 240<br />13.5.2 相对定位(relative) … 241<br />13.5.3 定位(absolute) … 242<br />13.5.4 固定定位(fixed) 245<br />13.6 盒子的浮动 … 246<br />13.7 综合案例设置第1 个浮动的Div … 246<br />13.8 本章小结 248</p>
<p>第14 章 CSS Div 布局方法… 249<br />14.1 CSS 布局模型 … 249<br />14.1.1 关于CSS 布局 … 249<br />14.1.2 流动布局模型 … 250<br />14.1.3 浮动布局模型 … 252<br />14.1.4 层布局模型 256<br />14.1.5 高度自适应 258<br />14.2 CSS 布局理念 260<br />14.2.1 将页面用Div 分块 … 260<br />14.2.2 设计各块的位置 260<br />14.2.3 用CSS 定位 261<br />14.3 常见的布局类型 … 262<br />14.3.1 列固定宽度 262<br />14.3.2 列自适应 … 264<br />14.3.3 两列固定宽度 … 266<br />14.3.4 两列宽度自适应 267<br />14.3.5 两列右列宽度自适应 268<br />14.3.6 三列浮动中间宽度自适应 269<br />14.3.7 三行二列居中高度自适应布局 … 270<br />14.4 本章小结 272</p>
<p>第15 章 JavaScript 基础知识 … 273<br />15.1 JavaScript 的添加方法 273<br />15.1.1 内部引用 … 273<br />15.1.2 外部调用js 文件 274<br />15.1.3 添加到事件中 … 275<br />15.2 基本数据类型 275<br />15.2.1 使用字符串型数据 … 275<br />15.2.2 使用数值型数据 276<br />15.2.3 使用布尔型数据 277<br />15.2.4 使用Undefined 和Null类型 … 277<br />15.3 常量和变量 … 278<br />15.3.1 常量 … 278<br />15.3.2 常量的使用方法 279<br />15.3.3 变量的定义 280<br />15.4 使用选择语句 281<br />15.4.1 if 选择语句 281<br />15.4.2 if…else 选择语句 … 282<br />15.4.3 if…else if…else 选择语句 283<br />15.4.4 switch 多条件选择语句 … 285<br />15.5 使用循环语句 286<br />15.5.1 for 循环语句 … 286<br />15.5.2 while 循环语句 288<br />15.5.3 do-while 循环语句 … 289<br />15.5.4 break 和continue 跳转语句 … 290<br />15.6 事件 291<br />15.6.1 事件详解 … 292<br />15.6.2 事件与事件驱动 292<br />15.7 JavaScript 对象 … 294<br />15.7.1 声明和实例化 … 295<br />15.7.2 对象的引用 296<br />15.7.3 navigator 对象 … 297<br />15.7.4 window 对象 … 298<br />15.7.5 location 对象 … 299<br />15.7.6 history 对象 301<br />15.7.7 document 对象 … 302<br />15.8 综合实例改变网页背景颜色 303<br />15.9 本章小结 304</p>
<p>第16 章 设计制作企业网站 … 305<br />16.1 企业网站设计概述 305<br />16.1.1 企业网站主要功能 … 305<br />16.1.2 页面配色 … 307<br />16.1.3 排版构架 … 308<br />16.2 各部分设计 … 309<br />16.2.1 页面的通用规则 309<br />16.2.2 制作网站导航部分 … 310<br />16.2.3 制作header 右侧部分 313<br />16.2.4 制作欢迎部分 … 322<br />16.3 本章小结 326</p>
</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=128440" target="_blank"><img src="http://pic.book1993.com/Pic/uploadfile/kexue/2013799319519235_w.jpg" alt="Dreamweaver网页设计与制作" name="Pic" onerror="showImgDelay(this,'http://pic.book1993.com/Pichttp://pic.book1993.com/Pic/uploadfile/kexue/2013799319519235_w.jpg',2);" width="148" height="148"></a><br><a href="bookshow.asp?id=128440" title="Dreamweaver网页设计与制作" target="_blank">Dreamweaver网页设计与制作</a></li><li><a href="bookshow.asp?id=46656" target="_blank"><img src="http://pic.book1993.com/Pic/uploadfile/Download/2017122417080940940.jpg" alt="Axure RP原型设计基础与案例实战" name="Pic" onerror="showImgDelay(this,'http://pic.book1993.com/Pichttp://pic.book1993.com/Pic/uploadfile/Download/2017122417080940940.jpg',2);" width="148" height="148"></a><br><a href="bookshow.asp?id=46656" title="Axure RP原型设计基础与案例实战" target="_blank">Axure RP原型设计基础与案例实战</a></li><li><a href="bookshow.asp?id=1004" target="_blank"><img src="http://pic.book1993.com/Pic/uploadfile/Download/20150710100212571257.jpg" alt="为什么我们总是感到不安——给内心不安者的心理学秘方" name="Pic" onerror="showImgDelay(this,'http://pic.book1993.com/Pichttp://pic.book1993.com/Pic/uploadfile/Download/20150710100212571257.jpg',2);" width="148" height="148"></a><br><a href="bookshow.asp?id=1004" title="为什么我们总是感到不安——给内心不安者的心理学秘方" target="_blank">为什么我们总是感到不安——给内心不安者的心理学秘方</a></li><li><a href="bookshow.asp?id=56858" target="_blank"><img src="http://pic.book1993.com/Pic" alt="ASP.NET Web应用开发技术" name="Pic" onerror="showImgDelay(this,'http://pic.book1993.com/Pichttp://pic.book1993.com/Pic',2);" width="148" height="148"></a><br><a href="bookshow.asp?id=56858" title="ASP.NET Web应用开发技术" target="_blank">ASP.NET Web应用开发技术</a></li><li><a href="bookshow.asp?id=82924" target="_blank"><img src="http://pic.book1993.com/Pic/uploadfile/m_images/201568025697497361.jpg" alt="ASP.NET MVC程序设计教程（第3版）" name="Pic" onerror="showImgDelay(this,'http://pic.book1993.com/Pichttp://pic.book1993.com/Pic/uploadfile/m_images/201568025697497361.jpg',2);" width="148" height="148"></a><br><a href="bookshow.asp?id=82924" title="ASP.NET MVC程序设计教程（第3版）" target="_blank">ASP.NET MVC程序设计教程（第3版）</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="140502">
<input name=title type=hidden value="HTML+CSS网站设计与开发从新手到高手">
<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 class="b-comment_fenlei">
<ul>
</ul>
</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="lxwm.asp" target="_blank" title="">联系我们</a></div>
<div class="copyright_n">
Copyright 1993-2020 <a href="http://book.book1993.com">book.book1993.com</a> Inc.All Rights Reserved<br>
公司名称：山东中教产业发展股份有限公司 公司地址：山东省济南市大桥镇128号 联系电话：400-0531-123
<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 class="ban_img"><img src="images/ban_img.png" width="691" height="55"></div>
</div>
<script src="/images/common.js" language="javascript"></script>
</body>
</html>
</body></html> 
新书资讯