img
使用img標(biāo)簽來(lái)向網(wǎng)頁(yè)中引入一個(gè)外部圖片
img標(biāo)簽也是一個(gè)自結(jié)束標(biāo)簽
屬性：
src：設(shè)置一個(gè)外部圖片的路徑
alt：可以用來(lái)設(shè)置在圖片不能顯示時(shí)，對(duì)圖片的描述
搜索引擎可以通過(guò)alt屬性來(lái)識(shí)別不同的圖片
如果不寫(xiě)alt屬性碰辅，則搜索引擎不會(huì)對(duì)img中的圖片進(jìn)行收錄
width：可以用來(lái)修改圖片的寬度健芭，一般使用px作為單位
height：可以用來(lái)修改圖片的高度随静，一般使用px作為單位
寬度和高度兩個(gè)屬性如果只設(shè)置一個(gè)，另一個(gè)也會(huì)同時(shí)等比例調(diào)整大小
如果兩值同時(shí)指定，則按照你指定的值來(lái)設(shè)置
一般開(kāi)發(fā)中除了自適應(yīng)的頁(yè)面锄码，不建議設(shè)置width和height
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圖片標(biāo)簽</title>
</head>
<body>
<img src="2.gif" alt="這是一只動(dòng)物" width="100px" height="500px" />
</body>
</html>
相對(duì)路徑
src屬性配置的是圖片的路徑触徐，目前我們所使用的路徑全都是相對(duì)路徑
相對(duì)路徑：
相對(duì)路徑指相對(duì)于當(dāng)前資源所在目錄的位置
可以使用../來(lái)返回上一級(jí)目錄咪鲜，返回幾級(jí)目錄就寫(xiě)幾個(gè)../
圖片的格式:
JPEG（JPG）
JPEG圖片支持的顏色比較多，圖片可以壓縮撞鹉，但是不支持透明
一般使用JPEG來(lái)保存照片等顏色豐富的圖片
GIFGIF支持的顏色少疟丙，只支持簡(jiǎn)單的透明，支持動(dòng)態(tài)圖
圖片顏色單一或者是動(dòng)態(tài)圖時(shí)可以使用GIF
PNGPNG支持的顏色多鸟雏，并且支持復(fù)雜的透明
-
可以用來(lái)顯示顏色復(fù)雜的透明的圖片
圖片的使用原則：
效果不一致享郊，使用效果好的
效果一致，使用小的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>相對(duì)路徑</title>
</head>
<body>
<img src="../img/2.gif" alt="這是一只動(dòng)物" />
</body>
</html>
使用meta標(biāo)簽還可以用來(lái)設(shè)置網(wǎng)頁(yè)的關(guān)鍵字
還可以用來(lái)指定網(wǎng)頁(yè)的描述
搜索引擎在檢索頁(yè)面時(shí)孝鹊，會(huì)同時(shí)槍擊頁(yè)面中的關(guān)鍵詞和描述炊琉，但是這兩個(gè)值不會(huì)影響頁(yè)面在搜索引擎中的排名
使用meta可以用來(lái)做請(qǐng)求的重定向
<meta http-equiv="refresh" content="秒數(shù);url=目標(biāo)路徑" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>meta標(biāo)簽</title>
<meta name="keywords" content="HTML5,JavaScript,前端,Java" />
<meta name="description" content="發(fā)布h5、js等前端相關(guān)的信息" />
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
</head>
<body>
<h1>5秒以后跳轉(zhuǎn)頁(yè)面</h1>
</body>
</html>
注釋
1又活、HTML中不區(qū)分大小寫(xiě)苔咪，但是我們一般都使用小寫(xiě)
2、HTML中的注釋不能嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>XHTML的語(yǔ)法規(guī)范</title>
</head>
<body>
-->
使用內(nèi)聯(lián)框架可以引入一個(gè)外部的頁(yè)面
使用iframe來(lái)創(chuàng)建一個(gè)內(nèi)聯(lián)框架
屬性：
src：指向一個(gè)外部頁(yè)面的路徑皇钞，可以使用相對(duì)路徑
width：
height：
name：可以為內(nèi)聯(lián)框架指定一個(gè)name屬性
在現(xiàn)實(shí)開(kāi)發(fā)中不推薦使用內(nèi)聯(lián)框架悼泌，因?yàn)閮?nèi)聯(lián)框架中的內(nèi)容不會(huì)被搜索引擎所檢索
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>內(nèi)聯(lián)框架</title>
</head>
<body>
<h1>我是demo11</h1>
<iframe src="demo010_XHTML的語(yǔ)法規(guī)范.html" name="tom"></iframe>
</body>
</html>
使用超鏈接可以讓我們從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面
使用a標(biāo)簽來(lái)創(chuàng)建一個(gè)超鏈接
屬性：
href：指向鏈接跳轉(zhuǎn)的目標(biāo)地址，可以寫(xiě)一個(gè)相對(duì)路徑夹界，也可以寫(xiě)一個(gè)完整的地址
a標(biāo)簽中的target屬性可以用來(lái)指定打開(kāi)鏈接的位置
可選值：
_self：表示在當(dāng)前窗口中打開(kāi)（默認(rèn)值）
_blank：在新的窗口中打開(kāi)鏈接
可以設(shè)置一個(gè)內(nèi)聯(lián)框架的name屬性值馆里，鏈接將會(huì)在指定的內(nèi)聯(lián)框架中打開(kāi)
center標(biāo)簽中的內(nèi)容隘世，會(huì)默認(rèn)在頁(yè)面中居中顯示
我們可以將要居中的元素全都放到center中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>超鏈接</title>
</head>
<body>
<h1>我是demo12</h1><a >我是一個(gè)超鏈接</a><br /><br /> <a >我是一個(gè)超鏈接</a><br /><br /> <a href="demo011_內(nèi)聯(lián)框架.html" target="tom">我是一個(gè)超鏈接</a><br /><br /> <iframe src="demo010_XHTML的語(yǔ)法規(guī)范.html" name="tom"></iframe> <center> <p>我是一個(gè)p標(biāo)簽</p> </center></body>
</html>
CSS的注釋是/...../，作用和HTML注釋類(lèi)似鸠踪，只不過(guò)它必須編寫(xiě)在style標(biāo)簽中丙者，或者是CSS文件中
CSS的語(yǔ)法：
選擇器 聲明塊
選擇器：
- 通過(guò)選擇器可以選中頁(yè)面中指定的元素，并且將聲明塊中的樣式應(yīng)用到選擇器對(duì)應(yīng)的元素上
聲明塊：
- 聲明塊緊跟在選擇器的后邊营密，使用一對(duì){}括起來(lái)
- 聲明塊中實(shí)際上就是一組一組的名值對(duì)結(jié)構(gòu)
- 這一組一組的名值對(duì)我們稱(chēng)為聲明
- 在一個(gè)聲明塊中可以寫(xiě)多個(gè)聲明械媒，多個(gè)聲明之間使用;隔開(kāi)
- 聲明的樣式名和樣式值之間使用:來(lái)連接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS語(yǔ)法</title>
<style type="text/css">p{ color:red; font-size:40px; } </style></head>
<body>
<p>今天天氣真不錯(cuò)，PM2.5也就500</p>
</body>
</html>
2评汰、CSS開(kāi)發(fā)工具
行內(nèi)樣式:
<p style="color: red;font-size: 30px"></p>
內(nèi)部樣式表:
<style>
p{color:red; font-size: 30px;}
<style>
外部樣式表:
<link rel="stylesheet" type="text/css"href="style.css">
<!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)頁(yè)</h1>
<h2>你看我出不出來(lái)</h2>
<h2>你看我出不出來(lái)</h2>
<h2>你看我出不出來(lái)</h2>
<h2>你看我出不出來(lái)</h2>
<h2>你看我出不出來(lái)</h2>
<h2>你看我出不出來(lái)</h2>
<h2>你看我出不出來(lái)</h2>
<h2>你看我出不出來(lái)</h2>
</body>
</html>
3纷捞、塊元素和內(nèi)聯(lián)元素
塊元素:
所謂的塊元素就是會(huì)獨(dú)占一行的元素
無(wú)論它的內(nèi)容有多少，它都會(huì)獨(dú)占一整行
常見(jiàn)的塊元素：div p h1 h2 h3……
div這個(gè)標(biāo)簽沒(méi)有任何語(yǔ)義被去，就是一個(gè)純粹的塊元素
并且不會(huì)為它里邊的元素設(shè)置任何的默認(rèn)樣式
div元素主要用來(lái)對(duì)頁(yè)面進(jìn)行布局的
內(nèi)聯(lián)元素:（行內(nèi)元素）
所謂的行內(nèi)元素指的是只占自身大小的元素主儡，不會(huì)占用一行
常見(jiàn)的內(nèi)聯(lián)元素：span a img iframe
span沒(méi)有任何語(yǔ)義，span標(biāo)簽專(zhuān)門(mén)用來(lái)選中文字惨缆，然后為文字來(lái)設(shè)置樣式
塊元素主要用來(lái)做頁(yè)面中的布局糜值，內(nèi)聯(lián)元素主要用來(lái)選中文本設(shè)置樣式
一般情況下只使用塊元素去包含內(nèi)聯(lián)元素，而不會(huì)使用內(nèi)聯(lián)元素去包含一個(gè)塊元素
a元素可以包含任意元素坯墨，除了他本身
p元素不可以包含任何其它的塊元素
<!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>
4寂汇、常用選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用選擇器</title>
<style type="text/css">
/為頁(yè)面中的所有的p元素，設(shè)置一個(gè)字體顏色為紅色/
/*
元素選擇器
作用：通過(guò)元素選擇器可以選擇頁(yè)面中的所有指定元素
語(yǔ)法：標(biāo)簽名{}
/
/p{
color: red;
}
h1{
color: red;
}*/
/*
id選擇器
作用：通過(guò)元素的id屬性值選中唯一的一個(gè)元素
語(yǔ)法：#id屬性值{}
*/
/*#p1{
font-size: 20px;
}*/
/*
類(lèi)選擇器
作用：通過(guò)元素的class屬性值選中一組元素
語(yǔ)法：.class屬性值{}
*/
/*.p2{
color: red;
}
.hello{
font-size: 50px;
}*/
/*為id為p1的元素捣染，class為p2的元素骄瓣，還有h1，同時(shí)設(shè)置一個(gè)背景顏色為黃色*/
/*
選擇器分組（并集選擇器）
作用：通過(guò)選擇器分組可以同時(shí)選中多個(gè)選擇器對(duì)應(yīng)的元素
語(yǔ)法：選擇器1,選擇器2,選擇器N{}
*/
/*#p1,.p2,h1{
background-color: yellow;
}*/
/*
通配選擇器
作用：可以用來(lái)選中頁(yè)面中的所有的元素
語(yǔ)法：*{}
*/
/**{
color: red;
}*/
/*為擁有class為p3的span元素設(shè)置一個(gè)背景顏色為黃色*/
/*
復(fù)合選擇器（交集選擇器）
作用：可以選中同時(shí)滿(mǎn)足多個(gè)選擇器的元素
語(yǔ)法：選擇器1選擇器2選擇器N{}
*/
span.p3{
background-color: yellow;
}
/*
對(duì)于id選擇器來(lái)說(shuō)耍攘，不建議使用復(fù)合選擇器
p#p1{
background-color: red;
}
*/
</style>
</head>
<body>
<h1>憫農(nóng)</h1>
<p>床前明月光</p>
<p>床前明月光</p>
<p id="p1">床前明月光</p>
<p class="p2 hello">床前明月光</p>
<p class="p2">床前明月光</p>
<p class="p2">床前明月光</p>
<p>床前明月光</p>
<p class="p3">床前明月光</p>
<span class="p3">疑是地上霜</span>
</body>
</html>
累贤。
