HTTP概述
- 超文本傳輸協(xié)議（HTTP刁笙，HyperText Transfer Protocol)是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議滤馍。所有的 WWW 文件都必須遵守這個(gè)標(biāo)準(zhǔn)秉氧。
- 當(dāng)用戶在瀏覽器輸入網(wǎng)址后，瀏覽器與服務(wù)器建立了一個(gè)連接庙楚，瀏覽器給 Web 服務(wù)器發(fā)送了一個(gè) HTTP 請(qǐng)求面哥，服務(wù)器接收并解析請(qǐng)求后哎壳，返回響應(yīng)。HTTP 響應(yīng)中包含狀態(tài)代碼和返回資源的內(nèi)容（響應(yīng)正文）尚卫。
常見狀態(tài)碼
200 ：成功归榕。
400 ：客戶端請(qǐng)求有語(yǔ)法錯(cuò)誤，服務(wù)器端不能理解吱涉。
401 ：該請(qǐng)求可能未經(jīng)過授權(quán)刹泄。
403 ：服務(wù)器端收到該請(qǐng)求，但是拒絕為它提供服務(wù)怎爵，可能是沒有權(quán)限等等特石。
404 ：該資源沒找到。
500 ：服務(wù)器端發(fā)生了一個(gè)不可預(yù)知的錯(cuò)誤鳖链。
503 ：服務(wù)器端當(dāng)前還不能處理客戶端的這個(gè)請(qǐng)求姆蘸，可能過段時(shí)間之后才能恢復(fù)正常。
HTML含義
- HTML（超文本標(biāo)記語(yǔ)言）是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言芙委。 HTML 不需要編譯逞敷，可以直接由瀏覽器執(zhí)行，它的解析依賴于瀏覽器的內(nèi)核灌侣。 它不是一種編程語(yǔ)言推捐，而是一種標(biāo)記語(yǔ)言。
HTML網(wǎng)頁(yè)結(jié)構(gòu)
- 一個(gè)網(wǎng)頁(yè)的基本結(jié)構(gòu)：
<!DOCTYPE html>
<html>
<head>
<title>HTML 簡(jiǎn)介</title>
</head>
<body></body>
</html>
<!DOCTYPE html> 是我們的文檔聲明頭侧啼。他告訴了瀏覽器牛柒，本文檔處理的是 HTML 文檔愕秫。html 標(biāo)簽即根元素，此處表示文檔的開始焰络。head 標(biāo)簽是網(wǎng)頁(yè)的頭部，設(shè)置網(wǎng)頁(yè)的相關(guān)信息符喝。title 標(biāo)簽設(shè)置網(wǎng)頁(yè)標(biāo)題闪彼。body 標(biāo)簽定義文檔的主體，也就是我們的主要內(nèi)容协饲。
- 注釋
<!--這是一段注釋-->
HTML常用標(biāo)簽
雙標(biāo)簽（雙標(biāo)記）
- 雙標(biāo)記也稱體標(biāo)記畏腕，是指由開始和結(jié)束兩個(gè)標(biāo)記符組成的標(biāo)記。其基本語(yǔ)法格式如下：
<標(biāo)記名></標(biāo)記名>
常見的雙標(biāo)簽：
<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>
單標(biāo)簽（單標(biāo)記）
- 單標(biāo)記也稱空標(biāo)記茉稠，是指用一個(gè)標(biāo)記符號(hào)即可完整地描述某個(gè)功能的標(biāo)記描馅。其基本語(yǔ)法格式如下：
<標(biāo)記名/>
常見的單標(biāo)簽：
<br />
<!--換行-->
<hr />
<!--水平分隔線-->
<meta />
<img />
標(biāo)簽的關(guān)系
- 嵌套關(guān)系
<head>
<title> </title>
</head>
- 并列關(guān)系
<head></head>
<body></body>
h系列標(biāo)簽
- h 標(biāo)簽有六種 h1，h2而线，h3铭污，h4，h5膀篮，h6嘹狞，它代表著我們的標(biāo)題。
<!DOCTYPE html>
<html>
<head>
<title>HTML 簡(jiǎn)介</title>
<meta charset="utf-8" />
</head>
<body>
<h1>我是一級(jí)標(biāo)題</h1>
<h2>我是二級(jí)標(biāo)題</h2>
<h3>我是三級(jí)標(biāo)題</h3>
<h4>我是四級(jí)標(biāo)題</h4>
<h5>我是五級(jí)標(biāo)題</h5>
<h6>我是六級(jí)標(biāo)題</h6>
</body>
</html>
p標(biāo)簽
- p 標(biāo)簽是我們的文本標(biāo)簽誓竿。刪掉上段代碼 <body> 標(biāo)簽里的內(nèi)容磅网，把下面的內(nèi)容放到 <body> 標(biāo)簽里面去。
<!DOCTYPE html>
<html>
<head>
<title>HTML 簡(jiǎn)介</title>
<meta charset="utf-8" />
</head>
<body>
<p>我是第一段文字筷屡，實(shí)驗(yàn)樓涧偷，做實(shí)驗(yàn)，學(xué)編程</p>
<p>我是第二段文字毙死，實(shí)驗(yàn)樓燎潮，做實(shí)驗(yàn)，學(xué)編程</p>
</body>
</html>
圖片標(biāo)簽
- HTML 的圖像是通過標(biāo)簽
<img>來(lái)定義的扼倘。 語(yǔ)法:<img src="圖片地址"/>跟啤。
<p>小喬圖片：</p>
<img src="圖片地址" />
a標(biāo)簽
-
<a>標(biāo)簽是超鏈接標(biāo)簽，意思就是我們點(diǎn)擊它可以跳轉(zhuǎn)到一個(gè)網(wǎng)頁(yè)唉锌。
<a href="鏈接地址/">需要點(diǎn)擊的文字</a>
<a >我是第二段文字</a>
div標(biāo)簽
- <div> 標(biāo)簽是一個(gè)塊級(jí)元素隅肥，塊級(jí)元素占據(jù)其父元素（容器）的整個(gè)空間，你可以把它想成一個(gè)盒子袄简。 <div> 能夠設(shè)置其寬高腥放。
<div style="width:200px;height:200px;background:pink">
</div>
這里設(shè)置的 style，效果是生成一個(gè)寬高 200 像素的紅色 div绿语。
換行標(biāo)簽和空格字符
- 在瀏覽器顯示頁(yè)面時(shí)秃症，瀏覽器會(huì)移除源代碼中多余的空格和空行候址，所有連續(xù)的空格或空行都會(huì)被認(rèn)為是一個(gè)空格。如果希望在不產(chǎn)生一個(gè)新段落的情況下?lián)Q行种柑，可以使用
<br/>標(biāo)簽岗仑。如果想使用空格的話可以使用 字符。
<body>
<p>這是一段文字 前面有很多空格但是只顯示一個(gè)</p>
<p>這是一段文字 用了空格字符</p>
<br />
<p>上面是換行符</p>
</body>
水平分割線
-
<hr/>標(biāo)簽用于在 HTML 頁(yè)面中創(chuàng)建一條水平線聚请。
<body>
<hr/>
<hr/>
<hr/>
</body>
容器標(biāo)簽（div和span）
- 標(biāo)簽 <div> 可將網(wǎng)頁(yè)頁(yè)面分割成不同的獨(dú)立部分荠雕，通常用于定義文檔中的區(qū)域或節(jié)。該標(biāo)簽是一個(gè)塊級(jí)元素驶赏，瀏覽器會(huì)自動(dòng)在 <div> 和 </div> 所標(biāo)記的區(qū)域前后自動(dòng)放置一個(gè)換行符炸卑。
- 標(biāo)簽 <span> 通常作為文本的容器，它沒有特定的含義和樣式煤傍，只有與 CSS 同時(shí)使用才可以為指定文本設(shè)置樣式屬性盖文。該標(biāo)簽是一個(gè)內(nèi)聯(lián)元素，他與塊級(jí)元素相反蚯姆，內(nèi)聯(lián)元素不會(huì)自動(dòng)在前后自動(dòng)放置換行符五续，因此內(nèi)聯(lián)元素會(huì)默認(rèn)顯示在同一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
#box {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="box">這是div標(biāo)簽龄恋，自動(dòng)換行</div>
<input type="text" /><span>這是span標(biāo)簽返帕，不自動(dòng)換行</span>
</body>
</html>
HTML元素
- HTML 元素指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼。
例子：
<p>I Love You</p>
注：這個(gè)元素定義了 HTML 文檔中的一個(gè)段落篙挽。這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <p>荆萤，以及一個(gè)結(jié)束標(biāo)簽 </p>。元素內(nèi)容是：I Love You铣卡。
HTML列表
- 列表作為網(wǎng)頁(yè)設(shè)計(jì)的重要內(nèi)容之一链韭，能夠用來(lái)制作導(dǎo)航欄和新聞列表等。HTML 列表分為：有序列表（ol）煮落，無(wú)序列表（ul）以及自定義列表（dl）敞峭。
無(wú)序列表與有序列表
- 無(wú)序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用實(shí)心圓蝉仇、空心圓旋讹、方塊進(jìn)行標(biāo)記，無(wú)序列表使用
<ul>標(biāo)簽轿衔。同樣沉迹，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記害驹。有序列表始于<ol>標(biāo)簽鞭呕。每個(gè)列表項(xiàng)始于<li>標(biāo)簽。
<p>無(wú)序列表</p>
<ul>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
</ul>
<p>有序列表</p>
<ol>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
</ol>
可以看到有多少個(gè)列表項(xiàng)就有多少個(gè) <li> 標(biāo)簽宛官。
- 無(wú)序列表和有序列表的 type 屬性：
type 屬性定義了列表項(xiàng)前項(xiàng)目符號(hào)的類型葫松。
<ul> 標(biāo)簽的 type 屬性：
image.png
<ol> 標(biāo)簽的 type 屬性：
image.png
