基本介紹
- 中文名：初識HTML(5)+CSS(3)-2020升級版
- 授課教師：丶五月的夏天
- 類別：慕課
- 課時時長：9小時18分
課程簡介,課程大綱,
課程簡介
該課程講述了如何學習HTML(5)、CSS(3)樣式基礎知識，可以利用HTML(5)、CSS(3)樣式技術製作出簡單頁面。
課程大綱
第1章 HTML5介紹
本章節主要講解html5和css3樣式的關係，以及html5標籤語法，文檔結構,最後講解了在html5中的注釋代碼的作用。
1-1 代碼初體驗，製作我的第一個網頁
1-2 佛靠金裝，人靠衣裝 - html和css的關係
1-3 使用說明書 - 標籤的語法
1-4 聽說有新版本了? - html5文檔結構
1-5 小哥,做頭么? - 認識head標籤
1-6 你就是饞人家的身子 - 認識body標籤
1-7 解釋不等於掩飾- html檔案注釋
第2章 HTML5語義化標籤
本章節主要講解html5中常用語義化標籤，知道哪部分使用什麼標籤。
2-1 語義化，讓你的網頁更好的被搜尋引擎理解
2-2 開始我們的第一段對話吧- 段落標籤
2-3 diy一個標籤吧 - 使用<span>標籤自定義文字樣式
2-4 做個標題黨 - 使用<hx>標籤為網頁增加標題
2-5 我還想diy點樣式- 使用<div>標籤自定義塊
2-6 聽說開頭寫的好就能一鍵三連 - <header>標籤定義頭部區域
2-7 結尾神轉折 - <footer>標籤定義底部區域
2-8 正文才是重點喔 - <section>定義區段
2-9 再加個側邊選單吧 - <aside>定義側邊欄區域
第3章 HTML5效果標籤
本章主要講解效果標籤，為網頁可以添加換行，空格，水平線等效果。
3-1 寫代碼都不換行么? - 使用<br>標籤實現換行效果
3-2 再加點空格呢 - 使用特殊字元 實現空格標籤
3-3 再來一個水平分割線 - 使用<hr>標籤實現水平線標籤
第4章 HTML5列表標籤
本章主要講解兩種列表標籤效果，主要用於列表項。
4-1 添加新聞信息列表 - 使用<ul><li>標籤實現無序列表
4-2 添加圖書銷售排行榜- 使用<ol><li>標籤實現有序列表
第5章 HTML5圖片，連結及表格標籤
本章節主要講解圖片，連結及table標籤使用，學完本章，我們可以在網頁上展示一些圖片及表格數據，使網頁上的信息更加豐富
5-1 不發一張自拍么? - 使用<img>標籤為網頁添加圖片
5-2 百度一下,你就知道 - 使用<a>標籤為網頁添加超連結
5-3 開個新視窗 - 在新建瀏覽器視窗中打開連結
5-4 聽說你要制定學習計畫了-使用table家庭為網頁添加表格
5-5 使用thead、tbody、tfoot定義表格
第6章 HTML5表單標籤，與瀏覽者互動
我們每天都在網上衝浪，如果沒有表單，人們就無法輸入自己的個人信息來買東西，本章節主要從表單的作用、表單元素講起，學習完本章，可以制出簡單的用戶登入、註冊頁面。
6-1 使用表單標籤，與用戶互動 - 使用<form>創建表單
6-2 先來填用戶名和密碼 - 文本輸入框、密碼輸入框
6-3 給點提示唄 - placeholder屬性的使用
6-4 在家呆多少天啦? - 數字輸入框
6-5 平時都逛論壇么? - 網址輸入框
6-6 留個信箱,方便通知訊息 - 信箱輸入框
6-7 留下您寶貴的意見 - 使用<textarea>標籤創建文本域
6-8 使用label為input標籤穿上衣服
6-9 填填性別和興趣愛好 - 單選框、複選框，讓用戶選擇
6-10 使用select、option標籤創建下拉選單
6-11 填完就可以提交咯 - 提交按鈕
6-12 使用重置按鈕，重置表單信息
第7章 CSS3介紹，為網頁添加樣式
CSS3是一個很神奇的東西，設計者可以通過修改樣式表的定義而使網頁呈現出完全不同的外觀。本章就開始帶領大家來學習CSS3樣式：先來認識CSS3樣式、了解CSS3樣式的優勢、CSS3代碼語法，CSS3注釋代碼和CSS3連結方式以及優先權。
7-1 給html打扮一下 - 認識CSS樣式
7-2 為什麼是css呢? - CSS樣式的優勢
7-3 瞧瞧css的廬山真面目吧 - CSS代碼語法
7-4 聽我再解釋解釋 - CSS注釋代碼
7-5 既然那么好,那就引入css吧 - 內聯式css樣式
7-6 換個地方吧,行內太擠了 - 嵌入式css樣式
7-7 還是把html和css分開吧 - 外部式css樣式
7-8 總有個先來後到吧 - 三種連結方式的優先權
第8章 CSS3選擇器
本章主要介紹CSS的選擇器，通過學習本章，我們能對元素進行樣式的設定
8-1 css3的遊戲規則 - 什麼是選擇器？
8-2 選一個標籤 - 標籤選擇器
8-3 再選一個類 - 類選擇器
8-4 取個唯一標識 - ID選擇器
8-5 類和ID選擇器的區別
8-6 撿了一個兒子 - 子選擇器
8-7 這么快就當爺爺了? - 後代選擇器
8-8 我全都要 - 通用選擇器
8-9 偽裝者 - 偽類選擇器
8-10 給選擇器分個組 - 分組選擇器
第9章 CSS3的繼承，優先權和重要性
CSS中有一些概念是需要深刻理解的，此節開始將介紹CSS中的一些非常重要的概念包括CSS的繼承，優先權和重要性
9-1 繼承者 - 樣式的繼承
9-2 別插隊啊 - 選擇器的優先權
9-3 權值計算-特殊性
9-4 為所欲為 - 選擇器最高層級!important
第10章 CSS3字型樣式
本章將詳細介紹網頁排版中字型要素，幫助讀者把CSS3技術與網頁字型緊密結合在一起，實現網頁實用性與欣賞性相結合，實現出設計效果。
10-1 換個好看的字型 - 使用font-family設定字型系列
10-2 能不能把字寫大一點啊 - 使用font-size設定字型大小
10-3 再加粗一點 - 使用font-weight設定字型粗細
10-4 再加個樣式 - 使用font-style設定字型樣式
10-5 上個色 - 使用color設定字型顏色
10-6 偷個懶 - font樣式的簡寫方式
第11章 CSS3文本樣式
本章節主要介紹文本中常用的下劃線，縮進，行高，文本對齊方式，以及透明色，長度值等設定，讓頁面中文本樣式看起來更美觀一些。
11-1 給文本裝飾一下 - 使用text-decoration添加文本修飾
11-2 開頭空兩格喔 - 使用text-indent為文本添加首行縮進
11-3 太擠啦,撐開一點 - 使用line-height為文字設定行間間距
11-4 男女授受不親 - 使用letter/word-spacing增加或減少字元間的空白
11-5 換個排列方式 - 使用text-align設定文本對齊方式
11-6 長度值
第12章 CSS3盒模型
盒模型是CSS布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。本章將圍繞盒模型的概念、結構、尺寸等基礎知識展開研究，以便為後面的學習和日後網頁設計奠定紮實的基礎。
12-1 給元素分個類 - 元素分類
12-2 我要獨占一行 - 塊級元素
12-3 我要和你站一起 - 內聯元素
12-4 我還要站個大位置 - 內聯塊狀元素
12-5 隱身術 - none不占據位置
12-6 變個盒子-什麼是盒模型（視頻） (02:14)
12-7 長胖長高點--寬度和高度
12-8 設定個美美噠的顏色-背景色
12-9 畫個圈圈 - 使用border為盒子添加框線（一）
12-10 我想腳下踩條線 - 使用border為盒子添加框線（二）
12-11 加個圓角 - 使用border-radius設定圓角
12-12 宰相肚裡能撐船 - 使用padding為盒子設定內邊距（填充）
12-13 距離產生美 - 使用margin為盒子設定外邊距（邊界）
第13章 CSS3布局模型
可以用所需的知識進行真正設計了，學習完本章節可以運用所學習的知識實現網頁的多列布局，本章將圍繞流動模型、浮動模型、層布局模型等布局技術展開研究，以便為後面製作複雜的網頁打下基礎。
13-1 CSS3的布局 - css布局模型
13-2 排隊顯示-流動模型（一）
13-3 排隊顯示-流動模型（二）
13-4 起飛咯 - 浮動模型
13-5 什麼是層模型？
13-6 萬事無絕對 -層模型之絕對定位
13-7 相對於自己的位置-層模型之相對定位
13-8 我就在那不動了-層模型之固定定位
13-9 Relative與Absolute組合使用
第14章 flex彈性盒模型
本章講解flex布局的設定以及常用相關屬性，能夠更好，更快速的實現網頁布局。
14-1 彈性盒模型 - 彈性盒模型之flex屬性
14-2 操作一下橫軸- 使用justify-content屬性設定橫軸排列方式
14-3 操作一下豎軸- 使用align-items屬性設定縱軸排列方式
14-4 我想占大頭 - 給子元素設定flex占比
第15章 css樣式設定小技巧
本章節對在日常前端開發中常用到css樣式設定小技巧進行了講解。
15-1 水平居中設定-行內元素
15-2 水平居中設定-定寬塊狀元素
15-3 面試常考題之已知寬高實現盒子水平垂直居中開始學習
15-4 面試常考題之寬高不定實現盒子水平垂直居中
