1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
2. CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或爲標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之爲表現。
3. JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這麼理解，有動畫的，有交互的一般都是用JavaScript來實現的。
Html和CSS的關係 Hello World!
上述代碼中設置字體大小，和顏色以及文字位置就是CSS的體現
下面解釋更多標籤的含義
這是主題 勇氣 三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。 到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班裏很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說着："我來，我來。"我環顧了四周，就我沒有舉手。
下面是效果圖
稱爲根標籤，所有的網頁標籤都在中
標籤用於定義文檔的頭部，它是所有頭部元素的容器。頭部元素有
、<div cdata_tag="script" cdata_data="%E3%80%81%E3%80%81%E7%AD%89%E6%A0%87%E7%AD%BE"><div cdata_tag="style" cdata_data="%E3%80%81%E3%80%81%E7%AD%89%E6%A0%87%E7%AD%BE"><link/>、<meta/>等標籤</div></div>和標籤之間的內容是網頁的主要內容
就是標題標籤，
是段落標籤，
就是放置圖片
註釋的方法是：
有了段落又有了標題，如果想在一段話中強調某幾個文字，可以用XXX或者XXX標籤
XXX可以改變文本樣式，如顏色
回車換行
代表一個空格，注意不能漏分號
分隔線
代碼
加入大量代碼
列表信息 精彩少年 美麗突然出現 觸動心靈的旋律
自帶序號的列表 信息 信息 ......
在網頁製作過程中，可以把一些獨立的邏輯部分劃分出來，放在一個
標籤中，這個
標籤的作用就相當於一個容器，可以用id屬性來爲
提供唯一的名稱，如：
熱門課程排行榜
前端開發面試心法
零基礎學習html
javascript全攻略
web前端開發導學課程
網頁專業名詞大掃盲
網站職位定位指南
爲您解密Yahoo網站製作流程
創建表格的四個元素：table、tbody、tr、th、td.
加上上面的代碼就可以添加黑色邊框
與用戶交互：
用戶名: 密碼:
加入文本框：
個人簡介：
在這裏輸入內容...
單選框/複選框：
radio/checkbox
性別:
男
女
下拉列表框：（在里加上就是多選）
愛好:
看書
旅遊
運動
購物
重置：
從上面的代碼中，我們看到了很多label標籤
label標籤不會向用戶呈現任何特殊效果，它的作用是爲鼠標用戶改進了可用性。如果你在 label 標籤內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上（就自動選中和該label標籤相關連的表單控件上）
CSS全稱爲“層疊樣式表 (Cascading Style Sheets)”，它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等
如：
span{
color:blue;
}
慕課網，超酷的互聯網、IT技術免費學習平臺，創新的網絡一站式學習、實踐體驗；服務及時貼心，內容專業、有趣易學。專注服務互聯網工程師快速成爲技術高手！
CSS中，註釋用/* .... */
CSS樣式代碼插入的形式來看基本分爲以下3種：內聯式、嵌入式和外部式三種。
內聯式：
這裏文字是紅色。
嵌入式：
外部式：
優先級：內聯式>嵌入式>外部式
ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次
可以使用類選擇器詞列表方法爲一個元素同時設置多個樣式
正確代碼：
.stress{
color:red;
}
.bigsize{
font-size:25px;
}到了三年級下學期時，我們班上了一節公開課...錯誤代碼：
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}到了三年級下學期時，我們班上了一節公開課...僞類選擇符：它允許給html不存在的標籤設置樣式，比如說我們給html中一個標籤元素的鼠標滑過的狀態來設置字體顏色：
a:hover{color:red;}CSS的某些樣式是具有繼承性的
p{color:red;}三年級時，我還是一個膽小如鼠的小女孩。可見右側結果窗口中p中的文本與span中的文本都設置爲了紅色。但注意有一些css樣式是不具有繼承性的。如border:1px solid red;
p{border:1px solid red;}三年級時，我還是一個膽小如鼠的小女孩。在上面例子中它代碼的作用只是給p標籤設置了邊框爲1像素、紅色、實心邊框線，而對於子元素span是沒用起到作用的。
有些特殊情況需要爲某些樣式設置具有最高權限，這時可以使用!important來解決
可以使用css樣式爲網頁中的文字設置字體、字號、顏色等樣式屬性。下面我們來看一個例子，下面代碼實現：爲網頁中的文字設置字體爲宋體。
body{font-family:"宋體";}將字體設置爲斜體：
p a{font-style:italic;}設置下劃線：
p a{text-decoration:underline;}設置刪除線：
.oldPrice{text-decoration:line-through;}段落前面空兩個空格：
p{text-indent:2em;}行間距（行高）：
p{line-height:2em;}文字間隔：h1{letter-spacing:20px;}
英文字間隔：h1{word-spacing:20px;}
設置居中、居左、居右：
div{text-align:center;}、div{text-align:left;}、div{text-align:right;}
在CSS中，html中的標籤元素大體被分爲三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。
常用的塊狀元素有：
、
、
...
、
、
、
、、
、
常用的內聯元素有：
常用的內聯塊狀元素有：
、
在html中
、
、
、、、
就是塊級元素。設置display:block就是將元素顯示爲塊級元素。如下代碼是將內聯元素a轉換爲塊狀元素，從而使a元素具有塊狀元素特點：
a{display:block;}塊級元素特點：
每個塊級元素都從新的一行開始，並且其後的元素也另起一行。
元素的高度、寬度、行高以及頂點和底邊距都可設置。
元素寬度在不設置的情況下，是它本身父容器的100%，除非設定一個寬度。
將塊狀元素div轉換爲內聯元素，從而使div元素具有內聯元素特點：div{display:inline;}
內聯元素特點：
和其他元素都在一行上；
元素的高度，寬度以及頂部和底部邊距不可設置；
元素的寬度就是它包含的文字或圖片的寬度，不可改變。
內聯塊狀元素（inline-block）就是同是具備內聯元素、塊狀元素的特點 ，代碼：display:inline-block
盒子模型的邊框就是圍繞着內容及不敗的線，這條線你可以設置它的粗細、樣式和顏色（邊框三個屬性）。
如：div{border:2px solid red;}
上面是border代碼的縮寫形式，可以分開寫：
div{border-width:2px;
border-style:solid;
border-color:red;
}
border-style（邊框樣式）常見樣式有：dashed（虛線）、dotted（電線）、solid（實線）
border-color（邊框顏色）中的顏色可設置爲十六進制顏色，如：border-color：#888（井號不能漏）
元素內容與邊框之間是可以設置距離的，稱之爲“填充”。填充也可分爲上、右、下、左(順時針)。如下代碼：
div{padding:20px 10px 15px 30px;}
順序一定不要搞混。可以分開寫上面代碼：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右、下、左的填充都爲10px;可以這麼寫
div{padding:10px;}
如果上下填充一樣爲10px，左右一樣爲20px，可以這麼寫：
div{padding:10px 20px;}
元素與其它元素之間的距離可以使用邊界（margin）來設置。邊界也是可分爲上、右、下、左。如下代碼：
div{margin:20px 10px 15px 30px;}
也可以分開寫：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上右下左的邊界都爲10px;可以這麼寫：
div{ margin:10px;}
如果上下邊界一樣爲10px，左右一樣爲20px，可以這麼寫：
div{ margin:10px 20px;}
總結一下：padding和margin的區別，padding在邊框裏，margin在邊框外。
CSS包含3種基本的佈局模型，用英文概括爲：Flow(流動模型)、Layer(層模型)、Float(浮動模型)
層模型有三種形式：
1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)
fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的座標是視圖（屏幕內的網頁窗口）本身。由於視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed屬性功能相同。以下代碼可以實現相對於瀏覽器視圖向右移動100px，向下移動50px。並且拖動滾動條時位置固定不變。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}