《零基础学HTML5+CSS3(全彩版)》读书笔记

时间:2021-01-20 15:17:38

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、&nbsp;空格   &lt;小于<   &gt;大于>   &quot;引号”

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购商城(略)