相信大家應該都聽過說：Java、Asp.net、Php、Python、C、C++、C#、網站前端，網頁設計等這些技術，但是可能你不知道，這些技術都需要掌握兩個基礎的技術—html+css。

接下來我將帶領大家一起，在一周的時間內，輕松搞定這兩個技術。下面來看一下一周的詳細內容。

（一）html入門基礎

認識什么是HTML、 標記的語法、 常用的HTML標記的應用、網頁基本骨架標記、meta元標記、列表標記、表格的應用、超鏈接標記等

（二）初識CSS

什么是CSS、CSS如何使用與書寫、文字三屬性、實體化屬性、新標簽、顯示模式、選擇器、選擇器權重等

（三）CSS進階之常用屬性

復合選擇器、注釋、border、css屬性層疊與繼承、background、文字修飾屬性與行高、偽類等

（四）CSS進階之盒子模型與文檔流

盒子模型、盒子準備、屬性整理、標準流文檔流、浮動、布局、定位等

（五）CSS進階之切圖

切圖、滑動門、圖片精靈、banner圖制作、導航等

（六）CSS進階之兼容性與濾鏡

常見兼容性問題及解決、濾鏡效果等

（七）常見布局及定位使用

等高布局、圣杯布局、固定定位、右下角的彈窗廣告、對聯廣告、導航跟隨、返回頂部等

下面我們開始第一天的學習，~follow me~

1.基礎知識介紹

前端工具（vscode/sublime/EditPlus/Dreamweaver/Photoshop/Fireworks等）

目前的話小花喜歡用下面這些，僅供參考哦：

編碼的話用EditPlus和HBuilder，vscode

切圖當然要ps啦,其他協作工具如藍湖也是很贊的

最最頭痛的ie兼容性測試就IETester+install-debugbar哦

瀏覽器 谷歌 火狐 ie 360 Opera safari

代碼的作用：

將之前設計過的圖片用代碼實現出一個具有實際功能的頁面（html頁面），供所有互聯網用戶正常訪問

瀏覽網頁過程機制：

本地瀏覽器向遠程服務器發送請求數據，服務器返回數據給瀏覽器的過程

打開瀏覽器菜單欄 --工具 --Internet選項

找到常規–瀏覽歷史記錄–設置–查看文件夾–彈出的文件夾即為瀏覽器的緩存文件夾

web前端技術：

Web前端技術指的并不是某一項技術，是一系列技術的集合，主要包括：

1、結構標準 – html – 作用：頁面結構的搭建（骨骼的搭建）

2、樣式標準 – css – 作用：頁面樣式的搭建，外觀、美化作用

3、行為標準 – JavaScript – 作用：負責頁面的行為、動作

可以理解為做前端好比蓋房子~ html充當了房子結構是房子的基礎。 css呢，就好比房子的裝修，給房子改變風格，樣式的就是css。 javascript呢，好比房子功能性需求

總結：web前端標準作用：制作網頁

html定義

超文本標記語言 html不是編程語言，是一種描述性標記語言 eg: color,size，學習html學習的是標簽

2. html標記語法基礎

①雙標記<開始標記>內容

有屬性值：

無屬性值：

②單標記：<標記 />

換行

分隔符

③標記的屬性：<標記 屬性1=“參數1” 屬性2=“參數2”>內容

標簽的屬性書寫遵循html鍵值對k=”v”的格式，k是屬性名稱，v是屬性值。例如：bgcolor=”red”

說明:

A．標記與屬性、屬性之間以空格分隔

B．屬性不分先后順序，且屬性不是必須的

C．建議所有標記采用小寫

Html的文檔結構

正文

正文

body詳解

body屬性：

正文

tips:

背景色和背景圖允許同時存在，當同時存在的時候，永遠都是背景圖在上，背景色在下

標題詳解

標題 (其中x可取值1~6，表示標題標簽有1~6個級別):

X取值1~6 hX內的文本會自動加粗顯示（h1最大）

hX針對對象是段落，而font針對對象是任意文本

常用屬性：

①color ="" 顏色

②size="" 字體大小

③align="" 對齊方式，屬性值有：left/center/right

注意:

標題文本