1)字體的屬性
字體屬性用于定義字體的類型、字號(hào)大小、加粗、斜體等方面樣式。常用的字體屬性如下表所示:
屬 性 | 可 取 值 | 描 述 |
font | font-style、font-variant、font-weight、font-size(或 line-height)、font-family | 在一個(gè)聲明中設(shè)置所有的字體屬性 |
font-family | 字體名稱、inherit | 設(shè)置字體類型 |
font-size | xx-small、x-small、small、medium(默認(rèn))、large、x-large、xx-large smaller、larger length、%、inherit | 設(shè)置字體大小 |
font-weight | normal(默認(rèn))、bold、bolder、lighter、inherit 100、200…900(400=normal,700=bold) | 設(shè)置字體粗細(xì) |
font-style | normal、italic、oblique、inherit | 設(shè)置字體風(fēng)格 |
例子,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h3 {
font-size: 20px;
font-family: 隸書;
line-height: 28px;
}
span {
font: italic 16px 華文彩云;
}
</style>
</head>
<body>
<h3>Web 前端技術(shù)</h3>
<span
>在當(dāng)今社會(huì)中,Web 已經(jīng)成為網(wǎng)絡(luò)信息共享和發(fā)布的主要形式。要想開發(fā) Web 應(yīng)用
系統(tǒng),就必須掌握 Web 前端技術(shù)。</span
>
</body>
</html>
顯示為,
(2)CSS 中鏈接標(biāo)簽可用的偽類:
CSS 中,偽類是添加到選擇器的關(guān)鍵字,給指定元素設(shè)置一些特殊狀態(tài),我們以 : 開頭。
鏈接有以下四個(gè)狀態(tài)。這四種狀態(tài)也稱之為超鏈接的偽類。
狀態(tài) | 效果 |
a:link | 普通的、未被訪問的鏈接。 |
a:hover | 鼠標(biāo)指針位于鏈接的上方。 |
a:active | 鏈接被單擊的時(shí)刻。 |
a:visited | 用戶已訪問的鏈接。 |
針對(duì)超鏈接的上述四種狀態(tài)設(shè)置樣式規(guī)則,能起到美化超鏈接的作用。例如,為了完成下對(duì)超鏈接的顯示要求,編寫的 CSS 樣式代碼如下。
狀 態(tài) | 顏 色 | 背 景 色 | 文 本 修 飾 |
未訪問 | 藍(lán)色 | 無(wú) | 無(wú)下畫線 |
鼠標(biāo)移到 | 黑色 | #DDDDDD | 下畫線 |
正單擊 | 紅色 | #AAAAAA | 刪除線 |
已訪問 | 綠色 | 無(wú) | 無(wú)下畫線 |
對(duì)于超鏈接的偽類,我們推薦的使用順序是::link - :visited - :hover - :active。
例子,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
text-decoration: none;
}
a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<a href="#">這是一個(gè)鏈接</a>
</body>
</html>
顯示為,
為什么要按照這樣的順序來(lái)使用呢? 調(diào)整幾個(gè)偽類的順序,看看會(huì)發(fā)生什么。
我們把 a:link 放到最后,效果如下:
從圖中可以發(fā)現(xiàn)其中的樣式屬性都被覆蓋了。
(3)列表相關(guān)的樣式屬性:
屬 性 | 可 取 值 | 描 述 |
list-style | list-style-type、list-style-position、list-style-image | 在一個(gè)聲明中設(shè)置所有的列表屬性 |
list-style-image | URL、none | 設(shè)置圖像為列表項(xiàng)標(biāo)志 |
list-style-position | inside、outside、inherit | 設(shè)置列表中列表項(xiàng)標(biāo)志的位置 |
list-style-type | disc(默認(rèn))、circle、square、decimal 等 | 設(shè)置列表項(xiàng)標(biāo)志的類型 |
例子,
wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif
了更方便地控制網(wǎng)頁(yè)中各種各樣的字體,CSS提供了一系列的字體樣式屬性,具體如下。
(1)font-size屬性:字號(hào)
font-size屬性用于設(shè)置字號(hào),該屬性的屬性值可以為像素值、百分比數(shù)值、倍率等。表3-l列舉了fomt-size屬性常用的屬性值單位,具體如下。
單位 | 說(shuō)明 |
em | 倍率單位,指相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體倍率 |
px | 像素值單位,是阿頁(yè)設(shè)計(jì)中常用的單位 |
% | 百分比數(shù)值單位,指相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體百分比 |
在表1所列的常用單位中,推薦使用像素值單位—px。例如,將網(wǎng)頁(yè)中所有段落文本的字號(hào)設(shè)為12px,CSS樣式示例代碼如下:
· p(font-size:12px;)
(2)font-family屬性:字體fomt-family屬性用于設(shè)置字體。網(wǎng)頁(yè)中常用的字體有宋體、微軟雅黑、黑體等。例如,將網(wǎng)頁(yè)中所有段落文本的字體設(shè)置為微軟雅黑,CSS樣式示例代碼如下:
p[font-family:“微軟雅黑“:]
fomt-family屬性可以同時(shí)指定多個(gè)字體,各字體之間以逗號(hào)隔開。如果瀏覽器不支持第一種字體,則會(huì)嘗試下一種,直到匹配到合適的字體。例如,同時(shí)指定3種字體的CSS樣式示例代碼如下:
body[font-fanily:“華文彩云”,“宋體“,“黑體";]
當(dāng)應(yīng)用上述代碼后,瀏覽器會(huì)首選“華文彩云”字體,如果用戶計(jì)算機(jī)上沒有安裝該字體則選擇“宋體”。以此類推,當(dāng)fomt-fammily屬性指定的字體都沒有安裝時(shí),瀏覽器就會(huì)選擇用戶計(jì)算機(jī)默認(rèn)的字體。使用font-family屬性設(shè)置字體時(shí),需要注意以下幾點(diǎn)。
· 各種字體之間必須使用英文逗號(hào)隔開。
· 中文字體需要加英文引號(hào),但英文字體不需要加引號(hào)。當(dāng)需要設(shè)置英文字體時(shí),英文字體名必須位于中文字體名之前。CSS樣式示例代碼如下:
body[font-fanily:Arial,“微款雅黑”,“未體”,”黑體”:] /“正確的書寫方式"
body(font-fanijy:“微軟稚黑”,“宋體”。“黑體”,Arial:) /“錯(cuò)誤的書寫方式"/
· 如果字體名包含空格、#、S等符號(hào),則該字體必須加英文引號(hào),如“font-family.“Times New Roman":"
· 盡量使用系統(tǒng)欺認(rèn)字體,以保證網(wǎng)頁(yè)中的文字在任何用戶的瀏覽器中都能正確顯示。
(3)font-weight屬性:字體粗細(xì)
font-weighn 屬性用于定義字體的粗細(xì),其屬性值如表所示。
值 | 描述 |
normal | 默認(rèn)屬性值,定義標(biāo)準(zhǔn)樣式的字符 |
bold | 定義粗體字符 |
bolder | 定義更粗的字符 |
lighter | 定義更細(xì)的字符 |
100~900(100的整數(shù)倍) | 定義由細(xì)到相的字符,其中400等同于normal,700等同于bold,數(shù)值越大字體越粗 |
表2列舉了常用的font-weight屬性的屬性值。在實(shí)際工作中,常用的屬性值為normal和bol,分別用于定義正常和加粗顯示的字體。
(4)font-variant屬性:變體
font-variant 屬性用于設(shè)置英文字符的變體,一般用于定義小型大寫字體,該屬性僅對(duì)英文字符有效。font-variant 屬性的可用屬性值如下。
· normal:默認(rèn)值,測(cè)覽器會(huì)顯示標(biāo)準(zhǔn)的字體。small-caps:瀏覽器會(huì)顯示小型大寫的字體,即所有的小寫字
母均會(huì)轉(zhuǎn)換為大寫字母。但是所有使用小型大寫字體的字母和其余文本相比,字體尺寸更小。例如,圖3-l2中框線標(biāo)注的小型大寫字母,就是使用font-variant屬性設(shè)置的。
(5)font-style屬性:字體風(fēng)格
fomt-style屬性用于定義字體風(fēng)格。例如,設(shè)置斜體、傾斜或正常字體。font-style屬性的可用屬性值如下。
· nommal:默認(rèn)值,測(cè)覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式。
· italic:測(cè)覽器會(huì)顯示斜體的字體樣式。
· oblique:測(cè)覽器會(huì)顯示傾斜的字體樣式。
當(dāng)font-style屬性取值為italic或oblique時(shí),文字都會(huì)顯示傾斜的樣式,兩者在顯示效果上并沒有本質(zhì)區(qū)別。但italie使用了字體的傾斜屬性,并不是所有的字體都有傾斜屬性;而obhique只是使文字傾斜,無(wú)關(guān)該字體有沒有傾斜屬性。
(6)fomt屬性:綜合設(shè)置字體樣式
fomt屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置,其基本語(yǔ)法格式如下:
選擇器{font:font-style font-varlant font-weight font-size/line-height font-fanlly:}
使用fomt屬性綜合設(shè)置字體樣式時(shí),必須按上述語(yǔ)法格式中的順序書寫,各個(gè)屬性以空格隔開(line-height用于設(shè)置行間距,屬于文本外觀屬性,在后面將具體介紹)。例如,下面設(shè)置字體樣式的示例代碼:
p{font-fanily:Arial,"宋體";font-size:30px; font-style:italic; font-weight:boid; font-variant:
amal1-cape; line-height:40px;}
上述代碼可以使用fomt屬性綜合設(shè)置字體樣式,其等價(jià)于:
p{font:italic small-caps bold 30px/40px Arial,"宋體";}
其中,不需要設(shè)置的屬性可以省略(省略的屬性將取默認(rèn)值),但必須保留fomt-size和 font-family屬性,否則font 屬性將不起作用。
下面通過(guò)一個(gè)案例具體演示如何使用fomt屬性綜合設(shè)置字體樣式,如下所示。
<!doctype html>
<html>
<head>
<meta charset.-"utf-8">
<title>font l國(guó)性</title>
<style type-"text/css">
.one{ font:italic 18px/30px"隸書":}
.two{ font:italic l8px/30px;}
</style>
</head>
<body>
<p class="one">段落1:使用font 屬性綜合設(shè)置段落文本的字體風(fēng)格、字號(hào),行高和字體。</p>
<p class="two“>段落2:使用font屬性綜合設(shè)置段落文本的字體風(fēng)格、字號(hào)和行高。由于省略了字體屬性font-family,
這時(shí)font屬性不起作用。</p>
</body>
</htnl>
定義了兩個(gè)段落,同時(shí)使用fomt屬性分別對(duì)它們進(jìn)行相應(yīng)的設(shè)置,效果如圖。
從圖中可以看出,font屬性設(shè)置的樣式并沒有對(duì)第二個(gè)段落文本生效,這是因?yàn)閷?duì)第二個(gè)段落文本的設(shè)置中省略了字體屬性“font-family”。
(7)@font-face規(guī)則
@font-face是CSS3的新增規(guī)則,用于定義服務(wù)器字體。通過(guò)@font-face規(guī)則,可以使用計(jì)算機(jī)未安裝的字體。@font-face規(guī)則定義服務(wù)器字體的基本語(yǔ)法格式如下:
@font-face{
font-family:字體名稱:
src:字體路徑;
}
在上述語(yǔ)法格式中,font-family用于指定該服務(wù)器字體的名稱,該名稱可以隨意定義;sre用于指定該字體文件的路徑。
下面通過(guò)一個(gè)剪紙字體的案例來(lái)演示@font-face規(guī)則的具體用法,如下所示。
<!doctype html>
<html>
<head>
<meta charset-"utf-8">
<title>afont-face規(guī)則</title>
<style type-"text/css">
@font-face{
font-fanily:jianzhi; /*服務(wù)器字體名稱*/
src:url(FZJZJN.TTF); /*服務(wù)器字體文件的路徑*/
}
p{
font-fanily:jianzhi; /*設(shè)置字體樣式*/
font-size:32px;
}
</style>
</head>
<body>
<p>明確責(zé)任</p>
<p>肩負(fù)使命</p>
</body>
</htnl>
在例3-6中,第7~10行代碼用于定義服務(wù)器字體;第12代碼用于為段落標(biāo)簽設(shè)置字體樣式。效果如圖所示。
從圖中可以看出,當(dāng)定義并設(shè)置服務(wù)器字體后,頁(yè)面就可以正常顯示剪紙字體。總結(jié)例3-6,可以得出使用服務(wù)器字體的步驟。
①下載字體,并存儲(chǔ)到相應(yīng)的文件夾中。
②使用@font-face規(guī)則定義服務(wù)器字體。
③對(duì)元素應(yīng)用“font-family”字體樣式。
成 | 語(yǔ)言 | 描述 |
結(jié)構(gòu) | HTML | 網(wǎng)頁(yè)元素和內(nèi)容 |
表現(xiàn) | CSS | 網(wǎng)頁(yè)元素頁(yè)面樣式 |
行為 | JavaScript | 網(wǎng)頁(yè)交互 |
HTML,超文本標(biāo)記語(yǔ)言(Hyper Text Markup Language),是一門描述性語(yǔ)言。標(biāo)記,標(biāo)簽,元素,叫法不同,意思相同。HTML超文本標(biāo)記語(yǔ)言主要通過(guò)標(biāo)簽的方式,對(duì)網(wǎng)頁(yè)頁(yè)面的文本、圖片、音頻、視頻等內(nèi)容進(jìn)行描述。學(xué)習(xí)HTML,就是學(xué)習(xí)各種標(biāo)簽,來(lái)搭建網(wǎng)頁(yè)的結(jié)構(gòu)。
結(jié)構(gòu):!DOCTYPE
說(shuō)明:作用是告訴瀏覽器用哪個(gè)文檔規(guī)范來(lái)解析文檔
標(biāo)簽:html
說(shuō)明:用于搭建HTML網(wǎng)頁(yè)文檔結(jié)構(gòu)和網(wǎng)頁(yè)布局
?標(biāo)簽:head
說(shuō)明:用于定義HTML網(wǎng)頁(yè)文檔的頭部,它是所有頭部元素的容器?
?標(biāo)簽:body
說(shuō)明:用來(lái)定義HTML網(wǎng)頁(yè)文檔的主體區(qū)域?
?標(biāo)簽:meta
說(shuō)明:用來(lái)描述HTML網(wǎng)頁(yè)文檔的屬性?
?標(biāo)簽:title
說(shuō)明:用來(lái)放到HTML網(wǎng)頁(yè)文檔的頭部,是搜索引擎首要抓取的目標(biāo)代碼?
標(biāo)簽,也叫作標(biāo)記,是由一對(duì)尖括號(hào)<>,里面包含單詞組成
<html></html>
<br>
嵌套關(guān)系
<html>
<head>
</head>
</html>
并列關(guān)系
<head>
</head>
<body>
</body>
注釋用來(lái)幫助程序員記錄程序設(shè)計(jì)方法,輔助程序閱讀
雙標(biāo)簽,定義網(wǎng)頁(yè)的標(biāo)題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>百度一下,你就知道了</title>
</head>
<body>
</body>
</html>
是單標(biāo)簽,用來(lái)描述HTML網(wǎng)頁(yè)文檔的屬性
屬性值 | 說(shuō)明 |
keywords | 網(wǎng)頁(yè)關(guān)鍵字,多個(gè)逗號(hào)隔開 |
description | 網(wǎng)頁(yè)描述 |
author | 作者 |
copyright | 版權(quán)信息 |
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 網(wǎng)頁(yè)關(guān)鍵字 -->
<meta name="keywords" content="html,css,javascript">
<!-- 網(wǎng)頁(yè)描述 -->
<meta name="description" content="基礎(chǔ)前端知識(shí)">
<!-- 網(wǎng)頁(yè)作者 -->
<meta name="author" content="buddha">
<!-- 網(wǎng)頁(yè)版權(quán)信息 -->
<meta name="copyright" content="版權(quán)所有,翻版必究">
</head>
<body>
</body>
</html>
標(biāo)簽屬性:
1、標(biāo)簽的屬性寫在開始標(biāo)簽內(nèi)部
2、標(biāo)簽名與屬性之間要有空格隔開
3、一個(gè)標(biāo)簽可以同時(shí)存在多個(gè)屬性
4、屬性之間以空格隔開
5、屬性沒有先后順序之分
屬性值 | 說(shuō)明 |
Content-Type | 定義網(wǎng)頁(yè)所使用編碼 |
refresh | 定義網(wǎng)頁(yè)自動(dòng)刷新跳轉(zhuǎn) |
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 設(shè)置網(wǎng)頁(yè)編碼完整寫法 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- 設(shè)置網(wǎng)頁(yè)編碼簡(jiǎn)寫寫法 -->
<meta charset="UTF-8">
<!-- 網(wǎng)頁(yè)打開3秒后跳去百度 -->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>
</body>
</html>
是雙標(biāo)簽,用來(lái)定義標(biāo)簽的css樣式
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
/* css內(nèi)聯(lián)樣式寫這里 */
</style>
</head>
<body>
</body>
</html>
是單標(biāo)簽,是用來(lái)引入外部css樣式文件
<link rel="stylesheet" href="css/index.css" type="text/css">
是雙標(biāo)簽,是用來(lái)寫JavaScript代碼的地方
<!DOCTYPE html>
<html lang="en">
<head>
<script>
/* 這里寫JavaScript代碼 */
</script>
</head>
<body>
</body>
</html>
是單標(biāo)簽,是用來(lái)設(shè)置整個(gè)網(wǎng)頁(yè)的基礎(chǔ)路徑。
<!DOCTYPE html>
<html lang="en">
<head>
<base href="https://pic.rmb.bdstatic.com">
</head>
<body>
<img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>
開發(fā)中很少用到,有人使用知道就行
上面所述標(biāo)簽是放在head標(biāo)簽里的,接下來(lái)接觸的標(biāo)簽都是放在body標(biāo)簽內(nèi)的
是雙標(biāo)簽,h是header的縮寫
<h1>h1標(biāo)簽:一級(jí)標(biāo)題</h1>
<h2>h2標(biāo)簽:二級(jí)標(biāo)題</h2>
<h3>h3標(biāo)簽:三級(jí)標(biāo)題</h3>
<h4>h4標(biāo)簽:四級(jí)標(biāo)題</h4>
<h5>h5標(biāo)簽:五級(jí)標(biāo)題</h5>
<h6>h6標(biāo)簽:六級(jí)標(biāo)題</h6>
特點(diǎn):
1、字體加粗
2、獨(dú)占一行
3、從h1到h6,字體逐漸減小
4、使用<h>標(biāo)簽的主要意義是告訴搜索引擎這是一段文字的標(biāo)題
5、<h1>在一個(gè)頁(yè)面最多只能有一個(gè),不要用多個(gè)
是雙標(biāo)簽,p是paragraph的縮寫
<p>這是一段文字</p>
<p>這是一段文字</p>
<p>這是一段文字</p>
特點(diǎn):
1、獨(dú)占一行
2、段落與段落之間,存在間隙
是單標(biāo)簽,br是break的縮寫
<p>這是一段<br>文字</p>
特點(diǎn):
1、強(qiáng)制換行
2、單標(biāo)簽
是單標(biāo)簽,hr是horizon地平線的縮寫
<p>這是一段文字</p>
<hr>
<p>這是一段文字</p>
特點(diǎn):
1、在頁(yè)面中顯示一條水平線
2、單標(biāo)簽
標(biāo)簽1 | 標(biāo)簽2 | 說(shuō)明 |
b | strong | 加粗 |
u | ins | 下劃線 |
i | em | 傾斜 |
s | del | 刪除線 |
<b>這是一段文字</b>
<strong>這是一段文字</strong>
<br>
<u>這是一段文字</u>
<ins>這是一段文字</ins>
<br>
<i>這是一段文字</i>
<em>這是一段文字</em>
<br>
<s>這是一段文字</s>
<del>這是一段文字</del>
特點(diǎn):
1、不會(huì)獨(dú)占一行
2、推薦使用標(biāo)簽2所在列標(biāo)簽
sup是superscripted這個(gè)單詞的縮寫
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
a<sup>2</sup>
</body>
</html>
sub是subscripted這個(gè)單詞的縮寫
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
H<sub>2</sub>O
</body>
</html>
在網(wǎng)頁(yè)中展示特殊符號(hào)效果時(shí),需要使用字符實(shí)體替代
顯示結(jié)果 | 描述 | 實(shí)體名稱 |
空格 |
| |
< | 小于號(hào) | < |
> | 大于號(hào) | > |
& | 與 | & |
" | 雙引號(hào) | " |
x | 乘號(hào) | × |
÷ | 除號(hào) | ÷ |
- | 長(zhǎng)破折號(hào) | — |
| | 豎線 | | |
‘ | 左單引號(hào) | ‘ |
‘ | 右單引號(hào) | ’ |
? | 版權(quán)符 | © |
? | 注冊(cè)商標(biāo) | ® |
? | 商標(biāo) | ™ |
° | 度 | ° |
<img src="./001.jpg" alt="">
img標(biāo)簽常見屬性:
屬性名 | 說(shuō)明 |
src | 圖片路徑(絕對(duì)路徑、相對(duì)路徑) |
alt | 圖片加載失敗時(shí),顯示的文字 |
title | 鼠標(biāo)懸停時(shí),顯示的文字 |
width | 圖片寬度 |
height | 圖片高度 |
只設(shè)置寬或高,會(huì)自動(dòng)等比縮放,寬高只需要數(shù)字,不需要'px'
<img src="./001.jpg" alt="圖片加載失敗" title="這是程序兔" width="200" height="200">
絕對(duì)路徑:指目錄下的絕對(duì)位置,比如從根目錄開始的路徑,或完整的網(wǎng)絡(luò)地址
相對(duì)路徑:從當(dāng)前文件開始出發(fā)找目標(biāo)文件的過(guò)程
<audio src="music.mp3" controls autoplay loop></audio>
audio標(biāo)簽常見屬性:
屬性名 | 說(shuō)明 |
src | 音頻路徑 |
controls | 顯示播放控件 |
autoplay | 自動(dòng)播放 |
loop | 循環(huán)播放 |
支持mp3、wav、ogg三種音頻格式
<video src="video.mp4" controls loop autoplay></video>
屬性名 | 說(shuō)明 |
src | 視頻路徑 |
controls | 顯示播放控件 |
autoplay | 自動(dòng)播放 |
loop | 循環(huán)播放 |
支持mp4、webm、ogg三種視頻格式
超鏈接,是雙標(biāo)簽,實(shí)現(xiàn)各個(gè)獨(dú)立頁(yè)面之間進(jìn)行跳轉(zhuǎn),可以跳去站外也可以在站內(nèi)之間跳轉(zhuǎn)
<a href="鏈接地址">文本或圖片</a>
站外跳轉(zhuǎn),采用絕對(duì)路徑
<a href="http://www.baidu.com" target="_blank">百度</a>
站內(nèi)跳轉(zhuǎn),采用相對(duì)路徑
<!-- a頁(yè)面 -->
<a href="b.html">跳去b頁(yè)面</a>
<!-- b頁(yè)面 -->
<p>b頁(yè)面</p>
頁(yè)面內(nèi)跳轉(zhuǎn)
<a href="#ms">美食</a>
<a href="#jd">景點(diǎn)</a>
<h3 id="ms">推薦美食</h3>
<!-- 省略n個(gè)br標(biāo)簽 -->
<br>
<h3 id="jd">推薦景點(diǎn)</h3>
屬性名 | 說(shuō)明 |
href | 跳轉(zhuǎn)鏈接 |
target | 鏈接打開方式 |
target屬性值
屬性值 | 說(shuō)明 |
_self | 默認(rèn),原窗口打開鏈接 |
_blank | 在新窗口打開鏈接 |
_parent | 在父窗口打開鏈接 |
_top | 在頂層窗口打開超鏈接 |
target屬性值一般使用_self(默認(rèn))和_blank
<ul type="屬性值">
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
</ul>
解釋:
1、ul,unordered lists,無(wú)序列表,li,list item,列表項(xiàng)
2、ul標(biāo)簽子標(biāo)簽只允許是li標(biāo)簽
3、li標(biāo)簽可以包含任意內(nèi)容
type屬性值
屬性值 | 說(shuō)明 |
disc | 默認(rèn),實(shí)心圓 |
circle | 空心圓 |
square | 實(shí)心方型 |
<ul>
<li>你</li>
<li>我</li>
<li>他</li>
</ul>
<ol type="屬性值">
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
</ol>
解釋:
1、ol,ordered lists,有序列表,li,list item,列表項(xiàng)
2、ol標(biāo)簽子標(biāo)簽只允許是li標(biāo)簽
3、li標(biāo)簽可以包含任意內(nèi)容
type屬性值
屬性值 | 說(shuō)明 |
1 | 默認(rèn),阿拉伯?dāng)?shù)字,1,2,3...... |
a | 小寫英文字母,a,b,c...... |
A | 大寫英文字母,A,B,C...... |
i | 小寫羅馬數(shù)字,i,ii,iii...... |
I | 大寫羅馬數(shù)字,I,II,III...... |
<ol>
<li>你</li>
<li>我</li>
<li>他</li>
</ol>
<dl>
<dt>名詞</dt>
<dd>描述</dd>
……
</dl>
解釋:
1、dl,definition lists,自定義列表;dt,definition term,自定義列表組;dd,definition description,自定義列表描述
<dl>
<dt>稱呼</dt>
<dd>你</dd>
<dd>我</dd>
<dd>他</dd>
</dl>
<table>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>
解釋:
1、tr,table row,表格行;td,table data cell,表行單元格
<table>
<tr>
<td>1</td>
</tr>
</table>
屬性名 | 屬性值 | 描述 |
border | 數(shù)字 | 邊框?qū)挾?/span> |
width | 數(shù)字 | 表格寬度 |
height | 數(shù)字 | 表格高度 |
<table border="1" width="200" height="50">
<tr>
<td>1</td>
</tr>
</table>
<caption>標(biāo)題內(nèi)容</caption>,位于表格內(nèi)第一行
<table border="1" width="200" height="50">
<caption>數(shù)字</caption>
<tr>
<td>1</td>
</tr>
</table>
<th></th>,th,table header cell,表頭單元格
<table border="1" width="200" height="50">
<caption>數(shù)字</caption>
<tr>
<th>序號(hào)</th>
</tr>
<tr>
<td>1</td>
</tr>
</table>
thead、tbody、tfoot
<table border="1" width="200" height="50">
<caption>數(shù)字</caption>
<thead>
<tr>
<th>序號(hào)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>匯總</td>
</tr>
</tfoot>
</table>
屬性名 | 屬性值 | 說(shuō)明 |
rowspan | 合并單元格個(gè)數(shù) | 合并行,單元格垂直合并 |
colspan | 合并單元格個(gè)數(shù) | 合并列,單元格水平合并 |
<td rowspan="跨越的行數(shù)"></td>
<td colspan="跨越的列數(shù)"></td>
<table border="1" width="200" height="50">
<caption>數(shù)字</caption>
<thead>
<tr>
<th>序號(hào)</th>
<th>金額</th>
<th>金額</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="2">20</td>
<td rowspan="2">20</td>
</tr>
<tr>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>匯總</td>
<td colspan="2">40</td>
</tr>
</tfoot>
</table>
雙標(biāo)簽,包裹其它表單標(biāo)簽
<form>
// 表單
</form>
form標(biāo)簽的常用屬性
屬性 | 說(shuō)明 |
name | 表單名稱 |
method | 提交方式 |
action | 提交地址 |
target | 打開方式 |
enctype | 編碼方式 |
name屬性
一個(gè)頁(yè)面中,表單可能不止一個(gè)。name屬性,用來(lái)區(qū)分不同的表單
<form name="myForm"></form>
method屬性
用來(lái)指定表單數(shù)據(jù)使用哪種提交方式給后端
屬性值 | 說(shuō)明 |
get | get方式 |
post | post方式 |
<form method="get"></form>
action屬性
用來(lái)指定表單數(shù)據(jù)提交到哪個(gè)地址
<!-- 比如提交到index.php地址 -->
<form action="index.php"></form>
target屬性
該屬性跟a標(biāo)簽的target屬性一樣,其屬性值也是四個(gè),一般情況只用到_blank屬性值,默認(rèn)也是這個(gè)值
<form target="_blank"></form>
enctype屬性
屬性值 | 說(shuō)明 |
application/x-www-form-urlencoded | 在發(fā)送前編碼所有字符(默認(rèn)) |
multipart/form-data | 不對(duì)字符編碼,在使用包含文件上傳控件的表單時(shí),必須使用該值 |
text/plain | 空格轉(zhuǎn)換為 "+" 加號(hào),但不對(duì)特殊字符編碼 |
<form enctype="multipart/form-data"></form>
input是單標(biāo)簽
<input type="表單類型">
屬性值 | 說(shuō)明 |
text | 單行文本框 |
password | 密碼文本框 |
radio | 單選框 |
checkbox | 多選框 |
button | 普通按鈕 |
submit | 提交按鈕 |
reset | 重置按鈕 |
file | 文件上傳 |
單行文本框常用屬性
屬性 | 說(shuō)明 |
value | 設(shè)置文本框的默認(rèn)值 |
size | 設(shè)置文本框的長(zhǎng)度 |
maxlength | 設(shè)置最多可輸入字符 |
<form>
<input type="text" value="默認(rèn)值" size="長(zhǎng)度" maxlength="可輸入字符">
</form>
<form>
<label>姓名:<input type="text" value="曹操" size="20" maxlength="10"></label>
</form>
密碼文本框常用屬性
密碼文本框常用屬性和單行文本框常用屬性相同
<input type="password" value="默認(rèn)值" size="長(zhǎng)度" maxlength="可輸入字符">
<form>
<label>密碼:<input type="password" value="12345678" size="20" maxlength="10"></label>
</form>
單選框
屬性 | 說(shuō)明 |
name | 組名,同組單選框,組名要相同,必要屬性 |
value | 單選框選項(xiàng)取值,必要屬性 |
checked | 默認(rèn)選中項(xiàng),同組單選框,可以有一個(gè)默認(rèn)選中項(xiàng) |
<input type="radio" name="組名" value="取值" checked="checked">
<form>
性別:
<input type="radio" name="sex" value="男" checked="checked">男
<input type="radio" name="sex" value="女">女
</form>
復(fù)選框
復(fù)選框和單選框的屬性都相同,區(qū)別復(fù)選框可以多選
<form>
愛好:
<input type="checkbox" name="hobby" value="籃球" checked>籃球
<input type="checkbox" name="hobby" value="足球" checked>足球
<input type="checkbox" name="hobby" value="臺(tái)球">臺(tái)球
</form>
普通按鈕
<input type="button" value="取值">
<form>
<input type="button" value="普通按鈕">
</form>
<button>普通按鈕</button>
區(qū)別:
1、input是單標(biāo)簽,button是雙標(biāo)簽
2、button標(biāo)簽的信息除了文本,還可以是圖像、其它標(biāo)簽等
3、button有type屬性,屬性值可以是button、submit、reset等
提交按鈕
<input type="submit" value="取值">
<form>
<input type="submit" value="提交">
</form>
把對(duì)應(yīng)表單數(shù)據(jù)提交給后端服務(wù)器
重置按鈕
<input type="reset" value="取值">
<form>
<input type="reset" value="重置">
</form>
點(diǎn)擊重置后,所在form表單里所有內(nèi)容被清空了
文件上傳
<input type="file">
<form>
<input type="file">
</form>
<textarea name="文本名稱" cols="列數(shù)" rows="行數(shù)"></textarea>
<form>
<textarea name="文本名稱" cols="1" rows="2"></textarea>
</form>
<select>
<option>選項(xiàng)內(nèi)容</option>
<option>選項(xiàng)內(nèi)容</option>
</select>
下拉列表標(biāo)簽是為了節(jié)省頁(yè)面空間
select標(biāo)簽屬性
屬性名 | 說(shuō)明 |
name | 數(shù)據(jù)提交后端所需字段 |
size | 下拉選項(xiàng)顯示個(gè)數(shù) |
multiple | 默認(rèn)只允許選一個(gè),選多個(gè)得加這個(gè)屬性 |
disabled | 所有下拉選項(xiàng)禁止選中 |
<form>
<select name="age" size="4" multiple="multiple" disabled="disabled">
<option>18歲以下</option>
<option>18-28歲</option>
<option>28-38歲</option>
<option>38歲以上</option>
</select>
</form>
option標(biāo)簽屬性
屬性名 | 說(shuō)明 |
selected | 默認(rèn)選中 |
value | 被選中,數(shù)據(jù)提交后端的值 |
disabled | 該下拉選項(xiàng)禁止選中 |
<form>
<select name="age" size="5">
<option value="1">18歲以下</option>
<option value="2" disabled="disabled">18-28歲</option>
<option value="3" selected="selected">28-38歲</option>
<option value="4">38歲以上</option>
</select>
</form>
<iframe src="URL" width="數(shù)值" height="數(shù)值"></iframe>
框架標(biāo)簽常用屬性
屬性名 | 說(shuō)明 |
src | 嵌入的文檔地址 |
width | 標(biāo)簽寬度 |
height | 標(biāo)簽高度 |
<iframe src="https://www.bilibili.com" width="300" height="200"></iframe>
有些文檔禁止被嵌入
HTML標(biāo)簽分為三種,行內(nèi)標(biāo)簽、塊級(jí)標(biāo)簽和行內(nèi)塊級(jí)標(biāo)簽。
特點(diǎn):
1、在頁(yè)面內(nèi)只占據(jù)剛好能包裹自己內(nèi)容的空間
2、沒有寬高,內(nèi)容多大就多大,行內(nèi)標(biāo)簽不能嵌套塊級(jí)標(biāo)簽(a標(biāo)簽除外)
3、行內(nèi)標(biāo)簽設(shè)置寬高無(wú)效,可以對(duì)行高line-height進(jìn)行設(shè)置
4、可以設(shè)置外邊距margin和內(nèi)邊距padding,但只對(duì)左右邊距有效果,上下無(wú)效
5、常見行內(nèi)標(biāo)簽span、a、strong、ins、del、br等
span標(biāo)簽
雙標(biāo)簽,行內(nèi)標(biāo)簽,本身沒有固定樣式
<p>我是<span>中國(guó)人</span></p>
特點(diǎn):
1、獨(dú)占一行
2、高度、寬度、外邊距、內(nèi)邊距都可以設(shè)置生效
3、寬度默認(rèn)是父級(jí)寬度的100%
4、是一個(gè)容器盒子,可以嵌套多層子級(jí)行內(nèi)標(biāo)簽、塊級(jí)標(biāo)簽,文本類塊級(jí)標(biāo)簽除外
5、常見塊級(jí)標(biāo)簽div、p、h1~h6、ol、ul、li等
div標(biāo)簽
雙標(biāo)簽,塊級(jí)標(biāo)簽,本身沒有固定樣式
<!-- 頭部區(qū)域 -->
<div></div>
<!-- 內(nèi)容區(qū)域 -->
<div></div>
特點(diǎn)
1、在頁(yè)面內(nèi)只占據(jù)剛好能包裹自己內(nèi)容的空間
2、高度、寬度、外邊距、內(nèi)邊距都可以設(shè)置生效
3、常見塊級(jí)標(biāo)簽img、input、td
通過(guò)css樣式display屬性轉(zhuǎn)換,這是css的內(nèi)容
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。