簡介：你是否也有過這樣的“煩惱”：
* 對前端技術感興趣不知道從何學起？
* 想從事前端工作卻沒有基礎？
想要成為一名合格的前端工作者，HTML與CSS是必不可少的技能，但是對于新手工程師來講，這部分也是最難掌握的。
本門課程專為零基礎學員設計，囊括了目前使用比較廣泛的HTML+CSS基礎知識，以知識點結合小案例的形式書寫代碼，學與練結合，幫助學員順利入門。
課程從最基本的概念講起，逐步深入，帶你學習HTML(5)和CSS(3)樣式基礎知識，了解各種常用標簽的意義以及基本用法，講解CSS(3)樣式代碼添加，為后續(xù)更深入的學習打好基礎。
通過本門課程的學習，你可以基本掌握前端必備的HTML+CSS樣式基礎知識，并可以利用這些知識實現(xiàn)靜態(tài)頁面。
第1章 HTML5介紹
本章節(jié)主要講解html5和css3樣式的關系，以及html5標簽語法，文檔結構,最后講解了在html5中的注釋代碼的作用。
第2章 HTML5語義化標簽
本章節(jié)主要講解html5中常用語義化標簽，知道哪部分使用什么標簽。
- 編程： 2-1 語義化，讓你的網(wǎng)頁更好的被搜索引擎理解
- 編程： 2-2 開始我們的第一段對話吧- 段落標簽
- 編程： 2-3 diy一個標簽吧 - 使用<span>標簽自定義文字樣式
- 編程： 2-4 做個標題黨 - 使用<hx>標簽為網(wǎng)頁增加標題
- 編程： 2-5 我還想diy點樣式- 使用<div>標簽自定義塊
- 編程： 2-6 聽說開頭寫的好就能一鍵三連 - <header>標簽定義頭部區(qū)域
- 編程： 2-7 結尾神轉(zhuǎn)折 - <footer>標簽定義底部區(qū)域
- 編程： 2-8 正文才是重點喔 - <section>定義區(qū)段
- 編程： 2-9 再加個側(cè)邊菜單吧 - <aside>定義側(cè)邊欄區(qū)域
第3章 HTML5效果標簽
本章主要講解效果標簽，為網(wǎng)頁可以添加換行，空格，水平線等效果。
第4章 HTML5列表標簽
本章主要講解兩種列表標簽效果，主要用于列表項。
第5章 HTML5圖片，鏈接及表格標簽
本章節(jié)主要講解圖片，鏈接及table標簽使用，學完本章，我們可以在網(wǎng)頁上展示一些圖片及表格數(shù)據(jù)，使網(wǎng)頁上的信息更加豐富
第6章 HTML5表單標簽，與瀏覽者交互
我們每天都在網(wǎng)上沖浪，如果沒有表單，人們就無法輸入自己的個人信息來買東西，本章節(jié)主要從表單的作用、表單元素講起，學習完本章，可以制出簡單的用戶登陸、注冊頁面。
- 編程： 6-1 使用表單標簽，與用戶交互 - 使用<form>創(chuàng)建表單
- 編程： 6-2 先來填用戶名和密碼 - 文本輸入框、密碼輸入框
- 編程： 6-3 給點提示唄 - placeholder屬性的使用
- 編程： 6-4 在家呆多少天啦? - 數(shù)字輸入框
- 編程： 6-5 平時都逛論壇么? - 網(wǎng)址輸入框
- 編程： 6-6 留個郵箱,方便通知消息 - 郵箱輸入框
- 編程： 6-7 留下您寶貴的意見 - 使用<textarea>標簽創(chuàng)建文本域
- 編程： 6-8 使用label為input標簽穿上衣服
- 編程： 6-9 填填性別和興趣愛好 - 單選框、復選框，讓用戶選擇
- 編程： 6-10 使用select、option標簽創(chuàng)建下拉菜單
- 編程： 6-11 填完就可以提交咯 - 提交按鈕
- 編程： 6-12 使用重置按鈕，重置表單信息
第7章 CSS3介紹，為網(wǎng)頁添加樣式
CSS3是一個很神奇的東西，設計者可以通過修改樣式表的定義而使網(wǎng)頁呈現(xiàn)出完全不同的外觀。本章就開始帶領大家來學習CSS3樣式：先來認識CSS3樣式、了解CSS3樣式的優(yōu)勢、CSS3代碼語法，CSS3注釋代碼和CSS3鏈接方式以及優(yōu)先級。
第8章 CSS3選擇器
本章主要介紹CSS的選擇器，通過學習本章，我們能對元素進行樣式的設置
第9章 CSS3的繼承，優(yōu)先級和重要性
CSS中有一些概念是需要深刻理解的，此節(jié)開始將介紹CSS中的一些非常重要的概念包括CSS的繼承，優(yōu)先級和重要性
第10章 CSS3字體樣式
本章將詳細介紹網(wǎng)頁排版中字體要素，幫助讀者把CSS3技術與網(wǎng)頁字體緊密結合在一起，實現(xiàn)網(wǎng)頁實用性與欣賞性相結合，實現(xiàn)出設計效果。
第11章 CSS3文本樣式
本章節(jié)主要介紹文本中常用的下劃線，縮進，行高，文本對齊方式，以及透明色，長度值等設置，讓頁面中文本樣式看起來更美觀一些。
第12章 CSS3盒模型
盒模型是CSS布局的基石，它規(guī)定了網(wǎng)頁元素如何顯示以及元素間相互關系。本章將圍繞盒模型的概念、結構、尺寸等基礎知識展開研究，以便為后面的學習和日后網(wǎng)頁設計奠定扎實的基礎。
- 編程： 12-1 給元素分個類 - 元素分類
- 編程： 12-2 我要獨占一行 - 塊級元素
- 編程： 12-3 我要和你站一起 - 內(nèi)聯(lián)元素
- 編程： 12-4 我還要站個大位置 - 內(nèi)聯(lián)塊狀元素
- 編程： 12-5 隱身術 - none不占據(jù)位置
- 視頻： 12-6 變個盒子-什么是盒模型（視頻） (02:14)
- 編程： 12-7 長胖長高點--寬度和高度
- 編程： 12-8 設置個美美噠的顏色-背景色
- 編程： 12-9 畫個圈圈 - 使用border為盒子添加邊框（一）
- 編程： 12-10 我想腳下踩條線 - 使用border為盒子添加邊框（二）
- 編程： 12-11 加個圓角 - 使用border-radius設置圓角
- 編程： 12-12 宰相肚里能撐船 - 使用padding為盒子設置內(nèi)邊距（填充）
- 編程： 12-13 距離產(chǎn)生美 - 使用margin為盒子設置外邊距（邊界）
第13章 CSS3布局模型
現(xiàn)在可以用所需的知識進行真正設計了，學習完本章節(jié)可以運用所學習的知識實現(xiàn)網(wǎng)頁的多列布局，本章將圍繞流動模型、浮動模型、層布局模型等布局技術展開研究，以便為后面制作復雜的網(wǎng)頁打下基礎。
第14章 flex彈性盒模型
本章講解flex布局的設置以及常用相關屬性，能夠更好，更快速的實現(xiàn)網(wǎng)頁布局。
第15章 css樣式設置小技巧
本章節(jié)對在日常前端開發(fā)中常用到css樣式設置小技巧進行了講解。