WEB全棧學習筆記-HTML和CSS

2020/06/14 這是WEB前端全棧的第一周筆記

九層之臺，起于累土；千里之行，始于足下。 我們的目標是全棧開發(fā)，但我們要從最基礎(chǔ)的HTML開始。 第一章入門。 WEB的載體互聯(lián)網(wǎng)是美國在冷戰(zhàn)時期由軍方發(fā)明而后商業(yè)化產(chǎn)生的，所以說美國人曾經(jīng)也是很厲害的。 瀏覽器的作用是解釋HTML和渲染頁面。瀏覽器-服務(wù)器就是BS架構(gòu)。 第二章初識。 WEB開發(fā)分前后端，前端3大件HTML/CSS/JS。 WEB標準從WD到CR一直REC的制定流程，以及暫未成標準的NOTES的解釋等。 開發(fā)工具VScode介紹。 HTML發(fā)展史，語法嚴格規(guī)范與靈活使用之間的權(quán)衡。標簽簡介：單/雙標簽、元素、屬性。 第三章常用標簽。 首先是HTML的結(jié)構(gòu)標簽：head/body。標題、段落、非語義標簽div/span。 鏈接anchor，以及歷史上用空鏈接用做按鈕的做法。 圖片、列表。 第四章表格。 表格的結(jié)構(gòu)thead/tbody/tfoot。行和列，跨行和跨列。 各種屬性：bgcolor/height/width/border/align/valign/cellspacing/cellpadding，控制不同的展示細節(jié) 總結(jié)： 老師除了講解HTML技術(shù)外，也準備了相關(guān)標準背景，技術(shù)歷史等知識。這是一門不錯的課程，值得我們好好學習。

2020/06/21（2020/07/04補記） 這是WEB前端全棧的第二周筆記

本周筆記由于其它事情耽誤了，今日補記。 HTML第5章表單。 表單是form，老師打的一個比喻比較好。表單里有許多一個個的小的組件，但是他們組合起來，就可以形成內(nèi)容豐富的表單。 學習Input元素，它的屬性：name/value/type（展示了表單組件的多樣性）。演示了一個單選框內(nèi)容上點擊可選中的實用小技巧。 CSS第一章簡介。 CSS全稱是Cascading?Style?Sheet，即層疊樣式表。這個名稱的含義：樣式可以是多樣的，被覆蓋和層疊堆砌的。 講解css的標準化歷史，它是在HTML發(fā)展中遇到頁面表現(xiàn)的難點而出現(xiàn)的技術(shù)，所以它的標準化在HTML之后。 css引入的幾種方法；css的語法；css的層疊和繼承特性。 CSS第二章選擇器。 選擇器的作用是選擇HTML文檔中的元素。可以支持通配符，這里老師展示了在chrome里檢視元素的方法和細節(jié)，非常實用。 可以通過多個維度來進行選擇，如id/類/屬性；還有偽類、派生、相鄰兄弟等。權(quán)重的計算。 本章比較枯燥，需要在實際使用中去加深理解。 總結(jié)： 第2周相對第1周，新鮮感會逐漸減弱，要堅持學習~

2020/06/28（2020/07/05補記） 這是WEB前端全棧的第三周筆記

本周筆記由于其它事情耽誤了，今日補記。 CSS第三章-常用屬性。 內(nèi)容有：字體、文本、尺寸、列表、和背景。 字體首先科普了襯線/非襯線字體、等寬字體的概念，講解了如何在chrome里查看rendered?fonts.?字體有family/size/style/weight等屬性。 文本主要有color/line-height/text-align-indent-decoration-shadow/direction/letter-spacing（可負）等屬性 尺寸有width/height/min-max-auto等 列表有l(wèi)ist-style-image/position/type等，可以用type:decimal實現(xiàn)和有序列表標簽一樣的效果 背景有background-color/image/repeat/position/attachment等。 CSS第四章-CSS盒模型。 以快遞包裹做比喻，包裹從里到外是商品、保護墊、快遞盒、外保護層，分別對應(yīng)于Content,padding,border,margin。非常容易理解。 padding的屬性順序：top?right?bottom?left border講到了復(fù)合屬性，我理解可能不準確，感覺和簡寫屬性沒啥區(qū)別。 margin對于塊和內(nèi)聯(lián)元素之間距離的不同處理。display對于塊和內(nèi)聯(lián)可以反轉(zhuǎn)配置。 講解了一個面試技巧：如何去除內(nèi)聯(lián)元素之間的天生的間隙。 總結(jié)： 第3周愈發(fā)枯燥，學習知識本來就是比較枯燥的。

2020/07/05 這是WEB前端全棧的第四周筆記

CSS第五章-浮動。 內(nèi)容有：float,clear?或?上層的overflow:hidden?或是clearfix方案，這個方案使用了偽元素，需要以后進一步理解。 本章有一個實戰(zhàn)例子，是做二側(cè)固定寬度，中間自適應(yīng)。使用了double飛(不是大保健的double飛哦)翼布局來實現(xiàn)。其中的技巧是用到了負margin，另外中間的div部分是先加載的，左右部分是后加載，這與一般理解有些差別。 看老師在VS里的快捷輸入，比如h20是height:200px的快捷輸入。 CSS第六章-定位。 內(nèi)容有：position:static/fixed/relative/absolute 層級z-index是個配角，配合absolute使用 如何應(yīng)用，是個問題 總結(jié)： 第4周愈發(fā)枯燥。需要多做習題，特別是最后一個實踐題。否則只是停留在聽過課的層次，不能進化到熟練掌握的層次。

CSS web前端 HTML

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應(yīng)法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應(yīng)法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。