前端三大塊
一费彼、HTML負(fù)責(zé)頁面結(jié)構(gòu)
二隙袁、CSS負(fù)責(zé)頁面樣式痰娱，美化頁面
三、JavaScript負(fù)責(zé)頁面行為
HTML
超文本標(biāo)記語言
跟標(biāo)簽
1菩收、<html></html>
一個(gè)頁面中有且只有一個(gè)根標(biāo)簽梨睁，網(wǎng)頁中的所有內(nèi)容都應(yīng)該寫在html根標(biāo)簽中
2、head標(biāo)簽
<head></head>
該標(biāo)簽中的內(nèi)容娜饵，不會(huì)在網(wǎng)頁中直接顯示坡贺，它用來幫助瀏覽器解析頁面
3、body標(biāo)簽
<body></body>
用來設(shè)置網(wǎng)頁的主體內(nèi)容箱舞，網(wǎng)頁中所有可見的內(nèi)容遍坟，都應(yīng)該在body中編寫
注釋
1、
在這個(gè)結(jié)構(gòu)中晴股，可以來編寫HTML的注釋愿伴，注釋中的內(nèi)容，不會(huì)在頁面中顯示电湘，但是可以在源碼中查看隔节， 我們可以通過編寫注釋來對(duì)代碼進(jìn)行描述鹅经，從而幫助其他的開發(fā)人員工作，一定要養(yǎng)成良好的編寫注釋的習(xí)慣怎诫，但是注釋一定要簡(jiǎn)單明了
2瘾晃、屬性：
可以通過屬性來設(shè)置標(biāo)簽如何處理標(biāo)簽中的內(nèi)容，可以在開始標(biāo)簽中添加屬性刽虹，屬性需要寫在開始標(biāo)簽中酗捌，實(shí)際上就是一個(gè)名值對(duì)的結(jié)構(gòu)，屬性名="屬性值"涌哲，一個(gè)標(biāo)簽中可以同時(shí)設(shè)置多個(gè)屬性胖缤，屬性之間用空格隔開
3、<p>我是一個(gè)p標(biāo)簽阀圾，我用來表示一個(gè)段落</p>
在HTML中哪廓，字符之間寫再多的空格，瀏覽器也會(huì)當(dāng)成一個(gè)空格解析初烘，換行也會(huì)當(dāng)成一個(gè)空格解析
涡真，在頁面中可以使用br標(biāo)簽來表示一個(gè)換行，br標(biāo)簽是一個(gè)自結(jié)束標(biāo)簽
4肾筐、h
<h1>這是我的第一個(gè)網(wǎng)頁</h1>
文檔聲明
1哆料、h5的文檔聲明
聲明當(dāng)前的網(wǎng)頁是按照HTML5標(biāo)準(zhǔn)編寫的，編寫網(wǎng)頁時(shí)一定要將此聲明寫在網(wǎng)頁的最上邊吗铐，如果不寫文檔聲明东亦，則會(huì)導(dǎo)致有些瀏覽器進(jìn)入一個(gè)怪異模式，導(dǎo)致瀏覽器無法正常解析顯示網(wǎng)頁唬渗，所以為了避免進(jìn)入該模式典阵，一定要寫文檔聲明
2、<!DOCTYPE html>
h5的文檔聲明镊逝，聲明當(dāng)前的網(wǎng)頁是按照HTML5標(biāo)準(zhǔn)編寫的
壮啊，編寫網(wǎng)頁時(shí)一定要將此聲明寫在網(wǎng)頁的最上邊，如果不寫文檔聲明撑蒜，則會(huì)導(dǎo)致有些瀏覽器進(jìn)入一個(gè)怪異模式歹啼，導(dǎo)致瀏覽器無法正常解析顯示網(wǎng)頁，所以為了避免進(jìn)入該模式座菠，一定要寫文檔聲明
設(shè)置字符集
1染突、<meta charset="utf-8" />
需要告訴瀏覽器，網(wǎng)頁所采用的編碼字符集辈灼，meta標(biāo)簽用來設(shè)置網(wǎng)頁的一些元數(shù)據(jù)，比如網(wǎng)頁的字符集也榄、關(guān)鍵字巡莹、簡(jiǎn)介司志，meta是一個(gè)自結(jié)束標(biāo)簽，編寫一個(gè)自結(jié)束標(biāo)簽時(shí)降宅，可以在開始標(biāo)簽中添加一個(gè)/
常用的標(biāo)簽
1骂远、<h1>一級(jí)標(biāo)題</h1>
<h2>一級(jí)標(biāo)題</h2>
標(biāo)題標(biāo)簽：在HTML中，一共有六級(jí)標(biāo)題標(biāo)簽腰根，h1h6激才，在顯示效果上h1最大，h6最小额嘿，但是文字的大小我們并不關(guān)心瘸恼，使用HTML標(biāo)簽時(shí)，關(guān)心的是標(biāo)簽的語義册养，我們使用的標(biāo)簽都是語義化標(biāo)簽东帅，6級(jí)標(biāo)題中，h1的最重要球拦，表示一個(gè)網(wǎng)頁中的主要內(nèi)容靠闭，h2h6重要性依次降低，對(duì)于搜索引擎來說坎炼，h1的重要性僅次于title愧膀，搜索引擎檢索完title，會(huì)立即查看h1中的內(nèi)容谣光，h1標(biāo)簽非常重要檩淋，它會(huì)影響到頁面在搜索引擎中的排名，頁面只能寫一個(gè)h1抢肛，一般頁面中標(biāo)題標(biāo)簽只使用h1狼钮、h2、h3捡絮，h3以后的基本不使用
2熬芜、<br />
換行
3、<hr />
hr標(biāo)簽也是一個(gè)自結(jié)束標(biāo)簽福稳，可以在頁面中生成一條水平線
實(shí)體
1涎拉、< <
> >
空格 ?
版權(quán)符號(hào) ?
在HTML中，一些如<的圆、>這種特殊字符是不能直接使用的
鼓拧，需要使用一些特殊的符號(hào)來表示這些特殊字符，這些特殊符號(hào)稱為實(shí)體（轉(zhuǎn)義字符）越妈，瀏覽器解析到實(shí)體時(shí)季俩，會(huì)自動(dòng)將實(shí)體轉(zhuǎn)換為其對(duì)應(yīng)的字符，實(shí)體的語法：&實(shí)體的名字;
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>實(shí)體</title>
</head>
<body>
a<b>c
<p>?今天天氣???好晴朗梅掠，處處好風(fēng)光</p>
</body>
</html>
meta標(biāo)簽
1酌住、meta標(biāo)簽
01店归、使用meta標(biāo)簽還可以用來設(shè)置網(wǎng)頁的關(guān)鍵字
eg:<meta name="keywords" content="HTML5,JavaScript,前端,Java" />
02、還可以用來指定網(wǎng)頁的描述酪我，搜索引擎在檢索頁面時(shí)消痛，會(huì)同時(shí)槍擊頁面中的關(guān)鍵詞和描述，但是這兩個(gè)值不會(huì)影響頁面在搜索引擎中的排名
eg:<meta name="description" content="發(fā)布h5都哭、js等前端相關(guān)的信息" />
03秩伞、使用meta可以用來做請(qǐng)求的重定向
<meta http-equiv="refresh" content="秒數(shù);url=目標(biāo)路徑" />
eg:<meta http-equiv="refresh" content="5；url=http://www.baidu.com" />
<h1>5秒以后跳轉(zhuǎn)頁面</h1>
XHTML的語法規(guī)范
1欺矫、HTML中不區(qū)分大小寫纱新，但是我們一般都使用小寫
2、HTML中的注釋不能嵌套
--> ）這是錯(cuò)的
3汇陆、HTML標(biāo)簽必須結(jié)構(gòu)完整怒炸，要么成對(duì)出現(xiàn)，要么自結(jié)束標(biāo)簽
4毡代、HTML標(biāo)簽可以嵌套阅羹，但是不能交叉嵌套
5、HTML標(biāo)簽中的屬性必須有值教寂，且值必須加引號(hào)（單引號(hào)雙引號(hào)都可以）
6捏鱼、瀏覽器盡最大的努力正確地解析頁面，你所有的不符合語法規(guī)范的內(nèi)容酪耕，瀏覽器都會(huì)為你自動(dòng)修正导梆，但是有些情況會(huì)修正錯(cuò)誤
7、font
<p>今天天氣<font color="red">真不錯(cuò)</font></p>
內(nèi)聯(lián)框架
1迂烁、使用內(nèi)聯(lián)框架可以引入一個(gè)外部的頁面看尼，使用iframe來創(chuàng)建一個(gè)內(nèi)聯(lián)框架
屬性：
src：指向一個(gè)外部頁面的路徑，可以使用相對(duì)路徑
width：
height：
name：可以為內(nèi)聯(lián)框架指定一個(gè)name屬性
在現(xiàn)實(shí)開發(fā)中不推薦使用內(nèi)聯(lián)框架盟步，因?yàn)閮?nèi)聯(lián)框架中的內(nèi)容不會(huì)被搜索引擎所檢索
超鏈接
1藏斩、使用超鏈接可以讓我們從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面
，使用a標(biāo)簽來創(chuàng)建一個(gè)超鏈接
屬性：
href：指向鏈接跳轉(zhuǎn)的目標(biāo)地址却盘，可以寫一個(gè)相對(duì)路徑狰域，也可以寫一個(gè)完整的地址
eg:<a >我是一個(gè)超鏈接</a><br /><br />
2、a標(biāo)簽中的target屬性可以用來指定打開鏈接的位置
可選值：
_self：表示在當(dāng)前窗口中打開（默認(rèn)值）
_blank：在新的窗口中打開鏈接
可以設(shè)置一個(gè)內(nèi)聯(lián)框架的name屬性值黄橘，鏈接將會(huì)在指定的內(nèi)聯(lián)框架中打開
3兆览、<center></center>
center標(biāo)簽中的內(nèi)容，會(huì)默認(rèn)在頁面中居中顯示
我們可以將要居中的元素全都放到center中
CSS
1塞关、也可以將CSS樣式編寫到head中的style標(biāo)簽里抬探，稱為內(nèi)部樣式表，將樣式表編寫的style標(biāo)簽中帆赢，然后通過CSS選擇器選中指定元素小压，然后可以同時(shí)為這些元素一起設(shè)置樣式砰左，這樣可以使樣式進(jìn)一步的復(fù)用，將樣式表編寫到style標(biāo)簽中场航，也可以使表現(xiàn)和結(jié)構(gòu)進(jìn)一步分離，它也是我們推薦的使用方式
2廉羔、還可以將樣式表編寫到外部的CSS文件中溉痢，然后通過link標(biāo)簽來將外部的CSS文件引入到當(dāng)前頁面中，這樣外部文件中的CSS樣式表將會(huì)應(yīng)用到當(dāng)前頁面中憋他，將CSS樣式統(tǒng)一編寫到外部的樣式表中孩饼，完全使結(jié)構(gòu)和表現(xiàn)分離，可以使樣式表在不同的頁面中使用竹挡，最大限度地使樣式可以進(jìn)行復(fù)用镀娶，將樣式統(tǒng)一寫在樣式表中，然后通過link標(biāo)簽引入揪罕，可以利用瀏覽器的緩存梯码，加快用戶訪問的速度，提高了用戶體驗(yàn)
好啰，所以在開發(fā)中我們最推薦使用的方式就是外部的CSS文件
3轩娶、可以將CSS樣式編寫到元素的style屬性當(dāng)中，這種樣式稱為內(nèi)聯(lián)樣式框往，內(nèi)聯(lián)樣式只對(duì)當(dāng)前的元素中的內(nèi)容起作用鳄抒，內(nèi)聯(lián)樣式不方便復(fù)用，內(nèi)聯(lián)樣式屬于結(jié)構(gòu)與表現(xiàn)耦合椰弊，不方便后期的維護(hù)许溅，不推薦使用的
eg：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>舉頭望明月，低頭思故鄉(xiāng)</p>
<p>舉頭望明月秉版，低頭思故鄉(xiāng)</p>
<p>舉頭望明月贤重，低頭思故鄉(xiāng)</p>
</body>
</html>
CSS語法
1、<style type="text/css">
CSS的注釋沐飘，作用和HTML注釋類似游桩，只不過它必須編寫在style標(biāo)簽中，或者是CSS文件中
CSS的語法：選擇器 聲明塊
選擇器：
- 通過選擇器可以選中頁面中指定的元素耐朴，并且將聲明塊中的樣式應(yīng)用到選擇器對(duì)應(yīng)的元素上
聲明塊： - 聲明塊緊跟在選擇器的后邊借卧，使用一對(duì){}括起來
- 聲明塊中實(shí)際上就是一組一組的名值對(duì)結(jié)構(gòu)
- 這一組一組的名值對(duì)我們稱為聲明
- 在一個(gè)聲明塊中可以寫多個(gè)聲明，多個(gè)聲明之間使用;隔開
- 聲明的樣式名和樣式值之間使用:來連接
eg：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS語法</title>
<style type="text/css">
p{
color:red;
font-size:40px;
}
</style>
</head>
<body>
<p>今天天氣真不錯(cuò)筛峭，PM2.5也就500</p>
</body>
</html>
Document
eg：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<h1>這是一個(gè)非常漂亮的網(wǎng)頁</h1>
<h2>你看我出不出來</h2>
<h2>你看我出不出來</h2>
<h2>你看我出不出來</h2>
<h2>你看我出不出來</h2>
<h2>你看我出不出來</h2>
<h2>你看我出不出來</h2>
<h2>你看我出不出來</h2>
<h2>你看我出不出來</h2>
</body>
</html>
塊和內(nèi)聯(lián)
1铐刘、塊元素
所謂的塊元素就是會(huì)獨(dú)占一行的元素
無論它的內(nèi)容有多少，它都會(huì)獨(dú)占一整行
常見的塊元素：div p h1 h2 h3……
div這個(gè)標(biāo)簽沒有任何語義影晓，就是一個(gè)純粹的塊元素
并且不會(huì)為它里邊的元素設(shè)置任何的默認(rèn)樣式
div元素主要用來對(duì)頁面進(jìn)行布局的
2镰吵、 內(nèi)聯(lián)元素（行內(nèi)元素）
所謂的行內(nèi)元素指的是只占自身大小的元素檩禾，不會(huì)占用一行
常見的內(nèi)聯(lián)元素：span a img iframe
span沒有任何語義，span標(biāo)簽專門用來選中文字疤祭，然后為文字來設(shè)置樣式
塊元素主要用來做頁面中的布局盼产，內(nèi)聯(lián)元素主要用來選中文本設(shè)置樣式
一般情況下只使用塊元素去包含內(nèi)聯(lián)元素，而不會(huì)使用內(nèi)聯(lián)元素去包含一個(gè)塊元素
a元素可以包含任意元素勺馆，除了他本身
p元素不可以包含任何其它的塊元素
eg：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>塊和內(nèi)聯(lián)</title>
</head>
<body>
<p><div>我是一個(gè)span</div></p>
<a href="#"><a href="#">我是一個(gè)超鏈接</a></a>
<a href="#">
<div style="background-color: red; width: 200px;">
我是一個(gè)div
</div>
</a>
<div style="background-color: yellow; width: 200px;">
我是一個(gè)div
</div>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<hr />
<span>我是一個(gè)span</span>
<span>我是一個(gè)span</span>
<span style="color: red;">我是一段文字</span>
</body>
</html>
