Web前端基礎應用

1．HTML基礎 
在網絡如此發達的今天，你們的生活、學習和工做基本上都離不開網絡。你們常常瀏覽的新聞頁面、微博和微信等各類從網上得到信息的途徑，不管是PC終端，仍是移動客戶端，基本上都是以Web爲基礎來呈現的，所以Web頁面呈現信息已成爲各類信息共享和發佈的主要形式。而HTML（Hyper Text Markup Language，超文本標記語言，在有些書籍中也翻譯爲超文本標籤語言）則是建立Web頁面的基礎。本書將從HTML文件的基本結構是什麼，到使用HTML標籤製做簡單的網頁，一直到最後使用DIV+CSS製做精美的商業網站，以這樣一個按部就班的講解過程，幫助你們完成不會→會→熟練→精通網頁製做的蛻變。學習完本門課程後，你們都可以掌握網頁製做的精髓，快速而熟練地製做網頁。 本章將講解網頁製做中的基礎內容，給你們打下一個牢固的基礎，即本章的重點內容是HTML文件的基本結構和W3C標準，以及製做網頁經常使用的基本標籤。 
2．列表、表格與框架 
列表在網頁製做中佔據着重要的位置，許多精美、漂亮的網頁中都使用了列表。本章將向你們介紹列表的概念及相關的使用方法，經過練習掌握列表應用的技巧，從而可 以製做出精美的網頁。同時，在製做網頁時，表格是一種不可或缺的數據展現工具，使用表格能夠靈活地實現數據展現，表格在不少頁面中還發揮着頁面排版的做用。對於頁面的排版和設計，框架也是網頁製做過程當中一種廣泛採用的方式，使用框架能夠極大地提升頁面的複用程度，減小重複開發，所以掌握框架技術也是網頁製做人員應該具有的基本技能。 

3．表單 
表單是實現用戶與網頁之間信息交互的基礎，經過在網頁中添加表單能夠實現諸如會員註冊、用戶登陸、提交資料等交互功能。本章將主要講解如何在網頁中製做表單，並使用表單元素建立表單。爲了可以提供對當前互聯網搜索引擎的支持，還講解如何製做符合語義化規範要求的表單。 
4．初識CSS 
本章將介紹爲何使用CSS、CSS基本語法、CSS的選擇器，以及如何在網頁中應用CSS樣式，最後講解CSS複合選擇器和CSS的繼承特性。重點是掌握CSS基本語法、它的3種基本選擇器，以及在HTML頁面添加CSS的方式。 
5．CSS美化網頁元素 
本章從基礎的文字樣式設置開始，詳細講解使用CSS設置文字的各類效果，文字與圖片的混排效果，試用CSS設置超連接各類方式，最後講解網頁中背景顏色、背景圖片的各類設置方法和列表樣式的設置方法。 經過本章的學習，能夠對網頁的文本、圖片、列表、超連接設置各類各樣的效果，使網頁看起來美觀大方、賞心悅目。  
6．盒子模式 
會用到盒子模型的知識。因此掌握了盒子模型的屬性及用法，才能真正地控制好頁面中的各個元素。 本章主要介紹盒子模型的基本概念，盒子模型的邊框、內邊距和外邊距，以及它們在網頁中的實際應用，最後介紹標準文檔流和display屬性在網頁中的用法。相信學完本章之後，你們在網頁製做的水平上會有一個很大的提高。 
7．浮動 
使用DIV+CSS進行網頁佈局其實是使用CSS定位、排版網頁元素，這是一種很新的排版理念，徹底有別於傳統的排版習慣，它首先對<div>標籤進行分類，而後使用CSS對各個<div>進行CSS定位，最後在各個<div>中編輯頁面內容，這樣就實現了表現與內容分離，在後期維護CSS十分容易，那麼如何使用CSS定位網頁元素呢？ 這就是本章重點要講解的內容——浮動，使用浮動定位網頁元素，而且根據網頁佈局須要對浮動進行清除或處理溢出內容，所以本章主要學習的內容有3點。  
(1)使用float屬性定位網頁元素。 (2)使用clear屬性清除浮動。  (3)使用overflow屬性進行溢出處理。 
8．定位網頁元素 
在前面的章節中講解了浮動的概念，以及使用浮動佈局網頁、定位網頁元素，本章將要講解網頁製做中另外一個重要屬性position，介紹使用position定位網頁元素，以及設置元素堆疊順序的z-index屬性。 經過本章的學習，將可以完成網頁中更爲複雜的佈局和元素定位。本章主要學習的內容有如下兩點。 

(1) 使用position屬性定位網頁元素。  (2) 使用z-index屬性設置元素的堆疊順序。 
9．指導學習：課程總複習 
本章將進行復習總結，把前面章節中學習過的知識進行綜合運用，經過製做開心網遊戲頁面，使你們在鞏固HTML標籤、CSS知識的同時，對CSS綜合運用的能力也有一個大幅度的提升。 
10．項目案例：製做V+網站 
到本章爲止，這門課程已接近尾聲。經過前面章節的學習和上機訓練，相信你們已經能夠遊刃有餘地使用DIV+CSS佈局並製做較爲複雜的網頁了。 爲了使你們可以更好地練習使用CSS佈局、美化網頁，熟練、快速地製做網頁，本次課讓你們製做凡客誠品旗下「V+」網站，綜合運用學習過的知識，鞏固使用HTML編輯網頁，使用CSS佈局並美化網頁，牢固掌握學習過的知識和技能點。