疯狂HTML5+CSS3+JavaScript讲义

给大家带来的一篇关于前端相关的电子书资源，介绍了关于HTML5、CSS3、JavaScript方面的内容，本书是由电子工业出版社出版，格式为PDF，资源大小132.1 MB，李刚编写，目前豆瓣、亚马逊、当当、京东等电子书综合评分为：9.8。

内容介绍

《疯狂HTML5CSS3JavaScript讲义（第2版）》由著名IT作家李刚老师写作

这书的中文繁体字版受权到中国台湾地区

本书朝向HTML5.1规范最新版本，升级好几个原素、拖拽规范的有关专业知识，新增外挂字幕、几何图形方式等內容，主要介绍新增的移动端有关特性

详尽介绍渐变背景支持、弹性盒合理布局、浏览器自适应网站、三d转换等CSS新增特性及重特大改善

W3C于2017年10月15日宣布公布了HTML5.1规范，该规范早已获得众多电脑浏览器生产商的支持，流行的*版本号的电脑浏览器基本上都支持该规范。此外，前端工程师的不断受欢迎，促使HTML5变成现阶段的受欢迎行业。这书是一本全方位介绍HTML5、CSS3和JavaScript前端工程师技术性的书籍，系统化介绍了HTML5常见的原素和属性、HTML5的表单元素和属性、HTML5的制图支持、HTML5的多媒体系统支持、CSS3的作用和使用方法、*最前沿的形变与动漫作用等。此外，这书还系统化介绍了JavaScript程序编写专业知识，包含JavaScript基础英语的语法、DOM程序编写，及其HTML5新增的本地存储、Indexed数据库查询、线下运用、JavaScriptc#多线程、手机客户端通讯支持、WebSocket程序编写等。这书的精准定位是一本前端工程师的“实战演练性”书籍，因而在介绍各知识要点时并并不是简易地滞留在知识要点方面论述，只是融合了很多案例来让阅读者对比训练、融会贯通。这书*后还出示了一个根据HTML5技术性的游戏：瘋狂密室逃脱。该游戏综合应用了HTML5的制图支持、手机客户端储存等技术性，具备较高的实用价值。这书出示了配套设施的答疑解惑网址，假如阅读者在阅读文章这书时碰到了技术性难题，能够登陆瘋狂Java同盟（http://www.crazyit.org）发帖子，小编可能立即给予解释。

目录

• 第1章　HTML 5简介 1
• 1.1　HTML历史与HTML 5 2
• 1.1.1　HTML发展历史 2
• 1.1.2　HTML 4.01和XHTML 3
• 1.1.3　HTML和XHTML的文档类型定义（DTD） 4
• 1.1.4　从XHTML到HTML 5 5
• 1.2　HTML 5的优势 6
• 1.2.1　解决跨浏览器问题 6
• 1.2.2　部分代替了原来的JavaScript 6
• 1.2.3　更明确的语义支持 7
• 1.2.4　增强了Web应用程序的功能 8
• 1.3　HTML 5的基本结构和语法变化 8
• 1.3.1　HTML 5的基本结构 8
• 1.3.2　标签不再区分大小写 9
• 1.3.3　元素可以省略结束标签 10
• 1.3.4　支持boolean值的属性 11
• 1.3.5　允许属性值不使用引号 12
• 1.4　本章小结 12
• 第2章　HTML 5的常用元素与属性 14
• 2.1　HTML 5保留的常用元素 15
• 2.1.1　基本元素 15
• 2.1.2　文本格式相关元素 17
• 2.1.3　语义相关元素 19
• 2.1.4　使用a元素添加超链接和锚点 21
• 2.1.5　列表相关元素 24
• 2.1.6　使用img元素添加图片 27
• 2.1.7　表格相关元素 30
• 2.2　HTML 5增强的iframe元素 34
• 2.2.1　HTML 5新增的srcdoc属性 35
• 2.2.2　HTML 5新增的seamless属性 36
• 2.2.3　HTML 5新增的sandbox属性 36
• 2.3　HTML 5保留的通用属性 40
• 2.3.1　id、style、class属性 40
• 2.3.2　dir属性 41
• 2.3.3　title属性 42
• 2.3.4　lang属性 43
• 2.3.5　accesskey属性 43
• 2.3.6　tabindex属性 43
• 2.4　HTML 5新增的通用属性 44
• 2.4.1　contentEditable属性 44
• 2.4.2　designMode属性 46
• 2.4.3　hidden属性 46
• 2.4.4　spellcheck属性 47
• 2.4.5　contextmenu属性 47
• 2.5　HTML 5新增的结构元素 48
• 2.5.1　article与section元素 48
• 2.5.2　header与footer元素 51
• 2.5.3　nav与aside元素 52
• 2.5.4　main元素 53
• 2.5.5　figure与figcaption元素 54
• 2.6　HTML 5新增的语义元素 55
• 2.6.1　mark元素 55
• 2.6.2　time元素 56
• 2.6.3　details与summary元素 56
• 2.6.4　ruby、rtc、rb、rt和rp元素 57
• 2.6.5　bdi元素 58
• 2.6.6　wbr元素 58
• 2.6.7　menu和menuitem元素 59
• 2.7　HTML 5头部和元信息 59
• 2.7.1　link元素 60
• 2.7.2　base元素 62
• 2.7.3　meta元素 62
• 2.8　HTML 5新增的拖放API 63
• 2.8.1　启动拖动 63
• 2.8.2　接受“放” 65
• 2.8.3　DataTransfer对象 67
• 2.8.4　拖放行为 69
• 2.8.5　改变拖放图标 70
• 2.9　本章小结 71
• 第3章　HTML 5表单相关的元素和属性 72
• 3.1　HTML原有的表单及表单控件 73
• 3.1.1　form元素 73
• 3.1.2　input元素 74
• 3.1.3　使用label定义标签 77
• 3.1.4　使用button定义按钮 78
• 3.1.5　select与option元素 79
• 3.1.6　HTML 5增强的textarea 80
• 3.1.7　fieldset与legend元素 82
• 3.2　HTML 5新增的表单属性 83
• 3.2.1　form属性 83
• 3.2.2　formaction属性 83
• 3.2.3　formxxx属性 84
• 3.2.4　autofocus属性 85
• 3.2.5　placeholder属性 85
• 3.2.6　list属性 86
• 3.2.7　autocomplete属性 87
• 3.2.8　label的control属性 88
• 3.2.9　表单元素的labels属性 88
• 3.2.10　文本框的selectionDirection属性 89
• 3.2.11　复选框的indeterminate属性 89
• 3.3　HTML 5新增的表单元素 90
• 3.3.1　功能丰富的input元素 90
• 3.3.2　output元素 93
• 3.3.3　meter元素 94
• 3.3.4　progress元素 95
• 3.3.5　keygen元素 95
• 3.4　HTML 5新增的客户端校验 96
• 3.4.1　使用校验属性执行校验 96
• 3.4.2　调用checkValidity方法进行校验 97
• 3.4.3　自定义错误提示 98
• 3.4.4　关闭校验 99
• 3.5　本章小结 100
• 第4章　HTML 5的绘图支持 101
• 4.1　使用canvas元素 102
• 4.2　绘图 103
• 4.2.1　canvas绘图基础：CanvasRenderingContext2D 103
• 4.2.2　绘制几何图形 105
• 4.2.3　点线模式 107
• 4.2.4　绘制字符串 109
• 4.2.5　设置阴影 110
• 4.2.6　使用路径 111
• 4.2.7　绘制曲线 115
• 4.2.8　绘制位图 117
• 4.3　坐标变换 118
• 4.3.1　使用坐标变换 118
• 4.3.2　坐标变换与路径结合使用 119
• 4.3.3　使用矩阵变换 121
• 4.4　控制叠加风格 123
• 4.5　控制填充风格 124
• 4.5.1　线性渐变 124
• 4.5.2　径向渐变 126
• 4.5.3　位图填充 127
• 4.6　位图处理 128
• 4.6.1　位图裁剪 128
• 4.6.2　像素处理 129
• 4.7　输出位图 132
• 4.8　动画制作 133
• 4.8.1　基于定时器的动画 133
• 4.8.2　基于requestAnimationFrame的动画 135
• 4.9　本章小结 136
• 第5章　HTML 5的多媒体支持 137
• 5.1　使用audio和video元素 138
• 5.2　使用JavaScript脚本控制媒体播放 141
• 5.2.1　HTMLAudioElement与HTMLVideoElement支持的方法 141
• 5.2.2　HTMLAudioElement与HTMLVideoElement的属性 143
• 5.3　事件监听 144
• 5.3.1　事件 144
• 5.3.2　监听器 145
• 5.4　track元素 146
• 5.4.1　使用track元素添加字幕 146
• 5.4.2　WebVTT文件简介 147
• 5.4.3　字幕内容的标记 148
• 5.5　本章小结 149
• 第6章　级联样式单与CSS选择器 150
• 6.1　样式单概述 151
• 6.1.1　CSS概述 151
• 6.1.2　CSS的发展历史 152
• 6.2　CSS样式单的基本使用 152
• 6.2.1　引入外部样式文件 152
• 6.2.2　导入外部样式单 154
• 6.2.3　使用内部CSS样式 155
• 6.2.4　使用行内样式 156
• 6.3　CSS选择器 158
• 6.3.1　元素选择器 158
• 6.3.2　属性选择器 159
• 6.3.3　ID选择器 161
• 6.3.4　class选择器 162
• 6.3.5　包含选择器 163
• 6.3.6　子选择器 164
• 6.3.7　CSS 3新增的兄弟选择器 165
• 6.3.8　选择器组合 166
• 6.4　伪元素选择器 167
• 6.4.1　内容相关的属性 169
• 6.4.2　插入图像 170
• 6.4.3　只插入部分元素 171
• 6.4.4　配合quotes属性执行插入 171
• 6.4.5　配合counter-increment属性添加编号 172
• 6.4.6　使用自定义编号 173
• 6.4.7　添加多级编号 174
• 6.5　CSS 3新增的伪类选择器 176
• 6.5.1　结构性伪类选择器 176
• 6.5.2　UI元素状态伪类选择器 186
• 6.5.3　:target伪类选择器 193
• 6.5.4　:not伪类选择器 194
• 6.6　在脚本中修改显示样式 195
• 6.6.1　随机改变页面的背景色 195
• 6.6.2　动态增加立体效果 196
• 6.7　本章小结 197
• 第7章　字体与文本相关属性 198
• 7.1　字体相关属性 199
• 7.1.1　使用text-shadow添加阴影 201
• 7.1.2　添加多个阴影 202
• 7.1.3　使用font-size-adjust属性微调字体大小 203
• 7.2　CSS 3支持的颜色表示方法 205
• 7.3　文本相关属性 206
• 7.3.1　使用white-space控制空白的处理行为 208
• 7.3.2　文本自动换行：word-break 209
• 7.3.3　用word-warp控制长单词或URL地址换行 210
• 7.4　CSS 3新增的服务器字体 212
• 7.4.1　使用服务器字体 212
• 7.4.2　定义粗体、斜体字 213
• 7.4.3　优先使用客户端字体 214
• 7.5　本章小结 215
• 第8章　背景、边框和边距相关属性 216
• 8.1　盒模型简介 217
• 8.2　背景相关属性 217
• 8.2.1　背景图片固定 219
• 8.2.2　CSS 3新增的background-clip属性 220
• 8.2.3　CSS 3新增的background-origin属性 221
• 8.2.4　CSS 3新增的background-size属性 222
• 8.2.5　CSS 3为background-repeat新增的space和round 224
• 8.2.6　CSS 3新增的多背景图片 225
• 8.3　使用渐变背景 226
• 8.3.1　使用linear-gradient设置线性渐变 226
• 8.3.2　使用repeating-linear-gradient设置循环线性渐变 230
• 8.3.3　使用radial-gradient设置径向渐变 231
• 8.3.4　使用repeating-radial-gradient设置循环径向渐变 238
• 8.4　边框相关属性 239
• 8.4.1　CSS 3提供的渐变边框 241
• 8.4.2　CSS 3提供的圆角边框 242
• 8.4.3　CSS 3提供的图片边框 244
• 8.5　使用opacity控制透明度 246
• 8.6　padding和margin相关属性 247
• 8.6.1　内填充相关属性 247
• 8.6.2　外边距相关属性 248
• 8.7　本章小结 249
• 第9章　大小、定位、轮廓相关属性 250
• 9.1　width、height相关属性 251
• 9.1.1　CSS 3新增的box-sizing属性 252
• 9.1.2　CSS 3新增的resize属性 253
• 9.1.3　CSS 3新增的calc函数 254
• 9.2　定位相关属性 255
• 9.3　轮廓相关属性 257
• 9.4　用户界面和滤镜属性 258
• 9.4.1　appearance属性 259
• 9.4.2　使用filter属性应用滤镜 260
• 9.5　本章小结 263
• 第10章　盒模型与布局相关属性 264
• 10.1　盒模型和display属性 265
• 10.1.1　两种最基本的盒类型 265
• 10.1.2　none值和visibility属性 267
• 10.1.3　inline-block类型的盒模型 267
• 10.1.4　inline-table类型的盒模型 270
• 10.1.5　使用table类型的盒模型实现表格 271
• 10.1.6　list-item类型的盒模型 272
• 10.1.7　run-in类型的盒模型 273
• 10.2　对盒添加阴影 275
• 10.2.1　使用box-shadow属性 275
• 10.2.2　对表格及单元格添加阴影 277
• 10.3　布局相关属性 278
• 10.3.1　通过float属性实现多栏布局 279
• 10.3.2　使用clear属性实现换行 280
• 10.3.3　使用overflow设置滚动条 282
• 10.3.4　使用overflow-style控制滚动方式 283
• 10.3.5　使用clip属性控制裁剪 284
• 10.4　CSS 3新增的多栏布局 285
• 10.4.1　使用column-width指定栏宽度 286
• 10.4.2　使用column-gap和column-rule控制分栏间隔 287
• 10.4.3　使用column-span设置跨栏 288
• 10.5　使用弹性盒布局 289
• 10.5.1　使用flex类型的盒模型 290
• 10.5.2　通过flex-direction指定盒内元素的排列方向 291
• 10.5.3　使用flex-wrap控制换行 293
• 10.5.4　使用order控制元素显示顺序 294
• 10.5.5　使用flex属性控制子元素的缩放 295
• 10.5.6　使用align-items和ali

学习笔记

PHP+HTML+JavaScript+Css实现简单爬虫开发

开发一个爬虫，首先你要知道你的这个爬虫是要用来做什么的。我是要用来去不同网站找特定关键字的文章，并获取它的链接，以便我快速阅读。 按照个人习惯，我首先要写一个界面，理清下思路。 1、去不同网站。那么我们需要一个url输入框。 2、找特定关键字的文章。那么我们需要一个文章标题输入框。 3、获取文章链接。那么我们需要一个搜索结果的显示容器。 div class="jumbotron" id="mainJumbotron" div class="panel panel-default" div class="panel-heading"文章URL抓取/div div class="panel-body" div class="form-group" label for="article_title"文章标题/label input type="text" class="form-control" id="article_title" placeholder="文章标题" /div div class="for……

纯html+css+javascript实现楼层跳跃式的页面布局（实例代码）

实现效果演示： 实现代码及注释： !DOCTYPE htmlhtmlhead title楼层跳跃式的页面布局/title meta charset="utf-8" style type="text/css" *{ margin: 0; padding: 0; } body, html{ height: 100%; } ul{ list-style: none; height: 100%; } ul li{ height: 100%; } ol{ list-style: none; position: fixed; top:200px; left: 50px; } ol li{ width: 50px; height: 50px; border: 1px solid #000; text-align: center; line-height: 50px; margin-top: -1px; cursor: pointer; } /style/headbodyul li第一区域/li li第二区域/li li第三区域/li li第四区域/li/ulol li1/li li2/li li3/li li4/li/olscript type="text/javascript" src="myScroll.js"/scriptscript type="text/javascript" // 点击ol的li，屏幕滑动到对应的ul的li // 利用window.scrollTo()；缓动动画实现 var ul = document.getEl……

javascript+html5+css3自定义提示窗口

javascript自定义提示窗口效果图： 源码： 1.demo.jsp %@ page contentType="text/html;charset=UTF-8" language="java" %htmlhead title自定义提示窗口/title script type="text/javascript" src="js/myAlert.js"/script script type="text/javascript" function bodyOnload() { var myInput = document.getElementById("myInput"); myInput.style.border = "none"; myInput.style.backgroundColor = "rgba(223, 230, 223, 0.3)"; myInput.value = "请输入你的名字："; myInput.onfocus = function () { myInput.style.outline = "none"; myInput.value = ""; }; var image_div = document.createElement("div"); image_div.style.width = myInput.offsetHeight ; image_div.style.height = myInput.offsetHeight; image_div.style.float = "right"; image_div.style.cursor = "pointer"; image_div.onclick = function () { new……

javascript+html5+css3自定义弹出窗口效果

本文实例为大家分享了js自定义弹出窗口效果展示的具体代码，供大家参考，具体内容如下 效果图： 源码： 1.demo.jsp %@ page contentType="text/html;charset=UTF-8" language="java" %htmlhead title自定义弹出窗口/title script type="text/javascript" src="js/myLayer.js"/script style type="text/css" button{ width: 50px; height: 50px; border: 1px solid blue; background-color: blue; color: red; border-radius: 5px; -webkit-box-shadow: 2px 2px 2px gray; -moz-box-shadow: 2px 2px 2px gray ; box-shadow: 2px 2px 2px gray ; } button:hover{ background-color: green; cursor: pointer; } /style script type="text/javascript" function openWindow() { new MyLayer({ top:"10%", left:"10%", width:"80%", height:"80%", title:"我的标题", content:"操作成功" }).openLayer……

以上就是本次介绍的前端电子书的全部相关内容，希望我们整理的资源能够帮助到大家，感谢大家对码农之家的支持。

上一篇：学习JavaScript数据结构与算法

下一篇：Web前端开发精品课：HTML与CSS进阶教程