餐廳聯(lián)系
1,plate
2,bento
3,#fancy
4,plate apple
5,#fancy pickle
6,apple.small,plate.small
7,orange.small
8,bento orange.small
9,plate,bento
10,*
11,plate>*
12,plate+small,plate+apple
13,bento~pickle
14,plate>apple
15,plate>:first-child
16,plate>:only-child
17,plate#fancy>apple.small,pickle.small
18,:nth-child(3)
19,:nth-last-child(4)
20,apple:firth-of-type
21,:nth-of-type(even)
22,:nth-of-type(2n+3)
23,apple:only-of-type
24,orange:last-of-type,apple:last-of-type
25,bento:empty
26,apple:not(.small)
作業(yè)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>東風(fēng)破</title>
<style type="test/css">
</style>
</head>
<body>
<center>
<a href="#" target="_blank">去底部</a>
<a href="#" target="_blank">去指定位置</a>
<h1>這是我的個(gè)人博客</h1>
<hr>
<h2>東風(fēng)破</h2>
<a target="_blank" name="qq">周杰倫</a>
? ? ? ? <p>一盞離愁孤燈佇立在窗口</p>
? ? ? ? <p>我在門后假裝你人還沒走</p>
? ? ? ? <p>舊地如重游月圓更寂寞</p>
? ? ? ? <p>夜半清醒的燭火不忍苛責(zé)我</p>
? ? ? ? <p>一壺漂泊浪跡天涯難入喉</p>
? ? ? ? <p>你走之后酒暖回憶思念瘦</p>
? ? ? ? <p>水向東流時(shí)間怎么偷</p>
? ? ? ? <p>花開就一次成熟我卻錯(cuò)過</p>
? ? ? ? <p>誰在用琵琶彈奏一曲東風(fēng)破</p>
? ? ? ? <p>歲月在墻上剝落看見小時(shí)候</p>
? ? ? ? <p>猶記得那年我們都還很年幼</p>
? ? ? ? <p>而如今琴聲幽幽我的等候你沒聽過</p>s
? ? ? ? <img src="https://img01.sogoucdn.com/app/a/100520093/453d6c68217a4fae-7a8c60269214c589-f3de86084f5e852955f97c9209954be9.jpg" width="400px">
? ? ? ? <p>誰在用琵琶彈奏一曲東風(fēng)破</p>
? ? ? ? <p>楓葉將故事染色結(jié)局我看透</p>
? ? ? ? <p>籬笆外的古道我牽著你走過</p>
? ? ? ? <p>荒煙蔓草的年頭就連分手都很沉默</p>
? ? ? ? <p>一壺漂泊浪跡天涯難入喉</p>
? ? ? ? <p>你走之后酒暖回憶思念瘦</p>
? ? ? ? <p>水向東流時(shí)間怎么偷</p>
? ? ? ? <p>花開就一次成熟我卻錯(cuò)過</p>
? ? ? ? <p>誰在用琵琶彈奏一曲東風(fēng)破</p>
? ? ? ? <p>歲月在墻上剝落看見小時(shí)候</p>
? ? ? ? <p>猶記得那年我們都還很年幼</p>
? ? ? ? <p>而如今琴聲幽幽我的等候你沒聽過</p>
? ? ? ? <p>誰在用琵琶彈奏一曲東風(fēng)破</p>
? ? ? ? <p>楓葉將故事染色結(jié)局我看透</p>
? ? ? ? <p>籬笆外的古道我牽著你走過</p>
? ? ? ? <p>荒煙蔓草的年頭就連分手都</p>
<img src="http://a4.att.hudong.com/35/84/01300000234985122043846480800.jpg"width="400px">
? ? ? ? <p>誰在用琵琶彈奏一曲東風(fēng)破</p>
? ? ? ? <p>歲月在墻上剝落看見小時(shí)候</p>
? ? ? ? <p>猶記得那年我們都還很年幼</p>
? ? ? ? <p>而如今琴聲幽幽我的等候你沒聽過</p>
? ? ? ? <p>誰在用琵琶彈奏一曲東風(fēng)破</p>
? ? ? ? <p>楓葉將故事染色結(jié)局我看透</p>
? ? ? ? <p>籬笆外的古道我牽著你走過</p>
? ? ? ? <p>荒煙蔓草的年頭就連分手都很沉默</p>
? ? <hr>
? ? <a>友情鏈接：</a>
? ? <a href="#" target="_blank">A網(wǎng)站</a>
? ? <a>|</a>
? ? <a href="#" target="_blank">B網(wǎng)站</a>
? ? <a>|</a>
? ? <a href="#" target="_blank">C網(wǎng)站</a>
<br>
<p></p>
? ? <a href="#" target="_blank">回到頂部</a>
? ? <a>|</a>
<a href="#" target="_blank">聯(lián)系我們</a>
</center>
</body>
</html>
內(nèi)聯(lián)框架
使用內(nèi)聯(lián)框架可以引入一個(gè)外部的頁面
使用iframe來創(chuàng)建一個(gè)內(nèi)聯(lián)框架
屬性：
src：指向一個(gè)外部頁面的路徑幌氮，可以使用相對路徑
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ì)被搜索引擎所檢索
<iframe src="demo010_XHTML的語法規(guī)范.html" name="tom"></iframe>
超鏈接
使用超鏈接可以讓我們從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面
使用a標(biāo)簽來創(chuàng)建一個(gè)超鏈接
屬性：
href：指向鏈接跳轉(zhuǎn)的目標(biāo)地址，可以寫一個(gè)相對路徑该互，也可以寫一個(gè)完整的地址
<a >我是一個(gè)超鏈接</a><br /><br />
<a >我是一個(gè)超鏈接</a><br /><br />
a標(biāo)簽中的target屬性可以用來指定打開鏈接的位置
可選值：
_self：表示在當(dāng)前窗口中打開（默認(rèn)值）
_blank：在新的窗口中打開鏈接
可以設(shè)置一個(gè)內(nèi)聯(lián)框架的name屬性值米者，鏈接將會(huì)在指定的內(nèi)聯(lián)框架中打開
<a href="demo011_內(nèi)聯(lián)框架.html" target="tom">我是一個(gè)超鏈接</a><br /><br />
<iframe src="demo010_XHTML的語法規(guī)范.html" name="tom"></iframe>
center標(biāo)簽中的內(nèi)容，會(huì)默認(rèn)在頁面中居中顯示
我們可以將要居中的元素全都放到center中
<center>
<p>我是一個(gè)p標(biāo)簽</p>
</center>
css
也可以將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)一步分離喂分，它也是我們推薦的使用方式
<style type="text/css">
p{
color:red;
font-size:40px;
}
</style>
還可以將樣式表編寫到外部的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文件
<link rel="stylesheet" type="text/css" href="style.css" />
css 語法
CSS的注釋酿愧，作用和HTML注釋類似沥潭，只不過它必須編寫在style標(biāo)簽中，或者是CSS文件中
CSS的語法：
選擇器 聲明塊
選擇器：
- 通過選擇器可以選中頁面中指定的元素嬉挡，并且將聲明塊中的樣式應(yīng)用到選擇器對應(yīng)的元素上
聲明塊：
- 聲明塊緊跟在選擇器的后邊钝鸽，使用一對{}括起來
- 聲明塊中實(shí)際上就是一組一組的名值對結(jié)構(gòu)
- 這一組一組的名值對我們稱為聲明
- 在一個(gè)聲明塊中可以寫多個(gè)聲明，多個(gè)聲明之間使用;隔開
- 聲明的樣式名和樣式值之間使用:來連接
p{
color:red;
font-size:40px;
}
開發(fā)工具
<link rel="stylesheet" type="text/css" href="css/style.css">
塊和內(nèi)聯(lián)
塊元素
所謂的塊元素就是會(huì)獨(dú)占一行的元素
無論它的內(nèi)容有多少庞钢，它都會(huì)獨(dú)占一整行
常見的塊元素：div p h1 h2 h3……
div這個(gè)標(biāo)簽沒有任何語義拔恰，就是一個(gè)純粹的塊元素
并且不會(huì)為它里邊的元素設(shè)置任何的默認(rèn)樣式
div元素主要用來對頁面進(jìn)行布局的
內(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元素不可以包含任何其它的塊元素
常用選擇器
元素選擇器
作用：通過元素選擇器可以選擇頁面中的所有指定元素
語法：標(biāo)簽名{}
id選擇器
作用：通過元素的id屬性值選中唯一的一個(gè)元素
語法：#id屬性值{}
類選擇器
作用：通過元素的class屬性值選中一組元素
語法：.class屬性值{}
選擇器分組（并集選擇器）
作用：通過選擇器分組可以同時(shí)選中多個(gè)選擇器對應(yīng)的元素
語法：選擇器1,選擇器2,選擇器N{}
通配選擇器
作用：可以用來選中頁面中的所有的元素
語法：*{}
復(fù)合選擇器（交集選擇器）
作用：可以選中同時(shí)滿足多個(gè)選擇器的元素
語法：選擇器1選擇器2選擇器N{}
子元素和后代元素選擇器
后代元素選擇器
作用：選中指定元素的指定后代元素
語法：祖先元素 后代元素{}
子元素選擇器
作用：選中指定父元素的指定子元素
語法：父元素 > 子元素
IE6及以下的瀏覽器不支持子元素選擇器
元素之間的關(guān)系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或間接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或間接被祖先元素包含的元素桐款，子元素也是后代元素
兄弟元素：擁有相同父元素的元素叫做兄弟元素
偽類選擇器
類專門用來表示元素的一種特殊的狀態(tài)
比如：訪問過的超鏈接咸这、普通的超鏈接、獲取焦點(diǎn)的文本框
當(dāng)我們需要為處在這些特殊狀態(tài)的元素設(shè)置樣式時(shí)魔眨，就可以使用偽類
為沒訪問過的鏈接設(shè)置一個(gè)顏色為綠色
:link 表示普通的鏈接（沒訪問過的鏈接）
a:link{
color: yellowgreen;
font-size: 50px;
}
為訪問過的鏈接設(shè)置一個(gè)顏色為紅色
:visited 表示訪問過的鏈接
瀏覽器是通過歷史記錄來判斷一個(gè)鏈接是否訪問過
由于涉及到用戶的隱私問題媳维，所以使用:visited偽類只能設(shè)置字體的顏色
a:visited{
color: red;
}
:hover 表示鼠標(biāo)移入的狀態(tài)
a:hover{
color: skyblue;
}
:active 表示超鏈接被點(diǎn)擊的狀態(tài)
a:active{
color: black;
}
/*文本框獲取焦點(diǎn)以后酿雪，修改背景顏色為黃色*/
input:focus{
background-color: yellow;
}
/*兼容大部分瀏覽器的*/
p::selection{
background-color: orange;
}
/*兼容火狐的*/
p::-moz-selection{
background-color: orange;
}
偽元素
p:before{
content: "我會(huì)出現(xiàn)在整個(gè)段落的最前邊";
color: green;
}
p:after{
content: "我會(huì)出現(xiàn)在整個(gè)段落的最后邊";
color: orange;
}
屬性選擇器
屬性選擇器
作用：可以根據(jù)元素中的屬性或?qū)傩灾祦磉x取指定元素
語法：
[屬性名] 選取含有指定屬性的元素
[屬性名="屬性值"] 選取含有指定屬性值的元素
[屬性名^="屬性值"] 選取屬性值以指定內(nèi)容開頭的元素
[屬性名$="屬性值"] 選取屬性值以指定內(nèi)容結(jié)尾的元素
[屬性名*="屬性值"] 選取屬性值包含指定內(nèi)容的元素
子類選擇器
為第一個(gè)p標(biāo)簽設(shè)置一個(gè)背景顏色為黃色
:first-child 可以選中第一個(gè)子元素
:last-child 可以選中最后一個(gè)子元素
:nth-child 可以選中任意位置的子元素
該選擇器后邊可以指定一個(gè)參數(shù)，指定要選中第幾個(gè)子元素
even 表示偶數(shù)位置的子元素
odd 表示奇數(shù)位置的子元素
兄弟元素選擇器
為span后的一個(gè)p元素設(shè)置一個(gè)背景顏色為黃色
后一個(gè)兄弟元素選擇器
作用：可以選中一個(gè)元素后緊挨著的指定的兄弟元素
語法：前一個(gè) + 后一個(gè)
span + p{
background-color: yellow;
}
選中后邊的所有兄弟元素
語法：前一個(gè) ~ 后邊所有
span ~ p{
background-color: yellow;
}
否定偽類
為所有的p元素設(shè)置一個(gè)背景顏色為黃色侄刽，除了class值為hello的
否定偽類：
作用：可以從已選中的元素中剔除出某些元素
語法：
:not(選擇器)
p:not(.hello){
background-color: yellow;
}
