title標(biāo)簽
<title>網(wǎng)頁(yè)的標(biāo)題</title>
title也是有助于SEO搜索引擎優(yōu)化的
HTML不是依靠縮進(jìn)來(lái)表示嵌套的汉买，就是看標(biāo)簽的包裹關(guān)系壤蚜。
HTML中所有的文字之間，如果有空格伟件、換行、tab都將被折疊為一個(gè)空格顯示暇咆。
h系列
<h1> 到 <h6> 都是標(biāo)簽：
<h1></h1> 一級(jí)標(biāo)題
<h2></h2> 二級(jí)標(biāo)題
……
<h6></h6> 六級(jí)標(biāo)題
h是容器級(jí)標(biāo)簽锋爪，理論上可以放置p，ul只是法律上允許
p標(biāo)簽
段落爸业，是英語(yǔ)paragraph“段落”縮寫(xiě)其骄。
HTML標(biāo)簽是分等級(jí)的，HTML將所有的標(biāo)簽分為兩種：容器級(jí)扯旷、文本級(jí)拯爽。
顧名思義，容器級(jí)的標(biāo)簽钧忽，里面可以放置任何東西毯炮；文本級(jí)的標(biāo)簽里面，只能放置文字耸黑、圖片桃煎、表單元素。
p標(biāo)簽是一個(gè)文本級(jí)標(biāo)簽大刊。從學(xué)習(xí)p的第一天開(kāi)始为迈，就要死死記住：p里面只能放文字缺菌、圖片葫辐、表單元素。其他的一律不能放伴郁。
試著把h放到p到里：
1 <p>
2 我是一個(gè)小段落
3 <h1>我是一個(gè)主標(biāo)題</h1>
4 </p>
瀏覽器不允許你這么做耿战，我們使用Chrome的F12審查，你會(huì)發(fā)現(xiàn)焊傅，瀏覽器自己把p封閉掉了剂陡，不讓你去包裹h1。
再次強(qiáng)調(diào)租冠，p是一個(gè)文本級(jí)的標(biāo)簽鹏倘，p里面只能放文字、圖片顽爹、表單元素纤泵。
圖片
頁(yè)面上可以插入圖片，能夠插入的圖片類型是：jpg(jpeg)镜粤、gif捏题、png、bmp肉渴。類型和類型之間有什么區(qū)別公荧，css課上講。
不能往網(wǎng)頁(yè)中插入的圖片格式是：psd同规、ai
HTML頁(yè)面不是直接插入圖片循狰，而是插入圖片的引用地址窟社，所以也要把圖片上傳到服務(wù)器上。
插入方法：
1
img是英語(yǔ)image“圖片”的簡(jiǎn)寫(xiě)
src 是英語(yǔ)source“資源”的簡(jiǎn)寫(xiě)绪钥，千萬(wàn)不要寫(xiě)成scr灿里。
src是img標(biāo)簽的屬性，baby.jpg是這個(gè)屬性的值程腹。
這個(gè)標(biāo)簽和我們之前學(xué)的匣吊，都不一樣，因?yàn)檫@個(gè)標(biāo)簽不是“對(duì)兒”寸潦。自封閉標(biāo)簽色鸳，也稱為單標(biāo)簽。
為什么见转？原因很簡(jiǎn)單命雀，如果是對(duì)兒，里面就要有內(nèi)容斩箫，表示給這個(gè)內(nèi)容增加語(yǔ)義咏雌。比如
1<h1>哈哈哈哈，我是主標(biāo)題啦Ｐ＝埂Ｉ薅丁！</h1>
圖片就是一個(gè)圖片寨典，不需要給什么文字增加語(yǔ)義氛雪，所以就是自己一個(gè)人活得挺好：
1<img />
我們上午學(xué)習(xí)的meta也是自封閉標(biāo)簽：
1<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
alt屬性
alt屬性：
1
alt是英語(yǔ)alternate“替代”的意思，就表示不管因?yàn)槭裁丛蛩食桑?dāng)這個(gè)圖片無(wú)法被顯示的時(shí)候报亩，出現(xiàn)的替代文字（有的瀏覽器不支持）
相對(duì)路徑
HTML中插入圖片，所以現(xiàn)在有兩個(gè)文件井氢，一個(gè)html文件弦追，一個(gè)是jpg文件。
我們關(guān)心的就是這兩個(gè)文件的相對(duì)位置花竞。即使這個(gè)網(wǎng)站項(xiàng)目劲件，被用u盤(pán)拷給了別人，只要相對(duì)路徑不變约急。圖片一定能夠正常顯示零远。
相對(duì)路徑不會(huì)出現(xiàn)這種情況：
1aaa/../bbb/1.jpg
../要么不寫(xiě)，要么就寫(xiě)在開(kāi)頭厌蔽。
超級(jí)鏈接
一個(gè)網(wǎng)站牵辣，是由很多html網(wǎng)頁(yè)組成的，html網(wǎng)頁(yè)之間能夠通過(guò)超級(jí)鏈接互相跳轉(zhuǎn)奴饮，從而形成了“網(wǎng)”纬向。
語(yǔ)法：
1<a href="1.html">結(jié)婚照</a>
a是英語(yǔ)anchor“錨”的意思择浊，就好像這個(gè)頁(yè)面往另一個(gè)頁(yè)面扔出了一個(gè)錨。是一個(gè)文本級(jí)的標(biāo)簽逾条。
href是英語(yǔ)hypertext reference超文本地址的縮寫(xiě)
a標(biāo)簽的另外兩個(gè)屬性
title 懸停文本
target 是否在新窗口中打開(kāi)
target實(shí)際上是“目標(biāo)”的意思近她。
<a href="09_img.html" title="很好看哦" target="_blank">結(jié)婚照</a>
blank就是“空白”的意思，就表示新建一個(gè)空白窗口膳帕。為毛有一個(gè)_ ，就是規(guī)定薇缅，沒(méi)啥好解釋的危彩。
也就是說(shuō)，如果不寫(xiě)target=”_blank”那么就是在相同的標(biāo)簽頁(yè)打開(kāi)泳桦，如果寫(xiě)了汤徽，就是在新的空白標(biāo)簽頁(yè)中打開(kāi)。
完整的超級(jí)鏈接：
<a href="1.html" title="懸停文本" target="_blank">鏈接的內(nèi)容</a>
關(guān)于超級(jí)鏈接的herf里面也是相對(duì)路徑
頁(yè)面內(nèi)的錨點(diǎn)：
錨點(diǎn)用name屬性來(lái)設(shè)置灸撰，一個(gè)a標(biāo)簽如果name屬性（或者id屬性）谒府，那么就是頁(yè)面的一個(gè)錨點(diǎn)。
1<a name="wdzp">我的作品</a>
2或者：
3<a id="wdzp">我的作品</a>`
如果有一個(gè)超級(jí)鏈接浮毯，指向頁(yè)面中的錨點(diǎn)完疫，那么就是：
1<a href="#wdzp">點(diǎn)擊我就查看我的作品</a>
a是一個(gè)文本級(jí)的標(biāo)簽
比如一個(gè)段落中的所有文字都能夠被點(diǎn)擊，那么應(yīng)該：
p包裹a：
1<p>
2 <a href="">段落段落段落段落段落段落</a>
3</p>
而不是a包裹p：
1<a href="">
2 <p>
3 段落段落段落段落段落段落
4 </p>
5</a>
列表標(biāo)簽
無(wú)序標(biāo)簽
無(wú)序列表债蓝，用來(lái)表示一個(gè)列表的語(yǔ)義壳鹤，并且每個(gè)項(xiàng)目和每個(gè)項(xiàng)目之間，是不分先后的饰迹。
ul就是英語(yǔ)unordered list芳誓，“無(wú)序列表”的意思。
li 就是英語(yǔ)list item 啊鸭， “列表項(xiàng)”的意思锹淌。
你會(huì)發(fā)現(xiàn)，這是我們學(xué)習(xí)的第一個(gè)“組標(biāo)簽”赠制，就是要么不寫(xiě)赂摆，要么就要寫(xiě)一組。
1 <ul>
2 <li>北京</li>
3 <li>上海</li>
4 <li>廣州</li>
5 <li>鐵嶺</li>
6 </ul>
也就是說(shuō)钟些，所以的li不能單獨(dú)存在库正，必須包裹在ul里面；反過(guò)來(lái)說(shuō)厘唾，ul的“兒子”不能是別的東西褥符，只能有l(wèi)i。
瀏覽器會(huì)默認(rèn)的給無(wú)序列表小圓點(diǎn)的“先導(dǎo)符號(hào)”
但是抚垃，我們這里再次強(qiáng)調(diào)喷楣，ul的作用趟大，并不是給文字增加小圓點(diǎn)的，而是增加無(wú)序列表的“語(yǔ)義”的铣焊。
有序標(biāo)簽
ordered list 有序列表逊朽，用ol表示
1 <ol>
2 <li>小蘋(píng)果</li>
3 <li>月亮之上</li>
4 <li>最炫民族風(fēng)</li>
5 </ol>
也就是說(shuō)，ol和ul就是語(yǔ)義不一樣曲伊，怎么使用都是一樣的叽讳。
ol里面只能有l(wèi)i，li必須被ol包裹坟募。li是容器級(jí)岛蚤。
ol這個(gè)東西用的不多，如果想表達(dá)順序懈糯，大家一般也用ul：
定義列表
定義列表也是一個(gè)組標(biāo)簽涤妒，不過(guò)比較復(fù)雜，出現(xiàn)了三個(gè)標(biāo)簽：
dl表示definition list 定義列表
dt表示definition title 定義標(biāo)題
dd表示definition description 定義表述詞兒
dt赚哗、dd只能在dl里面她紫；dl里面只能有dt、dd
1 <dl>
2 <dt>北京</dt>
3 <dd>國(guó)家首都屿储，政治文化中心</dd>
4 <dt>上海</dt>
5 <dd>魔都贿讹，有外灘、東方明珠塔够掠、黃浦江</dd>
6 <dt>廣州</dt>
7 <dd>中國(guó)南大門(mén)围详，有珠江球切、小蠻腰</dd>
8 </dl>
定義列表用法非常靈活馋记，可以一個(gè)dt配很多dd：
定義列表用法非常靈活，可以一個(gè)dt配很多dd：
dt非春、dd都是容器級(jí)標(biāo)簽袁勺，想放什么都可以雹食。所以，現(xiàn)在就應(yīng)該更加清晰的知道：
用什么標(biāo)簽期丰，不是根據(jù)樣子來(lái)決定群叶，而是語(yǔ)義。
div和span
div和span是非常重要的標(biāo)簽钝荡，div的語(yǔ)義是division“分割”街立； span的語(yǔ)義就是span“范圍、跨度”埠通。
CSS課程中你將知道赎离，這兩個(gè)東西，都是最最重要的“盒子”端辱。
1<div>
2 <h3>中國(guó)主要城市</h3>
3 <ul>
4 <li>北京</li>
5 <li>上海</li>
6 <li>廣州</li>
7 </ul>
8 </div>
9
10 <div>
11 <h3>美國(guó)主要城市</h3>
12 <ul>
13 <li>紐約</li>
14 <li>洛杉磯</li>
15 <li>華盛頓</li>
16 <li>西雅圖</li>
17 </ul>
</div>
div在瀏覽器中梁剔，默認(rèn)是不會(huì)增加任何的效果改變的虽画，但是語(yǔ)義變了，div中的所有元素是一個(gè)小區(qū)域荣病。
div標(biāo)簽是一個(gè)容器級(jí)標(biāo)簽码撰，里面什么都能放，甚至可以放div自己
span也是表達(dá)“小區(qū)域个盆、小跨度”的標(biāo)簽脖岛，但是是一個(gè)“文本級(jí)”的標(biāo)簽。
就是說(shuō)颊亮，span里面只能放置文字柴梆、圖片、表單元素编兄。 span里面不能放p、h声登、ul狠鸳、dl、ol悯嗓、div件舵。
span里面是放置小元素的，div里面放置大東西的：
1 <p>
2 簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介
3 <span>
4 <a href="">詳細(xì)信息</a>
5 <a href="">購(gòu)買</a>
6 </span>
</p>
div標(biāo)簽是最最重要的布局標(biāo)簽脯厨，至于class是什么意思铅祸，下午說(shuō)：
1<div class="header">
2 <div class="logo"></div>
3 <div class="nav"></div>
4 </div>
5 <div class="content">
6 <div class="guanggao"></div>
7 <div class="dongxi"></div>
8 </div>
<div class="footer"></div>
所以，我們親切的稱呼這種模式叫做“div+css”合武。div標(biāo)簽負(fù)責(zé)布局临梗，負(fù)責(zé)結(jié)構(gòu)，負(fù)責(zé)分塊稼跳。css負(fù)責(zé)樣式盟庞。
表單
表單就是收集用戶信息的，就是讓用戶填寫(xiě)的汤善、選擇的什猖。
1<div>
2 <h3>歡迎注冊(cè)本網(wǎng)站</h3>
3 <form>
4 所有的表單內(nèi)容，都要寫(xiě)在form標(biāo)簽里面
5 </form>
</div>
form是英語(yǔ)表單的意思红淡。form標(biāo)簽里面有action屬性和method屬性
method屬性表示用什么HTTP方法提交不狮，有g(shù)et、post兩種
文本框
<input type="text" />
input表示“輸入”在旱，指的是這是一個(gè)“輸入小部件”摇零，
type表示“類型”，
text表示“文本”桶蝎，指的是類型是一個(gè)文本框的輸入小部件遂黍。
value表示“值”终佛，value屬性就是默認(rèn)有的值，文本框中已經(jīng)被填寫(xiě)好了：
<input type="text" value="默認(rèn)有的值" />
密碼框
1<input type="password" />
也就是說(shuō)雾家，input標(biāo)簽很神奇铃彰，又是文本框，又是密碼框芯咧。
到底是啥牙捉？看type屬性的值是什么，來(lái)決定敬飒。
如果type=”text” 文本框
如果type=”password” 密碼框
單選按鈕
Paste_Image.png
只能選一個(gè)邪铲，術(shù)語(yǔ)叫做“互斥”。
1<input type="radio" name="xingbie" /> 男
2<input type="radio" name="xingbie" /> 女
radio是“收音機(jī)”的意思无拗，input的type的值带到，如果是radio就是單選按鈕。
非常像以前的收音機(jī)英染，按下去一個(gè)按鈕揽惹，其他的就抬起來(lái)了。所以叫做radio四康。
單選按鈕搪搏，天生是不能互斥的，如果想互斥闪金，必須要有相同的name屬性疯溺。name就是“名字”。
1<input type="radio" name="xingbie" /> 男
2<input type="radio" name="xingbie" /> 女
默認(rèn)被選擇哎垦，就應(yīng)該書(shū)寫(xiě)checked=”checked”
1<input type="radio" name="sex" checked="checked">
復(fù)選框
也是input標(biāo)簽囱嫩，type是checkbox。
1<p>
2 請(qǐng)選擇你的愛(ài)好：
3 <input type="checkbox" name="aihao"/> 睡覺(jué)
4 <input type="checkbox" name="aihao"/> 吃飯
5 <input type="checkbox" name="aihao"/> 足球
6 <input type="checkbox" name="aihao"/> 籃球
7 <input type="checkbox" name="aihao"/> 乒乓球
8 <input type="checkbox" name="aihao"/> 打豆豆
9</p>
復(fù)選框漏设，最好也是有相同的name（雖然他不需要互斥挠说，但是也要有相同的name）
下拉列表
select就是“選擇”，option“選項(xiàng)”愿题。
select標(biāo)簽和ul损俭、ol、dl一樣潘酗，都是組標(biāo)簽杆兵。
1<select>
2 <option>北京</option>
3 <option>河北</option>
4 <option>河南</option>
5 <option>山東</option>
6 <option>山西</option>
7 <option>湖北</option>
8 <option>安徽</option>
9</select>
多行文本框（文本域）
text就是“文本”，area就是“區(qū)域”仔夺。
1<textarea cols="30" rows="10"></textarea>
這個(gè)標(biāo)簽琐脏，是個(gè)標(biāo)簽對(duì)兒。對(duì)兒里面不用寫(xiě)東西。如果寫(xiě)的話日裙，就是這個(gè)框的默認(rèn)文字吹艇。
cols屬性表示columns“列”，rows屬性表示rows“行”昂拂。
值就是一個(gè)數(shù)受神，表示多少行，多少列格侯。
三種按鈕
按鈕也是input標(biāo)簽鼻听，一共有三種按鈕：
普通按鈕：
1<input type="button" value="我是一個(gè)普通按鈕" />
button就是英語(yǔ)“按鈕”的意思。value就是“值”的意思联四，按鈕上面顯示的文字撑碴。
提交按鈕：
2<input type="submit" />
submit就是英語(yǔ)“提交”的意思。這個(gè)按鈕不需要寫(xiě)value自動(dòng)就有“提交”文字朝墩。
這個(gè)按鈕點(diǎn)擊醉拓，表單真的能提交。這個(gè)表單就會(huì)被提交到收苏，form標(biāo)簽的action屬性中的那個(gè)頁(yè)面中去亿卤。
前端開(kāi)發(fā)工程師，只需要關(guān)心頁(yè)面的美倒戏、樣式怠噪、板式恐似、交互杜跷。至于數(shù)據(jù)的保存、讀取矫夷，都是后臺(tái)工程師做的事情葛闷。
3重置按鈕：
1<input type="reset" />
reset就是“復(fù)位”的意思。
label標(biāo)簽
本質(zhì)上講双藕，“男”淑趾、“女”這兩個(gè)漢字，和input元素沒(méi)有關(guān)系忧陪。
1<input type="radio" name="sex" /> 男
2<input type="radio" name="sex" /> 女
label就是解決這個(gè)問(wèn)題的扣泊。
1<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
2<input type="radio" name="sex" id="nv" /> <label for="nv">女</label>
input元素要有一個(gè)id，然后label標(biāo)簽就有一個(gè)for屬性嘶摊，和id相同延蟹，就表示綁定了，這個(gè)label和input就有綁定關(guān)系了叶堆。
復(fù)選框也有l(wèi)abel：
1<input type="checkbox" id="kk" />
2<label for="kk">10天內(nèi)免登陸</label>
什么表單元素都有l(wèi)abel阱飘。
HTML雜項(xiàng)
HTML注釋
任何的程序、代碼都有注釋，注釋就是給程序員看的沥匈，不影響程序的蔗喂。
適當(dāng)?shù)淖⑨專軌蜃屛覀兊某绦蚋涌勺x高帖，所以用中文提示自己缰儿，這里的程序是干什么的。
1 <!--這里是頭部棋恼，還沒(méi)有做完返弹，準(zhǔn)備加兩天班弄完-->
2 <div>頭部</div>
3 <!--這里是陳偉弄的，跟我沒(méi)關(guān)系-->
4 <div>主要內(nèi)容</div>
5 <!--這里是高俊負(fù)責(zé)的-->
6 <div>頁(yè)尾</div>
HTML注釋的語(yǔ)法
1<!--注釋的內(nèi)容-->
Sublime中按ctrl+/ 就是注釋
字符實(shí)體
我們想在頁(yè)面上輸出“<h1>”這些字符爪飘，但是HTML認(rèn)為這是一個(gè)標(biāo)簽义起，還沒(méi)封閉。
1好高興啊师崎，今天我們學(xué)習(xí)了<h1>標(biāo)簽默终，老師說(shuō)這個(gè)標(biāo)簽是主標(biāo)題的語(yǔ)義。
所以犁罩，
1<
就是<的字符實(shí)體齐蔽，什么意思呢？就是用常用字符表示這些符號(hào)的方式床估。
lt 就是英語(yǔ)less than 小于的意思含滴；
1>
就是>的字符實(shí)體。
gt就是greater than 大于的意思丐巫。
1?
就是? 版權(quán)符號(hào)谈况。
1
nbsp就是英語(yǔ)non-breaking spacing不打斷空格的意思，就是空格递胧。
所以：
1哈 哈
空出了4個(gè)字的格碑韵，可以防止空白折疊現(xiàn)象。
歡迎關(guān)注公共號(hào)
