本书基于Web标准和响应式Web设计思想深入浅出地介绍了Web前端设计技术的基础知识,对Web体系结构、HTML5、CSS3、JavaScript和网站制作流程进行了详细的讲解,内容翔实,结构合理,语言精练,表达简明,实用性强,易于自学。 全书共分23章。第1章介绍了Web技术的基本概念、Web体系结构、超文本与标记语言、Web标准的组成和常用浏览器;第2~7章**介绍了Web标准的结构**标准HTML5的常用元素的标签语句及应用;第8~13章介绍了Web标准的表现**标准CSS3的常用属性及应用;第14章介绍了网站制作流程与发布过程;第15~22章介绍了Web标准的行为标准ECMA-262的ECMAScript基础和JavaScript脚本语言;第23章介绍了JavaScript框架jQuery的入门知识。扫描每章提供的二维码可观看知识点的视频讲解及下载程序源码。 本书可作为高等院校计算机专业及相关专业的教材,也可作为相关培训机构的培训教材以及对Web前端设计技术感兴趣的人员的自学用书。
第1章 Web技术概述 1 1.1 Internet概述 1 1.1.1 TCP/IP 1 1.1.2 主机和IP地址 2 1.1.3 域名和DNS 3 1.2 Web概述 3 1.2.1 Web历史 4 1.2.2 Web体系结构 5 1.2.3 基本Web技术 5 1.2.4 Web服务器 9 1.3 超文本与标记语言 9 1.3.1 超文本与超媒体 10 1.3.2 标记语言 10 1.4 Web标准 12 1.4.1 Web标准体系 13 1.4.2 采用Web标准的优势 15 1.5 浏览器 15 1.5.1 浏览器的发展史 15 1.5.2 浏览器的内核 16 1.5.3 常用浏览器 16 1.5.4 标准浏览器 17 1.6 Web开发工具 18 1.6.1 JetBrains WebStorm 19 1.6.2 测试和调试环境 19 1.7 小结 20 1.8 习题 20 第2章 初识HTML5 21 2.1 HTML5基础 21 2.1.1 HTML5文档结构 21 2.1.2 元素与标签 22 2.1.3 属性 26 2.1.4 语法规则 27 2.2 WebStorm基础 27 2.2.1 WebStorm的基本操作 28 2.2.2 WebStorm的快捷键 29 2.3 文档结构元素 30 2.3.1 标签 31 2.3.2 标签 31 2.3.3 标签 31 2.4 头部元素 31 2.4.1 标签 31 2.4.2 标签 32 2.5 为叮叮书店首页添加元信息 35 2.6 小结 36 2.7 习题 36 第3章 HTML5内容结构与文本 37 3.1 HTML5结构标签 37 3.1.1 标签 38 3.1.2 标签 38 3.1.3 标签 38 3.1.4 标签 38 3.1.5 标签 38 3.1.6 标签 39 3.1.7 标签 39 3.1.8 标签和标签 39 3.1.9 标签 39 3.1.10 标签 40 3.2 HTML5基础标签 40 3.2.1 标题 40 3.2.2 段落 41 3.2.3 换行符 41 3.2.4 注释 41 3.3 HTML5格式化标签 41 3.3.1 文本格式化标签 41 3.3.2 引用和术语定义标签 43 3.3.3 HTML5新增格式标签 44 3.4 HTML5列表 47 3.4.1 无序列表 47 3.4.2 有序列表 48 3.4.3 定义列表 49 3.5 叮叮书店首页内容结构的建立 49 3.5.1 分析设计页面内容结构 50 3.5.2 用HTML5结构标签确定页面内容结构 50 3.5.3 添加文本内容 53 3.5.4 在浏览器中预览 57 3.6 小结 58 3.7 习题 58 第4章 HTML5超链接 60 4.1 标签 60 4.1.1 href属性 61 4.1.2 target属性 61 4.1.3 id属性 62 4.2 HTML5字符集与颜色 63 4.2.1 HTML5字符集 63 4.2.2 HTML5字符实体 63 4.2.3 HTML5颜色 64 4.2.4 HTML5颜色名 64 4.3 叮叮书店首页超链接的使用 65 4.4 小结 67 4.5 习题 67 第5章 HTML5多媒体 68 5.1 HTML5图像 68 5.1.1 标签 68 5.1.2 标签和标签 70 5.1.3 标签和标签 71 5.2 HTML5音频/视频 71 5.2.1 HTML5视频 71 5.2.2 HTML5音频 74 5.3 标签 76 5.4 叮叮书店首页图像的使用 76 5.5 小结 79 5.6 习题 79 第6章 HTML5表格 80 6.1 表格结构和表格标签 80 6.1.1 表格结构 80 6.1.2 表格标签 80 6.2 常用表格标签 82 6.2.1 标签 82 6.2.2 标签 83 6.2.3 标签 83 6.2.4 标签 84 6.2.5 、和标签 85 6.3 叮叮书店“购物车”页面的建立 85 6.4 小结 86 6.5 习题 87 第7章 HTML5表单 88 7.1 表单的基本知识 88 7.1.1 什么是表单 88 7.1.2 标签 88 7.2 表单域 90 7.2.1 标签 91 7.2.2 标签 98 7.2.3 标签 99 7.2.4 标签 99 7.2.5 标签 100 7.2.6 标签 100 7.2.7 标签 101 7.2.8 标签 101 7.2.9 标签 102 7.2.10 标签 103 7.3 叮叮书店“联系我们”页面的建立 103 7.4 为叮叮书店首页添加站内搜索 106 7.5 小结 106 7.6 习题 106 第8章 CSS基础 108 8.1 CSS概述 108 8.2 CSS语法 110 8.3 CSS常用选择器 111 8.4 CSS3选择器 114 8.5 CSS属性 115 8.5.1 CSS常用属性 115 8.5.2 CSS属性值和单位 119 8.5.3 CSS3属性值和单位 120 8.6 使用CSS 127 8.7 媒体查询 130 8.8 层叠样式 132 8.9 使用Chrome***工具检查编辑页面及样式 135 8.10 小结 136 8.11 习题 137 第9章 页面布局定位 139 9.1 CSS盒模型 139 9.1.1 CSS盒模型概述 139 9.1.2 CSS内边距 141 9.1.3 CSS边框 143 9.1.4 CSS3边框 147 9.1.5 CSS外边距 151 9.1.6 CSS轮廓 153 9.2 CSS布局 154 9.2.1 盒模型显示类型 154 9.2.2 CSS3伸缩盒布局 157 9.2.3 CSS浮动 171 9.2.4 可见与溢出 174 9.3 CSS定位 176 9.3.1 position属性 176 9.3.2 z-index属性 181 9.4 基本布局模板 181 9.4.1 固定(液态)布局 182 9.4.2 弹性伸缩布局(响应式Web设计) 184 9.5 叮叮书店首页的布局样式设计 187 9.6 小结 190 9.7 习题 191 第10章 元素外观属性 193 10.1 背景 193 10.1.1 CSS背景 193 10.1.2 CSS3背景 196 10.1.3 CSS3透明度 198 10.2 字体 199 10.2.1 指定字体 199 10.2.2 指定大小 200 10.2.3 字体风格 200 10.2.4 字体粗细 200 10.2.5 CSS3服务器端字体 202 10.3 文本与修饰 205 10.3.1 文本 205 10.3.2 修饰 211 10.4 CSS3文本效果 212 10.4.1 阴影 212 10.4.2 换行 213 10.5 CSS3多列 213 10.6 列表 215 10.7 尺寸 216 10.8 表格 218 10.8.1 表格的属性 218 10.8.2 表格的边框控制 220 10.8.3 改善表格的显示效果 222 10.8.4 叮叮书店“购物车”页面的表格样式设计 223 10.9 叮叮书店首页的外观样式设计 224 10.9.1 文本 224 10.9.2 背景 225 10.9.3 栏目标题图标 226 10.9.4 其他 227 10.10 小结 228 10.11 习题 228 第11章 伪类和伪元素 230 11.1 CSS伪类 230 11.1.1 超链接伪类 231 11.1.2 结构性伪类 232 11.1.3 子元素伪类 233 11.1.4 UI元素状态伪类 236 11.2 CSS伪元素 239 11.3 CSS内容 240 11.4 小结 243 11.5 习题 243 第12章 CSS3变换、过渡和动画 245 12.1 变换 245 12.2 过渡 256 12.3 动画 260 12.4 叮叮书店首页的超链接、伪类和动画样式设计 263 12.5 小结 267 12.6 习题 267 第13章 默认样式和页面内容样式设计 269 13.1 默认样式 269 13.1.1 HTML默认样式 269 13.1.2 浏览器默认样式 271 13.2 页面内容样式设计 272 13.2.1 导航菜单 272 13.2.2 图文混排 274 13.3 小结 276 13.4 习题 276 第14章 网站制作流程与发布 277 14.1 网站制作流程 277 14.2 模板 279 14.3 基于模板建立叮叮书店的其他页面 280 14.3.1 书籍分类 280 14.3.2 特刊降价 282 14.3.3 联系我们 284 14.3.4 关于我们 285 14.3.5 详细内容 286 14.3.6 购物车 289 14.4 网站发布 289 14.4.1 Tomcat服务器的安装与使用 289 14.4.2 发布 292 14.5 小结 292 14.6 习题 292 第15章 JavaScript和ECMAScript基础 294 15.1 JavaScript基础 294 15.1.1 JavaScript的历史和主要功能 294 15.1.2 JavaScript的组成 295 15.1.3 JavaScript的使用 296 15.1.4 JavaScript消息框 298 15.1.5 ***工具Console 299 15.2 ECMAScript基础 300 15.2.1 ECMAScript语法基础 300 15.2.2 ECMAScript变量 301 15.2.3 ECMAScript关键字和保留字 302 15.2.4 ECMAScript基本数据类型 303 15.2.5 ECMAScript类型转换 305 15.3 ECMAScript运算符 307 15.3.1 一元运算符 307 15.3.2 算术运算符 308 15.3.3 关系运算符 309 15.3.4 逻辑运算符 311 15.3.5 其他运算符 312 15.4 小结 313 15.5 习题 313 第16章 算法和ECMAScript语句 315 16.1 算法 315 16.1.1 算法的概念 315 16.1.2 简单算法举例 316 16.1.3 算法的特性 316 16.1.4 算法与程序 316 16.2 ECMAScript语句 317 16.2.1 条件语句 317 16.2.2 循环语句 320 16.2.3 break和continue语句 322 16.3 WebStorm和Chrome协作调试JavaScript脚本程序 323 16.4 使用Sources调试JavaScript脚本程序 325 16.5 小结 328 16.6 习题 328 第17章 行为与对象 329 17.1 行为 329 17.1.1 ECMAScript函数 329 17.1.2 ECMAScript闭包 332 17.1.3 HTML事件 333 17.2 ECMAScript对象 337 17.2.1 对象和类 337 17.2.2 创建和使用对象 338 17.2.3 ECMAScript引用类型 339 17.2.4 ECMAScript对象类型 345 17.3 错误处理 346 17.4 内置对象和本地对象 348 17.4.1 Math对象 348 17.4.2 全局对象 349 17.4.3 Array对象 351 17.4.4 Date对象 353 17.5 叮叮书店首页显示日期和时间 354 17.6 小结 356 17.7 习题 356 第18章 DOM 358 18.1 DOM概述 358 18.1.1 DOM简介 358 18.1.2 节点和节点树 359 18.2 DOM对象 360 18.2.1 Node对象 360 18.2.2 HTMLElement对象 362 18.2.3 HTMLDocument对象 362 18.2.4 访问节点 363 18.3 DOM与CSS 366 18.3.1 Style对象 366 18.3.2 CurrentStyle对象 370 18.3.3 StyleSheet对象 371 18.4 叮叮书店首页图片轮播广告的实现 373 18.5 小结 376 18.6 习题 376 第19章 HTML DOM对象和RegExp对象 378 19.1 HTML DOM对象 378 19.1.1 Document对象 379 19.1.2 Image对象 381 19.1.3 Anchor对象 382 19.1.4 Event对象 383 19.1.5 Checkbox和Radio对象 388 19.1.6 FileUpload对象 390 19.1.7 Text和Password对象 392 19.1.8 Textarea对象 393 19.1.9 Select和Option对象 393 19.1.10 Submit、Reset和Button对象 396 19.1.11 Form对象 397 19.1.12 一个小游戏——剪子石头布 398 19.2 RegExp对象 404 19.3 叮叮书店“联系我们”页面的表单数据验证 406 19.4 小结 408 19.5 习题 408 第20章 HTML5 DOM 411 20.1 Canvas对象 411 20.1.1 Canvas基础 413 20.1.2 使用路径 414 20.1.3 绘制文本 417 20.1.4 绘制图像 418 20.2 HTML5拖放 420 20.3 HTML5数据存储 423 20.3.1 sessionStorage对象 423 20.3.2 localStorage对象 424 20.4 实现叮叮书店“书籍分类”页面拖放图书到购物车 428 20.5 小结 430 20.6 习题 431 第21章 BOM 432 21.1 BOM对象 432 21.1.1 Window对象 432 21.1.2 Navigator对象 439 21.1.3 Screen对象 441 21.1.4 Location对象 441 21.1.5 History对象 442 21.2 元素的大小与位置 442 21.3 叮叮书店首页的浮动广告 445 21.4 小结 446 21.5 习题 446 第22章 Ajax与JSON 448 22.1 Ajax 448 22.2 XMLHttpRequest对象 449 22.2.1 创建XMLHttpRequest对象 449 22.2.2 XMLHttpRequest请求 450 22.2.3 XMLHttpRequest响应 451 22.3 JSON 452 22.3.1 JSON的语法 453 22.3.2 JSON的使用 454 22.4 小结 456 22.5 习题 456 第23章 jQuery入门 457 23.1 jQuery基础 457 23.1.1 添加jQuery库 457 23.1.2 jQuery的语法 458 23.2 **和动画 459 23.3 HTML操作 462 23.4 Ajax函数 463 23.5 叮叮书店“试读”页面的建立 463 23.6 小结 466 23.7 习题 466 附录A 实验 467 实验1 HTML5内容结构和文本 467 实验2 HTML5超链接和多媒体 468 实验3 HTML5表格和表单 469 实验4 CSS3布局与定位 470 实验5 CSS3元素外观样式设计 471 实验6 CSS3动画 471 实验7 行为与对象及DOM 472 实验8 HTML DOM表单数据验证 473 实验9 HTML5 DOM 473 参考文献 474
HTML5内容结构与文本
内容结构简称结构,是为网页内容建立一个框架,就像写文章先写一个提纲。结构使页面内容看起来不会杂乱无章,每一部分都紧密联系,形成一个整体。采用HTML5结构标签可以将页面划分成不同的区域或块形成结构,然后在不同的区域或块中填充内容,如报刊/杂志版面设计一样。本章首先详细介绍HTML5结构标签和基础标签,接下来简单了解格式化标签,然后**介绍HTML5列表,*后详细介绍建立叮叮书店首页内容结构的过程。
本章要点:
HTML5结构标签。
HTML5基础标签。
HTML5格式化标签。
HTML5列表。
3.1 HTML5结构标签
HTML5结构标签用于搭建页面主体内容结构,形成不同的区块,完成整个页面的排版布局。表3.1列出了HTML5结构标签。
表3.1 HTML5结构标签
标 签
描 述
<article>
定义文章(HTML5新标签)
<aside>
定义页面内容之外的内容(HTML5新标签)
<details>
定义元素的细节(HTML5新标签)
<footer>
定义section或page的页脚(HTML5新标签)
<header>
定义section或page的页眉(HTML5新标签)
<main>
定义文档的主要内容(HTML5.2新标签)
续表
标 签
描 述
<nav>
定义导航链接(HTML5新标签)
<section>
定义section(HTML5新标签)
<summary>
为details元素定义可见的标题(HTML5新标签)
<div>
定义文档中的节
<span>
定义文档中的行内元素
3.1.1 <header>标签
<header>标签定义文档的页眉,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容,比如在header里面放置logo图片、搜索表单等。
提示:在一个页面内并没有限制header的出现次数,也就是说可以在同一页面内不同的内容区块上分别加上一个header元素。
在HTML5中,一个header元素至少可以包含一个heading元素(h1~h6)。
3.1.2 <main>标签
<main>标签定义文档的主要内容。<main>标签中的内容对于文档来说应当是**的,不包含在文档中重复出现的内容,例如边栏、导航栏、版权信息、站点标志等。
提示:在一个文档中不能出现一个以上的<main>标签。main元素不能是article、aside、footer、header或nav的子元素。
3.1.3 <nav>标签
<nav>标签定义导航链接的部分,主要用于构建导航菜单、侧边栏导航、内页导航和翻页操作等区域。
3.1.4 <article>标签
<article>标签表示页面中的一块与上下文不相关的独立内容,比如一篇文章。这篇文章应有其自身的意义,应该有可能独立于站点的其他部分,例如论坛帖子、报纸文章、博客条目和用户评论等。
3.1.5 <section>标签
<section>标签定义文档中的节(区段),例如章节、页眉、页脚或文档中的其他部分。
3.1.6 <aside>标签
<aside>标签定义其所处内容之外的内容,这个内容应该与附近的内容相关,例如可用作文章的侧栏或边栏。
3.1.7 <footer>标签
<footer>标签定义文档或节的页脚,footer元素应当含有其包含元素的信息。页脚通常包含文档的建立日期、作者、版权信息、使用条款链接和联系信息等。用户可以在一个文档中使用多个<footer>标签。
3.1.8 <details>标签和<summary>标签
<details>标签用于描述文档或文档中某个部分的细节。details元素实际上是一种用于标识其内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型值的open属性,当open属性值为true时元素内部的子元素被展开显示,当open属性值为false时其内部的子元素被收缩起来不显示。open属性的默认值为false,当页面打开时其内部的子元素处于收缩状态。
<summary>标签可以为details元素定义标题,标题是可见的,用户单击标题时会展开显示details元素的内容,再次单击标题时details元素会收缩起来不显示。summary元素从属于details元素。
如果details元素内没有定义summary元素,浏览器会提供默认的文字显示,例如“详细信息”。
提示:IE和Edge不支持<details>标签。