當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML学习*3

發(fā)布時間：2024/1/18 HTML 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML学习*3 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

HTML學(xué)習(xí)*3

第一部分
- 1.嵌套列表
- 2.表格標(biāo)簽
- 3.表格屬性
- 4.表單input標(biāo)簽
- 5.表單相關(guān)標(biāo)簽
- 6.表格表單組合實(shí)例
- 7.div與span
第二部分
- 1.CSS語法格式
- 2.CSS的引入方式
- 3.CSS顏色表示法
- 4.背景樣式
- 5.背景實(shí)現(xiàn)視覺差效果
- 6.邊框樣式
- 7.邊框?qū)崿F(xiàn)三角形
- 8.CSS文字樣式
- 9.字體大小粗細(xì)樣式
- 10.文本修飾和文本大小寫
- 11.文本縮進(jìn)和文本對齊
- 12.文本的行高
- 13.文本間距與英語折行
- 14.文本與段落實(shí)現(xiàn)個人案例
- 15.CSS復(fù)合樣式
- 15.id選擇器以及注意事項(xiàng)
- 16.class選擇器以及注意事項(xiàng)

第一部分

1.嵌套列表

列表之間可以互相嵌套，形成多層級的列表。
代碼展示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><ul><li>海南省<ul><li>三亞市</li><li>海口市</li><li>三沙市</li></ul></li></ul><dl><dt>中國<dd><dl><dt>海南省<dd>三亞市</dd><dd>海口市</dd><dd>三沙市</dd></dt></dl></dd></dt></dl> </body> </html>

效果演示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><h1>好美味的小吃</h1><ul><li>小吃類<ul><li>煮粉干</li><li>拌青菜</li><li>煎蛋</li><li>蛋炒飯</li><li>米飯</li></ul></li><li>鹵味類<ul><li>雞腸</li><li>面筋</li><li>牛肚</li><li>豬耳朵</li><li>豬頭肉</li><li>大腸</li><li>魷魚</li></ul></li><li>套餐類<ul><li>鹵面筋飯</li><li>豬肉肉飯</li><li>豬耳朵飯</li><li>鹵豬腳飯</li><li>鹵豬舌頭飯</li></ul></li><li>純爆類<ul><li>豬蹄黃豆</li><li>豬肚蓮子</li><li>豬心枸杞</li><li>羊肉枸杞</li><li>牛肉枸杞</li></ul></li></ul><dl><dt><em>親，20元以上可送餐哦!</em></dt></dl> </body> </html>

2.表格標(biāo)簽

<table> ：表格的最外層容器 <tr> ：定義表格行 <th> ：定義表頭 <td> ：定義表格單元 <caption> ：定義表格標(biāo)題語義化標(biāo)簽：<tHead> <tBody> <tFood>

代碼展示

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><table><caption>天氣預(yù)報(bào)</caption><tHead><tr><th>日期</th><th>天氣情況</th><th>出行情況</th></tr></tHead><tBody><tr><td>2022年10月23日</td><td><img src="./img/c407f8d96a1243cc.png" alt=""></td><td>天氣晴朗，適合出行</td></tr><tr><td>2022年10月24日</td><td><img src="./img/dae4a8054fc29ba9a6523b0a91a77335.jpeg" alt=""></td><td>有小雨，記得帶傘</td></tr></tBody><tFood></tFood></table> </body></html>

效果演示

注意：在一個table中，tBody是可以多次出現(xiàn)的，但是tHead，tFood只能出現(xiàn)一次。

3.表格屬性

border：表格邊框
cellpadding：單元格內(nèi)的空間
cellspacing：單元格之間的空間
rowspan：合并行
colspan：合并列
align：左右對齊方式（left，center，right）
valign：上下對齊方式（top，middle，bottom）
代碼演示：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><table border="1" cellpadding="30" cellspacing="30"><caption>天氣預(yù)報(bào)</caption><tHead><tr align="right"><th colspan="2">日期</th><th>天氣情況</th><th>出行情況</th></tr></tHead><tBody><tr valign="top"><td rowspan="2">2022年10月23日</td><td>白天</td><td><img src="./img/c407f8d96a1243cc.png" alt=""></td><td>天氣晴朗，適合出行</td></tr><tr><td>夜晚</td><td><img src="./img/c407f8d96a1243cc.png" alt=""></td><td>天氣晴朗，適合出行</td></tr><tr valign="bottom"><td rowspan="2">2022年10月24日</td><td>白天</td><td><img src="./img/dae4a8054fc29ba9a6523b0a91a77335.jpeg" alt=""></td><td>有小雨，記得帶傘</td></tr><tr><td>夜晚</td><td><img src="./img/dae4a8054fc29ba9a6523b0a91a77335.jpeg" alt=""></td><td>有小雨，記得帶傘</td></tr></tBody><tFood></tFood></table> </body></html>

效果演示

4.表單input標(biāo)簽

<form>:表單的最外層容器<input>:標(biāo)簽用于搜集用戶信息，根據(jù)不同的type屬性值，展示不同的控件，如輸入框，密碼框，復(fù)選框等。type屬性：1.text 普通的文本輸入框2.password 密碼輸入框3.checkbox 復(fù)選框4.radio 單選框5.file 上傳文件6.submit 提交按鈕7.reset 重置按鈕

注意：input為單標(biāo)簽
代碼演示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><form action=""><h2>輸入框：</h2><input type="text" placeholder="請輸入用戶名"><h2>密碼框：</h2><input type="password" placeholder="請輸入密碼"><h2>復(fù)選框</h2><input type="checkbox" disabled>蘋果<input type="checkbox" checked>香蕉<input type="checkbox">葡萄<h2>單選框</h2><input type="radio" name="oo">男<input type="radio" name="oo">女<h2>上傳文件</h2><input type="file"><h2>提交按鈕和重置按鈕</h2><input type="submit"><input type="reset"></form> </body> </html>

效果演示

5.表單相關(guān)標(biāo)簽

<textarea>:多行文本框 <select>,<option>:下拉菜單 <label>:輔助表單提升體驗(yàn)

代碼演示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><h2>多行文本框</h2><textarea cols="30" rows="10"></textarea><h2>下拉菜單</h2><select><option selected disabled>請選擇</option><option>北京</option><option>上海</option><option>三亞</option></select><select size="3"><option>北京</option><option>上海</option><option>三亞</option></select><select multiple><option>北京</option><option>上海</option><option>三亞</option></select><input type="file" multiple><input type="radio" name="oo" id="man"><label for="man">男</label><input type="radio" name="oo" id="woman"><label for="woman">女</label> </body> </html>

效果演示

6.表格表單組合實(shí)例

代碼演示

7.div與span

DIV元素，是用來為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個塊的，其中所包含元素的特性由DIV標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進(jìn)行控制。

span標(biāo)簽是超文本標(biāo)記語言（HTML）的行內(nèi)標(biāo)簽，被用來組合文檔中的行內(nèi)元素。span標(biāo)簽通常使用來將文本的一部分或者文檔的一部分獨(dú)立出來，從而對獨(dú)立出來的內(nèi)容設(shè)置單獨(dú)的樣式。span本身沒有任何屬性，也沒有固定的格式表現(xiàn)，當(dāng)對它應(yīng)用樣式時，它會產(chǎn)生視覺上的變化。

div : 做一個區(qū)域劃分的塊
span : 對文字進(jìn)行修飾的內(nèi)聯(lián)
代碼演示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <body><div style="border:1px gray solid;"><h2><a href="#">【千鋒教育】<span style="color:red">html5</span>-中國數(shù)萬程序員的選擇-官方首頁</a></h2><a href="#"><img src="https://ss3.baidu.com/-rVXeDTa2gU2pMbgoY3K/it/u=2492331056,4193866086&fm=202&mola=new&crop=v1" alt=""></a><p>優(yōu)勢: 三師護(hù)航就業(yè)薪資: 10K-20K培訓(xùn)方式: 全程面授培訓(xùn)類型: IT培訓(xùn)千鋒-致力于互聯(lián)網(wǎng)應(yīng)用研發(fā)培訓(xùn),中國程序員認(rèn)可的培訓(xùn)機(jī)構(gòu);千鋒開設(shè)web大前端,java,UI設(shè)計(jì),PHP,VR,linux,大數(shù)據(jù),pyhton,物聯(lián)..</p><a href="#">www.mobiletrain.org 2019-04- 評價廣告</a></div><div><h2><a href="#"><span>html5</span>_零基礎(chǔ)如何學(xué)<span>Html5</span>_從小白到大神進(jìn)階</a></h2><a href="#"><img src="https://ss3.baidu.com/-rVXeDTa2gU2pMbgoY3K/it/u=2922130382,676357541&fm=202&mola=new&crop=v1" alt=""></a><p>培訓(xùn)類型: Web前端特色: 包吃包住價格: 12期免息城市: 319個分校html5,中公優(yōu)就業(yè)上市企業(yè),免費(fèi)試學(xué)5天,不合適全額退款,先就業(yè)后付款,過萬家合作名企,學(xué)員與保險(xiǎn)公司簽訂就業(yè)保障協(xié)議,畢業(yè)..</p><a href="#">www.ujiuye.cn 2019-04- 評價廣告</a></div> </body> </html>

效果演示

第二部分

1.CSS語法格式

選擇器 { 屬性1 : 值1 ; 屬性2 : 值2 }

width : 寬
height : 高
background-color : 背景色

長度單位 :
1. px -> 像素
2. % -> 百分比
外容器1 -> 600px 當(dāng)前容器 50% -> 300px
外容器2 -> 400px 當(dāng)前容器 50% -> 200px
注釋 /注釋/

代碼演示

效果演示

2.CSS的引入方式

內(nèi)聯(lián)樣式
style屬性
2. 內(nèi)部樣式
style標(biāo)簽
區(qū)別：
內(nèi)部樣式的代碼可以復(fù)用、復(fù)合W3C的規(guī)范標(biāo)準(zhǔn)，進(jìn)行讓結(jié)構(gòu)和樣式分開處理。
3. 外部樣式
引入一個單獨(dú)的CSS文件，name.css
通過link標(biāo)簽引入外部資源，rel屬性指定資源跟頁面的關(guān)系，href屬性資源的地址。
通過@import方式引入外部樣式 ( 這種方式有很多問題，不建議使用 )

代碼演示

效果演示

代碼演示

div {color: blue;width: 100px;height: 100px;background-color: brown;} <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="./222.css"><title>Document</title> </head> <body><div>這是一個塊</div> </body> </html>

效果演示

3.CSS顏色表示法

單詞表示法 : red blue green yellow …

十六進(jìn)制表示法：#000000 #ffffff
0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f

rgb三原色表示法：rgb(255,255,255);
取值范圍 0 ~ 255

獲取顏色的工具：
提取顏色的下載地址：https://www.baidufe.com/fehelper
photoshop工具

代碼演示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{ background-color:rgb(0,0,0); }</style> </head> <body><div>這是一個塊</div> </body> </html>

效果演示

4.背景樣式

background-color 背景色
background-image 背景圖
url(背景地址)
默認(rèn)：會水平垂直都鋪滿背景圖
background-repeat 平鋪方式
repeat-x x軸平鋪
repeat-y y軸平鋪
repeat ( x , y 都進(jìn)行平鋪，默認(rèn)值 )
no-repeat 都不平鋪
background-position : 背景位置
x y : number(px、%) | 單詞
x : left、center、right
y : top、center、bottom
background-attachment : 背景圖隨滾動條移動的方式
scroll : 默認(rèn)值 ( 背景位置是按照當(dāng)前元素進(jìn)行偏移的 )
fixed ( 背景位置是按照瀏覽器進(jìn)行偏移的 )

代碼演示

效果演示

5.背景實(shí)現(xiàn)視覺差效果

代碼展示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#div1{ width:1400px; height: 800px; background-image:url(./img/1.jpg); background-attachment: fixed;}#div2{ width:1400px; height: 800px; background-image:url(./img/2.jpg); background-attachment: fixed;}#div3{ width:1400px; height: 800px; background-image:url(./img/3.jpg); background-attachment: fixed;}table{ background-color:white;}</style> </head> <body><div id="div1"><table border="1" cellpadding="30" cellspacing="30"><caption>天氣預(yù)報(bào)</caption><tHead><tr align="right"><th colspan="2">日期</th><th>天氣情況</th><th>出行情況</th></tr></tHead><tBody><tr valign="top"><td rowspan="2">2019年1月1日</td><td>白天</td><td><img src="./img/tianqi_1.png" alt=""></td><td>天氣晴朗，適合出行</td></tr><tr><td>夜晚</td><td><img src="./img/tianqi_2.png" alt=""></td><td>天氣晴朗，適合出行</td></tr><tr valign="bottom"><td rowspan="2">2019年1月2日</td><td>白天</td><td><img src="./img/tianqi_1.png" alt=""></td><td>有小雨，出門請帶傘</td></tr><tr><td>夜晚</td><td><img src="./img/tianqi_2.png" alt=""></td><td>有小雨，出門請帶傘</td></tr></tBody><tFood></tFood></table></div><div id="div2">form action="http://www.baidu.com"><h2>多行文本框</h2><textarea cols="30" rows="10"></textarea><h2>下拉菜單</h2><select><option selected disabled>請選擇</option><option>北京</option><option>上海</option><option>杭州</option></select><select size="3"><option>北京</option><option>上海</option><option>杭州</option></select><select multiple><option>北京</option><option>上海</option><option>杭州</option></select><input type="file" multiple><input type="radio" name="gender" id="man"><label for="man">男</label><input type="radio" name="gender" id="woman"><label for="woman">女</label></form></div><div id="div3"><table border="1" cellpadding="30" cellspacing="30"><caption>天氣預(yù)報(bào)</caption><tHead><tr align="right"><th colspan="2">日期</th><th>天氣情況</th><th>出行情況</th></tr></tHead><tBody><tr valign="top"><td rowspan="2">2019年1月1日</td><td>白天</td><td><img src="./img/tianqi_1.png" alt=""></td><td>天氣晴朗，適合出行</td></tr><tr><td>夜晚</td><td><img src="./img/tianqi_2.png" alt=""></td><td>天氣晴朗，適合出行</td></tr><tr valign="bottom"><td rowspan="2">2019年1月2日</td><td>白天</td><td><img src="./img/tianqi_1.png" alt=""></td><td>有小雨，出門請帶傘</td></tr><tr><td>夜晚</td><td><img src="./img/tianqi_2.png" alt=""></td><td>有小雨，出門請帶傘</td></tr></tBody><tFood></tFood></table></div> </body> </html>

效果演示

6.邊框樣式

border-style : 邊框樣式
solid : 實(shí)線
dashed : 虛線
dotted : 點(diǎn)線
border-width : 邊框大小
px …
border-color : 邊框顏色
red #f00 …

邊框也可以針對某一天邊進(jìn)行單獨(dú)設(shè)置 : border-left-style : 中間是方向 left、right、top、bottom

顏色：透明顏色 transparent

代碼演示

效果演示

7.邊框?qū)崿F(xiàn)三角形

代碼演示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{ background-color:blueviolet;}div{ width:0px; height:0px;border-top-color: transparent;border-top-style:solid;border-top-width:30px;;border-right-color: red;border-right-style:solid;border-right-width:30px;;border-bottom-color: transparent;border-bottom-style:solid;border-bottom-width:30px;;border-left-color: transparent;border-left-style:solid;border-left-width:30px;;}</style> </head> <body><div></div> </body> </html>

效果演示

8.CSS文字樣式

font-family : 字體類型
英文、中文
襯線體、非襯線體
注意點(diǎn)：
1.多個字體類型的設(shè)置目的
2.引號的添加的目的（有的字體中間有空格必須用）

代碼演示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* div{ font-family: 'Times New Roman';} *//* div{ font-family: SimSun;} */div{ font-family: 華文彩云 , 'Times New Roman' , SimSun , 微軟雅黑; }div{ font-style:oblique; color:red;}</style> </head> <body><div>這是一段文字</div><p>這是一段文字</p><div>this is a text</div><p>this is a text</p> </body> </html>

效果演示

9.字體大小粗細(xì)樣式

font-size : 字體大小
默認(rèn) : 16px
寫法 : number(px) | 單詞 ( small large … 不推薦使用)

font-weight : 字體粗細(xì)
模式：正常( normal ) 加粗 ( bold )
寫法：單詞(normal、bold) | number ( 100 200 … 900 , 100到500都是正常的，600都900都是加粗的 )

font-style : 字體樣式
模式：正常 ( normal ) 斜體 ( italic )
寫法：單詞 ( normal 、 italic )
注：oblique也是表示斜體，用的比較少，一般了解即可。
區(qū)別：1.italic 帶有傾斜屬性的字體的才可以設(shè)置傾斜操作。
2.oblique 沒有傾斜屬性的字體也可以設(shè)置傾斜操作。

代碼演示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* div{ font-family: 'Times New Roman';} *//* div{ font-family: SimSun;} *//* div{ font-family: 華文彩云 , 'Times New Roman' , SimSun , 微軟雅黑; } *//* div{ font-size : 30px;} *//* div{ font-weight: 600; } */div{ font-style:oblique; color:red;}</style> </head> <body><div>這是一段文字</div><p>這是一段文字</p><div>this is a text</div><p>this is a text</p> </body> </html>

效果演示

10.文本修飾和文本大小寫

text-decoration：文本裝飾
下劃線 : underline
刪除線 :line-through
上劃線 : overline
不添加任何裝飾 : none
注：添加多個文本修飾：line-through underline overline

text-transform：文本大小寫（針對英文段落）
小寫：lowercase
大寫：uppercase
只針對首字母大寫：capitalize

代碼演示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>p{ width:300px; text-decoration: line-through underline overline;}P{ text-transform:capitalize;}</style> </head> <body><p>這是一個段落文字</p><p>kshkfhsdhkf nklwhdl lkelk fkSS</p> </body> </html>

效果演示

11.文本縮進(jìn)和文本對齊

text-indent : 文本縮進(jìn)
首行縮進(jìn)
em單位：相對單位，1em永遠(yuǎn)都是跟字體大小相同

text-align : 文本對齊方式
對齊方式 : left 、right、center、justify（兩端點(diǎn)對齊）

代碼演示

效果演示

12.文本的行高

line-height : 定義行高

什么是行高，一行文字的高度，上邊距和下邊距的等價關(guān)系。
默認(rèn)行高：不是固定值，而是變化的。根據(jù)當(dāng)前字體的大小再不斷的變化。
取值：1. number( px ) | scale ( 比例值 , 跟文字大小成比例的 )

代碼演示

效果演示

13.文本間距與英語折行

letter-spacing : 字之間的間距
word-spacing : 詞之間的間距 ( 針對英文段落的 )

英文和數(shù)字不自動折行的問題：
1. word-break : break-all; (非常強(qiáng)烈的折行)
2. word-wrap : break-word;(不是那么強(qiáng)烈的折行，會產(chǎn)生一些空白區(qū)域)

代碼演示

效果演示

14.文本與段落實(shí)現(xiàn)個人案例

代碼實(shí)現(xiàn)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{ width:800px;}h1{ text-align:center; color:#ff6600;}h2{ color:#00a0ff; text-indent: 2em;}#p1{ font-style:italic; font-weight: bold; text-indent: 2em;}#p2{ color:#66ff00; line-height: 30px; text-indent: 2em;}#p3{ color:#00ffff; line-height: 30px; text-indent: 2em; text-decoration: underline; font-style:italic;}#p4{ font-weight: bold; letter-spacing: 10px; line-height: 30px; text-indent: 2em;}#p5{ color:#cc00cc; line-height: 30px; text-indent: 2em;}</style> </head> <body><div><h1>Angelababy簡介</h1><h2>基本信息</h2><p id="p1">楊穎（Angelababy），1989年2月28日出生于上海，13歲時移居香港，中國影視女演員。</p><p id="p2"> 2009年主演電影《全城熱戀》。2012年，憑借愛情片《第一次》獲得第十三屆華語電影傳媒大獎“最受矚目女演員獎”。2013年1月，《南都娛樂周刊》舉辦新生代四小花旦的評選活動，楊穎以總分70分的綜合得分與劉詩詩、楊冪、倪妮共同當(dāng)選為新一代“四小花旦”；同年在徐克導(dǎo)演的影片《狄仁杰之神都龍王》中擔(dān)任女主角，并且獲得第21屆北京大學(xué)生電影節(jié)最受歡迎女演員獎；4月，Angelababy主演電視劇《大漢情緣之云中歌》。2014年加盟綜藝節(jié)目《奔跑吧兄弟》并主演電影版；同年主演顧長衛(wèi)導(dǎo)演的電影《微愛之漸入佳境》，票房突破2.8億。2015年5月參演好萊塢電影《獨(dú)立日2》；7月，主演電影《擺渡人》。</p><h2>早年經(jīng)歷</h2><p id="p3"> 1989年2月28日，Angelababy出生在上海，中文名楊穎。楊穎自小隨家人到上海定居，在上海的演藝學(xué)校學(xué)演戲及跳舞。13歲時，楊穎回香港加入了Talent Bang，還擔(dān)任Viva Club Disney主持。</p><h2>個人生活</h2><p id="p4"> 2015年5月27日，黃曉明和Angelababy（楊穎）在青島民政局領(lǐng)證完婚。</p><p id="p5"> 2015年10月8日，黃曉明和Angelababy在上海展覽中心正式舉辦婚禮。上午8點(diǎn)，Angelababy工作室曝光了一兩人的婚紗照，照片中，兩人以巴黎地標(biāo)建筑為背景，浪漫親吻。</p></div></body> </html>

效果演示

15.CSS復(fù)合樣式

復(fù)合的寫法，是通過空格的方式實(shí)現(xiàn)的。復(fù)合寫法有的是不需要關(guān)心順序，例如background、border；有的是需要關(guān)心順序，例如font。
1. background : red url() repeat 0 0;
2. border : 1px red solid;
3. font :
注：最少要有兩個值 size family
weight style size family √
style weight size family √
weight style size/line-height family √
注：如果非要混合去寫的話，那么要先寫復(fù)合樣式，再寫單一樣式，這樣樣式才不會被覆蓋掉。

代碼演示

效果演示

15.id選擇器以及注意事項(xiàng)

ID選擇器
#elem{} id=“elem”
注：
1. ID是唯一值，在一個頁面中只能出現(xiàn)一次，出現(xiàn)多次是不符合規(guī)范的。
2. 命名的規(guī)范，由字母、下劃線、中劃線、字母（并且第一個不能是數(shù)字）
3. 駝峰寫法 : searchButton (小駝峰) SearchButton (大駝峰) searchSmallButton
短線寫法：search-small-button
下劃線寫法：search_small_button

代碼演示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#iu{background: blue;}#iuu{background: red;}</style> </head> <body><div id="iu">蕪湖蕪湖</div><div id="iuu">阿宅正傳</div> </body> </html>

效果演示

16.class選擇器以及注意事項(xiàng)

.elem{} class=“elem”
注：
1. class選擇器是可以復(fù)用的。
2. 可以添加多個class樣式。
3. 多個樣式的時候，樣式的優(yōu)先級根據(jù)CSS決定，而不是class屬性中的順序。
4. 標(biāo)簽+類的寫法

代碼演示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.op{ background: red;}.ok{background-color: blue;}</style> </head> <body><div id="iu">蕪湖蕪湖</div><div id="iuu">阿宅正傳</div><div class="op ok">后劃時代的</div><div class="op">pppppppp</div> </body> </html>

效果演示

總結(jié)

以上是生活随笔為你收集整理的HTML学习*3的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

html

上一篇：如何开机进入grub界面_电脑开机出现g
下一篇： 2017年html5行业报告,云适配发布