HTML和CSS是在一起學(xué)的
但是！兩個(gè)內(nèi)容都很多，我就各寫(xiě)一篇了，今天先出品HTML
!前言!
請(qǐng)教了碼農(nóng)學(xué)弟！入手兩款編譯器
* sublime? ? 據(jù)說(shuō)功能很強(qiáng)大，配置一下基本所有語(yǔ)言都能編，但我覺(jué)得不適合小白，因?yàn)闆](méi)有提示！??！純手工敲鍵盤(pán)?。?！而且不能同步出廠(chǎng)效果?。?！
* HBuilder? ? 強(qiáng)推?。。『湍秸n網(wǎng)的效果差不多，有提示，有同步畫(huà)面效果，可以邊敲邊看
！課程鏈接！
這幾個(gè)是小白學(xué)習(xí)時(shí)參考的教程，體系比較完善，結(jié)合慕課和菜鳥(niǎo)，小白就自己鼓搗了教程，其實(shí)也基本就是復(fù)制黏貼（寄刀片）~~~
第一章? HTML基礎(chǔ)知識(shí)
1.HTML是網(wǎng)頁(yè)內(nèi)容的載體。內(nèi)容就是網(wǎng)頁(yè)制作者放在頁(yè)面上想要讓用戶(hù)瀏覽的信息，可以包含文字、圖片、視頻等。
2.CSS樣式是表現(xiàn)。就像網(wǎng)頁(yè)的外衣。比如，標(biāo)題字體、顏色變化，或?yàn)闃?biāo)題加入背景圖片、邊框等。所有這些用來(lái)改變內(nèi)容外觀(guān)的東西稱(chēng)之為表現(xiàn)。
3.標(biāo)簽的語(yǔ)法
（1）標(biāo)簽由英文尖括號(hào)"<"和">"括起來(lái)
（2）標(biāo)簽一般都成對(duì)出現(xiàn)，分開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽，結(jié)束標(biāo)簽比開(kāi)始標(biāo)簽多了一個(gè)/
（3）標(biāo)簽與標(biāo)簽之間可以嵌套，但先后順序必須保持一致
（4）標(biāo)簽不區(qū)分大小寫(xiě)，但建議小寫(xiě)
4.HTML文件基本結(jié)構(gòu)
一個(gè)HTML文件有自己的固定結(jié)構(gòu)
（1）<html></html>稱(chēng)為根標(biāo)簽。所有網(wǎng)頁(yè)標(biāo)簽都在其中
（2）<head>標(biāo)簽用于定義文檔頭部，是所有頭部元素的容器，頭部元素有<title><script><link><meta>等
（3）<body>標(biāo)簽間的內(nèi)容是網(wǎng)頁(yè)的主要內(nèi)容，如<hx><p><a><img>等，會(huì)在瀏覽器中顯示出來(lái)
5.認(rèn)識(shí)<head>標(biāo)簽
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示給讀者。下面這些標(biāo)簽可用在<head>部分
6.認(rèn)識(shí)<body>標(biāo)簽
<body>標(biāo)簽定義了HTML文檔的主體，包含全部頁(yè)面內(nèi)容，在網(wǎng)頁(yè)上要展示出來(lái)的頁(yè)面內(nèi)容一定要放在<body>標(biāo)簽中
7.HTML的代碼注釋
代碼注釋的作用是幫助程序員標(biāo)注代碼的用途，過(guò)一段時(shí)間后再看你所編寫(xiě)的代碼，就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開(kāi)發(fā)網(wǎng)頁(yè)代碼。
第二章? HTML基礎(chǔ)元素
1.HTML標(biāo)題
HTML 標(biāo)題是通過(guò) <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。共有六個(gè)，依據(jù)重要性遞減。
2.HTML段落
HTML 段落是通過(guò) <p> 標(biāo)簽進(jìn)行定義的
HTML 鏈接是通過(guò) <a> 標(biāo)簽進(jìn)行定義的
HTML 圖像是通過(guò) <img> 標(biāo)簽進(jìn)行定義的
HTML表格是通過(guò)<table>標(biāo)簽進(jìn)行定義的
如果不定義邊框?qū)傩?，表格將不顯示邊框。有時(shí)這很有用，但是大多數(shù)時(shí)候，我們希望顯示邊框。使用邊框?qū)傩詠?lái)顯示一個(gè)帶有邊框的表格：
HTML支持無(wú)序、有序和定義列表
（1）無(wú)序列表
無(wú)序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。無(wú)序列表始于 <ul> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li>。
有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。有序列表始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li> 標(biāo)簽。
自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。自定義列表以 <dl> 標(biāo)簽開(kāi)始。每個(gè)自定義列表項(xiàng)以 <dt> 開(kāi)始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開(kāi)始。
第三章? HTML樣式
當(dāng)瀏覽器讀到一個(gè)樣式表，它就會(huì)按照這個(gè)樣式表來(lái)對(duì)文檔進(jìn)行格式化。有以下三種方式來(lái)插入樣式表：
1.外部樣式表
當(dāng)樣式需要被應(yīng)用到很多頁(yè)面的時(shí)候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過(guò)更改一個(gè)文件來(lái)改變整個(gè)站點(diǎn)的外觀(guān)。
2.內(nèi)部樣式表
當(dāng)單個(gè)文件需要特別樣式時(shí)，就可以使用內(nèi)部樣式表。你可以在 head 部分通過(guò) <style> 標(biāo)簽定義內(nèi)部樣式表 。
3.內(nèi)聯(lián)樣式
當(dāng)特殊的樣式需要應(yīng)用到個(gè)別元素時(shí)，就可以使用內(nèi)聯(lián)樣式。 使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實(shí)例顯示出如何改變段落的顏色和左外邊距。
HTML的style屬性：提供了一種改變所有 HTML 元素的樣式的通用方法
（1）背景顏色
background-color 屬性為元素定義了背景顏色：
（3）文本對(duì)齊
text-align 屬性規(guī)定了元素中文本的水平對(duì)齊方式：
第四章? HTML格式化
1.文本格式化標(biāo)簽
第五章? 表單標(biāo)簽
網(wǎng)站使用HTML表單(form)與用戶(hù)進(jìn)行交互。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過(guò)來(lái)的數(shù)據(jù)。
* <form> ：<form>標(biāo)簽是成對(duì)出現(xiàn)的，以<form>開(kāi)始，以</form>結(jié)束?
* action：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁(yè)面(save.php)
* method：數(shù)據(jù)傳送的方式（get/post）
注：所有表單控件（文本框、文本域、按鈕、單選框、復(fù)選框等）都必須放在 <form></form> 標(biāo)簽之間
1.文本輸入框
當(dāng)用戶(hù)要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本輸入框。文本框也可轉(zhuǎn)化為密碼輸入框。
* type：當(dāng)type="text"時(shí)，輸入框?yàn)槲谋据斎肟?
? ? ? ? ? ? ? 當(dāng)type="password"時(shí)，輸入框?yàn)槊艽a輸入框
* name：為文本框命名，以備后臺(tái)程序ASP 、PHP使用
* value：為文本輸入框設(shè)置默認(rèn)值(一般起到提示作用)?
* <textarea>標(biāo)簽是成對(duì)出現(xiàn)的，以<textarea>開(kāi)始，以</textarea>結(jié)束?
* cols：多行輸入域的列數(shù)
* rows：多行輸入域的行數(shù)
* 在<textarea></textarea>標(biāo)簽之間可以輸入默認(rèn)值
3.單選框、復(fù)選框
在使用表單設(shè)計(jì)調(diào)查表時(shí)，為了減少用戶(hù)的操作，使用選擇框是一個(gè)好主意，HTML中有兩種選擇框，即單選框和復(fù)選框，兩者的區(qū)別是單選框中的選項(xiàng)用戶(hù)只能選擇一項(xiàng)，而復(fù)選框中用戶(hù)可以任意選擇多項(xiàng)，甚至全選。
* type：當(dāng)type="radio"時(shí)，控件為單選框
? ? ? ? ? ? ? 當(dāng)type="checkbox"時(shí)，控件為復(fù)選框
* value：提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序PHP使用）
* name：為控件命名，以備后臺(tái)程序 ASP、PHP 使用
* checked：當(dāng)設(shè)置 checked="checked" 時(shí)，該選項(xiàng)被默認(rèn)選中
4.下拉列表框
（1）單選?
* value：<option value='提交值'>選項(xiàng)</option>
* selected="selected"：設(shè)置該屬性，則該選項(xiàng)就被默認(rèn)選中
（2）多選在<select>標(biāo)簽中設(shè)置multiple="multiple"屬性，就可實(shí)現(xiàn)多選功能，在 windows 操作系統(tǒng)下，進(jìn)行多選時(shí)按下Ctrl鍵同時(shí)進(jìn)行單擊（在 Mac下使用Command+單擊），可以選擇多個(gè)選項(xiàng)。
* type：只有當(dāng)type值設(shè)置為submit時(shí)，按鈕才有提交作用
* value：按鈕上顯示的文字
當(dāng)用戶(hù)需要重置表單信息到初始時(shí)的狀態(tài)時(shí)， 可以使用重置按鈕使輸入框恢復(fù)到初始狀態(tài)。只需要把type設(shè)置為"reset"就可以?
* type：只有當(dāng)type值設(shè)置為reset時(shí)，按鈕才有重置作用
* value：按鈕上顯示的文字
label標(biāo)簽不會(huì)向用戶(hù)呈現(xiàn)任何特殊效果，它的作用是為鼠標(biāo)用戶(hù)改進(jìn)了可用性。如果你在 label 標(biāo)簽內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說(shuō)，當(dāng)用戶(hù)單擊選中該label標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上（就自動(dòng)選中和該label標(biāo)簽相關(guān)連的表單控件上）。
注：標(biāo)簽的for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的id 屬性值一定要相同。
OVER.GOOD NIGHT.
