一、走進(jìn)HTML
html基本標(biāo)簽;
1標(biāo)題標(biāo)簽：
...
?title /'ta?t(?)l/ n. 冠軍负甸；標(biāo)題
2段落和換行標(biāo)簽：
...
3水平線標(biāo)簽：
4斜體：...
5字體加粗：...
7超鏈接：a
8錨鏈接：創(chuàng)建跳轉(zhuǎn)標(biāo)記乙位置 創(chuàng)建跳轉(zhuǎn)鏈接甲位置
9功能性鏈接：
10注釋和特殊符號
注釋: 空格?? 大于號(>)：> 小于號(<)：" 版權(quán)符號 @?
W3C標(biāo)準(zhǔn)
規(guī)范：標(biāo)簽名稱呻待、屬性名稱必須小寫
標(biāo)簽必須嚴(yán)格嵌套，并且必須閉合奏篙，即使空元素標(biāo)簽也必須閉合
屬性值必須用引號引起來
[if !supportLists]二迫淹、[endif]網(wǎng)頁穿上美麗的衣服
Css：層疊樣式表
CSS的優(yōu)勢
內(nèi)容與表現(xiàn)分離
網(wǎng)頁的表現(xiàn)統(tǒng)一，容易修改
豐富的樣式肺稀，使頁面布局更加靈活
減少網(wǎng)頁的代碼量应民，增加網(wǎng)頁的瀏覽速度诲锹，節(jié)省網(wǎng)絡(luò)帶寬
運用獨立于頁面的CSS，有利于網(wǎng)頁被搜索引擎收錄
網(wǎng)頁中引用CSS樣式
內(nèi)聯(lián)樣式：<p style=””></p>
內(nèi)部樣式表：<style></style>
外部樣式表:創(chuàng)建一個外部的css文件:*.css,把樣式寫在這個文件中改备；誰想用這個樣式蔓倍，誰就引入這個css文件即可
<link rel=“stylesheet”?href=”樣式文件的路徑”/>
<style>
??????@import”css/types.css”;
鏈接式與導(dǎo)入式區(qū)別：<link/>標(biāo)簽屬于XHTML偶翅，@import是屬于CSS2.1；使用鏈接的CSS文件先加載到網(wǎng)頁當(dāng)中母剥，再進(jìn)行編譯顯示 形导；使用@import導(dǎo)入的CSS文件，客戶端顯示HTML結(jié)構(gòu)炫隶，再把CSS文件加載到網(wǎng)頁當(dāng)中 阎曹；@import是屬于CSS2.1特有的，對于不兼容CSS2.1的瀏覽器來說就是無效的
使用css語法
聲明：...
<span>...</span>:能讓某幾個文字或者某個詞語凸顯出來
center定義居中的內(nèi)容斟湃。
font和 basefont定義 HTML 字體檐薯。
標(biāo)簽選擇器：p{font-size:16px;color:red;}
類選擇器：.second{font-size:20px;color:#096;}
ID選擇器：#third{font-size:24px;color:black;}
CSS樣式優(yōu)先級；行內(nèi)樣式>內(nèi)部樣式表>外部樣式表
ID選擇器>類選擇器>標(biāo)簽選擇器
Css常用的字體
color 顏色
font-size 字體大小如：font-size:12px;
font-family 字體類型如：font-family:"隸書";
font-style 字體樣式如：font-style:italic;
font-weight 加粗如：font-weight:bold ;
Css常用的文本
Text-align 水平居中方式如：text-align：left（左） ?text-align：center（居中） ?text-align：right（右）
text-indent 首行縮進(jìn)如：text-indent：20px
line-height 行高如：line-height:25px;
text-decoration 文本裝飾如：text-decoration:underline（下劃線）;
a:hover 懸停哄酝；偽類名如：a:hover {color:#B46210;text-decoration:underline;}
Width寬 ?height高 如：#header {width:200px;height:280px;}……
常見的偽類名鼠標(biāo)樣式
div標(biāo)簽（網(wǎng)頁布局 排版網(wǎng)頁內(nèi)容）如<div>....</div> <div id="header">網(wǎng)頁內(nèi)容…</div>
Css的背景
背景屬性
背景顏色：background-color:#B70447;
背景圖像
圖像路徑：background-image:url(img/buy.png);
重復(fù)方式：?background-repeat:no-repeat;
背景定位：?background-position:10px 15px;
背景屬性簡寫
background:url(img/buy.png) no-repeat #f9f9f9 10px 15px;
三陶衅、列表直晨、表格與表單
1列表
??無序列表是一個項目的列表勇皇，此列項目使用粗體圓點（典型的小黑圓圈）進(jìn)行標(biāo)記。無序列表始于
- 標(biāo)簽门烂。每個列表項始于
- 兄淫。
無序列表：
??????????????<li>桔子</li>
??????????????<li>香蕉</li>
<li>蘋果</li>
</ul>
有序列表也是一列項目，列表項目使用數(shù)字進(jìn)行標(biāo)記慨丐。
有序列表始于
- 標(biāo)簽房揭。每個列表項始于
- 標(biāo)簽晌端。
有序列表：
??????????????<li>桔子</li>
??????????????<li>香蕉</li>
<li>蘋果</li>
</ol>
自定義列表不僅僅是一列項目，而是項目及其注釋的組合伶唯。自定義列表以 標(biāo)簽開始惧盹。每個自定義列表項以 開始钧椰。每個自定義列表項的定義以 開始。
自定義列表：
??????????????<dt>所屬學(xué)院</dt>
??????????????<dd>計算機(jī)應(yīng)用</dd>
??????????????<dt>所屬專業(yè)</dt>
??????????????<dd>計算機(jī)軟件工程</dd>
</dl>
列表樣式
list-style-type
list-style-image
list-style-position
list-style
2表格
表格由 標(biāo)簽來定義瓶埋。每個表格均有若干行（由 標(biāo)簽定義）诊沪，每行被分割為若干單元格（由 標(biāo)簽定義）端姚。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容巫湘。
如：
????<tr>
?????????<td>單元格1</td>
?????????<td>單元格2</td>
????????…… </tr>……</table>
表格的跨行和跨列：
??<tr>
????<td colspan="3">學(xué)員成線</td> </tr>
??<tr> <td rowspan="2">白楊</td>
????<td>語文</td>
<td>98</td></tr>……</table>
3表單
HTML 表單用于搜集不同類型的用戶輸入昏鹃。
表單的基本結(jié)構(gòu)：
?名字： ?
?密碼： ?
??????<input type="reset" name="Reset" value="重填">
???</p>
</form>
表單元素：tybe元素類型：text洞渤、password、checkbox奈懒、radio宪巨、submit、reset极祸、file怠晴、image 和 button蒜田，默認(rèn)為 text<input type="text">?定義用于文本輸入的單行輸入字段：
Size：元素的寬度，當(dāng)type 為 text 或 password時
Maxlength：type為text 或 password 時美莫，輸入的最大字符數(shù)
Checked：type為radio或checkbox時，指定按鈕是否是被選中
隱藏域：type="hidden" 只讀：readonly="readonly" 禁用：
disabled="disabled"
提交按鈕：<input type="submit">?定義用于向表單處理程序（form-handler）提交表單的按鈕窝撵。
單選按鈕輸入： 定義單選按鈕腾降。
列表框： ……
多行文本域：
rows="y">文本內(nèi)容 </textarea>
4css高級選擇器
并集選擇器：多個選擇器通過逗號連接而成寒砖，同時聲明多個風(fēng)格相同樣式
交集選擇器：由兩個選擇器連接構(gòu)成，選中二者范圍的交集哩都，兩個選擇器之間不能有空格第一個必須是標(biāo)簽選擇器茅逮，第二個必須是類選擇器或者ID選擇器
后代選擇器:外層的選擇器寫在前面，內(nèi)層的選擇器寫在后面碉考，之間用空格分隔 標(biāo)簽嵌套時挺身，內(nèi)層的標(biāo)簽成為外層標(biāo)簽的后代
子元素選擇器:通過>連接在一起而成章钾，僅作用于子元素
屬性選擇器：選取帶有指定屬性的元素，或選取帶有指定屬性和值的元素
四盒子模型
1邊框惨撇、外邊距府寒、內(nèi)邊距、行內(nèi)元素和塊級元素
外框
Heigh:高 margin：外邊距（一個值四個方向剖淀、一值上下纵隔、兩值左右四個值、上下左右堅持左上原則）
Border：邊框 padding：內(nèi)邊框 width：寬
邊框樣式碰煌；border-top-style：上邊框樣式
border-right-style：右邊框樣式
order-bottom-style:下邊框樣式
border-left-style：左邊框樣式
Border-style：設(shè)置四個邊框樣式
none：無邊框?solid：實線邊框?dashed：虛線邊框?dotted：點狀邊框?double：雙線邊框?hidden：與none相同糊啡，應(yīng)用于表解決邊框沖突
邊框顏色：border-top-color：上邊框顏色
border-right-color：右邊框顏色
border-bottom-color：下邊框顏色
border-left-color：左邊框顏色
border-color：設(shè)置邊框顏色 ?加顏色十六進(jìn)制
邊框粗細(xì)：border-top-width：上邊框粗細(xì)
border-right-width：右邊框粗細(xì)
border-bottom-wid：下邊框粗細(xì) border-left-width：左邊框粗細(xì)
border-width：邊框粗細(xì)
關(guān)鍵字：thin（細(xì)信镄睢）碍脏、medium（中間）典尾、thick（粗大）加像素值px
邊框簡寫：（border-bottom: 9px #F00 dashed ;border: 9px #F00 solid;同時設(shè)置邊框的顏色、粗細(xì)和樣式）
*transport：透明色 ?外邊距塌陷瀏覽器bug 給父容器加overflow：hidden
內(nèi)邊距
padding-left：左內(nèi)邊距
padding-right：右內(nèi)邊距
padding-top：上內(nèi)邊距
padding-bottom：下內(nèi)邊距
Padding：內(nèi)邊距
Content-box 盒子的實際高度=元素內(nèi)容（正常模式 ??怪異模式：ie瀏覽器自成）
盒子的實際高度和寬度僅應(yīng)用于元素內(nèi)容不包括內(nèi)邊距和邊框
Border-box 盒子的實際高度=元素內(nèi)容+邊框+內(nèi)邊距
盒子的實際高度和寬度包括元素內(nèi)容和內(nèi)邊距
盒子實際高度=上下外邊距+上下邊框+上下內(nèi)邊距+內(nèi)容寬度
盒子實際寬度=左右外邊距+左右邊框+左右內(nèi)邊距+內(nèi)容寬度
外邊距
margin-top：上外邊距
margin-right：右外邊距
margin-bottom：下外邊距
margin-left：左外邊距
margin：外邊距
行內(nèi)元素和塊級元素區(qū)別
塊級元素會獨占一行河闰，其寬度自動填滿其父元素寬度有（p姜性、div髓考、h1-h6、li）
行內(nèi)元素不會獨占一行儡炼，相鄰的行內(nèi)元素會排列在同一行里查蓉，直到一行排不下豌研，才會換行，其寬度隨元素的內(nèi)容而變化,設(shè)置寬高無效有（span秆麸、em）
行內(nèi)塊元素不會獨占一行及汉、可以設(shè)置寬高有（img）
塊級元素可以設(shè)置width, height屬性坷随，行內(nèi)元素設(shè)置width, ?height無效驻龟，塊級元素可以設(shè)置margin 和 padding
Display屬性：控制元素的顯示和隱藏缸匪，塊級元素與行內(nèi)元素的轉(zhuǎn)變
Display-none凌蔬；設(shè)置元素不會被顯示
Display-black；元素會被顯示為塊級元素
Display-inline懈词；元素會被顯示為行內(nèi)元素
Display-inline-block辩诞；元素會被顯示為行內(nèi)塊元素
?
?
?
?
?
?
