感謝老師15天的教學(xué)，視頻看完了收獲很多。我之前是看了一套尚硅谷禹神出的html+css，然后最近把黑馬出的這套也看完了。站在我個(gè)人學(xué)習(xí)者的角度對(duì)比了一下兩套視頻，禹神講的那套比較全面和細(xì)致，但不易分清哪些是重點(diǎn)哪些是不常用的。黑馬老師講的這套比較直擊痛點(diǎn)，常用的和普遍性的詳講、不常用的講解的時(shí)間很少，同時(shí)實(shí)戰(zhàn)案例的安排上比禹神的豐富很多。因此，個(gè)人覺得黑馬這套更偏向于實(shí)戰(zhàn)開發(fā)（快速掌握實(shí)戰(zhàn)開發(fā)的技巧，把握重點(diǎn)），尚硅谷禹神那套更偏向于深入與全面學(xué)習(xí)。沒有說誰好誰壞哈，各有風(fēng)格，這是我自己的看法。下面是我對(duì)本套課程的15天學(xué)習(xí)列舉的一些重要知識(shí)點(diǎn)和注意事項(xiàng)：

day01：

• <a> 的 href 屬性值為 # 時(shí)，點(diǎn)擊該鏈接不會(huì)刷新網(wǎng)頁，但會(huì)滾動(dòng)到網(wǎng)頁頂部。如需阻止默認(rèn)行為，可以使用 JavaScript 的事件監(jiān)聽器阻止鏈接的默認(rèn)點(diǎn)擊行為，即執(zhí)行 event.preventDefault()
• <img> 的 src 屬性值使用本地絕對(duì)路徑會(huì)報(bào)錯(cuò) Not allowed to load local resource，這是由于瀏覽器的安全策略所導(dǎo)致的，它限制了通過本地文件路徑加載資源，以防止惡意腳本濫用本地文件系統(tǒng)進(jìn)行攻擊。
• <video> 和 <audio> 在非靜音情況下如何實(shí)現(xiàn)自動(dòng)播放

day02：

• 學(xué)完第二天，老師html5就講解完了，但 html5 中很多東西都沒有講，本套課程對(duì) html5 的講解非常非常不完整。

day03：

• 每個(gè)HTML元素可以有多個(gè)屬性，但同一屬性在一個(gè)標(biāo)簽中只能出現(xiàn)一次。如果一個(gè)標(biāo)簽中多次使用相同的屬性，瀏覽器會(huì)應(yīng)用第一個(gè)出現(xiàn)的屬性值，并忽略后續(xù)相同屬性的值。
• id 選擇器一般 配合 JavaScript 使用，很少用來設(shè)置 CSS 樣式。
• 同一個(gè) id 選擇器在一個(gè)頁面只能使用一次。如果在一個(gè)頁面中將相同的 id 應(yīng)用于多個(gè)標(biāo)簽，這將導(dǎo)致 HTML 文檔違反了規(guī)范。在這種情況下，不同的瀏覽器的行為將是不確定的，可能會(huì)導(dǎo)致不一致的結(jié)果。例如只選擇第一個(gè)匹配的元素，或者選擇最后一個(gè)匹配的元素，或者根本不選中任何元素。
• 通配符選擇器通常用在項(xiàng)目開發(fā)初期，可以用于 清除標(biāo)簽的默認(rèn)樣式 ，例如：標(biāo)簽?zāi)J(rèn)的外邊距、內(nèi)邊距。

day04：

• 老師講解了 Emmet 寫法，非常有用，可以提高開發(fā)效率。
• 老師沒對(duì)常用標(biāo)簽的默認(rèn)顯示模式模式進(jìn)行總結(jié)。
• 老師沒講常見的圖片格式。
• 老師沒講屬性選擇器。

day05：

• 有一個(gè)很重要的細(xì)節(jié)：:nth-child() 的表達(dá)式必須是一個(gè) “an+b” 的形式，其中 a 和 b 都是整數(shù)或關(guān)鍵字。例如如果是 :nth-child(2+n) 該選擇器是不會(huì)生效的，因?yàn)椴皇?an+b 的格式。

day06：

• align-items 和 align-content 都是設(shè)置側(cè)軸方向上的對(duì)齊方式，當(dāng)側(cè)軸方向上是單行時(shí) align-items 設(shè)置生效，當(dāng)側(cè)軸方向上是多行時(shí) align-content 設(shè)置生效。

day07：

• 如果行內(nèi)元素是彈性盒子，則不需要再單獨(dú)轉(zhuǎn)顯示模式為行內(nèi)塊或塊元素，因?yàn)閺椥院凶蛹訉捀咴O(shè)置是生效的。

day08：

• 沒有講粘性定位
• transition 過渡效果講的過于簡單了，很多東西沒提

day09：

• 在兩個(gè)連續(xù)的<a>標(biāo)簽進(jìn)行排列時(shí)，在水平方向上出現(xiàn)距離的原因可能是由于<a>標(biāo)簽是行內(nèi)元素，默認(rèn)的display屬性值是inline或inline-block，而行內(nèi)元素之間會(huì)有默認(rèn)的空白間距（whitespace）。這個(gè)默認(rèn)的空白間距是由于HTML代碼中標(biāo)簽之間的空格、換行符等字符造成的。這些字符在渲染時(shí)會(huì)被解析成空白符，占據(jù)一定的寬度，從而導(dǎo)致標(biāo)簽間有一定的水平間距。常見的解決方式：一是通過將<a>標(biāo)簽之間的換行符或空白符刪除或注釋掉，將它們寫在同一行，可以消除它們之間的水平間距，二是設(shè)置父容器的字體大小為0

day10：

• 關(guān)于子絕父相，子標(biāo)簽參考的父標(biāo)簽的邊緣是最外邊的padding線，即不是最外邊的 border 線。
• P130：老師寫的使愛心圖標(biāo)變紅的選擇器有問題，會(huì)選中每一個(gè) li 的愛心，只顯示第一個(gè)可以使用這個(gè)選擇器：.topic-bd li:first-child .left p:first-child .iconfont
• 小兔鮮兒的案例花了 day09 和 day10 兩個(gè)時(shí)間段，這個(gè)案例老師講的特別好，很過癮

day11：

• 漸變方向默認(rèn)是從上到下。但如果漸變方向設(shè)置的是角度度數(shù)，則初識(shí)位置是朝正北方向，即 0deg 表示漸變方向是 從下到上。
• 終點(diǎn)位置的百分比實(shí)際上設(shè)置的是在此百分比位置的顏色。

day12：

• translate(x, y) 的兩個(gè)值可以只寫 x 值，y 值默認(rèn)是 0 。但如果 translate3d(x, y, z) ，那么三個(gè)值都必須寫，否則該屬性不會(huì)生效。
• 老師講了一個(gè)很實(shí)用的旋轉(zhuǎn)方向記憶技巧：左手法則，很有用。
• 一個(gè)細(xì)節(jié)：坐標(biāo)軸的建立是以 轉(zhuǎn)換原點(diǎn) 為中心構(gòu)建的，默認(rèn)的 轉(zhuǎn)換原點(diǎn) 位置是在盒子的正中心，我們可以通過 transform-origin 調(diào)整旋轉(zhuǎn)原點(diǎn)的位置，則 坐標(biāo)軸 的位置也會(huì)發(fā)生變化，導(dǎo)致 rotate 的繞軸旋轉(zhuǎn)樣式發(fā)生變化。同時(shí)需要注意，發(fā)生 rotate 也會(huì)導(dǎo)致 坐標(biāo)軸 位置發(fā)生改變。

day13：

• 制作網(wǎng)頁參考的邏輯分辨率 。
• 學(xué)習(xí)了 less ：CSS的預(yù)處理器，可轉(zhuǎn)為 CSS 代碼

day14：

• 開發(fā)中，不能 vw 和 vh 混用。實(shí)際就是因?yàn)椴煌脑O(shè)備寬高比例不一致導(dǎo)致的，我們的 vw 和 vh 實(shí)際都是依據(jù)占設(shè)備寬高的百分比進(jìn)行布局。

day15：

• Bootstrap 是由 Twitter 公司開發(fā)維護(hù)的 前端 UI 框架，它提供了 大量編寫好的 CSS 樣式，允許開發(fā)者結(jié)合一定 HTML 結(jié)構(gòu)及JavaScript，快速編寫功能完善的 網(wǎng)頁 及 常見交互效果。