Web開發學習筆記（21）-CSS（8）字體/鏈接/列表

1）字體的屬性

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

字體屬性用于定義字體的類型、字號大小、加粗、斜體等方面樣式。常用的字體屬性如下表所示：

屬性	可取值	描述
font	font-style、font-variant、font-weight、font-size（或 line-height）、font-family	在一個聲明中設置所有的字體屬性
font-family	字體名稱、inherit	設置字體類型
font-size	xx-small、x-small、small、medium（默認）、large、x-large、xx-large smaller、larger length、%、inherit	設置字體大小
font-weight	normal（默認）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold）	設置字體粗細
font-style	normal、italic、oblique、inherit	設置字體風格

例子，

<!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 前端技術</h3>
    <span
      >在當今社會中，Web 已經成為網絡信息共享和發布的主要形式。要想開發 Web 應用
      系統，就必須掌握 Web 前端技術。</span
    >
  </body>
</html>

顯示為，

（2）CSS 中鏈接標簽可用的偽類：

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

CSS 中，偽類是添加到選擇器的關鍵字，給指定元素設置一些特殊狀態，我們以 : 開頭。

鏈接有以下四個狀態。這四種狀態也稱之為超鏈接的偽類。

狀態	效果
a:link	普通的、未被訪問的鏈接。
a:hover	鼠標指針位于鏈接的上方。
a:active	鏈接被單擊的時刻。
a:visited	用戶已訪問的鏈接。

針對超鏈接的上述四種狀態設置樣式規則，能起到美化超鏈接的作用。例如，為了完成下對超鏈接的顯示要求，編寫的 CSS 樣式代碼如下。

狀態	顏色	背景色	文本修飾
未訪問	藍色	無	無下畫線
鼠標移到	黑色	#DDDDDD	下畫線
正單擊	紅色	#AAAAAA	刪除線
已訪問	綠色	無	無下畫線

對于超鏈接的偽類，我們推薦的使用順序是：: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="#">這是一個鏈接</a>
  </body>
</html>

顯示為，

為什么要按照這樣的順序來使用呢？調整幾個偽類的順序，看看會發生什么。

我們把 a:link 放到最后，效果如下：

從圖中可以發現其中的樣式屬性都被覆蓋了。

（3）列表相關的樣式屬性：

list-style 屬性
list-style-image 屬性
list-style-position 屬性
list-style-type 屬性

屬性	可取值	描述
list-style	list-style-type、list-style-position、list-style-image	在一個聲明中設置所有的列表屬性
list-style-image	URL、none	設置圖像為列表項標志
list-style-position	inside、outside、inherit	設置列表中列表項標志的位置
list-style-type	disc（默認）、circle、square、decimal 等	設置列表項標志的類型

例子，

wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif

了更方便地控制網頁中各種各樣的字體，CSS提供了一系列的字體樣式屬性，具體如下。

(1)font-size屬性：字號

font-size屬性用于設置字號，該屬性的屬性值可以為像素值、百分比數值、倍率等。表3-l列舉了fomt-size屬性常用的屬性值單位，具體如下。

單位	說明
em	倍率單位，指相對于當前對象內文本的字體倍率
px	像素值單位，是阿頁設計中常用的單位
%	百分比數值單位，指相對于當前對象內文本的字體百分比

在表1所列的常用單位中，推薦使用像素值單位—px。例如，將網頁中所有段落文本的字號設為12px，CSS樣式示例代碼如下：

· p(font-size:12px;)

(2)font-family屬性：字體fomt-family屬性用于設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等。例如，將網頁中所有段落文本的字體設置為微軟雅黑，CSS樣式示例代碼如下：

p[font-family：“微軟雅黑“：]

fomt-family屬性可以同時指定多個字體，各字體之間以逗號隔開。如果瀏覽器不支持第一種字體，則會嘗試下一種，直到匹配到合適的字體。例如，同時指定3種字體的CSS樣式示例代碼如下：

body[font-fanily:“華文彩云”，“宋體“，“黑體"；]

當應用上述代碼后，瀏覽器會首選“華文彩云”字體，如果用戶計算機上沒有安裝該字體則選擇“宋體”。以此類推，當fomt-fammily屬性指定的字體都沒有安裝時，瀏覽器就會選擇用戶計算機默認的字體。使用font-family屬性設置字體時，需要注意以下幾點。

· 各種字體之間必須使用英文逗號隔開。

· 中文字體需要加英文引號，但英文字體不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前。CSS樣式示例代碼如下：

body[font-fanily：Arial，“微款雅黑”，“未體”，”黑體”：] /“正確的書寫方式"
body(font-fanijy：“微軟稚黑”，“宋體”。“黑體”，Arial:) /“錯誤的書寫方式"/

· 如果字體名包含空格、#、S等符號，則該字體必須加英文引號，如“font-family.“Times New Roman":"

· 盡量使用系統欺認字體，以保證網頁中的文字在任何用戶的瀏覽器中都能正確顯示。

(3)font-weight屬性：字體粗細

font-weighn 屬性用于定義字體的粗細，其屬性值如表所示。

值	描述
normal	默認屬性值，定義標準樣式的字符
bold	定義粗體字符
bolder	定義更粗的字符
lighter	定義更細的字符
100~900（100的整數倍）	定義由細到相的字符，其中400等同于normal,700等同于bold，數值越大字體越粗

表2列舉了常用的font-weight屬性的屬性值。在實際工作中，常用的屬性值為normal和bol,分別用于定義正常和加粗顯示的字體。

(4)font-variant屬性：變體

font-variant 屬性用于設置英文字符的變體，一般用于定義小型大寫字體，該屬性僅對英文字符有效。font-variant 屬性的可用屬性值如下。

· normal:默認值，測覽器會顯示標準的字體。small-caps：瀏覽器會顯示小型大寫的字體，即所有的小寫字

母均會轉換為大寫字母。但是所有使用小型大寫字體的字母和其余文本相比，字體尺寸更小。例如，圖3-l2中框線標注的小型大寫字母，就是使用font-variant屬性設置的。

(5)font-style屬性：字體風格

fomt-style屬性用于定義字體風格。例如，設置斜體、傾斜或正常字體。font-style屬性的可用屬性值如下。

· nommal：默認值，測覽器會顯示標準的字體樣式。

· italic：測覽器會顯示斜體的字體樣式。

· oblique：測覽器會顯示傾斜的字體樣式。

當font-style屬性取值為italic或oblique時，文字都會顯示傾斜的樣式，兩者在顯示效果上并沒有本質區別。但italie使用了字體的傾斜屬性，并不是所有的字體都有傾斜屬性;而obhique只是使文字傾斜，無關該字體有沒有傾斜屬性。

(6)fomt屬性：綜合設置字體樣式

fomt屬性用于對字體樣式進行綜合設置，其基本語法格式如下：

選擇器{font:font-style font-varlant font-weight font-size/line-height font-fanlly:}

使用fomt屬性綜合設置字體樣式時，必須按上述語法格式中的順序書寫，各個屬性以空格隔開(line-height用于設置行間距，屬于文本外觀屬性，在后面將具體介紹)。例如，下面設置字體樣式的示例代碼：

p{font-fanily:Arial,"宋體";font-size:30px; font-style:italic; font-weight:boid; font-variant:
amal1-cape; line-height:40px;}

上述代碼可以使用fomt屬性綜合設置字體樣式，其等價于：

p{font:italic small-caps bold 30px/40px Arial,"宋體";}

其中，不需要設置的屬性可以省略(省略的屬性將取默認值)，但必須保留fomt-size和 font-family屬性，否則font 屬性將不起作用。

下面通過一個案例具體演示如何使用fomt屬性綜合設置字體樣式，如下所示。

<!doctype html>
<html>
<head>
<meta charset.-"utf-8">
<title>font l國性</title>
<style type-"text/css">
.one{ font:italic 18px/30px"隸書":}
.two{ font:italic l8px/30px;}
</style>
</head>
<body>
<p class="one">段落1：使用font 屬性綜合設置段落文本的字體風格、字號，行高和字體。</p>
<p class="two“>段落2：使用font屬性綜合設置段落文本的字體風格、字號和行高。由于省略了字體屬性font-family，
這時font屬性不起作用。</p>
</body>
</htnl>

定義了兩個段落，同時使用fomt屬性分別對它們進行相應的設置，效果如圖。

從圖中可以看出，font屬性設置的樣式并沒有對第二個段落文本生效，這是因為對第二個段落文本的設置中省略了字體屬性“font-family”。

(7)@font-face規則

@font-face是CSS3的新增規則，用于定義服務器字體。通過@font-face規則，可以使用計算機未安裝的字體。@font-face規則定義服務器字體的基本語法格式如下：

@font-face{
     font-family:字體名稱:
     src：字體路徑；
}

在上述語法格式中，font-family用于指定該服務器字體的名稱，該名稱可以隨意定義;sre用于指定該字體文件的路徑。

下面通過一個剪紙字體的案例來演示@font-face規則的具體用法，如下所示。

<!doctype html>
<html>
<head>
<meta charset-"utf-8">
<title>afont-face規則</title>
<style type-"text/css">
@font-face{
font-fanily:jianzhi;   /*服務器字體名稱*/
src:url(FZJZJN.TTF);   /*服務器字體文件的路徑*/
}
p{
font-fanily:jianzhi;   /*設置字體樣式*/
font-size:32px;
}
</style>
</head>
<body>
<p>明確責任</p>
<p>肩負使命</p>
</body>
</htnl>

在例3-6中，第7~10行代碼用于定義服務器字體;第12代碼用于為段落標簽設置字體樣式。效果如圖所示。

從圖中可以看出，當定義并設置服務器字體后，頁面就可以正常顯示剪紙字體。總結例3-6，可以得出使用服務器字體的步驟。

①下載字體，并存儲到相應的文件夾中。

②使用@font-face規則定義服務器字體。

③對元素應用“font-family”字體樣式。

成	語言	描述
結構	HTML	網頁元素和內容
表現	CSS	網頁元素頁面樣式
行為	JavaScript	網頁交互

1 HTML概念

HTML，超文本標記語言（Hyper Text Markup Language），是一門描述性語言。標記，標簽，元素，叫法不同，意思相同。HTML超文本標記語言主要通過標簽的方式，對網頁頁面的文本、圖片、音頻、視頻等內容進行描述。學習HTML，就是學習各種標簽，來搭建網頁的結構。

2 HTML結構

結構：!DOCTYPE

說明：作用是告訴瀏覽器用哪個文檔規范來解析文檔

標簽：html

說明：用于搭建HTML網頁文檔結構和網頁布局

?標簽：head

說明：用于定義HTML網頁文檔的頭部,它是所有頭部元素的容器?

?標簽：body

說明：用來定義HTML網頁文檔的主體區域?

?標簽：meta

說明：用來描述HTML網頁文檔的屬性?

?標簽：title

說明：用來放到HTML網頁文檔的頭部，是搜索引擎首要抓取的目標代碼?

?2.1 標簽

標簽，也叫作標記，是由一對尖括號<>，里面包含單詞組成

2.1.1 雙標簽

<html></html>

2.1.2 單標簽

<br>

2.1.3 標簽關系

嵌套關系

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

并列關系

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

3 注釋

注釋用來幫助程序員記錄程序設計方法，輔助程序閱讀

4 head標簽

4.1 title標簽

雙標簽，定義網頁的標題

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

</body>
</html>

4.2 meta標簽

是單標簽，用來描述HTML網頁文檔的屬性

4.2.1 name屬性

屬性值	說明
keywords	網頁關鍵字，多個逗號隔開
description	網頁描述
author	作者
copyright	版權信息

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 網頁關鍵字 -->
    <meta name="keywords" content="html,css,javascript">
    <!-- 網頁描述 -->
    <meta name="description" content="基礎前端知識">
    <!-- 網頁作者 -->
    <meta name="author" content="buddha">
    <!-- 網頁版權信息 -->
    <meta name="copyright" content="版權所有，翻版必究">
</head>
<body>

</body>
</html>

標簽屬性：

1、標簽的屬性寫在開始標簽內部

2、標簽名與屬性之間要有空格隔開

3、一個標簽可以同時存在多個屬性

4、屬性之間以空格隔開

5、屬性沒有先后順序之分

4.2.2 http-equiv屬性

屬性值	說明
Content-Type	定義網頁所使用編碼
refresh	定義網頁自動刷新跳轉

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 設置網頁編碼完整寫法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 設置網頁編碼簡寫寫法 -->
    <meta charset="UTF-8">
    <!-- 網頁打開3秒后跳去百度 -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>

</body>
</html>

4.3 style標簽

是雙標簽，用來定義標簽的css樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        /* css內聯樣式寫這里 */
    </style>
</head>
<body>

</body>
</html>

4.4 link標簽

是單標簽，是用來引入外部css樣式文件

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

4.5 script標簽

是雙標簽，是用來寫JavaScript代碼的地方

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

</head>
<body>

</body>
</html>

4.6 base標簽

是單標簽，是用來設置整個網頁的基礎路徑。

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://pic.rmb.bdstatic.com">

</head>
<body>
    <img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>

開發中很少用到，有人使用知道就行

上面所述標簽是放在head標簽里的，接下來接觸的標簽都是放在body標簽內的

5 文本標簽

5.1 標題標簽

是雙標簽，h是header的縮寫

<h1>h1標簽：一級標題</h1>
<h2>h2標簽：二級標題</h2>
<h3>h3標簽：三級標題</h3>
<h4>h4標簽：四級標題</h4>
<h5>h5標簽：五級標題</h5>
<h6>h6標簽：六級標題</h6>

特點：

1、字體加粗

2、獨占一行

3、從h1到h6，字體逐漸減小

4、使用<h>標簽的主要意義是告訴搜索引擎這是一段文字的標題

5、<h1>在一個頁面最多只能有一個，不要用多個

5.2 段落標簽

是雙標簽，p是paragraph的縮寫

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

特點：

1、獨占一行

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

5.3 換行標簽

是單標簽，br是break的縮寫

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

特點：

1、強制換行

2、單標簽

5.4 水平線標簽

是單標簽，hr是horizon地平線的縮寫

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

特點：

1、在頁面中顯示一條水平線

2、單標簽

6 文本格式化標簽

標簽1	標簽2	說明
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>

特點：

1、不會獨占一行

2、推薦使用標簽2所在列標簽

6.1 上標標簽

sup是superscripted這個單詞的縮寫

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

6.2 下標標簽

sub是subscripted這個單詞的縮寫

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

6.3 字符實體

在網頁中展示特殊符號效果時，需要使用字符實體替代

顯示結果	描述	實體名稱
	空格
<	小于號	<
>	大于號	>
&	與	&
"	雙引號	"
x	乘號	×
÷	除號	÷
-	長破折號	—
\|	豎線	\|
‘	左單引號	‘
‘	右單引號	’
?	版權符	©
?	注冊商標	®
?	商標	™
°	度	°

7 媒體標簽

7.1 圖片標簽

<img src="./001.jpg" alt="">

img標簽常見屬性：

屬性名	說明
src	圖片路徑（絕對路徑、相對路徑）
alt	圖片加載失敗時，顯示的文字
title	鼠標懸停時，顯示的文字
width	圖片寬度
height	圖片高度

只設置寬或高，會自動等比縮放，寬高只需要數字，不需要'px'

<img src="./001.jpg" alt="圖片加載失敗" title="這是程序兔" width="200" height="200">

絕對路徑：指目錄下的絕對位置，比如從根目錄開始的路徑，或完整的網絡地址
相對路徑：從當前文件開始出發找目標文件的過程

7.2 音頻標簽

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

audio標簽常見屬性：

屬性名	說明
src	音頻路徑
controls	顯示播放控件
autoplay	自動播放
loop	循環播放

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

7.3 視頻標簽

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

屬性名	說明
src	視頻路徑
controls	顯示播放控件
autoplay	自動播放
loop	循環播放

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

7.4 超鏈接標簽

超鏈接，是雙標簽，實現各個獨立頁面之間進行跳轉，可以跳去站外也可以在站內之間跳轉

<a href="鏈接地址">文本或圖片</a>

站外跳轉，采用絕對路徑

<a href="http://www.baidu.com" target="_blank">百度</a>

站內跳轉，采用相對路徑

<!-- a頁面 -->
<a href="b.html">跳去b頁面</a>

<!-- b頁面 -->
<p>b頁面</p>

頁面內跳轉

<a href="#ms">美食</a>
<a href="#jd">景點</a>
<h3 id="ms">推薦美食</h3>
<!-- 省略n個br標簽 -->
<br>
<h3 id="jd">推薦景點</h3>

屬性名	說明
href	跳轉鏈接
target	鏈接打開方式

target屬性值

屬性值	說明
_self	默認，原窗口打開鏈接
_blank	在新窗口打開鏈接
_parent	在父窗口打開鏈接
_top	在頂層窗口打開超鏈接

target屬性值一般使用_self（默認）和_blank

8 列表標簽

8.1 無序列表

<ul type="屬性值">
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ul>

解釋：

1、ul，unordered lists，無序列表，li，list item，列表項

2、ul標簽子標簽只允許是li標簽

3、li標簽可以包含任意內容

type屬性值

屬性值	說明
disc	默認，實心圓
circle	空心圓
square	實心方型

<ul>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ul>

8.2 有序列表

<ol type="屬性值">
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ol>

解釋：

1、ol，ordered lists，有序列表，li，list item，列表項

2、ol標簽子標簽只允許是li標簽

3、li標簽可以包含任意內容

type屬性值

屬性值	說明
1	默認，阿拉伯數字，1,2,3......
a	小寫英文字母，a,b,c......
A	大寫英文字母，A,B,C......
i	小寫羅馬數字,i,ii,iii......
I	大寫羅馬數字,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 表格標簽

9.1 表格基本結構

<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 表格標簽屬性

屬性名	屬性值	描述
border	數字	邊框寬度
width	數字	表格寬度
height	數字	表格高度

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

9.3 表格標題標簽

<caption>標題內容</caption>，位于表格內第一行

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

9.4 表格表頭單元格標簽

<th></th>，th，table header cell，表頭單元格

<table border="1" width="200" height="50">
    <caption>數字</caption>
    <tr>
        <th>序號</th>
    </tr>
    <tr>
        <td>1</td>
    </tr>
</table>

9.5 表格語義化結構標簽

thead、tbody、tfoot

<table border="1" width="200" height="50">
    <caption>數字</caption>
    <thead>
        <tr>
            <th>序號</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>匯總</td>
        </tr>
    </tfoot>
</table>

9.6 合并單元格

屬性名	屬性值	說明
rowspan	合并單元格個數	合并行，單元格垂直合并
colspan	合并單元格個數	合并列，單元格水平合并

<td rowspan="跨越的行數"></td>

<td colspan="跨越的列數"></td>

<table border="1" width="200" height="50">
    <caption>數字</caption>
    <thead>
        <tr>
            <th>序號</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 表單標簽

10.1 form標簽

雙標簽，包裹其它表單標簽

<form>
    // 表單
</form>

form標簽的常用屬性

屬性	說明
name	表單名稱
method	提交方式
action	提交地址
target	打開方式
enctype	編碼方式

name屬性

一個頁面中，表單可能不止一個。name屬性，用來區分不同的表單

<form name="myForm"></form>

method屬性

用來指定表單數據使用哪種提交方式給后端

屬性值	說明
get	get方式
post	post方式

<form method="get"></form>

action屬性

用來指定表單數據提交到哪個地址

<!-- 比如提交到index.php地址 -->
<form action="index.php"></form>

target屬性

該屬性跟a標簽的target屬性一樣，其屬性值也是四個，一般情況只用到_blank屬性值，默認也是這個值

<form target="_blank"></form>

enctype屬性

屬性值	說明
application/x-www-form-urlencoded	在發送前編碼所有字符（默認）
multipart/form-data	不對字符編碼，在使用包含文件上傳控件的表單時，必須使用該值
text/plain	空格轉換為 "+" 加號，但不對特殊字符編碼

<form enctype="multipart/form-data"></form>

10.2 input標簽

input是單標簽

<input type="表單類型">

屬性值	說明
text	單行文本框
password	密碼文本框
radio	單選框
checkbox	多選框
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
file	文件上傳

單行文本框常用屬性

屬性	說明
value	設置文本框的默認值
size	設置文本框的長度
maxlength	設置最多可輸入字符

<form>
    <input type="text" value="默認值" size="長度" maxlength="可輸入字符">
</form>

<form>
    <label>姓名：<input type="text" value="曹操" size="20" maxlength="10"></label>
</form>

密碼文本框常用屬性

密碼文本框常用屬性和單行文本框常用屬性相同

<input type="password" value="默認值" size="長度" maxlength="可輸入字符">

<form>
    <label>密碼：<input type="password" value="12345678" size="20" maxlength="10"></label>
</form>

單選框

屬性	說明
name	組名，同組單選框，組名要相同，必要屬性
value	單選框選項取值，必要屬性
checked	默認選中項，同組單選框，可以有一個默認選中項

<input type="radio" name="組名" value="取值" checked="checked">

<form>
    性別：
    <input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女
</form>

復選框

復選框和單選框的屬性都相同，區別復選框可以多選

<form>
    愛好：
    <input type="checkbox" name="hobby" value="籃球" checked>籃球
    <input type="checkbox" name="hobby" value="足球" checked>足球
    <input type="checkbox" name="hobby" value="臺球">臺球
</form>

普通按鈕

<input type="button" value="取值">

<form>
    <input type="button" value="普通按鈕">
</form>

<button>普通按鈕</button>

區別：

1、input是單標簽，button是雙標簽

2、button標簽的信息除了文本，還可以是圖像、其它標簽等

3、button有type屬性，屬性值可以是button、submit、reset等

提交按鈕

<input type="submit" value="取值">

<form>
    <input type="submit" value="提交">
</form>

把對應表單數據提交給后端服務器

重置按鈕

<input type="reset" value="取值">

<form>
    <input type="reset" value="重置">
</form>

點擊重置后，所在form表單里所有內容被清空了

文件上傳

<input type="file">

<form>
    <input type="file">
</form>

10.3 多行文本框

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

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

10.4 下拉列表

<select>
    <option>選項內容</option>
    <option>選項內容</option>
</select>

下拉列表標簽是為了節省頁面空間

select標簽屬性

屬性名	說明
name	數據提交后端所需字段
size	下拉選項顯示個數
multiple	默認只允許選一個，選多個得加這個屬性
disabled	所有下拉選項禁止選中

<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標簽屬性

屬性名	說明
selected	默認選中
value	被選中，數據提交后端的值
disabled	該下拉選項禁止選中

<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 框架標簽

<iframe src="URL" width="數值" height="數值"></iframe>

框架標簽常用屬性

屬性名	說明
src	嵌入的文檔地址
width	標簽寬度
height	標簽高度

<iframe src="https://www.bilibili.com" width="300" height="200"></iframe>

有些文檔禁止被嵌入

12 標簽類型

HTML標簽分為三種，行內標簽、塊級標簽和行內塊級標簽。

12.1 行內標簽

特點：

1、在頁面內只占據剛好能包裹自己內容的空間

2、沒有寬高，內容多大就多大，行內標簽不能嵌套塊級標簽（a標簽除外）

3、行內標簽設置寬高無效，可以對行高line-height進行設置

4、可以設置外邊距margin和內邊距padding，但只對左右邊距有效果，上下無效

5、常見行內標簽span、a、strong、ins、del、br等

span標簽

雙標簽，行內標簽，本身沒有固定樣式

<p>我是<span>中國人</span></p>

12.2 塊級標簽