《零基礎學HTML5+CSS3(全彩版)》讀書筆記

阿新 • • 發佈：2019-02-09

動畫特效 bootstra 詳細 onkeydown handler 第8章魔方網站裝配

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+‘" />‘} //在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購商城（略）

《零基礎學HTML5+CSS3(全彩版)》讀書筆記

動畫特效 bootstra 詳細 onkeydown handler 第8章魔方網站裝配 2019年1月31日星期四 1點《零基礎學HTML5+CSS3（全彩版）》開始全面學習前提： 11月20日開始學Python，可能因為太累了，也可能遇到了瓶頸，進入了一個迷

《零基礎學HTML5+CSS3(全彩版)》讀書筆記

《零基礎學HTML5+CSS3(全彩版)》讀書筆記

零基礎學 HTML+CSS3 全彩版明日科技編著

關於零基礎學HTML5

零基礎學編程：零基礎學HTML+CSS (第3版) 完整pdf掃描版

《零基礎學HTML+CSS (第三版)》張熠編著.pdf

零基礎學java的最佳學習方法和最全java知識大綱(含100G學習資料)

#零基礎學java的最佳學習方法和最全java知識大綱

Sql基礎(零基礎學資料庫_SqlServer版)

小程式自學筆記（零基礎學小程式彙總）---史上最全的微信小程式學習筆記，筆記看我你也就學會小程式了

零基礎學FPGA（十二）一步一腳印之基於FIFO的串列埠傳送機設計全流程及常見錯誤詳解

零基礎學Java編程語言就要對癥下藥

零基礎學python-3.7 還有一個程序 python讀寫文本

零基礎學python-4.2 其它內建類型

零基礎學python-2.7 列表與元組

零基礎學並查集算法

【視頻】零基礎學Android開發：藍牙聊天室APP（一）

零基礎學python-7.6 字符串格式化表達式

零基礎學python-3.3 標識符

零基礎學python-2.17 文件、open()、file()

零基礎學python-1.5 第一個程序

《零基礎學HTML5+CSS3(全彩版)》讀書筆記

相關推薦