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

時間 2019-11-17

標籤零基礎 html5+css3 html css 讀書筆記欄目 HTML5 简体版

原文原文鏈接

2019年1月31日星期四 1點javascript

《零基礎學HTML5+CSS3（全綵版）》開始全面學習css

前提：html

11月20日開始學Python，可能由於太累了，也可能遇到了瓶頸，進入了一個迷茫期，1月6日，開始學前端。學《案例學web前端開發（HTML+CSS3+JavaScript+手機響應式網頁開發）》，看了幾天的隨書視頻，以爲講的太慢了。看書眼睛實在花的不行。1月7日開始學習騰訊課堂《Web前端開發HTML+CSS精英課堂》【渡一教育】主講老師姬成，講得不錯。期間安裝配置了不少的開發工具和UBUNTU系統、女兒訂婚東北來客等佔用了大量的時間。第一遍視頻比較粗略，第二遍視頻看得比較仔細。昨天早些時候，所有看完，包括淘寶網靜態頁面的視頻也已經看完。不過，淘寶網靜態頁面本身動手只作了最上面的導航欄部分。多是比較習慣了編程吧，對於這類說技術含量有一點點，但大部分都是低水平的重複繁瑣的勞動性工做（好比小圖標的蒐集、各個盒模型的尺寸、不少的顏色值、字體字號、對齊方式等等等等），真的好煩，沒有這種耐心。明明知道前端這就是主要工做，可是，仍是作不來。前端

今天終於開始了新的課程：騰訊課堂《Web前端開發之JavaScript(Js)精英課堂》【渡一教育】姬成主講，聽了不到兩節課，正遇上渡一教育的直播課《純CSS旋轉魔方》，裏面用到了CSS3和JS的有關內容，以爲，還得看書系統的學上一遍再看視頻的好，這樣興許知識點會記得紮實些，何況，編程語言之於我仍是比較熟路的。java

因而，就可這本書開始學習吧，夜深人靜正當時──web

第1章 HTML基礎（貌似沒啥新知識，也得過一遍，空杯很重要）sql

關於<body>的屬性幾乎都不推薦使用，但以爲設置頁面的背景水印圖片仍是須要的，根據框架、樣式、行爲相分離的原則，仍是在CSS中定義的好，比較好控制，像固定水印，<body>屬性根本就很差用。數據庫

設置頁面水印背景圖片的CSS：編程

body{canvas

background: #fff url(sy4.jpg) center 0 no-repeat; /*背景色、圖片、居中、不重複*/

background-attachment: fixed; /*水印圖片固定不動*/

background-size: 100% auto; /*水印圖片寬度佔滿頁面寬度*/

}

第2章文本

標題：標題標記；標題的對齊方式

文字：文字的斜體、下劃線、刪除線；文字的上標與下標；特殊文字符號

段落：段落標記；段落的換行標記；段落的原格式標記

水平線：水平線標記；水平線標記的寬度

一、<h1 align=「對齊方式」>文本內容</h> 對齊方式：left、center、right

可用CSS代替：text-align:center;

二、<em>斜體內容一</em> <I>斜體內容二</I> <cite>斜體內容三</cite>

<u>帶下劃線的文字</u> <strike>帶刪除線的文字</strike>

可用CSS代替： font-style: italic; /*斜體字體*/

text-decoration:line-through;/*underline下劃線，line-through貫穿線，overline上劃線*/

三、<sup>上標</sup>

四、 空格 <小於< >大於> "引號」

五、<pre>原格式標記排版</pre> 空格和回車等格式字符均起做用了、標籤也能夠正常輸出。

六、<hr width=’80%’> 水平線及其寬度二〇一九年一月三十一日星期四4時6分37秒上海

二〇一九年一月三十一日星期四10時18分29秒

第3章圖像與超連接

添加圖像：圖像的基本格式；添加圖像

設置圖像屬性：圖像大小與邊框；圖像間距與對齊方式；替換文本與提示文字

連接標記：文本連接；書籤連接

圖像的超連接：圖像的超連接；圖像熱區連接

一、<img scr=」圖像」title=」提示文字」alt=」替代文字」height=」高」 width=」寬」 >

二、<img scr=」圖像」 hspace=」水平間距」 vspace=」垂直間距」 align=」對齊方式」 border=」框」>

三、<a href=’連接地址’ target=’窗口方式’>連接文字</a> target:_blank/_parent/_self/_top

四、書籤連接：<a name=’demo’>設置錨點</a> <a href=’#demo’>跳轉到錨點</a>

五、圖像的超連接：<a href=」連接地址」 target=」打開方式」><img src=」圖像文件地址」></a>

六、圖像的熱區連接（映射圖像）：能夠將圖像分紅不一樣的區域進行連接設置。

<img src=」整幅圖像地址」 usemap=」定義映射圖像名稱」> 引用圖像，並起了一個名稱

</map>

在一個圖像中定位一個小區域的座標是比較難的！用微軟的畫圖軟件能夠方便地定位座標！

shape=」tect」矩形：coords包含四個參數l,t,r,b:左上角到右下角對角線座標。

shape=」circle」圓形：coords包含三個參數：圓心座標和半徑。

shape=」poly」多邊形：取各頂點的座標，最好用可視化軟件設置。

舉例：

</map>

</di

第4章CSS3概述

CSS3概述：發展史；簡單CSS示例

CSS3選擇器：屬性選擇器；類和ID選擇器；僞類和僞元素選擇器；其餘選擇器

經常使用屬性：文本相關屬性；背景相關屬性；列表相關屬性

一、<link href=」css文件名」> 在HTML文件中引入CSS文件。

二、屬性選擇器：[att=val]{} 很強大：能夠是標準屬性，也能夠是自定義屬性，但語義化要好。

三、類和ID選擇器，用的最多的選擇器！

四、僞類選擇器,注意出場順序： :link未訪問、:visited已訪問、:hover鼠標懸停、:active鼠標單擊

五、僞元素選擇器：:before對象內部前端、:after對象內部尾端、first-line對象內第一行、first-letter對象內第一個字符

《Zen Coding: 一種快速編寫HTML/CSS代碼的方法》

六、其餘選擇器：E{}標記選擇器、E F包含選擇器、*通配符選擇器、E>F子包含選擇器、E+F相鄰兄弟選擇器、E-F通用兄弟標記選擇器、E:lang(fr) :lang僞類選擇器、E:first-child結構僞類選擇器、E:focus用戶操做僞類選擇器。

七、文本相關屬性：

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 垂直對齊方式

八、背景相關屬性：

background-color：color|transparent 設置背景顏色和透明度

background-image:url() 設置背景圖片

background-repeat:no-repeat 背景圖片的平鋪方式

background-attachment:scroll|fixed 設置背景圖片隨頁面內容滾動方式

九、列表相關屬性：

list-style:列表的複合屬性

list-style-image:將圖像設爲列表項標記

list-style-position:列表項的標誌在文本之內或之外

list-style-type:設置列表項標誌的類型

第5章 CSS3高級應用

框模型：外邊距margin；內邊距padding；邊框border

佈局經常使用屬性：浮動；定位相關屬性

動畫與特效：變換transform；過渡transition；動畫animation

一、外邊距margin: margin top|right|bottom|left; 設置外邊距。

二、內邊距padding: padding top|right|bottom|left; 設置內邊距

三、邊框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:半徑值指定圓角

四、浮動：float:left|right|none

五、定位：position:static|absolute|relative|fixed

六、動畫之變換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秒

七、動畫之過渡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)貝塞爾曲線

八、動畫：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>標記的應用

一、表格標記<table>、行標記<tr>、單元標記<td>、還有<caption><th><col><colgroup><tffot><tbody>等

二、表頭標記：表頭單元格標記<th>被表頭標記<caption>包裹

三、 <tr>屬性實例：<tr height=」36」bgcolor=」#DD2727」 align=」center」>

四、 <table>屬性實例：<table align=’center’ border=’1px’ cellpadding=’10%’>

五、 <td>引入圖像：<td><img src=’引入圖片地址’></td>

六、表格的合併：<td colspan=’跨的列數’ rowspan=’跨的行數’>

七、表格的分組：表格可使用<colgroup>標記對列進行樣式控制，<col>具體的列控制。

例如：<colgroup>

</colgroup>

八、<div>標記：division塊級標記

九、<span>標記：是行內標記，先後不會換行，沒有結構意義，純粹是應用樣式。能夠插入class、id等語法內容的容器。當其餘行內元素都不合適時，請使用<span>標記。

第7章列表

列表的標記；無序列表；有序列表；列表的嵌套

一、列表的標記：<ul>無序列表<ol>有序列表<dir>目錄列表<dl>定義列表<menu>菜單列表<dt><dd>定義列表標記<li>列表項標記。

二、關於無序列表項前去除小圓點，<ul type=」none」>便可，無需在CSS中list-style-type:none;

三、定義列表：<dl>定義列表:通常兩層結構；<dt>名詞部分；<dd>解釋部分。應用於項目與內容的結合。

第8章表單

表單概述：概述；表單標記<form>

輸入標記：文本框；單選框和複選框；按鈕；文件域和圖像域

文本域和列表：文本域；列表/菜單

一、表單的基本屬性：<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

二、單行文本框：<input type=’text’name=’’size=’’maxlength=’’value=’’ placeholder=’username’> placeholder預期值的簡短提示信息

三、密碼輸入框：<input type=’password’ name=’’size=’’maxlength=’’value=’’>

四、<label>標籤：能夠實現綁定元素。

五、單選按鈕：<input type=’radio’ name=’單選按鈕名稱’ value=’選中後取值’checked>

六、複選框：<input type=’checkbox’ name=’名稱’ value=’複選框的值’checked>

七、普通按鈕：<input type=’button’ value=’按鈕的取值’name=‘按鈕名’ onclick=「處理程序」>配合

八、提交按鈕：<input type=’submit’ value=’按鈕的取值’name=’按鈕名’>

九、重置按鈕：<input type=’reset’ value=’按鈕的取值’name=’按鈕名’>

十、圖像域：<input type=‘image’src=’’name=’’>

十一、文件域：<input type=‘file’accept=’’name=’’> accept可接受的文件類別，有26種，不可自定義。

十二、文本域：<textarea name=「文本域名稱」value=「默認值」rows=「行數」cols=「列數」></textarea>

1三、菜單列表類控件：<select name=」」size=’’multiple=’’value=’’selected></select>

第9章多媒體

HTML5多媒體的簡述：HTML4中多媒體的應用；HTML5頁面中的多媒體

多媒體元素基本屬性

多媒體元素經常使用方法：媒體播放時的方法；canPlayType(type)方法

多媒體元素重要事件：事件處理方式；事件介紹；事件示例

一、多媒體：音效、音樂、視頻和動畫。

二、對HTML5的video元素、audio元素支持的瀏覽器：Chrome、Fiefox、Opera和Safari。

三、音頻的播放：<audio src=」音頻文件」autoplay自動播放 controls播放控制條 loop循環播放 preload=’auto|meta|none’></audio>

四、視頻的播放：<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緩衝至可播放

五、source指定多個播放格式與編碼方式：

例一、<source src="song.ogg" type="audio/ogg">

例二、<source src="song.mp3" type="audio/mpeg">

第10章 HTML5新特性

一、 HTML5的新特性：兼容性：兼容之前的版本。實用性和用戶優先：只封裝了切實有用的功能。化繁爲簡：以瀏覽器原生能力替代複雜的JavaScript代碼；新DOCTYPE;新字符集聲明；簡單而強大的API；錯誤恢復機制。無插件規範。

二、 HTML5和HTML4的區別：語法的變化：規範向現實靠攏。標記方法：內容類型沒有變化；要進行DOCTYPE聲明；字符編碼的設置。

三、能夠省略結束標記的元素：li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td和th元素。

四、能夠省略整個標記的元素（開始標記都不用寫）：html,head,body,colgroup和tbody。

五、不容許寫結束標記的元素：area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr。

六、容許省略屬性值的屬性（值爲真的屬性直接寫屬性名自己）：checked,readonly,disabled,selected,defer,ismap,nohref,noshade,nowrap,multiple,noresize。

二〇一九年二月二日星期六8時40分7秒

七、<base>爲全部連接規定默認地址或默認路徑：統一域名，集中權重；節約帶寬；縮減url；清除標記；方便數據遷移；更輕鬆重定向全部相對url；有助於脫機查看網頁。

注意：webstorm的除了項目目錄之外的目錄引用都引用不了，浪費了幾個小時了都沒搞明白！！！！

解決：File->Settings…->Directores 在最右側 +Add Content Root欄目能夠添加或刪除目錄，但Run **.html將不可用，而變成了Show in Explorer而後彈出窗口選擇要執行的html文件！！！

八、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基礎

一、 JavaScript概述、使用和引用

二、 JavaScript語言基礎：數據類型、運算符、流程控制（if、switch、for、while、do…while、continue、break）。示例：for(var i=0;i<=10;i++){}。

三、 Window對象的屬性：

document對話框中顯示的當前文檔；frames當前對話框中全部frame對象的集合；

location當前文檔的URL；name對話框的名字；

status狀態欄中的當前信息；defaultstatus狀態欄中的當前信息；

top最頂層瀏覽器對話框；parent包含當前對話框的父對話框；

opener打開當前對話框的父對話框；closed當前對話框是否關閉的邏輯值；

self表示當前對話框；screen表示屏幕尺寸、顏色深度等信息；

navigator瀏覽器對象，用於得到與瀏覽器相關的信息。

四、Window對象的方法：

alert()彈出一個警告對話框；confirm()在確認對話框中顯示指定的字符串；prompt()彈出提示對話框；

open()打開新瀏覽器對話框而且顯示由URL或名字引用的文檔，而且設置對話框的屬性；

close()關閉被引用的對話框；focus()將被用的對話框放在全部打開對話框的前面；

blur()將被用的對話框放在全部打開對話框的後面；scrollTo(x,y)把對話框滾動到指定的座標；

scrollBy(offsetx,offsety)按照指定的位移量滾動對話框；setinterval(interval)指定週期性執行代碼；

setTimeout(timer)在指定的毫秒數事後，對傳遞的表達式求值。

五、經常使用實例：window.aler(‘字符串’)； window.document.write(‘字符串’)；

六、DOM文檔對象模型，是JavaScript操做網頁的接口。

七、經過document對象能夠訪問HTML文檔中包含的任何HTML標記，並，能夠動態地改變HTML標記中的內容！

例如：表單、圖像、表格和超連接等。

八、document屬性

document.domain; 當前文檔的域名

document.location; 當前文檔的相關信息

document.lastModifiled 文檔最後的修改時間

document.title;文檔（頁面）標題；document.URL;頁面URL。

還有：

當連接獲取焦點時顯示的顏色：[color=]document.alinkColor[=setcolor] ；color是字符串變量

未單擊連接的顏色：linkColor;單擊過連接的顏色：vlinkColor。

九、document方法

document.open()建立文檔；document.close()關閉文檔；document.write()寫入文檔

查找文檔元素：getElementById();getElementByName();

十、示例：

document.body.style.backgroundColor=」red」；設置文檔顏色

documeng.body.style.fontSize=’20px’; 設置文字大小

document.body.style.backgroundImage=’url(img/5.jpg)’;設置背景圖片

十一、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繪製矩形

繪製基本圖形：直線；曲線；圓形

繪製變形圖形：平移；縮放；旋轉

繪製文字：輪廓文字；填充文字；文字相關屬性

一、畫布標籤：<canvas width=’’height=’’id=’’></canvas>

二、繪製矩形：

建立畫布：<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()填充*/

三、繪製直線：開始繪製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尖角

四、繪製曲線：貝賽爾曲線有二次方和三次方的形式，經常使用於繪製複雜而有規律的形狀。

三次方曲線：bezierCurveTo(cp1x,xp1y,cp2x,cp2y,x,y)

二次方方法：quadraticCurveTo(cp1x,xp1y,x,y)

五、繪製圓形：arc（x,y,radius,startAngle,endAngle,anticlockwise） anticlockwise順時針爲true

顏色值：raba(255,255,255,0.5) 最後一項爲透明度！

觸發定時器：onClick="setInterval(drew,1000)

setTimeout()用於在指定的毫秒數後調用函數或計算表達式。能夠配合循環函數設定定時的次數。

setInterval()在播放動畫的時，每隔必定時間就調用函數，方法或對象。至關於setTimeout的無限循環。

六、繪圖的平移效果：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像素

}

七、縮放效果：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倍

八、旋轉效果：rotate(angle) angle旋轉的角度，1表明約60度。Math.PI = 3.14 = 180°

例如：cav.rotate(Math.PI/6); 順時針旋轉30°

九、繪製輪廓文字：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();

}

十、繪製填充文字：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(); //恢復保存狀態

十一、文字的相關屬性：

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屬性設置拖放效果

一、獲取文件名稱：filename=document.getElementById("file").files[i] 注：file爲錄入框元素，files[i]爲錄入框輸入的文件名列表的第i個文件名。

二、 confirm()：彈出確認窗口，返回true或false邏輯值用於判斷的分支。

三、使用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 + "符合上傳條件") }

四、 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; //在頁面上顯示讀入文本

五、拖放文件

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);

}

六、DataTransfer對象的屬性和方法

直播課照片牆3D旋轉：

radial-dradient(circle at center center,顏色顏色)徑向漸變

transform -style:preserver-3d

setInterVal()設置定時器

二〇一九年二月七日星期四21時20分

第3篇高級應用

第14章離線Web應用程序

介紹：離線WEB應用；應用緩存技術

建立離線應用：緩存清單；applicationCache對象；applicationCache對象的應用

一、判斷瀏覽器是否支持緩存技術：if(!!window.applicationCache){alert("當前瀏覽器支持應用緩存技術")}

二、緩存清單cache.manifest:CACHE NETWORK FallBack

三、applicationCache.onUpdateReady=function(){alert('本地緩存已被更新，可刷新頁面獲取最新版。')；}

applicationCache.swapCache(); 當即進行本地緩存更新。

四、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文件的加載與執行

線程嵌套：單層嵌套；嵌套交互數據

一、建立後臺線程：var worker=new Worker("worker.js") 把後臺線程要執行的代碼做爲參數建立Worker對象。

後臺線程是不能訪問頁面或窗口對象的。但，可經過worker.onmessage=function(event){處理消息};接收消息。

也可發送消息給後臺線程：worker.postMessage(message);發送消息。

二、Worker對象處理線程。

Worker中加載Javascript文件的方法：importScripts("mr.js","mrsoft.js");

三、線程嵌套

第16章 Web服務器通訊

WebSocket通訊：WebSoket API介紹；HTTP通訊和WebSoket通訊比較

跨文檔信息傳輸：使用postMessage API;跨文檔消息傳輸流程

2/8/2019 3:41:16 AM

二〇一九年二月八日星期五14時7分

一、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

二、 HTTP通訊：客戶端發送請求給服務器端，服務器端返回響應給客戶端，通訊一次就中止。

三、跨文檔消息傳送Messaging API,這是Web Worker和Web Sockets都使用的共同的通訊方法。

接收從其餘窗口發過來的消息：window.addEventListener("message",function(){},false);

向其餘窗口發送消息：otherWindow.postMessage(message,targetOrigin);

四、在Apache服務器下建立虛擬主機。中間可能會遇到Windows的msvcr110.dll丟失須要從新安裝的尷尬。

二〇一九年二月八日星期五18時0分

第17章本地存儲數據

初識WebStorage:WebStorage概述；WebStorage中API的使用

本地數據庫：WebSQL數據庫概述；Web SQL Database中API的使用

一、 sessionStorage:把數據保存在session對象中，從進入網站到關閉瀏覽器這段時間。

二、 localStorage:將數據保存在客戶端本地的硬件中，即便瀏覽器被關閉了，數據還存在，下次打開可繼續使用。

三、設置和獲取數據：sessionStorage.setItem("key","value"); var val=sessionStorage.getItem("key");

或：sessionStorage.key="value"; var val=sessionStorage.key; localStorage亦然！

四、數據的刪除與清空：刪除數據：var val=sessionStorage.removeItem(key);清空列表：sessionStorage.clear();

獲取鍵值對的個數：var val = sessionStorage.length;

五、WebSQL是SQLLite的文件類型能夠做爲本地數據庫。

六、打開和建立數據庫，啓動一個數據庫「事務」，在事務回調時建立數據表。例如：

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)');};} //建立數據表

七、插入和查詢數據：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像素

響應式網頁的佈局設計：經常使用佈局類型；佈局的實現方式；響應式佈局的設計與實現

一、響應式網頁設計優勢：對用戶友好；後臺數據庫統一；方便維護。缺點：增長加載時間；開發週期比較長。

二、技術原理：<meta>標記；使用媒體查詢（媒介查詢）定義手持方向和設備分辨率等；使用第三方框架，如Bootstrap。

三、圖像像素、屏幕分辨率、設備像素、CSS像素（邏輯像素）

四、視口與窗口對應，視口viewport是與設備相關的一個矩形區域。可見視口與佈局視口的關係以下：

視口屬性就是移動瀏覽器用來顯示網頁的區域：width、height等

五、媒體查詢：可根據設備顯示器的特性（視口寬度、屏幕比例和設備方向等）設定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時

六、響應式佈局：讓內容適應性展現。佈局類型：單列、均分多列、不均分多列。實現方式：單一固定佈局、響應式固定、響應式彈性。設計實現：桌面PC端優先；移動端優先----模塊內容不變、模塊內容改變。

第19章響應式組件

響應式導航菜單：CSS響應式菜單；JS響應式菜單

響應式表格：隱藏表格中的列；滾動表格中的列；轉換表格中的列

響應式圖片：使用<picture>標記；使用CSS圖片

響應式視頻：使用<meta>標記；使用HTML5手機播放器

一、響應式圖片<picture>標記：不只能夠適配響應式屏幕大小，還能夠根據屏幕尺寸調整圖片的寬高。

二、使用CSS中的關鍵字media進行媒體查詢作響應式圖片：@media screen and (min-width:800px){CSS樣式代碼}

三、響應式視頻<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>

四、使用HTML5手機播放器：第三方組件工具：這裏用willesPlay舉例。

五、CSS3響應式導航菜單：本質上仍舊是使用CSS媒體查詢中的media關鍵字。

六、JS響應式菜單：如同HTML5手機播放器同樣，一樣使用第三方組件:responsive-menu。

七、響應式表格：隱藏表格中不重要的列，達到適配效果,經過media檢測，設置display：none；滾動表格中的列，可把表格頭從橫向排列變成縱向排列；也可轉換表格中的列，讓表格變成列表。

二〇一九年二月八日星期五23時18分第4篇項目實戰第20章51購商城（略）