第一部分 開篇

第一章 HTML5背景知識1

1.1歷史?

????????HTML誕生于20世紀(jì)90年代初尼夺，本書重在講H5的幾個重要轉(zhuǎn)折點和一個長期存在的發(fā)展態(tài)勢，旨在讓讀者明白HTML是如何成型的，明白為什么最終走到了HTML5运嗜。

1.1.1????JS出場

? ? ? ? JS語言出自一家名為網(wǎng)景的公司（此處作出翻譯齿梁，之前在JS DOM筆記中也有寫，應(yīng)該是netscape公司）斑鸦，標(biāo)志著內(nèi)嵌在瀏覽器中的客戶端腳本程序功能的發(fā)端。

1.1.2????瀏覽器戰(zhàn)爭的結(jié)束

之前寫過草雕，主要是微軟和網(wǎng)景的競爭巷屿，最后微軟勝出。

1.1.3????插件稱雄

Adobe公司的Flash是典型墩虹，當(dāng)時經(jīng)常見到完全用Flash實現(xiàn)的網(wǎng)站嘱巾，這導(dǎo)致瀏覽器和HTML除了Flash容器一職外再無他用，當(dāng)然會引起瀏覽器開發(fā)商的不滿诫钓，因為它把控制權(quán)轉(zhuǎn)移到了插件開發(fā)商的手中旬昭，H5的一大改進(jìn)就是讓瀏覽器直接處理原本要使用Flash的富內(nèi)容，蘋果和微軟公司首先疏遠(yuǎn)了Flash尖坤，蘋果的IOS不支持Flash稳懒，微軟在windows8附帶的Metro風(fēng)格的IE中禁用了Flash。

1.1.4 ? ?語義HTML浮出水面

HTML標(biāo)準(zhǔn)的早期版本不太關(guān)心將內(nèi)容的意義與其呈現(xiàn)的方式分開慢味。 ??

1.1.5 ? ?HTML標(biāo)準(zhǔn)滯后于其使用

負(fù)責(zé)制定HTML標(biāo)準(zhǔn)的是W3C场梆，很棘手，一條標(biāo)準(zhǔn)往往要花很長時間才能被認(rèn)可和批準(zhǔn)纯路，新技術(shù)或油，可以理解，因此驰唬，冗長的標(biāo)準(zhǔn)制定過程導(dǎo)致W3C總是將已經(jīng)被大家認(rèn)可和接受的實際做法追認(rèn)為標(biāo)準(zhǔn)顶岸。因為腔彰，就滯后了，你滯后了必然就沒有了推動性辖佣，因此真正的革新并非來自W3C霹抛，而是來自瀏覽器和插件。

1.2????HTML5簡介

HTMNL5不僅僅是HTML規(guī)范的最新版本卷谈，也是一系列用來制作現(xiàn)代富Web內(nèi)容的相關(guān)技術(shù)的總稱杯拐。其中最重要是HTML5核心規(guī)范，CSS和JS（表示層世蔗，樣式層端逼，行為層）。

有一些人認(rèn)為H5所指的是HTML元素污淋，不用管他們顶滩，這些人看不出WEB內(nèi)容的本質(zhì)所發(fā)生的根本性的變化，用于網(wǎng)頁的各種技術(shù)之間的關(guān)聯(lián)已經(jīng)變得如此緊密寸爆，如果只是用一中技術(shù)剧罩，對用戶的體驗都不完美古话。

1.2.1 ? ?新標(biāo)準(zhǔn)

制定這種新技術(shù)的標(biāo)準(zhǔn)最大的難處在于沒有一條可以用來評估是否達(dá)到標(biāo)準(zhǔn)的基準(zhǔn)線狭莱。H5中的標(biāo)準(zhǔn)在使用中要仔細(xì)評估佛析，確認(rèn)其是否得到支持秧倾。W3C公布的標(biāo)準(zhǔn)并不代表H5標(biāo)準(zhǔn)及相關(guān)技術(shù)的全面支持毒姨。

1.2.2 ? ?引入原生多媒體支持

H5的一大改進(jìn)就是支持在瀏覽器中直接播放視頻和音頻文件而不用借助插件衣陶。

1.2.3 ? ?引入可編程內(nèi)容

最大變化之一是添加了canvas元素财饥。這些改動都是W3C對插件風(fēng)靡的一種反應(yīng)墩衙。還有务嫡，canvas在使用中必須用到JS，這就意味著編程成為HTNML文檔中第一層次的事情漆改，這是一個重大轉(zhuǎn)變心铃。

1.2.4 ? ?引入語義Web

HTML5引入了一些用來分開元素的含義和內(nèi)容呈現(xiàn)方式的特性和規(guī)則，這是H5中的一個重要概念挫剑。標(biāo)志著H5在成長中走向了新的臺階去扣，反映出制作和使用HTML內(nèi)容的方式的多樣性。

1.3 ? ?H5現(xiàn)狀

1.3.1 ? ?瀏覽器對HTML5的支持情況

在使用到H5的新特性時樊破，一定要確定瀏覽器是否支持愉棱。

1.3.2 ? ?網(wǎng)站對HTML5的支持情況

用到HTML5的網(wǎng)站日益增多，據(jù)我了解哲戚，有些專門使用canvas的公司都有很多了奔滑。

1.4 ? ?本書結(jié)構(gòu)

本書分為五大部分，第一部分除了講解本書所需要的預(yù)備知識外顺少，還會介紹HTML朋其，CSS和JS最近進(jìn)展的情況王浴；

第二部分討論HTMNL元素，包括H5中新增的或有所改動的元素梅猿，每個都有說明和演示氓辣，讀者還可以了解到元素的默認(rèn)呈現(xiàn)方式；

第三部分討論的是CSS袱蚓，這部分討論的是CSS的最新版本CSS3钞啸，有大量例子和圖示；

第四部分介紹的是DOM癞松，通過DOM爽撒，就可用JS探索和操縱HTML內(nèi)容，DOM包含著制作富Web內(nèi)容至關(guān)重要的特性响蓉；

第五部分講的是Ajax硕勿，多媒體和canvas元素等HTML5的高級特性。這些特性需要更高的編程技術(shù)枫甲，但也能顯著提神紅Web內(nèi)容的品質(zhì)和體驗源武。

注意： ? ?本書沒有涉及的一種HTML5的相關(guān)技術(shù)是SVG（可縮放矢量圖形）。

1.5 ? ?HTML5的更多信息

本書力求做到全面詳盡想幻，但是有些內(nèi)容還有可能不全粱栖，大家可以去W3C網(wǎng)站去查閱更多內(nèi)容。

1.6 ? ?小結(jié)

至此脏毯，差不多要開始正兒八經(jīng)探索H5了了闹究，之前講的都是廢話。

第2章 ? ?準(zhǔn)備工作

2.1 ? ?挑選瀏覽器------谷歌兼容最好食店。

2.2 ? ?挑選HTML編輯器------Hbuilder渣淤。

2.3 ? ?挑選Web服務(wù)器------對于學(xué)習(xí)本書而言并非不可或缺。

2.4 ? ?獲取Node.js------有一些需要在服務(wù)器編寫的JS吉嫩。

------獲取multipart模塊

2.5????獲取示例代碼------打算自己敲价认。

2.6????小結(jié)

準(zhǔn)備工作。

第3章 ? ?初探HTML

3.1 ? ?使用元素

元素有開始標(biāo)簽和結(jié)束標(biāo)簽自娩，兩個標(biāo)簽連同他們之間的內(nèi)容構(gòu)成了元素用踩。

元素是一種想瀏覽器說明文檔內(nèi)容的工具，其效果體現(xiàn)在內(nèi)容智商忙迁，不同的元素有不同的確切含義脐彩。

元素名不分大小寫。

有些HTML元素會對呈現(xiàn)形式產(chǎn)生影響动漾，就是某些標(biāo)簽的默認(rèn)樣式丁屎，比如button，input等旱眯。用HTML控制內(nèi)容呈現(xiàn)形式的做法如今收到強烈反對晨川，現(xiàn)在的觀點是用HTML說明文檔的結(jié)構(gòu)和含義证九，用CSS去控制內(nèi)容呈現(xiàn)給用戶的形式。我們可以使用css去改變元素的默認(rèn)樣式共虑，第四章再講愧怜。

3.1.1 ? ?了解本章用到的元素

3.1.2????空元素------元素開始和結(jié)束標(biāo)簽之間沒有內(nèi)容。

3.1.3 ? ?自閉和元素------一般元素是這樣<code></code>,自閉和元素是這樣合二為一<code/>.

3.1.4 ? ?使用虛元素------有些元素只能使用一個標(biāo)簽表示妈拌，在其中放置任何內(nèi)容都不符合規(guī)范拥坛，成為虛元素，比如<hr>尘分，虛元素表示方法<hr>或者<hr/>猜惋。

其實文檔中有寫某些情況下某些元素可以不寫結(jié)束標(biāo)簽，但是那樣也沒啥意義培愁，寫上還是好著摔。

3.2 ? ?使用元素屬性

屬性只能作用于開始標(biāo)簽上，不能用于閉合標(biāo)簽定续，有全局屬性谍咆，可以用到所有的HTML元素上，也有私有屬性私股，比如a標(biāo)簽的href屬性摹察。

3.2.1????一個元素應(yīng)用到多個屬性

一個元素可以用到多個屬性，這些屬性間以一個或多個空格分開即可倡鲸，相信大家都知道供嚎。3.2.3男旗。

3.2.2 ? ?使用布爾屬性

有些屬性是布爾屬性摄狱，不需設(shè)定一個值，只需要將屬性名添加到元素開始標(biāo)簽中即可歧蒋，比如input 中的disabled屬性,為布爾屬性添加一個空字符串或者屬性名字為其值宁炫，也可以達(dá)到同樣的效果。

3.2.3 ? ?使用自定義屬性------你以前知道嗎氮凝？

用戶可以自定義屬性羔巢，這種屬性必須以data-開頭，有時也稱為擴展屬性罩阵，在與JS結(jié)合時很有用竿秆，據(jù)我所見，很多插件JS插件在使用上就是通過自定義屬性來傳值的稿壁。

3.3 ? ?創(chuàng)建HTML文檔

瀏覽器和用戶代理------在本章中的HTML文檔是針對瀏覽器創(chuàng)建的幽钢，但是并非只有瀏覽器可以查看，用于處理HTML文檔的各種軟件有一個共同的名稱叫做用戶代理傅是，瀏覽器是最流行的用戶代理匪燕，但不是唯一的一種蕾羊。HTML5一直強調(diào)將內(nèi)容和呈現(xiàn)形式分開，正式因為HTML內(nèi)容并不總是會被顯示給用戶看帽驯，有可能交給別的一些軟件處理龟再。

3.3.1 ? ?外層結(jié)構(gòu)

HTML文檔的外層結(jié)構(gòu)有兩個元素確定：DOCTYPE和html，DOCTYPE讓瀏覽器明白其處理的是HTML文檔尼变，這是用布爾屬性HTML表達(dá)的利凑，eg：<!DOCTYPE HTML>。

DOCTYPE標(biāo)簽的完整形式是<!DOCTYPE>嫌术。

緊跟著DOCTYPE元素的html元素的開始標(biāo)簽哀澈，告訴瀏覽器，自此知道遇到html結(jié)束標(biāo)簽度气，所有內(nèi)容都應(yīng)作為HTML處理割按。

3.3.2 ? ?元數(shù)據(jù)------第一次聽說這個詞嗎？

HTML文檔的元數(shù)據(jù)不分用來向瀏覽器提供文檔的一些信息蚯嫌。元數(shù)據(jù)包含在head元素內(nèi)部哲虾。除了包含用于說明HTML文檔的元素，head元素還能用來規(guī)定文檔與外部資源的關(guān)系择示，定義內(nèi)嵌CSS樣式束凑，放置和載入腳本程序。

3.3.3 ? ?內(nèi)容

文檔的內(nèi)容放在body元素中栅盲。

3.3.4 ? ?父元素汪诉，子元素，后代元素和兄弟元素

元素之間的關(guān)系谈秫，在html世界中隨處可見扒寄，在DOM中有DOM樹，在CSS中應(yīng)用這些關(guān)系最為常見拟烫，通過這些關(guān)系準(zhǔn)確定位元素（在DOM中稱為節(jié)點）很重要该编。

3.3.5 ? ?了解元素類型

HTML5將元素分為三大類：元數(shù)據(jù)元素，流元素硕淑，短語元素课竣。

元數(shù)據(jù)元素用來構(gòu)建HTML文檔的基本結(jié)構(gòu)，以及就如何處理文檔向瀏覽器提供信息和指示置媳，具體見第7章于樟。

另外兩種元素略有不同，他們用途是確定一個元素合法的父元素和子元素的范圍拇囊，短語元素是HTML的基本成分迂曲，第8章會介紹最常用的短語元素。流元素是短語元素的超集寥袭，意思是路捧，所有的短語元素都是流元素关霸，但并非所有的流元素都是短語元素。

有些元素?zé)o法歸入上述三種類型鬓长，這些元素要么沒有特別含義谒拴，要么只能用在一些非常有限的情況下，比如li元素涉波。

3.4 ? ?使用HTML實體

HTML文檔中有些字符具有特殊的含義英上，比如，空格啤覆，>和<這倆字符苍日，使用的時候不想被當(dāng)做H5處理，就需要用到HTML實體窗声，書中列出了不分常用HTML實體相恃，比如，> ?實體名稱&gt笨觅，實體編號&#62拦耐。使用時既可以用實體名稱表示，也可以用實體編號表示见剩。

3.5 ? ?HTML5全局屬性

3.5.1 ? ?accesskey屬性------很神奇吧杀糯，培訓(xùn)班里有教嗎？

使用這個全局屬性可以設(shè)定一個或幾個用來選擇頁面上元素的快捷鍵苍苞，比如<input type='text' accesskey='n'>固翰，這樣在瀏覽器中用戶通過Alt+N就可以選擇此元素。

3.5.2 ? ?class屬性

class屬性用來將元素歸類羹呵，這樣做通常是為了能夠找出文檔中的某一類元素或為某一類元素應(yīng)用CSS樣式骂际。

一個元素可以被歸為多個類別，為此在class屬性值中提供多個用空格分隔的類名即可冈欢。類名可以隨便取歉铝，不過最好取帶實際含義的。

3.5.3 ? ?contenteditable屬性------也沒用過吧凑耻。

這個是H5中新增加的屬性犯戏，其用途是讓用戶可以修改頁面上的內(nèi)容，比如

<p ?contenteditable="true">前端需要一直去學(xué)習(xí)拳话，才能不被淘汰的職業(yè)钾恢。</p>缕溉，在瀏覽器中，用戶就可以像在input在輸入一樣燎孟，選取文字和修改這個p中的內(nèi)容坚俗，不妨試試镜盯。

3.5.4 ? ?contextmenu屬性

這個屬性用來為元素設(shè)定快捷菜單岸裙，菜單會受到觸發(fā)的時候彈出來，在作者寫本書的時候速缆，沒有瀏覽器支持這個屬性降允。沒法測試看效果，難受艺糜。

3.5.5 ? ?dir屬性

dir屬性用來規(guī)定文字的方向剧董，其有效值有2個：ltr和rtl，試試吧破停，試過之后就知道并不是顛倒文字方向翅楼，而是顛倒左右排列順序。

3.5.6 ? ?draggable屬性

draggable屬性是H5支持拖放操作的方式之一真慢，用來表示元素是否可以被拖放毅臊，詳見37章。

試過之后發(fā)現(xiàn)就像圖片被拖放一樣黑界，看到影子管嬉，但是鼠標(biāo)彈起之后又不見了。

3.5.7 ? ?dropzone屬性 ??

這個順序?qū)幰彩荋5支持拖放操作的方式之一朗鸠，與上一個搭配使用蚯撩，詳見37章。

3.5.8 ? ?hidden屬性

這是布爾屬性童社，之前是否有知道求厕？

3.5.9 ? ?id屬性

這個屬性給元素分配唯一標(biāo)識符，這種表示符通常將樣式應(yīng)用到元素上或在JS程序中用來選擇元素扰楼。

提示：id還可以用來導(dǎo)航到文檔中的特定位置呀癣，比如https://www.baidu.com#example，該URL的末尾部分稱為URL片段標(biāo)識符弦赖。

3.5.10 ? ?lang屬性

這個屬性用來說明元素內(nèi)容所使用的語言项栏，未作詳解，我通常見到的都是lang=“en”蹬竖。

3.5.11 ? ?spellcheck屬性

這個屬性用來表示瀏覽器是否應(yīng)該對元素的內(nèi)容進(jìn)行拼寫檢查沼沈，這個屬性只有用在用戶可以編輯的元素上時才有意義。它的值有倆币厕，true和false列另，目前大多數(shù)的瀏覽器中的拼寫檢查都會忽略前面介紹過的lang屬性，他們的拼寫檢查給予用戶所用操作系統(tǒng)中的語言設(shè)置或瀏覽器的語言設(shè)置旦装。

3.5.12 ? ?style屬性

用的最多的就是這個了吧

3.5.13 ? ?tabindex屬性?

HTML頁面的鍵盤焦點可以通過Tab鍵在各元素之間切換页衙，用tabindex屬性可以改變默認(rèn)的轉(zhuǎn)移順序（1~n）。如果設(shè)為負(fù)值，就是設(shè)置Tab切換不會被選中店乐。

3.5.14 ? ?title屬性

title屬性提供了元素的額外信息艰躺，瀏覽器通常用這些東西顯示工具提示。

3.6 ? ?有用的HTML工具

沒有最好的眨八，只有合適的腺兴。

3.7 ? ?小結(jié)

走馬觀花介紹HTML文檔的結(jié)構(gòu)和特性，示范如何用HTML元素標(biāo)記內(nèi)容以創(chuàng)建一個HTML文檔廉侧，還一一介紹了所有的全局屬性页响，注意，是所有的全局屬性就這些伏穆。其中比較神奇的就是H5的兩個可拖放屬性拘泞，draggable和dropzone，還有鍵盤快捷鍵的設(shè)置屬性accesskey（Alt+*）枕扫，設(shè)置文本可以讓用戶修改的contenteditable屬性陪腌。

第4章 ? ?初探CSS

4.1 ? ?定義和應(yīng)用樣式

CSS樣式由一條或多條以分號隔開的樣式聲明組成。每條聲明都包含著一個CSS屬性和該屬性的值烟瞧，二者以冒號分隔诗鸭。

4.1.1 ? ?了解本章所用到的CSS屬性

4.1.2 ? ?使用元素內(nèi)嵌樣式

樣式不是定義了就完事，還需要被應(yīng)用到元素上参滴。把樣式應(yīng)用到元素上有各種方式强岸，最直接的方式是使用元素的全局屬性style。

注意：其實在CSS中實現(xiàn)一種效果有多種方法砾赔，很多人都在爭論什么才是最好的方法蝌箍，在這方面，作者認(rèn)為不用管這些爭論暴心，要琢磨點適合自己的技術(shù)和招法妓盲，保證確有奇效和對自己口味就是好的。

4.1.3 ? ?使用文檔內(nèi)嵌樣式

直接用元素全局屬性style設(shè)置屬性或許可以专普，但是對于需要大量設(shè)置各種樣式的復(fù)雜文檔可能就顯得效率太低悯衬。還有另外一種方法就是在head標(biāo)簽內(nèi)插入style元素，而不是style屬性檀夹，在style元素中通過CSS選擇器來指示瀏覽器應(yīng)用樣式筋粗。

4.1.4 ? ?使用外部樣式表

如果有一套CSS樣式要用與多個HTML文檔，那么與其在文檔中重復(fù)定義相同的樣式炸渡，不如另外創(chuàng)造一個獨立的樣式表文件娜亿，.css為文件擴展名。

文檔想要鏈接多少樣式表都可以蚌堵，只要為每一個樣式表使用一個link元素即可暇唾，如果在不同的樣式表中使用了相同的選擇器，那么這些樣式表的導(dǎo)入順序很重要，在此情況下得以應(yīng)用后導(dǎo)入的樣式策州。

------從其他樣式表中導(dǎo)入樣式，可以用 ?@import“***.css”宫仗；一個樣式表中想要導(dǎo)入多少別的樣式表都行够挂，為每個樣式表是用一條@import語句即可，@import語句必須位于樣式表的頂端藕夫。

------@import語句用的并不廣泛孽糖，一個原因是好多人不知道有這個東西陷猫，另外一個原因是瀏覽器處理@import語句的效率沒有處理多個link元素并靠樣式層疊解決問題嚎卫。

------在CSS樣式表中灯蝴，可以出現(xiàn)在@import語句之前的只有@charset語句商膊，用于聲明樣式表所用的字符編碼镊讼，一般@charset“UTF-8”犁跪；

-----如果樣式表中沒有聲明編碼扛施，那么瀏覽器將使用載入該樣式表的HTML文檔聲明的編碼窟哺，如果HTML也沒有聲明編碼瑰煎，那么默認(rèn)情況下也是‘UTF-8’铺然。

4.2 ? ?樣式的層疊和繼承

4.2.1 ? ?瀏覽器樣式

更恰當(dāng)?shù)恼f是用戶代理樣式是元素尚未設(shè)置樣式是瀏覽器應(yīng)用在它身上的默認(rèn)樣式，這些樣式因瀏覽器而略有差異酒甸，不過大體一致魄健。

------這里以后要貼圖片了，因為我找到一個本書的pdf版本插勤，所以為了節(jié)省打字時間沽瘦， 而把更多時間花在理解和記憶上，就貼圖了农尖！

4.2.2 ? ?用戶樣式

層疊順序規(guī)則行事析恋，我們就可以自己定義覆蓋瀏覽器默認(rèn)的

4.2.3 ? ?樣式如何層疊

作者樣式是我們常用的，還有用戶樣式和瀏覽器樣式

4.2.4 ? ?用重要樣式調(diào)整層疊順序

卤橄！important這條一句大家都知道吧绿满，

這個你可能不知道吧！

4.2.5 ? ?根據(jù)具體程度和定義次序解決同級樣式?jīng)_突

1窟扑，ID值的數(shù)目喇颁；2，其他屬性和偽類的數(shù)目嚎货；3橘霎，元素名和偽元素的數(shù)目

評定方法

如果以上都一樣，那就是后來者居上了殖属。

4.2.6 ? ?繼承

如果瀏覽器在直接相關(guān)的樣式中找不到某個屬性的值姐叁，就會求助于繼承機制。

繼承的小規(guī)則，可以強行繼承的外潜！

4.3 ? ?CSS中的顏色

本人常用rgba設(shè)置背景透明原环，內(nèi)容不透明。

4.4 ? ?CSS中的長度

4.41 ? ?絕對長度

怎么樣处窥，漲見識了吧

別著急團(tuán)嘱吗，先發(fā)育

4.4.2 ? ?相對長度

px的定義原來是這樣，%定義是啥意思滔驾？

------em單位是相對元素本身的 font-size谒麦；

------rem單位是相對html根元素的font-size；

ex單位哆致，這里有一個基線和中線的概念绕德，在此我百度了下

附上張大仙人的文章鏈接 ?http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

------特殊的像素單位px

像素單位

百分比單位留到后面詳解

使用不廣泛的CSS屬性

這個我在PC豆瓣banner見過

4.5 ? ?其他CSS單位

4.5.1 ? ?使用CSS角度

最常用的就是deg

時間單位

4.6 ? ?測試CSS特性的支持情況

書上推薦第一個工具網(wǎng)站是 ?www.caniuse.com

第二個是https://www.cnblogs.com/-simon/p/5907053.html，這個摊阀。

4.7 ? ?有用的CSS工具

這里主要推薦了chromo的F12工具耻蛇，哈哈。實話說驹溃，還推薦了Less城丧，還有css框架

小結(jié)這么點

第5章 ? ?初探JS

本書只是介紹到了需要用的一些核心JS知識，作者說豌鹤，要學(xué)好JS亡哄，我推薦兩本書，一般性知識方面布疙，推薦JS高級程序設(shè)計蚊惯，在高級概念和特性方面，推薦JS設(shè)計模式灵临。

5.1 ? ?準(zhǔn)備使用JS

就這些

5.2 ? ?使用語句

JS基本元素-----語句

5.3 ? ?定義和使用函數(shù)

很簡單

5.3.1 ? ?定義帶參數(shù)的函數(shù)

1

2

5.3.2 ? ?定義會返回結(jié)果的函數(shù)

基礎(chǔ)看了很多遍

5.4 ? ?使用變量和類型

ES6還是這樣嗎

弱類型語言截型，強類型語言在聲明變量的時候應(yīng)該也要聲明變量類型

5.4.1 ? ?使用基本類型

三種基本類型？

5.4.2 ? ?創(chuàng)建對象

1.var ? ?myData=new Object();

2.var ? ?myData={name:'qpx',age:'20'}

3.------

優(yōu)雅的寫法

此處不再鉆研JS

5.4.3 ? ?使用對象

1.讀取和修改屬性的值

第一種常見儒溉，第二種有人不知道嗎宦焦？

可以放變量，就可以寫活

2.枚舉對象屬性

for ?in

此處的東西還需要深刻理解才能靈活應(yīng)用

3.增刪屬性和方法

原點表示法顿涣，添加方法一樣的

刪除對象屬性

in關(guān)鍵字檢查對象中是否有某個屬性

5.5 ? ?使用JS運算符

5.5.1 ? ?相等和等同運算符

==波闹，先轉(zhuǎn)換為同一類型，再比較涛碑，即類型不同值相同精堕，結(jié)果為true；===是連同值和類型一起比較蒲障，都一樣才為true歹篓。

對象怎么比較瘫证？

便于理解的例子（指針相同？）

5.5.2 ? ?顯式類型轉(zhuǎn)換

有運算符優(yōu)先級這個概念嗎庄撮？

1.數(shù)值轉(zhuǎn)換為字符串

字面量是啥背捌？

2.把字符串轉(zhuǎn)換為數(shù)值

常用

5.6 ? ?使用數(shù)組

1.創(chuàng)建數(shù)組------new Array（）；

數(shù)組包容性很大

5.6.1 ? ?使用數(shù)字字面量

我百度了下洞斯，字面量定義：

字面量定義

var ? ?myArray=['1',Array,1213,false]

5.6.2 ? ?讀取和修改數(shù)組內(nèi)容

myArray[0]=true;

5.6.3 ? ?枚舉數(shù)組內(nèi)容

for循環(huán)

5.6.4 ? ?使用內(nèi)置的數(shù)組方法

牢記的方法载萌，面試經(jīng)常被問到，因為一些面試官巡扇，喜歡問一些死記硬背的東西檢查你的基礎(chǔ)夠不夠扎

sort（）方法注意

排序規(guī)則

5.7 ? ?處理錯誤

------try。垮衷。厅翔。catch語句

基本方法

詳情

finally語句

5.8 ? ?比較undefiend和null值

有屬性沒有值的時候，得到的就是null

5.8.1 ? ?檢查變量或?qū)傩允欠駷閡ndefined和null

if語句和邏輯非

5.8.2 ? ?區(qū)分null和undefined

你知道嗎搀突？

5.9 ? ?常用的JS工具

5.9.1 ? ?使用JS調(diào)試器

還是瀏覽器F12

5.9.2 ? ?使用JS庫

JQ刀闷，JQUI

第二部分 ? ?HTML元素

第6章 ? ?HTML5元素背景知識

6.1 ? ?語義與呈現(xiàn)分離

作者建議

? ? 6.2 ? ?元素使用原則

6.2.1 ? ?少亦可為多-------語義化

6.2.2 ? ?別誤用元素------如果找不到符合自己語義的元素，可以使用通用元素div或span

6.2.3 ? ?具體為佳仰迁，一以貫之------統(tǒng)一甸昏，方便維護(hù)和修改

6.2.4 ? ?對用戶不要想當(dāng)然-------意思讓你好好遵循語義化

6.3 ? ?元素說明體例

本書是用摘要表描述一個元素的

6.4 ? ?元素速覽

從中記了幾個很使用的H5新增元素

header頭部元素，footer底部元素徐许，nav導(dǎo)航元素，aside側(cè)欄元素，details詳情元素填抬，article獨立的內(nèi)容元素臼婆，

svg這個東西需要認(rèn)真學(xué)習(xí)，看看這個元素能有多大潛力恰起。

結(jié)束

第7章 ? ?創(chuàng)建HTML文檔

說明

7.1 ? ?構(gòu)筑基本的文檔結(jié)構(gòu)

7.1.1 ? ?DOCTYPE元素

<!DOCTYPE HTML>

7.1.2 ? ?html元素

H5新增了局部屬性manifest修械，詳見40章

7.1.3 ? ?head元素

head元素包含著文檔的元數(shù)據(jù)，必須有一個title元素检盼，其他元數(shù)據(jù)元素可有可無

7.1.4 ? ?body元素

body里面的內(nèi)容才是文檔的內(nèi)容肯污，body元素緊跟著head元素，是html第二個子元素吨枉。

7.2 ? ?用元數(shù)據(jù)元素說明文檔

7.2.1 ? ?設(shè)置文檔標(biāo)題------title

7.2.2 ? ?設(shè)置相對URL的解析基準(zhǔn)

base元素------局部屬性：href蹦渣，target

7.2.3 ? ?用元數(shù)據(jù)說明文檔

meta元素用來定義文檔的各種元數(shù)據(jù)，有多種不同的用法东羹，一個HTML文檔中可以有多個meta標(biāo)簽

局部屬性：name剂桥，content，charset属提，http-equiv

1指定名/值元數(shù)據(jù)對

meta標(biāo)簽有大用

meta標(biāo)簽中的http-equiv屬性

7.2.4 ? ?定義css樣式

style元素和link元素

1.style元素有兩個局部屬性权逗，type和media美尸，其實還有一個scoped，只是因為作者在寫本書時斟薇，沒有主流瀏覽器支持這個屬性师坎。

沒錯吧

media屬性可以用來說明文檔在什么情況下應(yīng)該使用該元素中定義的樣式

有用，其實多數(shù)都用screen

例子助理解

全面理解

這么多

7.2.5------link元素的大用

link

強大的link

搞過后端的應(yīng)該都知道

link的預(yù)先獲取功能

7.3 ? ?使用腳本元素

這個建議大家還是不要聽堪滨，涉及到優(yōu)化用戶體驗

script------

這個意思難道定義元素種類是根據(jù)位置來的嗎胯陋？

局部屬性很重要，不要以為瀏覽器默認(rèn)你就不需要掌握

------推遲腳本的執(zhí)行方式袱箱；

1.把JS文件都放在body閉合標(biāo)簽之前遏乔，這樣等瀏覽器加載完DOM樹結(jié)構(gòu)后再加載JS執(zhí)行JS；

2.defer屬性只能用于外部JS文件

defer屬性

3.異步執(zhí)行腳本 async屬性发笔，這個屬性一般用于和頁面交互本身沒有聯(lián)系的JS文件盟萨，比如，統(tǒng)計插件了讨，跟蹤插件捻激。

------noscript元素用來包含當(dāng)頁面禁用JS或瀏覽器不支持JS時，顯示的東西前计，可放在head標(biāo)簽內(nèi)的任何位置胞谭，也可以如下操作

這個操作可以的

7.4 ? ?小結(jié)

就這么點，沒錯

第8章 ? ?標(biāo)記文字

語義化一直是標(biāo)準(zhǔn)的提倡男杈，但在實際中并不是很好被使用丈屹。

8.1 ? ?生成超鏈接

a元素的局部屬性

可以鏈接到圖片

鏈接到某個id的元素

frame怎么用？詳見第15章

8.2 ? ?用基本的文字元素標(biāo)記內(nèi)容------語義化標(biāo)簽

------通篇講語義化势就，看個人習(xí)慣泉瞻，W3C是否能引導(dǎo)技術(shù)的趨勢，或者繼續(xù)按照趨勢來定義苞冯。在實際應(yīng)用中袖牙，語義化的標(biāo)簽帶有的默認(rèn)樣式，大多數(shù)情況下不符合設(shè)計上的要求舅锄，因此鞭达，一般都要樣式清除，這樣一來皇忿，語義化的存在意義就很沒有價值畴蹭，大多數(shù)情況下，我還是習(xí)慣用自己的方式來標(biāo)記鳍烁，強調(diào)叨襟，下劃線等，不過語義化中用的最廣泛的應(yīng)該就是分區(qū)標(biāo)簽幔荒，例如header糊闽，footer梳玫，nav，aside右犹。

就這些

第9章 ? ?組織內(nèi)容------結(jié)構(gòu)布局標(biāo)簽

------額提澎，自己看去，就講一些布局標(biāo)簽的語義化念链。

就這些

第10章 ? ?文檔分節(jié)------分塊布局標(biāo)簽

就這些

第11章 ? ?表格元素

表格布局曾經(jīng)風(fēng)靡一時盼忌，可以說是經(jīng)典。

概要

方便之處

詳見21章

一個表格只包含一個caption元素掂墓，不論定義在什么地方谦纱，總是會顯示在表格上方

這個元素之前知道嗎

它是這樣影響表格的，自己動手下很簡單很好理解君编，也很好用

span屬性指定caption屬性值影響的列數(shù)

col元素

這樣做

table還有一個屬性服协，border，值只能設(shè)置為1或空字符串啦粹，神奇不神奇。

小結(jié)

第12章 ? ?表單

抱歉窘游，內(nèi)容有點長唠椭，只有縮小才能截圖截全

form元素

input元素

button元素

表單的屬性

------action屬性，說明提交表單瀏覽器應(yīng)該把從用戶收集的數(shù)據(jù)發(fā)送到什么地方忍饰；

------method屬性贪嫂，指定表單數(shù)據(jù)發(fā)送到服務(wù)器的HTTP方法，允許的值有‘get’和‘post’兩個艾蓝，默認(rèn)是‘get’力崇。

get請求和post請求

編碼方式，第三種作者推薦不要用赢织，因為各個瀏覽器處理方式不一致

控制表單的自動完成功能------文中主要講的是form元素和input元素的autocomplete屬性亮靴，有兩個值，‘on’和‘off’于置。

這個設(shè)置一般情況下不起作用的茧吊，瀏覽器行為，我們管不住八毯，網(wǎng)上有一些方法搓侄。

form表單也有target屬性，詳見15章话速。

表單的name屬性以及input屬性的name屬性讶踪，如果不設(shè)置，用戶輸入的數(shù)據(jù)在提交表單時不會發(fā)送給服務(wù)器泊交。

輔助元素乳讥，label和input可以獨立定義柱查，并不需要包含。

input元素有一個autofocus屬性雏婶，使輸入框自動被聚焦物赶，只能用在一個input元素上，如果用了好幾個留晚，瀏覽器會聚焦到最后一個酵紫。

disabled屬性，禁止輸入。

這里還介紹了個fieldset元素反浓，

分區(qū)和悦？

第15章 ? ?嵌入內(nèi)容

概要

第三部分 ? ?CSS

第16章 ? ?理解CSS

先來看看各位大佬的前綴

選擇器部分

續(xù)

我擦，CSS真的是內(nèi)容繁多参歹，屬性簡明參考

1

2

3

1

2

1

1

1

1

截圖截到這里我已經(jīng)有懷疑我啃這本書是否方向不對，是不是有點像為了學(xué)會漢字去啃新華字典的感覺隆判。

第17章 ? ?使用CSS選擇器

內(nèi)容概要

1

這個平時我自己很少用

第18章 ? ?使用CSS選擇器（第II部分）

概要

這個很好用的

這個也還可以

第19章 ? ?使用邊框和背景

字典

常用

1

京東金融的背景犬庇？

你用過嗎

你知不知道？

box-shadow

竟然可以這么玩

1

第20章 ? ?使用盒模型

盒模型內(nèi)容概要

1

2

3

4

5

兩個屬性都可以隱藏

但是侨嘀，不支持

強大的display

1

第21章 ? ?創(chuàng)建布局

概要

定位屬性

position臭挽，定位的相對對象要記住

多列布局開始

1

2

3

table布局1

第22章 ? ?設(shè)置文本樣式

1

對其屬性有兩個

1

2

3已經(jīng)在最新草案中移除

間距屬性

這個會用到

這個要用

1

玩起來很好的

最常用的字體

我們UI小哥哥經(jīng)常用平方字體

使用時注意

第23章 ? ?過渡動畫和變換

概要

以后會火

1

完整的動畫

規(guī)定播放方向

可以為一個元素設(shè)置多個動畫，只需要把動畫名稱用逗號隔開咬腕。

動畫啟動和停止欢峰，強大的CSS都快趕上JS了

變換

1

2

3

第24章 ? ?其他CSS屬性和特性

表格相關(guān)的

列表樣式

除此之外還有很多

不想試試都是什么樣子嗎

第四部分 ? ?使用DOM

DOM是HTML文檔和JS之間的橋梁

1

之下有很多對象的字典，在此我就不截圖了涨共。

第26章 ? ?使用Document對象

1

你想清楚地了解你的文檔嗎纽帖？

Location對象的方法和屬性

cookie很有用

強大到不行的DOM

1

2

1

小結(jié)

第27章 ? ?使用Window對象

概要

1

2

3

4

5

6

7

這原來是window對象提供的方法

小結(jié)

第28章 ? ?使用DOM元素

1

2

3

4

5

6

7

8

第29章 ? ?為DOM元素設(shè)置樣式

1

2

3

4

5

6

7

最后書中還介紹了一個計算樣式，我不截圖了举反，覺得沒啥用懊直，名用比太差，看完我就想說火鼻，DOM很強大吹截，然而......。

第30章 ? ?使用事件

1

2

3

4

5

------未完待更,公司業(yè)務(wù)來了,要去干活啦!