Web開發(fā)學(xué)習(xí)筆記（21）-CSS（8）字體/鏈接/列表

1）字體的屬性

font 屬性
font-family 屬性
font-size 屬性
font-weight 屬性
font-style 屬性

字體屬性用于定義字體的類型、字號(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)簽可用的偽類：

a:link
a:hover
a:active
a:visited

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-image 屬性
list-style-position 屬性
list-style-type 屬性

屬性	可取值	描述
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è)交互

1 HTML概念

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)。

2 HTML結(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)代碼?

?2.1 標(biāo)簽

標(biāo)簽，也叫作標(biāo)記，是由一對(duì)尖括號(hào)<>，里面包含單詞組成

2.1.1 雙標(biāo)簽

<html></html>

2.1.2 單標(biāo)簽

<br>

2.1.3 標(biāo)簽關(guān)系

嵌套關(guān)系

<html>
    <head>
    </head>
</html>

并列關(guān)系

<head>
</head>
<body>    
</body>

3 注釋

注釋用來(lái)幫助程序員記錄程序設(shè)計(jì)方法，輔助程序閱讀

4 head標(biāo)簽

4.1 title標(biāo)簽

雙標(biāo)簽，定義網(wǎng)頁(yè)的標(biāo)題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道了</title>
</head>
<body>

</body>
</html>

4.2 meta標(biāo)簽

是單標(biāo)簽，用來(lái)描述HTML網(wǎng)頁(yè)文檔的屬性

4.2.1 name屬性

屬性值	說(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、屬性沒有先后順序之分

4.2.2 http-equiv屬性

屬性值	說(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>

4.3 style標(biāo)簽

是雙標(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>

4.4 link標(biāo)簽

是單標(biāo)簽，是用來(lái)引入外部css樣式文件

<link rel="stylesheet" href="css/index.css" type="text/css">

4.5 script標(biāo)簽

是雙標(biāo)簽，是用來(lái)寫JavaScript代碼的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /* 這里寫JavaScript代碼 */
    </script>

</head>
<body>

</body>
</html>

4.6 base標(biāo)簽

是單標(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)的

5 文本標(biāo)簽

5.1 標(biāo)題標(biāo)簽

是雙標(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è)

5.2 段落標(biāo)簽

是雙標(biāo)簽，p是paragraph的縮寫

<p>這是一段文字</p>
<p>這是一段文字</p>
<p>這是一段文字</p>

特點(diǎn)：

1、獨(dú)占一行

2、段落與段落之間，存在間隙

5.3 換行標(biāo)簽

是單標(biāo)簽，br是break的縮寫

<p>這是一段<br>文字</p>

特點(diǎn)：

1、強(qiáng)制換行

2、單標(biāo)簽

5.4 水平線標(biāo)簽

是單標(biāo)簽，hr是horizon地平線的縮寫

<p>這是一段文字</p>
<hr>
<p>這是一段文字</p>

特點(diǎn)：

1、在頁(yè)面中顯示一條水平線

2、單標(biāo)簽

6 文本格式化標(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)簽

6.1 上標(biāo)標(biāo)簽

sup是superscripted這個(gè)單詞的縮寫

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    a<sup>2</sup>
</body>
</html>

6.2 下標(biāo)標(biāo)簽

sub是subscripted這個(gè)單詞的縮寫

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    H<sub>2</sub>O
</body>
</html>

6.3 字符實(shí)體

在網(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)	™
°	度	°

7 媒體標(biāo)簽

7.1 圖片標(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ò)程

7.2 音頻標(biāo)簽

<audio src="music.mp3" controls autoplay loop></audio>

audio標(biāo)簽常見屬性：

屬性名	說(shuō)明
src	音頻路徑
controls	顯示播放控件
autoplay	自動(dòng)播放
loop	循環(huán)播放

支持mp3、wav、ogg三種音頻格式

7.3 視頻標(biāo)簽

<video src="video.mp4" controls loop autoplay></video>

屬性名	說(shuō)明
src	視頻路徑
controls	顯示播放控件
autoplay	自動(dòng)播放
loop	循環(huán)播放

支持mp4、webm、ogg三種視頻格式

7.4 超鏈接標(biāo)簽

超鏈接，是雙標(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

8 列表標(biāo)簽

8.1 無(wú)序列表

<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>

8.2 有序列表

<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>

8.3 自定義列表

<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>

9 表格標(biāo)簽

9.1 表格基本結(jié)構(gòu)

<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>

9.2 表格標(biāo)簽屬性

屬性名	屬性值	描述
border	數(shù)字	邊框?qū)挾?/span>
width	數(shù)字	表格寬度
height	數(shù)字	表格高度

<table border="1" width="200" height="50">
    <tr>
        <td>1</td>
    </tr>
</table>

9.3 表格標(biāo)題標(biāo)簽

<caption>標(biāo)題內(nèi)容</caption>，位于表格內(nèi)第一行

<table border="1" width="200" height="50">
    <caption>數(shù)字</caption>
    <tr>
        <td>1</td>
    </tr>
</table>

9.4 表格表頭單元格標(biāo)簽

<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>

9.5 表格語(yǔ)義化結(jié)構(gòu)標(biāo)簽

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>

9.6 合并單元格

屬性名	屬性值	說(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>

10 表單標(biāo)簽

10.1 form標(biāo)簽

雙標(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>

10.2 input標(biāo)簽

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>

10.3 多行文本框

<textarea name="文本名稱" cols="列數(shù)" rows="行數(shù)"></textarea>

<form>
    <textarea name="文本名稱" cols="1" rows="2"></textarea>
</form>

10.4 下拉列表

<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>

11 框架標(biāo)簽

<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>

有些文檔禁止被嵌入

12 標(biāo)簽類型

HTML標(biāo)簽分為三種，行內(nèi)標(biāo)簽、塊級(jí)標(biāo)簽和行內(nèi)塊級(jí)標(biāo)簽。

12.1 行內(nèi)標(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>

12.2 塊級(jí)標(biāo)簽

特點(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>

12.3 行內(nèi)塊級(jí)標(biāo)簽

特點(diǎn)

1、在頁(yè)面內(nèi)只占據(jù)剛好能包裹自己內(nèi)容的空間

2、高度、寬度、外邊距、內(nèi)邊距都可以設(shè)置生效

3、常見塊級(jí)標(biāo)簽img、input、td

12.4 標(biāo)簽類型轉(zhuǎn)換

通過(guò)css樣式display屬性轉(zhuǎn)換，這是css的內(nèi)容

在線咨詢

上一篇：15、Nginx-網(wǎng)頁(yè)壓縮傳輸
下一篇：蘋果Safari瀏覽器支持“垂直表單控件”，可實(shí)現(xiàn)語(yǔ)言文段豎排

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

Web開發(fā)學(xué)習(xí)筆記（21）-CSS（8）字體/鏈接/列表

1 HTML概念

2 HTML結(jié)構(gòu)

?2.1 標(biāo)簽

2.1.1 雙標(biāo)簽

2.1.2 單標(biāo)簽

2.1.3 標(biāo)簽關(guān)系

3 注釋

4 head標(biāo)簽

4.1 title標(biāo)簽

4.2 meta標(biāo)簽

4.2.1 name屬性

4.2.2 http-equiv屬性

4.3 style標(biāo)簽

4.4 link標(biāo)簽

4.5 script標(biāo)簽

4.6 base標(biāo)簽

5 文本標(biāo)簽

5.1 標(biāo)題標(biāo)簽

5.2 段落標(biāo)簽

5.3 換行標(biāo)簽

5.4 水平線標(biāo)簽

6 文本格式化標(biāo)簽

6.1 上標(biāo)標(biāo)簽

6.2 下標(biāo)標(biāo)簽

6.3 字符實(shí)體

7 媒體標(biāo)簽

7.1 圖片標(biāo)簽

7.2 音頻標(biāo)簽

7.3 視頻標(biāo)簽

7.4 超鏈接標(biāo)簽

8 列表標(biāo)簽

8.1 無(wú)序列表

8.2 有序列表

8.3 自定義列表

9 表格標(biāo)簽

9.1 表格基本結(jié)構(gòu)

9.2 表格標(biāo)簽屬性

9.3 表格標(biāo)題標(biāo)簽

9.4 表格表頭單元格標(biāo)簽

9.5 表格語(yǔ)義化結(jié)構(gòu)標(biāo)簽

9.6 合并單元格

10 表單標(biāo)簽

10.1 form標(biāo)簽

10.2 input標(biāo)簽

10.3 多行文本框

10.4 下拉列表

11 框架標(biāo)簽

12 標(biāo)簽類型

12.1 行內(nèi)標(biāo)簽

12.2 塊級(jí)標(biāo)簽

12.3 行內(nèi)塊級(jí)標(biāo)簽

12.4 標(biāo)簽類型轉(zhuǎn)換

您的項(xiàng)目需求