1.HTML：Hpyer Text Markup Langage
Hpyer Text：超文本語言（文字等限，圖片，鏈接，音頻代态，視頻等）
區(qū)分：普通文本——Word text（文字，表格疹吃，圖片）
Markup：標(biāo)簽
<標(biāo)簽 屬性=“值”></標(biāo)簽>
一個(gè)標(biāo)簽可以有多個(gè)屬性蹦疑，一個(gè)屬性可以有多個(gè)值，屬性和屬性之間萨驶，值和值之間用空格隔開
Langage：語言
HTML是用各種標(biāo)簽將超文本內(nèi)容包起來歉摧，然后按照順序來寫
2.文檔流順序：將瀏覽器窗口自上而下，分成一行一行的。每一行從左到右排列元素
將瀏覽器窗口自上而下叁温，分成一行一行再悼，每一行從左到右排列元素，就叫文檔流順序
3.HTML結(jié)構(gòu)標(biāo)簽
HTML：總標(biāo)簽券盅，告訴瀏覽器帮哈，這是一個(gè)HTML的文檔，一個(gè)頁面只能有一個(gè)
head：頭部標(biāo)簽锰镀，包含文檔的相關(guān)信息娘侍，在瀏覽器窗口不顯示，一個(gè)頁面只能有一個(gè)
body：身體標(biāo)簽泳炉，包含所有超文本內(nèi)容憾筏，在瀏覽器的窗口顯示，一個(gè)頁面只能有一個(gè)
meta：提供頁面的相關(guān)信息花鹅，一個(gè)頁面可以有多個(gè)氧腰。<meta/>閉合方式特殊
title：描述頁面相關(guān)內(nèi)容，一個(gè)頁面只能有一個(gè)
刨肃！DOCTYPE：聲明標(biāo)簽古拴，告訴瀏覽器該文檔使用的規(guī)范符號(hào)W3C規(guī)范，沒有結(jié)束標(biāo)簽真友，頁不寫入HTML內(nèi)部
4.W3C規(guī)范：
（1）標(biāo)簽字母必須要小寫
（2）有開始標(biāo)簽就要有結(jié)束標(biāo)簽黄痪，標(biāo)簽的閉合方式有兩種。
<標(biāo)簽></標(biāo)簽>
<標(biāo)簽/>
(3)標(biāo)簽的值一定要用雙引號(hào)盔然，如{<標(biāo)簽 屬性="值"></標(biāo)簽>}
（4）出現(xiàn)的所有符號(hào)必須是英文符號(hào)
（5）標(biāo)簽+內(nèi)容=元素
5.三種CSS樣式：
CSS（cascading style sheets）層疊樣式表 ? ?
作用：用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式
（1）內(nèi)聯(lián)式CSS樣式：
<p style="color:red; font-size:12px">這里的文字是紅色的</p>
（2）嵌入式css樣式
嵌入式CSS樣式必須寫在<style></style>之間桅打。
（3）外部式CSS樣式（.css為擴(kuò)展名）
外部式CSS寫在<head>內(nèi)
使用<link>標(biāo)簽將CSS樣式文件連接到HTML文件內(nèi)
<link herf=" ? .css" rel="stylesheet" type="text/css"/>
CSS樣式遵循一個(gè)重要的原則——就近原則（但還需判斷權(quán)值的大姓∠邸）
6.類選擇器
.類選擇器名稱{CSS樣式代碼尾膊；}
eg：
<span>膽小如鼠</span>
<span class="stress">膽小如鼠</stress>
.stress{color:red;}
7.ID選擇器
ID選擇符的前面是“#”號(hào)，而不是類名稱前的“.”
8.類（.）和ID（#）選擇器的區(qū)別：
（1）ID選擇器只能在文檔中使用一次禀苦，類選擇器可以使用多次
（2）可使用類選擇器次列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式站绪。ID選擇器不可以遭铺。
eg：
.stress{color:red;}
.size{font-size:25px;}
<p>到了<span class="stress size">三年級(jí)</span>下學(xué)期。崇众。掂僵。</p>
上面的代碼的作用是為“三年級(jí)”三個(gè)字設(shè)置文本顏色為紅色并且字號(hào)為25px
9.子選擇器
即大于符號(hào)">"，用于選擇指定標(biāo)簽元素的第一代子元素
eg：.aa > li {border:1px solid red;}
類為aa的li元素加入1px紅色實(shí)線邊框
10.后代選擇器
.first span {color:red;}
<p class="first">.......<span>膽小如鼠</span></p>
即膽小如鼠被填充為紅色
11.子選擇器與后代選擇器的區(qū)別：
（1）子選擇器：直接后代——">"
（2）后代選擇器：所有后代——空格
12.通用選擇器（*）
匹配HTML的所有標(biāo)簽元素
13.分組選擇符(,)
h1,span{color:red;}
14.繼承（CSS樣式）
不僅應(yīng)用于某個(gè)特定的HTML標(biāo)簽元素顷歌，而且應(yīng)用于其后代锰蓬。
eg:
p{color:red;}
<p>我小時(shí)候<span>膽小如鼠</span></p>
我小時(shí)候膽小如鼠，字體全部為紅色眯漩，包括膽小如鼠芹扭。（繼承關(guān)系）
15.特殊性：
eg:
p{color:red;}
.first{color:green;}
<p class="first">我小時(shí)候<span>膽小如鼠</span></p>
注：
p,.first都匹配p標(biāo)簽的CSS屬性麻顶，瀏覽器根據(jù)權(quán)值來判斷使用哪一種CSS的樣式
（標(biāo)簽的權(quán)值為1；類選擇符的權(quán)值為10舱卡；ID選擇器的權(quán)值為100）
eg:
代碼 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?權(quán)值
p{color:red;} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1
p span{ color:green;} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1+1=2
.warning{ color:white;} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 10
p span .warning { color:purple;} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1+1+10=12
#footer .note p { color:yellow;} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 100+10+1=111
16.重要性
CSS樣式設(shè)置最高權(quán)值——important
eg:
p { color:red !important;}
p { color:green;}
則字體為紅色
注：
樣式優(yōu)先級(jí)：
瀏覽器默認(rèn)樣式 < 網(wǎng)頁制作者樣式 < 用戶自己設(shè)置的樣式
17.元素分類
HTML中的標(biāo)簽元素大體被分為三種不同的類型：
（1）塊級(jí)元素：——用于搭建框架
每個(gè)塊級(jí)元素都從新的一行開始辅肾，并且其后的元素另起一行。（獨(dú)占一行）
元素的高度轮锥，寬度矫钓，行高以及頂和底邊距都可設(shè)置。
元素寬度在不設(shè)置的情況下舍杜，是它本身父容器的100%新娜，除非設(shè)定一個(gè)寬度。
eg:
<div> ? <p> ? <h1>...<h6> ? <ol> ? <ul> ? <dl> ? <table> ? <address> ? <blockquote> ? <form>
（2）內(nèi)聯(lián)元素：——修飾細(xì)節(jié)
自左向右排列既绩，直到排不下自動(dòng)換行概龄。寬高無效，隨內(nèi)容而定饲握。
eg:
<a> ? <span> ? <br> ? <i> ? <em> ? <strong> ? <label> ? <q> ? <var> ? <cite> ? <code>
（3）內(nèi)聯(lián)塊級(jí)元素——<img>,<input>
和其他元素都在一行上
元素的高度私杜、寬度、行高及頂和底邊距都不可設(shè)置
18.
轉(zhuǎn)換成塊級(jí)元素： ? a { display:block;}
轉(zhuǎn)換成內(nèi)聯(lián)元素： ? a { display:inline;}
轉(zhuǎn)換成內(nèi)聯(lián)塊級(jí)元素： ? a { display:inline-block;}
