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

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>

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>

在一个图像中定位一个小区域的坐标是比较难的！用微软的画图软件可以方便地定位坐标！

shape=”tect”矩形：coords包含四个参数l,t,r,b:左上角到右下角对角线坐标。

shape=”circle”圆形：coords包含三个参数：圆心坐标和半径。

shape=”poly”多边形：取各顶点的坐标，最好用可视化软件设置。

举例：

</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 设置背景图片随页面内容滚动方式

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>

</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>

第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；有助于脱机查看网页。

注意：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'; 指定画布为透明色。

第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

二〇一九年二月四日星期一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是与设备相关的一个矩形区域。可见视口与布局视口的关系如下：

视口属性就是移动浏览器用来显示网页的区域：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>标记：不仅可以适配响应式屏幕大小，还可以根据屏幕尺寸调整图片的宽高。

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购商城（略）

posted @ 2019-02-08 23:54 逍遥游老于阅读(3459) 评论(0) 编辑收藏举报

刷新页面返回顶部

逍遥游老于

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

公告