2019年1月31日星期四 1点
《零基础学HTML5+CSS3（全彩版）》开始全面学习
前提：
11月20日开始学Python，可能因为太累了，也可能遇到了瓶颈，进入了一个迷茫期，1月6日，开始学前端。学《案例学web前端开发（HTML+CSS3+JavaScript+手机响应式网页开发）》，看了几天的随书视频，觉得讲的太慢了。看书眼睛实在花的不行。1月7日开始学习腾讯课堂《Web前端开发HTML+CSS精英课堂》【渡一教育】主讲老师姬成，讲得不错。期间安装配置了很多的开发工具和UBUNTU系统、女儿订婚东北来客等占用了大量的时间。第一遍视频比较粗略，第二遍视频看得比较仔细。昨天早些时候，全部看完，包括淘宝网静态页面的视频也已经看完。不过，淘宝网静态页面自己动手只做了最上面的导航栏部分。可能是比较习惯了编程吧，对于这类说技术含量有一点点，但大部分都是低水平的重复繁琐的劳动性工作（比如小图标的搜集、各个盒模型的尺寸、很多的颜色值、字体字号、对齐方式等等等等），真的好烦，没有这种耐心。明明知道前端这就是主要工作，但是，还是做不来。
今天终于开始了新的课程：腾讯课堂《Web前端开发之JavaScript(Js)精英课堂》【渡一教育】姬成主讲，听了不到两节课，正赶上渡一教育的直播课《纯CSS旋转魔方》，里面用到了CSS3和JS的有关内容，觉得，还得看书系统的学上一遍再看视频的好，这样兴许知识点会记得扎实些，况且，编程语言之于我还是比较熟路的。
于是，就可这本书开始学习吧，夜深人静正当时──
第1章 HTML基础（貌似没啥新知识，也得过一遍，空杯很重要）
关于<body>的属性几乎都不推荐使用，但觉得设置页面的背景水印图片还是需要的，根据框架、样式、行为相分离的原则，还是在CSS中定义的好，比较好控制，像固定水印，<body>属性根本就不好用。
设置页面水印背景图片的CSS：
body{
background: #fff url(sy4.jpg) center 0 no-repeat; /*背景色、图片、居中、不重复*/
background-attachment: fixed; /*水印图片固定不动*/
background-size: 100% auto; /*水印图片宽度占满页面宽度*/
}
第2章 文本
标题：标题标记；标题的对齐方式
文字：文字的斜体、下划线、删除线；文字的上标与下标；特殊文字符号
段落：段落标记；段落的换行标记；段落的原格式标记
水平线：水平线标记；水平线标记的宽度
1、<h1 align=“对齐方式”>文本内容</h> 对齐方式：left、center、right
可用CSS代替：text-align:center;
2、<em>斜体内容一</em> <I>斜体内容二</I> <cite>斜体内容三</cite>
<u>带下划线的文字</u> <strike>带删除线的文字</strike>
可用CSS代替： font-style: italic; /*斜体字体*/
text-decoration:line-through;/*underline下划线，line-through贯穿线，overline上划线*/
3、<sup>上标</sup>
<sub>下标</sub>
4、 空格 <小于< >大于> "引号”
5、<pre>原格式标记排版</pre> 空格和回车等格式字符均起作用了、标签也可以正常输出。
6、<hr width=’80%’> 水平线及其宽度 二〇一九年一月三十一日星期四4时6分37秒上海
二〇一九年一月三十一日星期四10时18分29秒
第3章 图像与超链接
添加图像：图像的基本格式；添加图像
设置图像属性：图像大小与边框；图像间距与对齐方式；替换文本与提示文字
链接标记：文本链接；书签链接
图像的超链接：图像的超链接；图像热区链接
1、<img scr=”图像”title=”提示文字”alt=”替代文字”height=”高” width=”宽” >
2、<img scr=”图像” hspace=”水平间距” vspace=”垂直间距” align=”对齐方式” border=”框”>
3、<a href=’链接地址’ target=’窗口方式’>链接文字</a> target:_blank/_parent/_self/_top
4、书签链接：<a name=’demo’>设置锚点</a> <a href=’#demo’>跳转到锚点</a>
5、图像的超链接：<a href=”链接地址” target=”打开方式”><img src=”图像文件地址”></a>
6、图像的热区链接（映射图像）：可以将图像分成不同的区域进行链接设置。
<img src=”整幅图像地址” usemap=”定义映射图像名称”> 引用图像，并起了一个名称
<map name=”引用映射图像名称”>
<area shape=”热区形状” coords=”热区坐标” href=”链接地址”title=””target=”_blank”>
</map>
在一个图像中定位一个小区域的坐标是比较难的！用微软的画图软件可以方便地定位坐标！
shape=”tect”矩形：coords包含四个参数l,t,r,b:左上角到右下角对角线坐标。
shape=”circle”圆形：coords包含三个参数：圆心坐标和半径。
shape=”poly”多边形：取各顶点的坐标，最好用可视化软件设置。
举例：
<div id="mr-cont">
<img class="addr" src="img/big.png" usemap="mr-hotpoint" />
<map name="mr-hotpoint">
<area shape="rect" coords="45,126,143,203" href="pic.jpg" title="电脑精装" target="_blank"/>
<area shape="rect"coords="410,80,508,174" href="img/ad4.png"title="常用家电" target="_blank"/>
<area shape="rect" coords="30,250,130,350" href="img/ad1.png" title="手机数码" target="_blank"/>
<area shape="rect" coords="430,224,528,318" href="img/ad3.png" title="鲜货直达"target="_blank"/>
</map>
</di
第4章CSS3概述
CSS3概述：发展史；简单CSS示例
CSS3选择器：属性选择器；类和ID选择器；伪类和伪元素选择器；其他选择器
常用属性：文本相关属性；背景相关属性；列表相关属性
1、<link href=”css文件名”> 在HTML文件中引入CSS文件。
2、属性选择器：[att=val]{} 很强大：可以是标准属性，也可以是自定义属性，但语义化要好。
3、类和ID选择器，用的最多的选择器！
4、伪类选择器,注意出场顺序： :link未访问、:visited已访问、:hover鼠标悬停、:active鼠标单击
5、伪元素选择器：:before对象内部前端、:after对象内部尾端、first-line对象内第一行、first-letter对象内第一个字符
《Zen Coding: 一种快速编写HTML/CSS代码的方法》
6、其他选择器：E{}标记选择器、E F包含选择器、*通配符选择器、E>F子包含选择器、E+F相邻兄弟选择器、E-F通用兄弟标记选择器、E:lang(fr) :lang伪类选择器、E:first-child结构伪类选择器、E:focus用户操作伪类选择器。
7、文本相关属性：
font-famili:name1,[name2],[name3] 设置字体及备用字体
font-size:length 设置字体的尺寸，单位：px像素、em字母的高度、ex字母的高度、……
color:color具体的颜色，表示方式：颜色英文、十六进制、RGB值、HSL
text-align:left|center|right|justify 对齐方式：左、中、右、两端对齐。
font-weight:lighter|normal|bold|bolder或 100|200|300|400|500|600|700|800|900 设置字体粗细
font-style:normal|italic|oblique 设置字体倾斜程度
line-height:行高 设置行高（实现垂直居中对齐）
text-decoration:underline下划线|line-through贯穿线|overline上划线
text-indent:length文本缩进
text-overflow：clip|ellipsis 文本溢出时，是否显示省略号…
whilte-space:normal|nowrap 多行文本是否强制在同一行显示
vertical-align:top|middle|bottom 垂直对齐方式
8、背景相关属性：
background-color：color|transparent 设置背景颜色和透明度
background-image:url() 设置背景图片
background-repeat:no-repeat 背景图片的平铺方式
background-attachment:scroll|fixed 设置背景图片随页面内容滚动方式
background-position:length|percentage|top|center|bottom|left|right 设置图片的放置位置
9、列表相关属性：
list-style:列表的复合属性
list-style-image:将图像设为列表项标记
list-style-position:列表项的标志在文本以内或以外
list-style-type:设置列表项标志的类型
第5章 CSS3高级应用
框模型：外边距margin；内边距padding；边框border
布局常用属性：浮动；定位相关属性
动画与特效：变换transform；过渡transition；动画animation
1、 外边距margin: margin top|right|bottom|left; 设置外边距。
2、 内边距padding: padding top|right|bottom|left; 设置内边距
3、 边框border：border top|right|bottom|left; 设置边框
border-color:边框颜色
border-style:边框样式,dashed虚线、dotted点线、double双线、solid单线、groove3d凹槽、inset3D凹边、outset3D凸边、tidge菱形框、hidden隐藏边框、none没有边框
border-width:medium中边框|thin窄边框|thick宽边框|length指定框宽度
border-radius:半径值 指定圆角
4、 浮动：float:left|right|none
5、 定位：position:static|absolute|relative|fixed
6、 动画之变换transform：
旋转：transform: rotate(30deg);顺时针旋转30度
缩放：transform:scaleX(2);水平方向拉伸2倍
平移：transform:translateX(60px);在水平方向平移60px
倾斜：transform:skew(3deg,30deg);水平旋转3度，垂直旋转30度
模拟风车转动：transform: rotate(-3600deg) translate(-50px,-50px); 转十圈
transition: 10s all ease; 总用时10秒
7、动画之过渡transition:
参与过渡的属性：transition-property:all|none|<property list> all指所有的可以进行过渡的
过渡持续时间：transition-duration:<time>[,<time>]
延迟过渡时间：transition-delay: <time>[,<time>]
指定动画类型：transition-timing-function:linear线性过渡（匀速）、ease平滑过渡（减慢）、ease-in加速过渡、ease-out减速过渡、ease-in-out先加速再减速、cubic-bezier(x1,y1,x2,y2)贝塞尔曲线
8、动画：animation
定义关键帧：@keyframes name{<keyframes-blocks>}; name为动画名称，<keyframes-blocks>为不同时间段的样式规则：from{属性键值对列表}to{属性键值对列表}
例如：@-webkit-keyframes opacityAnim{
from{opacity:0;}
to{opacity:1;}
}
或：@-webkit-keyframes complexAnim{
0%{opacity:0;}
20%{opacity:1;}
50%{-webkit-transform:scale(0.8);}
80%{opacity:1;}
100%{opacity:0;}
}
定义动画属性：animation:复合属性。指定对象所应用的动画特效。
animation-name:name 动画名字
animation-duration:time+ 动画持续的时间
animation-timing-function: 动画的过渡类型
animation-delay:time+ 动画延迟时间
animation-iteration-count:number或infinite 动画的循环次数或无限循环
animation-direction：normal|alternate 动画循环方向：正向和反向
animation-play-state:running|paused 动画状态：运动和暂停
animation-fill-model:动画时间之外的状态：forwards动画结束、backwards动画开始、both
例如：.mr-in{
animation-name:lun;
animation-duration:10s;
animation-timing-function:linear;
animation-direction:normal;
animation-iteration-count:infinite;
}
还可以用一行来代替：.mr-in{
Animation:lun 10s linear infinite normal;
}
二〇一九年二月一日星期五1时55分38秒上海
二〇一九年二月一日星期五11时3分23秒
第6章 表格与<div>标记
简单表格：简单表格的制作；表头的设置
表格的高级应用：表格的样式；表格的合并；表格的分组
<div>标记：<div>标记的介绍；<div>标记的应用
<span>标记：<span>标记的介绍；<span>标记的应用
1、 表格标记<table>、行标记<tr>、单元标记<td>、还有<caption><th><col><colgroup><tffot><tbody>等
2、 表头标记：表头单元格标记<th>被表头标记<caption>包裹
3、 <tr>属性实例：<tr height=”36”bgcolor=”#DD2727” align=”center”>
4、 <table>属性实例：<table align=’center’ border=’1px’ cellpadding=’10%’>
5、 <td>引入图像：<td><img src=’引入图片地址’></td>
6、 表格的合并：<td colspan=’跨的列数’ rowspan=’跨的行数’>
7、 表格的分组：表格可以使用<colgroup>标记对列进行样式控制，<col>具体的列控制。
例如：<colgroup>
<col style="background-color: #7ef5ff">
<col style="background-color: #B8E0D2">
<col style="background-color: #D6EADF">
<col style="background-color: #EAC4D5">
</colgroup>
8、<div>标记：division块级标记
9、<span>标记：是行内标记，前后不会换行，没有结构意义，纯粹是应用样式。可以插入class、id等语法内容的容器。当其他行内元素都不合适时，请使用<span>标记。
第7章 列表
列表的标记；无序列表；有序列表；列表的嵌套
1、列表的标记：<ul>无序列表<ol>有序列表<dir>目录列表<dl>定义列表<menu>菜单列表<dt><dd>定义列表标记<li>列表项标记。
2、关于无序列表项前去除小圆点，<ul type=”none”>即可，无需在CSS中list-style-type:none;
3、定义列表：<dl>定义列表:一般两层结构；<dt>名词部分；<dd>解释部分。应用于项目与内容的结合。
第8章 表单
表单概述：概述；表单标记<form>
输入标记：文本框；单选框和复选框；按钮；文件域和图像域
文本域和列表：文本域；列表/菜单
1、表单的基本属性：<form active=”” name=”” method=”” enctype=”” target=””>…</form>
active表单的处理程序：表单收集到的资料将要提交的程序地址。name设置表单名称。
method=get|post处理程序获得信息的方式。target=_blank目标窗口的打开方式
enctype=信息提交的编码方式：text/plain|application/x-www-form-urlencoded|multipart/form-data
2、单行文本框：<input type=’text’name=’’size=’’maxlength=’’value=’’ placeholder=’username’> placeholder预期值的简短提示信息
3、密码输入框：<input type=’password’ name=’’size=’’maxlength=’’value=’’>
4、<label>标签：可以实现绑定元素。
5、单选按钮：<input type=’radio’ name=’单选按钮名称’ value=’选中后取值’checked>
6、复选框：<input type=’checkbox’ name=’名称’ value=’复选框的值’checked>
7、普通按钮：<input type=’button’ value=’按钮的取值’name=‘按钮名’ onclick=“处理程序”>配合
8、提交按钮：<input type=’submit’ value=’按钮的取值’name=’按钮名’>
9、重置按钮：<input type=’reset’ value=’按钮的取值’name=’按钮名’>
10、图像域：<input type=‘image’src=’’name=’’>
11、文件域：<input type=‘file’accept=’’name=’’> accept可接受的文件类别，有26种，不可自定义。
12、文本域：<textarea name=“文本域名称”value=“默认值”rows=“行数”cols=“列数”></textarea>
13、菜单列表类控件：<select name=””size=’’multiple=’’value=’’selected></select>
<option value=’’selected=’selected’></option>
第9章 多媒体
HTML5多媒体的简述：HTML4中多媒体的应用；HTML5页面中的多媒体
多媒体元素基本属性
多媒体元素常用方法：媒体播放时的方法；canPlayType(type)方法
多媒体元素重要事件：事件处理方式；事件介绍；事件示例
1、 多媒体：音效、音乐、视频和动画。
2、 对HTML5的video元素、audio元素支持的浏览器：Chrome、Fiefox、Opera和Safari。
3、 音频的播放：<audio src=”音频文件”autoplay自动播放 controls播放控制条 loop循环播放 preload=’auto|meta|none’></audio>
4、 视频的播放：<video width=’640’height=’360’src=’music.mp3’></video>
常用属性：autoplay自动播放；controls播放控制条；loop循环播放；preload=”none|metadata|auto”不预加载|只预加载元数据|预加载全部；poster=‘pic.jpg’视频不可用时的替代图片；error返回出错代码（js用）；networkState返回网络状态（js用）；……还有很多，基本上都是JS能用的属性。
常用事件：
loadstart客户端开始请求数据；progress客户端正在请求数据（缓冲）；play播放时；pause暂停；
ended当前播放结束时；timeupdate播放时间发生改变时；canplaythrough歌曲载入完全；canplay缓冲至可播放
5、source指定多个播放格式与编码方式：
例1、<source src="song.ogg" type="audio/ogg">
例2、<source src="song.mp3" type="audio/mpeg">
第10章 HTML5新特性
1、 HTML5的新特性：兼容性：兼容以前的版本。实用性和用户优先：只封装了切实有用的功能。化繁为简：以浏览器原生能力替代复杂的JavaScript代码；新DOCTYPE;新字符集声明；简单而强大的API；错误恢复机制。无插件规范。
2、 HTML5和HTML4的区别：语法的变化：规范向现实靠拢。标记方法：内容类型没有变化；要进行DOCTYPE声明；字符编码的设置。
3、 可以省略结束标记的元素：li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td和th元素。
4、 可以省略整个标记的元素（开始标记都不用写）：html,head,body,colgroup和tbody。
5、 不允许写结束标记的元素：area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr。
6、 允许省略属性值的属性（值为真的属性直接写属性名本身）：checked,readonly,disabled,selected,defer,ismap,nohref,noshade,nowrap,multiple,noresize。
二〇一九年二月二日星期六8时40分7秒
7、<base>为所有链接规定默认地址或默认路径：统一域名，集中权重；节约带宽；缩减url；清除标记；方便数据迁移；更轻松重定向所有相对url；有助于脱机查看网页。
<base target="_blank" href="http://www.w3school.com.cn/i/" />
注意：webstorm的除了项目目录以外的目录引用都引用不了，浪费了几个小时了都没搞明白！！！！
解决：File->Settings…->Directores 在最右侧 +Add Content Root栏目可以添加或删除目录，但Run **.html将不可用，而变成了Show in Explorer然后弹出窗口选择要执行的html文件！！！
8、HTML5新增的元素：
结构相关：
①、<section></section>：定义文档或应用程序的一个区段。比如章节、页眉、页脚等。标示文档结构。
与<div>差不多，可能为了语义化更好一些吧。最好就是包裹标题+内容的段落。
②、<article></article>标示文档中一块独立的内容。
③、<header></header>一个内容区块或整个页面的标题。
④、<nav><nav>表示导航链接的部分。把导航栏<ul><li><a></li>…</>放到<nav>中比之<div>语义化更好。
⑤、<footer></footer>表示一个内容的注脚：创作者的姓名、创作日期、创作者的联系信息等。
块级的语义元素：
⑥、<aside></aside>表示article内容之外的且与其相关的内容。
⑦、<figure></figure>表示一段独立的流内容，一般表示主题内容的一个独立单元。用<figcaption>加标题。
⑧、<dialog></dialog>标记定义对话，比如交谈。
行内的语义元素：
⑨、<mark></mark>在搜索结果中向用户高亮显示搜索关键字。
⑩、<time></time>表示日期和时间或两者<time itemprop="date" datetime="2016-08-12">下一周</time>
⑪、<progress max value position labels></progress>表示运行中的进程。可以显示JS中耗费时间的函数的进程。
⑫、<meter></meter>表示度量衡。仅用于已知的最大值和最小值的度量。
<meter min="0" max="100" low="30" height="80" value="85"></meter>完成进度柱状图
新增的嵌入多媒体与交互性元素：
⑬、<details></details>细节信息。配合<summary>提供的标题或图例，单击‘详细信息’就会显示细节。
⑭、<datagrid></datagrid>表示可选数据列表，通常用于显示树列表。
⑮、<menu></menu>表示菜单列表。通常用于列出表单控件。
⑯、<command>命令按钮，如单选按钮、复选框和普通按钮。
⑱、<input>新增类型：email、url、number、range、search、DatePichers日期新类型：date/month/week/time/datetime/datetime-local
新增的属性（略）
二〇一九年二月二日星期六8时17分10秒上海春节前两天
第11章 JavaScript基础
1、 JavaScript概述、使用和引用
2、 JavaScript语言基础：数据类型、运算符、流程控制（if、switch、for、while、do…while、continue、break）。示例：for(var i=0;i<=10;i++){}。
3、 Window对象的属性：
document对话框中显示的当前文档；frames当前对话框中所有frame对象的集合；
location当前文档的URL；name对话框的名字；
status状态栏中的当前信息；defaultstatus状态栏中的当前信息；
top最顶层浏览器对话框；parent包含当前对话框的父对话框；
opener打开当前对话框的父对话框；closed当前对话框是否关闭的逻辑值；
self表示当前对话框；screen表示屏幕尺寸、颜色深度等信息；
navigator浏览器对象，用于获得与浏览器相关的信息。
4、Window对象的方法：
alert()弹出一个警告对话框；confirm()在确认对话框中显示指定的字符串；prompt()弹出提示对话框；
open()打开新浏览器对话框并且显示由URL或名字引用的文档，并且设置对话框的属性；
close()关闭被引用的对话框；focus()将被用的对话框放在所有打开对话框的前面；
blur()将被用的对话框放在所有打开对话框的后面；scrollTo(x,y)把对话框滚动到指定的坐标；
scrollBy(offsetx,offsety)按照指定的位移量滚动对话框；setinterval(interval)指定周期性执行代码；
setTimeout(timer)在指定的毫秒数过后，对传递的表达式求值。
5、常用实例：window.aler(‘字符串’)； window.document.write(‘字符串’)；
6、DOM文档对象模型，是JavaScript操作网页的接口。
7、通过document对象可以访问HTML文档中包含的任何HTML标记，并，可以动态地改变HTML标记中的内容！
例如：表单、图像、表格和超链接等。
8、document属性
document.domain; 当前文档的域名
document.location; 当前文档的相关信息
document.lastModifiled 文档最后的修改时间
document.title;文档（页面）标题；document.URL;页面URL。
还有：
当链接获取焦点时显示的颜色：[color=]document.alinkColor[=setcolor] ；color是字符串变量
未单击链接的颜色：linkColor;单击过链接的颜色：vlinkColor。
9、document方法
document.open()创建文档；document.close()关闭文档；document.write()写入文档
查找文档元素：getElementById();getElementByName();
10、示例：
document.body.style.backgroundColor=”red”； 设置文档颜色
documeng.body.style.fontSize=’20px’; 设置文字大小
document.body.style.backgroundImage=’url(img/5.jpg)’;设置背景图片
11、JavaScript事件处理
onclick鼠标单击事件，应用于：button,checkbox,image,link,radio,reset,submit
onmousedown鼠标按下事件；onmouseup鼠标松开事件；
onmouseover鼠标移入事件；onmousemove鼠标移出事件；
onmousemove鼠标移动事件。
键盘事件：onkeypress,onkeydown,onkeyup键码值：A(a)65～Z(z)90
var b=event.button; 鼠标单击事件:b=2鼠标右键，b=0鼠标左键
event.altKey:Alt键按下事件；event.ctrlKey:Ctrl键按下事件；event.shiftKey:Shift键按下事件。
页面事件：是在页面加载或改变浏览器大小、位置以及对页面中的滚动条进行操作时，所触发的事件处理程序。
二〇一九年二月三日星期日13时12分
回顾窗口和文档的属性和方法：
document.querySelector(CSS selectors) 返回匹配选择器的第一个元素，选择器可以是标签,id, 类, 类型, 属性, 属性值等。如var canvas = document.querySelector('canvas'); ‘Canvas’为标签，还有#.[]等。
canvas.style.backgroundColor = 'transparent'; 指定画布为透明色。
<script
type="text/javascript">
var img = new Image();
var canvas =
document.querySelector('canvas');
// canvas.style.backgroundColor =
'transparent';
canvas.style.position = 'absolute';
var imgs = ['images/p_0.jpg',
'images/p_1.jpg'];
var num =
Math.floor(Math.random() * 2);
img.src = imgs[num];
img.addEventListener('load', function
(e) {
var ctx;
var w = img.width,
h = img.height; 尾
var offsetX =
canvas.offsetLeft, 接尾
offsetY = canvas.offsetTop;
var mousedown = false;
//刮刮卡图层背景
function layer(ctx) {
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, w, h);
}
//鼠标放下
function eventDown(e) {
e.preventDefault();
mousedown = true; 再尾
} 接再尾
//鼠标抬起
function eventUp(e) {
e.preventDefault();
mousedown = false;
}
//鼠标移动
function eventMove(e) {
e.preventDefault();
if (mousedown) {
if (e.changedTouches) {
e =
e.changedTouches[e.changedTouches.length - 1];
}
var x = (e.clientX
+ document.body.scrollLeft || e.pageX) - offsetX || 0,
y = (e.clientY + document.body.scrollTop
|| e.pageY) - offsetY || 0;
with (ctx) {
beginPath()
arc(x, y, 10, 0,
Math.PI * 2);
fill();
}
}
}
canvas.width = w;
canvas.height = h;
canvas.style.backgroundImage =
'url(' + img.src + ')';
ctx = canvas.getContext('2d');
ctx.fillStyle = 'transparent';
ctx.fillRect(0, 0, w, h);
layer(ctx);
ctx.globalCompositeOperation =
'destination-out';
canvas.addEventListener('touchstart', eventDown);
canvas.addEventListener('touchend', eventUp);
canvas.addEventListener('touchmove', eventMove);
canvas.addEventListener('mousedown', eventDown);
canvas.addEventListener('mouseup', eventUp);
canvas.addEventListener('mousemove', eventMove);
});
</script>
第12章 绘制图形
画布Canvas:Canvas概述；使用Canvas绘制矩形
绘制基本图形：直线；曲线；圆形
绘制变形图形：平移；缩放；旋转
绘制文字：轮廓文字；填充文字；文字相关属性
1、 画布标签：<canvas
width=’’height=’’id=’’></canvas>
2、 绘制矩形：
创建画布：<canvas id=”cav”></canvas>
获取画布：var can=document.getElementById(‘cav’)
获取图形上下文：var cav=can.getContext(‘2d’)
开始绘制：cav.beginPath()
还要指定线条样式strokeStyle和填充样式fillStyle以及线条粗细lineWidth
绘制矩形：rect(x,y,w,h)
实例：
var cav=document.getElementById('cav').getContext('2d');
/*获取画布和上下文*/
cav.beginPath();
/*开始绘制（准备）*/
cav.strokeStyle="#ff0"; /*指定边框颜色*/
cav.lineWidth=4;
/*指定边框宽度*/
cav.rect(100,70,330,330); /*指定坐标*/
cav.stroke();
/*执行绘制----stroke()画框（轮廓）、fill()填充*/
3、绘制直线：开始绘制beginPath();起点moveTo();终点lineTo();封闭路径closePath();绘制直线stroke()
<body onload="load()">：页面加载之后立即执行一段 JavaScript代码
<canvas id="cav" height="547"
width="1000" onload="hug()"></canvas> 元素画布加载后执行hug()代码。
实例：
var ctx = document.getElementById("cav");
var cav = ctx.getContext("2d");
cav.beginPath();
cav.fillStyle = ‘#f00’;
cav.moveTo(100,100);//moveTo方法绘制起点(x/n,y/n)
cav.lineTo(200,200); //lineTo方法绘制从上一个顶点到((x+50)/n,y/n)顶点的路径
cav.closePath();//将终点与起点连接已形成闭合路径
cav.fill();//绘制填充图形
cav.strokestyle=color 边框加颜色
cav.lineWidth=1.0
指定线的宽度
cav.lineCap=butt|round|square 线端样式
cav.lineJoin=round圆角|bevel斜角|miter尖角
4、绘制曲线：贝赛尔曲线有二次方和三次方的形式，常用于绘制复杂而有规律的形状。
三次方曲线：bezierCurveTo(cp1x,xp1y,cp2x,cp2y,x,y)
二次方方法：quadraticCurveTo(cp1x,xp1y,x,y)
5、绘制圆形：arc（x,y,radius,startAngle,endAngle,anticlockwise）
anticlockwise顺时针为true
颜色值：raba(255,255,255,0.5) 最后一项为透明度！
触发定时器：onClick="setInterval(drew,1000)
setTimeout()用于在指定的毫秒数后调用函数或计算表达式。可以配合循环函数设定定时的次数。
setInterval()在播放动画的时，每隔一定时间就调用函数，方法或对象。相当于setTimeout的无限循环。
6、绘图的平移效果：translate(x,y) xy为平移的单位数，非坐标参数！
实例：
var
cav=document.getElementById("cav").getContext("2d");
function
go(){
cav.clearRect(50,400,150,150);//清空出一块矩形
var img
=new Image();
img.src="img/car.png";//图形路径
//绘制img图形，图形起点坐标为（50,500），宽高都为50像素
cav.drawImage(img,50,400,150,150);
cav.translate(100,0);//画布向右平移10像素
}
7、缩放效果：scale(x,y) xy为缩放倍数
实例：
var ctx = document.getElementById("cav")
var cav = ctx.getContext("2d");
cav.translate(ctx.width / 2, ctx.height / 2); //中心平移至画布中心
function big() {
cav.clearRect(-25,
-25, 50, 50); //清除一块矩形
var img =
new Image();
img.src =
"img/flower.png";//绘制图像的路径
img.onload
= function () {
cav.drawImage(img,
-25, -25, 50, 50); //图像的起点坐标为（-25，-25），宽高都为50像素
}
cav.scale(1.05,
1.05);//横向和纵向都放大1.05倍
8、旋转效果：rotate(angle) angle旋转的角度，1代表约60度。Math.PI =
3.14 = 180°
例如：cav.rotate(Math.PI/6); 顺时针旋转30°
9、绘制轮廓文字：strokeText(text,x,y,maxWidth) xy是坐标
实例：
var txt = document.getElementById("txt");
var cav =
document.getElementById("cav").getContext("2d");
var font = ['宋体', '楷体', '华文中魏', '华文行楷', '方正书体', '方正姚体'];//字体
var style = ['#f00', '#ff0', '#f0f', 'rgb(132,50,247)',
'rgb(34,236,182)', 'rgb(147,239,115)']//文字颜色
function draw() {
cav.clearRect(0,
0, 600, 800);//将上一次绘制的文字清除
var i =
Math.round(Math.random() * 6);//生成一个随机数，实现随机字体和文字颜色
cav.beginPath();
cav.font =
"80px " + font[i];
cav.strokeStyle
= style[i];
cav.strokeText(txt.value,
200, 100);//绘制轮廓文字
cav.stroke();
}
10、绘制填充文字：fillText(text,x,y,[maxWidth]);
实例：
cav.save();
//保存当前绘制状态
cav.beginPath();
//开始绘制
cav.translate(270,
270); //将会至圆心移至画布中心
cav.rotate(temp
* i); //每个字的旋转角度
cav.fillText(text[i],
115, 115); //逐个绘制，绘制起点为115，11，5
cav.fill();
cav.restore();
//恢复保存状态
11、文字的相关属性：
cav.font
= "100px 黑体";
//字体和字号
cav.textAlign
= 'start'; //文本水平对齐方式 start|end|left|right|center
cav.textBaseline
= 'middle'; //文本垂直方向，基线位置 top|hanging|middle|alphabetic|ideographic|bottom
二〇一九年二月四日星期一4时10分4秒
二〇一九年二月七日星期四16时9分
第13章 文件与拖放
选择文件：通过file对象选择文件；使用Blob接口获取文件的类型与大小
读取文件：FileReader接口的方法及事件；使用readAsDataURL方法预览图片；使用readAsText方法读取文本文件
拖放文件：拖放页面元素；DataTransfer对象的属性与方法；使用effectAllowed和dropEffect属性设置拖放效果
1、 获取文件名称：filename=document.getElementById("file").files[i]
注：file为录入框元素，files[i]为录入框输入的文件名列表的第i个文件名。
2、 confirm()：弹出确认窗口，返回true或false逻辑值用于判断的分支。
3、 使用Blob接口获取文件的类型和大小。file.size文件大小、file.type文件类型
/image\/\w+/.test(file.type)是匹配file.type是否为"image/xxx"格式字符串
实例：var file = document.getElementById("file").files[0];
if ((file.size > 22250)
||(!/image\/\w+/.test(file.type))) { //判断并显示图片大小和格式
alert("当前文件大小为" + file.size + '\n'+"当前文件格式为" + file.type + "请重新选择文件")
} else {
alert("当前文件长度为" + file.size + '\n'+"类型为" + file.type + "符合上传条件") }
4、 Filereader读取文件方法abort/readAsBinaryString/readAsDataURL/readAsText
读取文件的事件：onabort中断、onload完成、onerror出错、onloadend完成、onloadstart开始读、onprogress读取中
实例：var file = document.getElementById("file").files[0];//检查是否为图像文件
if(!/image\/\w+/.test(file.type)){return
false；}
var
reader = new FileReader(); //创建一个读取文件对象（同时获取文件路径this.result）
reader.readAsDataURL(file); //将文件以Data URL形式进行读入页面
reader.onload = function(e) {
//假如能够完成读入
var result=document.getElementById("result"); //用于获取存放预览图片的DIV
result.innerHTML = '<img
src="'+this.result+'" alt=""/>'} //在DIV上添加了一个<img>标签在页面上显示文件
读取文本文件：
var result=document.getElementById("result"); //用于获取存放文本的文本域<textarea id='result'>
result.innerHTML=this.result; //在页面上显示读入文本
5、拖放文件
function init() {
var source
= document.getElementById("dragme");
var dest1 =
document.getElementById("text1");
// (1) 拖放开始
source.addEventListener("dragstart", function (ev)
{
var dt
= ev.dataTransfer;// 追加数据
dt.effectAllowed
= 'all';
//(2) 拖动元素为dt.setData("text/plain",
this.id);
dt.setData("text/plain",
"哟吼，我进来了");
}, false);
// (3)
drop:被拖放
dest1.addEventListener("drop",
function (ev) {
var dt
= ev.dataTransfer;// 从DataTransfer对象那里取得数据
var text =
dt.getData("text/plain");
dest1.textContent
+= text;
}, false);
// (4)
dragend：拖放结束
source.addEventListener("dragend",
function (ev) {
source.style.position="absolute";
source.style.top=event.clientY-75+'px';
source.style.left=event.clientX-75+'px';
ev.preventDefault();//不执行默认处理（拒绝被拖放）
}, false);
}
6、DataTransfer对象的属性和方法
直播课照片墙3D旋转：
radial-dradient(circle at center center,颜色 颜色)径向渐变
transform -style:preserver-3d
setInterVal()设置定时器
二〇一九年二月七日星期四21时20分
第3篇 高级应用
第14章 离线Web应用程序
介绍：离线WEB应用；应用缓存技术
创建离线应用：缓存清单；applicationCache对象；applicationCache对象的应用
1、判断浏览器是否支持缓存技术：if(!!window.applicationCache){alert("当前浏览器支持应用缓存技术")}
2、缓存清单cache.manifest:CACHE NETWORK FallBack
3、applicationCache.onUpdateReady=function(){alert('本地缓存已被更新，可刷新页面获取最新版。')；}
applicationCache.swapCache(); 立即进行本地缓存更新。
4、applicationCache事件checking检查,noupdate,downloading下载,progress进度,updateready,cached缓存完毕,error
实例：function drow() {var
msg=document.getElementById("mr");
applicationCache.addEventListener("checking",function(){mr.innerHTML+="checking<br/>";},true)}
第15章 使用Web Worker处理线程
WebWorker概述：创建和使用Worker；Worker对象处理线程
线程中可用的对象和方法
多个JavaScript文件的加载与执行
线程嵌套：单层嵌套；嵌套交互数据
1、创建后台线程：var worker=new Worker("worker.js") 把后台线程要执行的代码作为参数创建Worker对象。
后台线程是不能访问页面或窗口对象的。但，可通过worker.onmessage=function(event){处理消息};接收消息。
也可发送消息给后台线程：worker.postMessage(message);发送消息。
2、Worker对象处理线程。
Worker中加载Javascript文件的方法：importScripts("mr.js","mrsoft.js");
3、线程嵌套
第16章 Web服务器通信
WebSocket通信：WebSoket API介绍；HTTP通信和WebSoket通信比较
跨文档信息传输：使用postMessage API;跨文档消息传输流程
2/8/2019 3:41:16 AM
二〇一九年二月八日星期五14时7分
1、WebSocketAPI是下一代客户端与服务器的异步通信方法。不限于Ajax（或XHR）方式通信。
var socket = new WebSocket('ws://localhost:8080'); //创建一个Socket实例
socket.onopen = funcyion(event) { //打开Socket
socket.send('I am the client and I\'m
listening!'); //发送一个初始化消息
socket.onmessage = function(event){ //监听消息
console.log('Client
received a message',event);}；
socket.onclose = function(event){ //监听Socket的关闭
console.log('Client
notified socket has closed',event);};
socket.close()}; //关闭Socket
2、 HTTP通信：客户端发送请求给服务器端，服务器端返回响应给客户端，通信一次就停止。
3、跨文档消息传送Messaging API,这是Web Worker和Web Sockets都使用的共同的通信方法。
接收从其他窗口发过来的消息：window.addEventListener("message",function(){},false);
向其他窗口发送消息：otherWindow.postMessage(message,targetOrigin);
4、在Apache服务器下创建虚拟主机。中间可能会遇到Windows的msvcr110.dll丢失需要重新安装的尴尬。
二〇一九年二月八日星期五18时0分
第17章 本地存储数据
初识WebStorage:WebStorage概述；WebStorage中API的使用
本地数据库：WebSQL数据库概述；Web SQL
Database中API的使用
1、 sessionStorage:把数据保存在session对象中，从进入网站到关闭浏览器这段时间。
2、 localStorage:将数据保存在客户端本地的硬件中，即使浏览器被关闭了，数据还存在，下次打开可继续使用。
3、 设置和获取数据：sessionStorage.setItem("key","value");
var val=sessionStorage.getItem("key");
或：sessionStorage.key="value"; var val=sessionStorage.key; localStorage亦然！
4、数据的删除与清空：删除数据：var val=sessionStorage.removeItem(key);清空列表：sessionStorage.clear();
获取键值对的个数：var val = sessionStorage.length;
5、WebSQL是SQLLite的文件类型可以作为本地数据库。
6、打开和创建数据库，启动一个数据库“事务”，在事务回调时创建数据表。例如：
ver db;
if(window.openDatabase){
db=openDatabase('mydb','1.0','My
fiest database',2*1024*1024); //打开或创建数据库
db.transaction(function(tx)){ //启动一个事务
tx.executeSql('CREATE
TABLE tweets(id,data,tweet)');};} //创建数据表
7、插入和查询数据：transabtion.excuteSql(sqlquery,[],dataHandler,errorHandler);共有四个参数：
第一个参数为SQL语句；第二个参数为参数数组，如：
transaction.executeSql("UPDATE user
set age=? where name=?;",[age,name]);
第三个参数SQL执行成功时的回调函数：function dataHandler(transaction,results){……};
第四个参数SQL执行出错时的回调函数：function errorHandler(transaction,errmsg){……};
第18章 响应式网页设计
概述：响应式网页设计的概念；优缺点；技术原理
视口：视口；视口常用属性；媒体检查
像素和屏幕分辨率：像素和屏幕分辨率；设备像素和CSS像素
响应式网页的布局设计：常用布局类型；布局的实现方式；响应式布局的设计与实现
1、 响应式网页设计优点：对用户友好；后台数据库统一；方便维护。缺点：增加加载时间；开发周期比较长。
2、 技术原理：<meta>标记；使用媒体查询（媒介查询）定义手持方向和设备分辨率等；使用第三方框架，如Bootstrap。
3、 图像像素、屏幕分辨率、设备像素、CSS像素（逻辑像素）
4、 视口与窗口对应，视口viewport是与设备相关的一个矩形区域。可见视口与布局视口的关系如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
视口属性就是移动浏览器用来显示网页的区域：width、height等
5、媒体查询：可根据设备显示器的特性（视口宽度、屏幕比例和设备方向等）设定CSS样式。
比如：<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no"/>
使用@media关键字，编写CSS媒体查询代码：
@media screen and (max-width:720px) and (min-width:320px){body{background-color:red;}}
当屏幕宽在320-720px时
6、响应式布局：让内容适应性展示。布局类型：单列、均分多列、不均分多列。实现方式：单一固定布局、响应式固定、响应式弹性。设计实现：桌面PC端优先；移动端优先----模块内容不变、模块内容改变。
第19章 响应式组件
响应式导航菜单：CSS响应式菜单；JS响应式菜单
响应式表格：隐藏表格中的列；滚动表格中的列；转换表格中的列
响应式图片：使用<picture>标记；使用CSS图片
响应式视频：使用<meta>标记；使用HTML5手机播放器
1、响应式图片<picture>标记：不仅可以适配响应式屏幕大小，还可以根据屏幕尺寸调整图片的宽高。
<picture> <source srcset="pic.jpg"
media="(min-width:800px)"> <!--假如屏幕宽度大于800px显示pic.jpg-->
<img srcset="fy.jpg"> </picture> <!--否则将显示fy.jpg-->
2、使用CSS中的关键字media进行媒体查询做响应式图片：@media screen and (min-width:800px){CSS样式代码}
3、响应式视频<meta>标记：<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no"/> viewport视口属性可以规定网页设计宽度与实际屏幕的宽度的大小关系。这四个参数分别代表视口宽度、视口高度、初始缩放比例、用户是否可以缩放。引入视频：<iframe src="test.mp4"
frameborder="0" allowfullscreen></iframe>
4、使用HTML5手机播放器：第三方组件工具：这里用willesPlay举例。
5、CSS3响应式导航菜单：本质上仍旧是使用CSS媒体查询中的media关键字。
6、JS响应式菜单：如同HTML5手机播放器一样，同样使用第三方组件:responsive-menu。
7、响应式表格：隐藏表格中不重要的列，达到适配效果,通过media检测，设置display：none；滚动表格中的列，可把表格头从横向排列变成纵向排列；也可转换表格中的列，让表格变成列表。
二〇一九年二月八日星期五23时18分 第4篇项目实战第20章51购商城（略）