- 001_教程簡介
- 002_認識兩位先驅(qū)
- 003_計算機基礎(chǔ)
- 004_CS架構(gòu)與BS架構(gòu)
- 005_瀏覽器相關(guān)知識
- 006_網(wǎng)頁相關(guān)概念
- 007_HTML簡介
- 008_準備工作
- 009_HTML初體驗
- 010_HTML標簽
- 011_HTML標簽屬性
- 012_HTML基本結(jié)構(gòu)
- 013_安裝VSCode
- 014_安裝LiveServer插件
- 015_HTML注釋
- 016_HTML文檔聲明
- 017_HTML字符編碼
- 018_HTML設(shè)置語言
- 019_HTML標準結(jié)構(gòu)
- 020_開發(fā)者文檔
- 021_HTML排版標簽
- 022_HTML語義化標簽
- 023_塊級元素與行內(nèi)元素
- 024_常用的文本標簽
- 025_不常用的文本標簽
- 026_HTML圖片標簽
- 027_相對路徑_絕對路徑
- 028_常見圖片格式_1
- 029_常見圖片格式_2
- 030_超鏈接_跳轉(zhuǎn)頁面
- 031_超鏈接_跳轉(zhuǎn)文件
- 032_超鏈接_跳轉(zhuǎn)錨點
- 033_超鏈接_喚起指定應用
- 034_超文本的真正含義
- 035_列表
- 036_列表_注意事項
- 037_表格_基本結(jié)構(gòu)
- 038_表格_常用屬性
- 039_表格_跨行與跨列
- 040_補充幾個常用標簽
- 041_表單_基本結(jié)構(gòu)
- 042_表單_文本框與密碼框
- 043_表單_單選框與多選框
- 044_表單_隱藏域
- 045_表單_提交與重置
- 046_表單_普通按鈕
- 047_表格_文本域和下拉框
- 048_表單_禁用表單控件
- 049_表單_label標簽
- 050_表單_fieldset與legend
- 051_表單_總結(jié)
- 052_框架標簽
- 053_HTML字符實體
- 054_HTML全局屬性
- 055_meta元信息
- 056_HTML總結(jié)
- 057_CSS_簡介
- 058_CSS_行內(nèi)樣式
- 059_CSS_內(nèi)部樣式
- 060_CSS_外部樣式
- 061_CSS_樣式表優(yōu)先級
- 062_CSS_語法規(guī)范
- 063_CSS_代碼風格
- 064_CSS_通配選擇器
- 065_CSS_元素選擇器
- 066_CSS_類選擇器
- 067_CSS_ID選擇器
- 068_CSS_交集選擇器
- 069_CSS_并集選擇器
- 070_CSS_HTML元素間的關(guān)系
- 071_CSS_后代選擇器
- 072_CSS_子代選擇器
- 073_CSS_兄弟選擇器
- 074_CSS_屬性選擇器
- 075_CSS_偽類選擇器_概念
- 076_CSS_偽類選擇器_動態(tài)偽類
- 077_CSS_偽類選擇器_結(jié)構(gòu)偽類1
- 078_CSS_偽類選擇器_結(jié)構(gòu)偽類2
- 079_CSS_偽類選擇器_結(jié)構(gòu)偽類3
- 080_CSS_偽類選擇器_否定偽類
- 081_CSS_偽類選擇器_UI偽類
- 082_CSS_偽類選擇器_目標偽類
- 083_CSS_偽類選擇器_語言偽類
- 084_CSS_偽元素選擇器
- 085_CSS_選擇器優(yōu)先級_簡單聊
- 086_CSS_選擇器優(yōu)先級_詳細聊
- 087_CSS_三大特性
- 088_CSS_聊聊像素
- 089_CSS_顏色_第1種表示_顏色名
- 090_CSS_顏色_第2種表示_rgb與rgba
- 091_CSS_顏色_第3種表示_HEX與HEXA
- 092_CSS_顏色_第4種表示_HSL與HSLA
- 093_CSS_常用字體屬性_字體大小
- 094_CSS_常用字體屬性_字體族
- 095_CSS_常用字體屬性_字體風格
- 096_CSS_常用字體屬性_字體粗細
- 097_CSS_常用字體屬性_字體復合屬性
- 098_CSS_常用文本屬性_文本顏色
- 099_CSS_常用文本屬性_文本間距
- 100_CSS_常用文本屬性_文本修飾
- 101_CSS_常用文本屬性_文本縮進
- 102_CSS_常用文本屬性_文本對齊_水平
- 103_CSS_細說font-size
- 104_CSS_常用文本屬性_行高_概念
- 105_CSS_常用文本屬性_行高_注意事項
- 106_CSS_常用文本屬性_文本對齊_垂直
- 107_CSS_常用文本屬性_vertical-align
- 108_CSS_列表相關(guān)屬性
- 109_CSS_邊框相關(guān)屬性
- 110_CSS_表格獨有屬性
- 111_CSS_背景相關(guān)屬性
- 112_CSS_鼠標相關(guān)屬性
- 113_CSS_常用長度單位
- 114_CSS_元素的顯示模式
- 115_CSS_總結(jié)各元素的顯示模式
- 116_CSS_修改元素的顯示模式
- 117_CSS_盒子模型的組成部分
- 118_CSS_盒子的內(nèi)容區(qū)_content
- 119_CSS_關(guān)于默認寬度
- 120_CSS_盒子的內(nèi)邊距_padding
- 121_CSS_盒子的邊框_border
- 122_CSS_盒子的外邊距_margin
- 123_CSS_margin的注意事項
- 124_CSS_margin塌陷問題
- 125_CSS_margin合并問題
- 126_CSS_處理內(nèi)容溢出
- 127_CSS_隱藏元素的兩種方式
- 128_CSS_樣式的繼承
- 129_CSS_元素的默認樣式
- 130_CSS_布局小技巧
- 131_CSS_元素之間的空白問題
- 132_CSS_行內(nèi)塊的幽靈空白問題
- 133_CSS_浮動_簡介
- 134_CSS_元素浮動后的特點
- 135_CSS_浮動的小練習
- 136_CSS_浮動后的影響
- 137_CSS_解決浮動產(chǎn)生的影響
- 138_CSS_浮動布局練習
- 139_CSS_相對定位
- 140_CSS_絕對定位
- 141_CSS_固定定位
- 142_CSS_粘性定位
- 143_CSS_定位的層級
- 144_CSS_定位的特殊應用
- 145_CSS_布局_版心
- 146_CSS_布局_常用類名
- 147_CSS_布局_重置默認樣式
- 148_尚品匯_設(shè)計稿說明
- 149_尚品匯_頂部導航條
- 150_尚品匯_頭部
- 151_尚品匯_主導航
- 152_尚品匯_內(nèi)容區(qū)_側(cè)邊導航
- 153_尚品匯_內(nèi)容區(qū)_側(cè)邊二級菜單
- 154_尚品匯_內(nèi)容區(qū)_右側(cè)尚品快報
- 155_尚品匯_內(nèi)容區(qū)_右側(cè)圖標導航
- 156_尚品匯_秒殺
- 157_尚品匯_樓層_頂部
- 158_尚品匯_樓層_底部
- 159_尚品匯_頁腳
- 160_H5_簡介
- 161_H5_新增布局標簽
- 162_H5_新增狀態(tài)標簽
- 163_H5_新增列表標簽
- 164_H5_新增文本標簽
- 165_H5_新增表單控件屬性
- 166_H5_input新增type屬性值
- 167_H5_新增視頻標簽
- 168_H5_新增音頻標簽
- 169_H5_新增全局屬性
- 170_H5_兼容性處理
- 171_CSS3_簡介
- 172_CSS3_新增長度單位
- 173_CSS3_新增盒子屬性
- 174_CSS3_新增背景屬性
- 175_CSS3_新增邊框?qū)傩?/a>
- 176_CSS3_新增文本屬性
- 177_CSS3_新增漸變
- 178_CSS3_web字體_字體圖標
- 179_CSS3_2D變換
- 180_CSS3_3D變換
- 181_CSS3_過渡
- 182_CSS3_動畫
- 183_CSS3_多列布局
- 184_CSS3_伸縮盒模型_簡介
- 185_CSS3_伸縮盒模型_容器與項目
- 186_CSS3_伸縮盒模型_主軸方向
- 187_CSS3_伸縮盒模型_主軸換行方式
- 188_CSS3_伸縮盒模型_flex-flow
- 189_CSS3_伸縮盒模型_主軸對齊方式
- 190_CSS3_伸縮盒模型_側(cè)軸對齊
- 191_CSS3_伸縮盒模型_水平垂直居中
- 192_CSS3_伸縮盒模型_基準長度
- 193_CSS3_伸縮盒模型_伸縮性
- 194_CSS3_伸縮盒模型_flex復合屬性
- 195_CSS3_伸縮盒模型_排序與單獨對齊
- 196_CSS3_伸縮盒模型_案例練習
- 197_CSS3_響應式布局_媒體查詢
- 198_CSS3_響應式布局_常用閾值
- 199_BFC
- 200_結(jié)束語
前端入門 HTML+CSS 零基礎(chǔ)教程課程簡介
本前端入門 HTML+CSS 零基礎(chǔ)教程專為編程新手量身打造,是一套系統(tǒng)全面、循序漸進的前端開發(fā)入門課程。無論你是毫無編程經(jīng)驗的小白,還是有一定基礎(chǔ)想鞏固知識的學習者,都能通過本課程輕松掌握 HTML 和 CSS 的核心知識與實戰(zhàn)技能。
課程開篇從教程簡介和前端領(lǐng)域的兩位先驅(qū)講起,帶你走進前端開發(fā)的世界。緊接著鋪墊計算機基礎(chǔ)、CS 架構(gòu)與 BS 架構(gòu)等重要概念,讓你從底層了解網(wǎng)頁運行的技術(shù)環(huán)境。隨后圍繞瀏覽器和網(wǎng)頁相關(guān)知識展開,為學習 HTML 做好充分準備。
在 HTML 部分,課程從簡介、準備工作和初體驗入手,逐步深入講解 HTML 標簽、標簽屬性和基本結(jié)構(gòu)。詳細介紹了 VSCode 的安裝與 LiveServer 插件的使用,讓你快速搭建起高效的開發(fā)環(huán)境。還系統(tǒng)講解了 HTML 注釋、文檔聲明、字符編碼、設(shè)置語言和標準結(jié)構(gòu)等基礎(chǔ)知識點,同時引入開發(fā)者文檔的使用方法,培養(yǎng)你自主學習的能力。
排版標簽、語義化標簽、塊級元素與行內(nèi)元素等內(nèi)容的講解,讓你掌握網(wǎng)頁內(nèi)容布局的核心技巧。文本標簽、圖片標簽、超鏈接、列表、表格和表單等常用元素的講解更是細致入微,從基本結(jié)構(gòu)到常用屬性,從跨行跨列到表單控件的各種類型與功能,都進行了全面剖析,幫助你構(gòu)建豐富多樣的網(wǎng)頁內(nèi)容。
CSS 部分同樣精彩紛呈,從簡介開始,依次講解行內(nèi)樣式、內(nèi)部樣式和外部樣式,以及樣式表優(yōu)先級、語法規(guī)范和代碼風格。各種選擇器的講解由淺入深,從通配選擇器、元素選擇器到類選擇器、ID 選擇器,再到交集、并集、后代、子代等關(guān)系選擇器,以及屬性選擇器、偽類選擇器和偽元素選擇器,讓你精準掌握樣式應用的方法。
課程還深入講解了 CSS 的三大特性、顏色表示方法、常用字體和文本屬性、列表、邊框、表格、背景和鼠標相關(guān)屬性。盒子模型作為 CSS 布局的核心,課程對其組成部分、內(nèi)容區(qū)、內(nèi)邊距、邊框、外邊距等進行了細致講解,重點解決了 margin 塌陷和合并等常見問題。浮動和定位知識的講解更是讓你掌握網(wǎng)頁布局的關(guān)鍵技能,結(jié)合實際案例讓你輕松理解相對定位、絕對定位、固定定位和粘性定位的應用場景。
此外,課程還涵蓋了 H5 新增的布局標簽、狀態(tài)標簽、表單控件屬性等內(nèi)容,以及 CSS3 的新增長度單位、盒子屬性、背景屬性、邊框?qū)傩浴⑽谋緦傩浴u變、web 字體、2D 和 3D 變換、過渡、動畫、多列布局、伸縮盒模型和響應式布局等高級知識。伸縮盒模型和響應式布局的講解,讓你能夠設(shè)計出適應不同設(shè)備的現(xiàn)代化網(wǎng)頁。
課程最后通過 “尚品匯” 項目案例,將所學知識融會貫通,從頂部導航條、頭部、主導航到內(nèi)容區(qū)、秒殺、樓層和頁腳的開發(fā),讓你體驗完整的網(wǎng)頁開發(fā)流程。BFC 等高級概念的補充,進一步提升你的技術(shù)深度。
通過本課程的學習,你將從零基礎(chǔ)成長為能夠獨立開發(fā)靜態(tài)網(wǎng)頁的前端愛好者,為后續(xù)學習 JavaScript 等高級前端技術(shù)打下堅實基礎(chǔ),開啟你的前端開發(fā)職業(yè)生涯。
