網(wǎng)頁(yè)基本知識(shí)

瀏覽器訪問(wèn)網(wǎng)站時(shí)，頁(yè)面各不相同，你有沒(méi)有想過(guò)它為何會(huì)呈現(xiàn)這個(gè)樣子呢？本節(jié)中，我們就來(lái)了解一下網(wǎng)頁(yè)的組成、結(jié)構(gòu)和節(jié)點(diǎn)等內(nèi)容。

網(wǎng)頁(yè)的組成

網(wǎng)頁(yè)可以分為三大部分 —— HTML、CSS 和 JavaScript。如果把網(wǎng)頁(yè)比作一個(gè)人的話，HTML 相當(dāng)于骨架，JavaScript 相當(dāng)于肌肉，CSS 相當(dāng)于皮膚，三者結(jié)合起來(lái)才能形成一個(gè)完善的網(wǎng)頁(yè)。下面我們分別來(lái)介紹一下這三部分的功能。

（1）HTML

HTML，其英文叫做 HyperText Markup Language，中文翻譯叫做超文本標(biāo)記語(yǔ)言，但我們通常不會(huì)用中文翻譯來(lái)稱呼它，一般就叫 HTML。

HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言，網(wǎng)頁(yè)包括文字、按鈕、圖片和視頻等各種復(fù)雜的元素，其基礎(chǔ)架構(gòu)就是 HTML。不同類(lèi)型的元素通過(guò)不同類(lèi)型的標(biāo)簽來(lái)表示，如圖片用 img 標(biāo)簽表示，視頻用 video 標(biāo)簽表示，段落用 p 標(biāo)簽表示，它們之間的布局又常通過(guò)布局標(biāo)簽 div 嵌套組合而成，各種標(biāo)簽通過(guò)不同的排列和嵌套才形成了網(wǎng)頁(yè)的框架。

那 HTML 長(zhǎng)什么樣子呢？我們可以隨意打開(kāi)一個(gè)網(wǎng)站，比如淘寶 https://www.taobao.com，然后右鍵菜單點(diǎn)擊“檢查元素”或者按 F12 快捷鍵，即可打開(kāi)瀏覽器開(kāi)發(fā)者工具，切換到 Elements 面板，這時(shí)候就可以看到這里呈現(xiàn)的就是淘寶網(wǎng)對(duì)應(yīng)的 HTML，它包含了一系列標(biāo)簽，瀏覽器解析這些標(biāo)簽后，便會(huì)在網(wǎng)頁(yè)中渲染成一個(gè)個(gè)的節(jié)點(diǎn)，這便形成了我們平常看到的網(wǎng)頁(yè)。比如這里可以看到一個(gè)輸入框就對(duì)應(yīng)一個(gè) input 標(biāo)簽，可以用于輸入文字。

不同的標(biāo)簽對(duì)應(yīng)著不同的功能，這些標(biāo)簽定義的節(jié)點(diǎn)相互嵌套和組合形成了復(fù)雜的層次關(guān)系，就形成了網(wǎng)頁(yè)的架構(gòu)。

（2）CSS

HTML 定義了網(wǎng)頁(yè)的結(jié)構(gòu)，但是只有 HTML 頁(yè)面的布局并不美觀，可能只是簡(jiǎn)單的節(jié)點(diǎn)元素的排列。為了讓網(wǎng)頁(yè)看起來(lái)更好看一些，這里借助了 CSS。

CSS，全稱叫作 Cascading Style Sheets，即層疊樣式表。“層疊” 是指當(dāng)在 HTML 中引用了數(shù)個(gè)樣式文件，并且樣式發(fā)生沖突時(shí)，瀏覽器能依據(jù)層疊順序處理。“樣式” 指網(wǎng)頁(yè)中文字大小、顏色、元素間距、排列等格式。CSS 是目前唯一的網(wǎng)頁(yè)頁(yè)面排版樣式標(biāo)準(zhǔn)，有了它的幫助，頁(yè)面才會(huì)變得更為美觀。

在上圖中，Styles 面板呈現(xiàn)的就是一系列 CSS 樣式，比如摘抄一段 CSS，內(nèi)容如下：

#head_wrapper.s-ps-islite .s-p-top {
  position: absolute;
  bottom: 40px;
  width: 100%;
  height: 181px;
}

這就是一個(gè) CSS 樣式。大括號(hào)前面是一個(gè) CSS 選擇器。此選擇器的意思是首先選中 id 為 head_wrapper 且 class 為 s-ps-islite 的節(jié)點(diǎn)，然后再選中其內(nèi)部的 class 為 s-p-top 的節(jié)點(diǎn)。大括號(hào)內(nèi)部寫(xiě)的就是一條條樣式規(guī)則，例如 position 指定了這個(gè)節(jié)點(diǎn)的布局方式為絕對(duì)布局，bottom 指定節(jié)點(diǎn)的下邊距為 40 像素，width 指定了寬度為 100%，表示占滿父節(jié)點(diǎn)，height 則指定了節(jié)點(diǎn)的高度。也就是說(shuō)，我們將位置、寬度、高度等樣式配置統(tǒng)一寫(xiě)成這樣的形式，然后用大括號(hào)括起來(lái)，接著在開(kāi)頭再加上 CSS 選擇器，這就代表這個(gè)樣式對(duì) CSS 選擇器選中的節(jié)點(diǎn)生效，節(jié)點(diǎn)就會(huì)根據(jù)此樣式來(lái)展示了。

在網(wǎng)頁(yè)中，一般會(huì)統(tǒng)一定義整個(gè)網(wǎng)頁(yè)的樣式規(guī)則，并寫(xiě)入 CSS 文件中（其后綴為 css）。在 HTML 中，只需要用 link 標(biāo)簽即可引入寫(xiě)好的 CSS 文件，這樣整個(gè)頁(yè)面就會(huì)變得美觀、優(yōu)雅。

（3）JavaScript

JavaScript，簡(jiǎn)稱 JS，是一種腳本語(yǔ)言。HTML 和 CSS 配合使用，提供給用戶的只是一種靜態(tài)信息，缺乏交互性。我們?cè)诰W(wǎng)頁(yè)里可能會(huì)看到一些交互和動(dòng)畫(huà)效果，如下載進(jìn)度條、提示框、輪播圖等，這通常就是 JavaScript 的功勞。它的出現(xiàn)使得用戶與信息之間不只是一種瀏覽與顯示的關(guān)系，而是實(shí)現(xiàn)了一種實(shí)時(shí)、動(dòng)態(tài)、交互的頁(yè)面功能。

JavaScript 通常也是以單獨(dú)的文件形式加載的，后綴為 js，在 HTML 中通過(guò) script 標(biāo)簽即可引入，例如：

<script src="jquery-2.1.0.js"></script>

綜上所述，HTML 定義了網(wǎng)頁(yè)的內(nèi)容和結(jié)構(gòu)，CSS 描述了網(wǎng)頁(yè)的樣式，JavaScript 定義了網(wǎng)頁(yè)的行為。

2. 網(wǎng)頁(yè)的結(jié)構(gòu)

我們首先用例子來(lái)感受一下 HTML 的基本結(jié)構(gòu)。新建一個(gè)文本文件，名稱叫做 test.html，內(nèi)容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>This is a Demo</title>
  </head>
  <body>
    <div id="container">
      <div class="wrapper">
        <h2 class="title">Hello World</h2>
        <p class="text">Hello, this is a paragraph.</p>
      </div>
    </div>
  </body>
</html>

這就是一個(gè)最簡(jiǎn)單的 HTML 實(shí)例。開(kāi)頭用 DOCTYPE 定義了文檔類(lèi)型，其次最外層是 html 標(biāo)簽，最后還有對(duì)應(yīng)的結(jié)束標(biāo)簽來(lái)表示閉合，其內(nèi)部是 head 標(biāo)簽和 body 標(biāo)簽，分別代表網(wǎng)頁(yè)頭和網(wǎng)頁(yè)體，它們也需要結(jié)束標(biāo)簽。head 標(biāo)簽內(nèi)定義了一些頁(yè)面的配置和引用，如：

<meta charset="UTF-8" />

它指定了網(wǎng)頁(yè)的編碼為 UTF-8。

title 標(biāo)簽則定義了網(wǎng)頁(yè)的標(biāo)題，會(huì)顯示在網(wǎng)頁(yè)的選項(xiàng)卡中，不會(huì)顯示在正文中。body 標(biāo)簽內(nèi)則是在網(wǎng)頁(yè)正文中顯示的內(nèi)容。div 標(biāo)簽定義了網(wǎng)頁(yè)中的區(qū)塊，它的 id 是 container，這是一個(gè)非常常用的屬性，且 id 的內(nèi)容在網(wǎng)頁(yè)中是唯一的，我們可以通過(guò)它來(lái)獲取這個(gè)區(qū)塊。然后在此區(qū)塊內(nèi)又有一個(gè) div 標(biāo)簽，它的 class 為 wrapper，這也是一個(gè)非常常用的屬性，經(jīng)常與 CSS 配合使用來(lái)設(shè)定樣式。然后此區(qū)塊內(nèi)部又有一個(gè) h2 標(biāo)簽，這代表一個(gè)二級(jí)標(biāo)題。另外，還有一個(gè) p 標(biāo)簽，這代表一個(gè)段落。在這兩者中直接寫(xiě)入相應(yīng)的內(nèi)容即可在網(wǎng)頁(yè)中呈現(xiàn)出來(lái)，它們也有各自的 class 屬性。

將代碼保存后，雙擊該文件在瀏覽器中打開(kāi)，可以看到如圖所示的內(nèi)容。

可以看到，選項(xiàng)卡上顯示了 This is a Demo 字樣，這是我們?cè)?head 中的 title 里定義的文字。而網(wǎng)頁(yè)正文是 body 標(biāo)簽內(nèi)部定義的各個(gè)元素生成的，可以看到這里顯示了二級(jí)標(biāo)題和段落。

這個(gè)實(shí)例便是網(wǎng)頁(yè)的一般結(jié)構(gòu)。一個(gè)網(wǎng)頁(yè)的標(biāo)準(zhǔn)形式是 html 標(biāo)簽內(nèi)嵌套 head 和 body 標(biāo)簽，head 內(nèi)定義網(wǎng)頁(yè)的配置和引用，body 內(nèi)定義網(wǎng)頁(yè)的正文。

3 節(jié)點(diǎn)樹(shù)及節(jié)點(diǎn)間的關(guān)系

在 HTML 中，所有標(biāo)簽定義的內(nèi)容都是節(jié)點(diǎn)，它們構(gòu)成了一個(gè) HTML 節(jié)點(diǎn)樹(shù)，也稱之為 HTML DOM 樹(shù)。

我們先看下什么是 DOM。DOM 是 W3C（萬(wàn)維網(wǎng)聯(lián)盟）的標(biāo)準(zhǔn)，其英文全稱 Document Object Model，即文檔對(duì)象模型。它定義了訪問(wèn) HTML 和 XML 文檔的標(biāo)準(zhǔn)。根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn)，HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)。

整個(gè)網(wǎng)站文檔是一個(gè)文檔節(jié)點(diǎn)。
每個(gè) html 標(biāo)簽對(duì)應(yīng)一個(gè)根元素節(jié)點(diǎn)，即上例中的 html 標(biāo)簽，這屬于一個(gè)跟元素節(jié)點(diǎn)。
節(jié)點(diǎn)內(nèi)的文本是文本節(jié)點(diǎn)，比如 a 節(jié)點(diǎn)代表一個(gè)超鏈接，它內(nèi)部的文本也被認(rèn)為是一個(gè)文本節(jié)點(diǎn)。
每個(gè)節(jié)點(diǎn)的屬性是屬性節(jié)點(diǎn)，比如 a 節(jié)點(diǎn)有一個(gè) href 屬性，它就是一個(gè)屬性節(jié)點(diǎn)。
注釋是注釋節(jié)點(diǎn)，在 HTML 中有特殊的語(yǔ)法會(huì)被解析為注釋，但其也會(huì)對(duì)應(yīng)一個(gè)節(jié)點(diǎn)。

所以，HTML DOM 將 HTML 文檔視作樹(shù)結(jié)構(gòu)，這種結(jié)構(gòu)被稱為節(jié)點(diǎn)樹(shù)，如圖所示：

通過(guò) HTML DOM，樹(shù)中的所有節(jié)點(diǎn)均可通過(guò) JavaScript 訪問(wèn)，所有 HTML 節(jié)點(diǎn)元素均可被修改，也可以被創(chuàng)建或刪除。

節(jié)點(diǎn)樹(shù)中的節(jié)點(diǎn)彼此擁有層級(jí)關(guān)系。我們常用父（parent）、子（child）和兄弟（sibling）等術(shù)語(yǔ)描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)，同級(jí)的子節(jié)點(diǎn)被稱為兄弟節(jié)點(diǎn)。

在節(jié)點(diǎn)樹(shù)中，頂端節(jié)點(diǎn)稱為根（root）。除了根節(jié)點(diǎn)之外，每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)，同時(shí)可擁有任意數(shù)量的子節(jié)點(diǎn)或兄弟節(jié)點(diǎn)。圖展示了節(jié)點(diǎn)樹(shù)以及節(jié)點(diǎn)之間的關(guān)系。

4. 選擇器

我們知道網(wǎng)頁(yè)由一個(gè)個(gè)節(jié)點(diǎn)組成，CSS 選擇器會(huì)根據(jù)不同的節(jié)點(diǎn)設(shè)置不同的樣式規(guī)則，那么怎樣來(lái)定位節(jié)點(diǎn)呢？

在 CSS 中，我們使用 CSS 選擇器來(lái)定位節(jié)點(diǎn)。例如，上例中 div 節(jié)點(diǎn)的 id 為 container，那么就可以表示為 #container，其中 # 開(kāi)頭代表選擇 id，其后緊跟 id 的名稱。另外，如果我們想選擇 class 為 wrapper 的節(jié)點(diǎn)，便可以使用.wrapper，這里以點(diǎn)（.）開(kāi)頭代表選擇 class，其后緊跟 class 的名稱。另外，還有一種選擇方式，那就是根據(jù)標(biāo)簽名篩選，例如想選擇二級(jí)標(biāo)題，直接用 h2 即可。這是最常用的 3 種表示，分別是根據(jù) id、class、標(biāo)簽名篩選，請(qǐng)牢記它們的寫(xiě)法。

另外，CSS 選擇器還支持嵌套選擇，各個(gè)選擇器之間加上空格分隔開(kāi)便可以代表嵌套關(guān)系，如 #container .wrapper p 則代表先選擇 id 為 container 的節(jié)點(diǎn)，然后選中其內(nèi)部的 class 為 wrapper 的節(jié)點(diǎn)，然后再進(jìn)一步選中其內(nèi)部的 p 節(jié)點(diǎn)。另外，如果不加空格，則代表并列關(guān)系，如 div#container .wrapper p.text 代表先選擇 id 為 container 的 div 節(jié)點(diǎn)，然后選中其內(nèi)部的 class 為 wrapper 的節(jié)點(diǎn)，再進(jìn)一步選中其內(nèi)部的 class 為 text 的 p 節(jié)點(diǎn)。這就是 CSS 選擇器，其篩選功能還是非常強(qiáng)大的。

我們可以在瀏覽器中測(cè)試 CSS 選擇器的效果，依然還是打開(kāi)瀏覽器的開(kāi)發(fā)者工具，然后按快捷鍵 Ctrl + F（如果你用的是 Mac，則是 Command + F），這時(shí)候在左下角便會(huì)出現(xiàn)一個(gè)搜索框，如圖所示。

這時(shí)候我們輸入 .title 就是選中了 class 為 title 的節(jié)點(diǎn)，這時(shí)候該節(jié)點(diǎn)就會(huì)被選中并在網(wǎng)頁(yè)中高亮顯示，如圖所示：

輸入 div#container .wrapper p.text 就逐層選中了 id 為 container 中 class 為 wrapper 節(jié)點(diǎn)中的 p 節(jié)點(diǎn)，如圖所示：

另外，CSS 選擇器還有一些其他語(yǔ)法規(guī)則，具體如下表所示。

CSS 選擇器的其他語(yǔ)法規(guī)則

選擇器	例子	例子描述
.class	.intro	選擇 class="intro" 的所有節(jié)點(diǎn)
#id	#firstname	選擇 id="firstname" 的所有節(jié)點(diǎn)
*	*	選擇所有節(jié)點(diǎn)
element	p	選擇所有 p 節(jié)點(diǎn)
element,element	div,p	選擇所有 div 節(jié)點(diǎn)和所有 p 節(jié)點(diǎn)
element element	div p	選擇 div 節(jié)點(diǎn)內(nèi)部的所有 p 節(jié)點(diǎn)
element>element	div>p	選擇父節(jié)點(diǎn)為 div 節(jié)點(diǎn)的所有 p 節(jié)點(diǎn)
element+element	div+p	選擇緊接在 div 節(jié)點(diǎn)之后的所有 p 節(jié)點(diǎn)
[attribute]	[target]	選擇帶有 target 屬性的所有節(jié)點(diǎn)
[attribute=value]	[target=blank]	選擇 target="blank" 的所有節(jié)點(diǎn)
[attribute~=value]	[title~=flower]	選擇 title 屬性包含單詞 flower 的所有節(jié)點(diǎn)
:link	a:link	選擇所有未被訪問(wèn)的鏈接
:visited	a:visited	選擇所有已被訪問(wèn)的鏈接
:active	a:active	選擇活動(dòng)鏈接
:hover	a:hover	選擇鼠標(biāo)指針位于其上的鏈接
:focus	input:focus	選擇獲得焦點(diǎn)的 input 節(jié)點(diǎn)
:first-letter	p:first-letter	選擇每個(gè) p 節(jié)點(diǎn)的首字母
:first-line	p:first-line	選擇每個(gè) p 節(jié)點(diǎn)的首行
:first-child	p:first-child	選擇屬于父節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)的所有 p 節(jié)點(diǎn)
:before	p:before	在每個(gè) p 節(jié)點(diǎn)的內(nèi)容之前插入內(nèi)容
:after	p:after	在每個(gè) p 節(jié)點(diǎn)的內(nèi)容之后插入內(nèi)容
:lang(language)	p:lang	選擇帶有以 it 開(kāi)頭的 lang 屬性值的所有 p 節(jié)點(diǎn)
element1~element2	p~ul	選擇前面有 p 節(jié)點(diǎn)的所有 ul 節(jié)點(diǎn)
[attribute^=value]	a[src^="https"]	選擇其 src 屬性值以 https 開(kāi)頭的所有 a 節(jié)點(diǎn)
[attribute$=value]	a[src$=".pdf"]	選擇其 src 屬性以 .pdf 結(jié)尾的所有 a 節(jié)點(diǎn)
[attribute*=value]	a[src*="abc"]	選擇其 src 屬性中包含 abc 子串的所有 a 節(jié)點(diǎn)
:first-of-type	p:first-of-type	選擇屬于其父節(jié)點(diǎn)的首個(gè) p 節(jié)點(diǎn)的所有 p 節(jié)點(diǎn)
:last-of-type	p:last-of-type	選擇屬于其父節(jié)點(diǎn)的最后一個(gè) p 節(jié)點(diǎn)的所有 p 節(jié)點(diǎn)
:only-of-type	p:only-of-type	選擇屬于其父節(jié)點(diǎn)唯一的 p 節(jié)點(diǎn)的所有 p 節(jié)點(diǎn)
:only-child	p:only-child	選擇屬于其父節(jié)點(diǎn)的唯一子節(jié)點(diǎn)的所有 p 節(jié)點(diǎn)
:nth-child(n)	p:nth-child	選擇屬于其父節(jié)點(diǎn)的第二個(gè)子節(jié)點(diǎn)的所有 p 節(jié)點(diǎn)
:nth-last-child(n)	p:nth-last-child	同上，從最后一個(gè)子節(jié)點(diǎn)開(kāi)始計(jì)數(shù)
:nth-of-type(n)	p:nth-of-type	選擇屬于其父節(jié)點(diǎn)第二個(gè) p 節(jié)點(diǎn)的所有 p 節(jié)點(diǎn)
:nth-last-of-type(n)	p:nth-last-of-type	同上，但是從最后一個(gè)子節(jié)點(diǎn)開(kāi)始計(jì)數(shù)
:last-child	p:last-child	選擇屬于其父節(jié)點(diǎn)最后一個(gè)子節(jié)點(diǎn)的所有 p 節(jié)點(diǎn)
:root	:root	選擇文檔的根節(jié)點(diǎn)
:empty	p:empty	選擇沒(méi)有子節(jié)點(diǎn)的所有 p 節(jié)點(diǎn)（包括文本節(jié)點(diǎn)）
:target	#news:target	選擇當(dāng)前活動(dòng)的 #news 節(jié)點(diǎn)
:enabled	input:enabled	選擇每個(gè)啟用的 input 節(jié)點(diǎn)
:disabled	input:disabled	選擇每個(gè)禁用的 input 節(jié)點(diǎn)
:checked	input:checked	選擇每個(gè)被選中的 input 節(jié)點(diǎn)
:not(selector)	:not	選擇非 p 節(jié)點(diǎn)的所有節(jié)點(diǎn)
::selection	::selection	選擇被用戶選取的節(jié)點(diǎn)部分

另外，還有一種比較常用的選擇器 XPath，這種選擇方式后面會(huì)詳細(xì)介紹。

5. 總結(jié)

本節(jié)介紹了網(wǎng)頁(yè)的結(jié)構(gòu)和節(jié)點(diǎn)間的關(guān)系，了解了這些內(nèi)容，我們才有更加清晰的思路去解析和提取網(wǎng)頁(yè)內(nèi)容。

本節(jié)參考來(lái)源：

文檔 - HTML - MDN Web Docs：https://developer.mozilla.org/en-US/docs/Web/HTML
文檔 - JavaScript - MDN Web Docs：https://developer.mozilla.org/en-US/docs/Web/JavaScript
文檔 - HTML DOM 節(jié)點(diǎn) - W3School：http://www.w3school.com.cn/htmldom/dom_nodes.asp
文檔 - HTML - 維基百科：https://en.wikipedia.org/wiki/HTML
文檔 - CSS Selector - W3School：https://www.w3schools.com/cssref/css_selectors.asp

成	語(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），是一門(mén)描述性語(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)隔開(kāi)
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)簽的屬性寫(xiě)在開(kāi)始標(biāo)簽內(nèi)部

2、標(biāo)簽名與屬性之間要有空格隔開(kāi)

3、一個(gè)標(biāo)簽可以同時(shí)存在多個(gè)屬性

4、屬性之間以空格隔開(kāi)

5、屬性沒(méi)有先后順序之分

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è)編碼完整寫(xiě)法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 設(shè)置網(wǎng)頁(yè)編碼簡(jiǎn)寫(xiě)寫(xiě)法 -->
    <meta charset="UTF-8">
    <!-- 網(wǎng)頁(yè)打開(kāi)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)樣式寫(xiě)這里 */
    </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)寫(xiě)JavaScript代碼的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /* 這里寫(xiě)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>

開(kāi)發(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的縮寫(xiě)

<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的縮寫(xiě)

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

特點(diǎn)：

1、獨(dú)占一行

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

5.3 換行標(biāo)簽

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

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

特點(diǎn)：

1、強(qiáng)制換行

2、單標(biāo)簽

5.4 水平線標(biāo)簽

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

<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è)單詞的縮寫(xiě)

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

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

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

<!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)簽常見(jiàn)屬性：

屬性名	說(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ì)位置，比如從根目錄開(kāi)始的路徑，或完整的網(wǎng)絡(luò)地址
相對(duì)路徑：從當(dāng)前文件開(kāi)始出發(fā)找目標(biāo)文件的過(guò)程

7.2 音頻標(biāo)簽

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

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

屬性名	說(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	鏈接打開(kāi)方式

target屬性值

屬性值	說(shuō)明
_self	默認(rèn)，原窗口打開(kāi)鏈接
_blank	在新窗口打開(kāi)鏈接
_parent	在父窗口打開(kāi)鏈接
_top	在頂層窗口打開(kāi)超鏈接

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	小寫(xiě)英文字母，a,b,c......
A	大寫(xiě)英文字母，A,B,C......
i	小寫(xiě)羅馬數(shù)字,i,ii,iii......
I	大寫(xiě)羅馬數(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	打開(kāi)方式
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="表單類(lèi)型">

屬性值	說(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>
    愛(ài)好：
    <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)簽類(lèi)型

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、沒(méi)有寬高，內(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、常見(jiàn)行內(nèi)標(biāo)簽span、a、strong、ins、del、br等

span標(biāo)簽

雙標(biāo)簽，行內(nèi)標(biāo)簽，本身沒(méi)有固定樣式

<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)簽，文本類(lèi)塊級(jí)標(biāo)簽除外

5、常見(jiàn)塊級(jí)標(biāo)簽div、p、h1~h6、ol、ul、li等

div標(biāo)簽

雙標(biāo)簽，塊級(jí)標(biāo)簽，本身沒(méi)有固定樣式

<!-- 頭部區(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、常見(jiàn)塊級(jí)標(biāo)簽img、input、td

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

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

單標(biāo)簽

網(wǎng)頁(yè)（程序）如果要和用戶產(chǎn)生互動(dòng)，則必須借助一定的中介，這個(gè)中介一般是：文本輸入框、按鈕、多選框、單選框。而表單則是這些中介和放置這些中介的空間（<form action=”” methon=””></form>）。

在網(wǎng)頁(yè)中，這些文本輸入框、按鈕等等必須放置在由<form></form>這個(gè)標(biāo)簽所定義的空間中，否則沒(méi)有實(shí)際意義。所以，由<form></form>標(biāo)簽所定義的空間就是表單存在的空間。

【各種輸入類(lèi)型】

文字輸入框：每個(gè)表單之所以會(huì)有不同的類(lèi)型，原因就在于type="表單類(lèi)型"設(shè)定的不同而已，我們就先來(lái)看看第一個(gè)類(lèi)型：文字輸入列。文字輸入列的形態(tài)就是type="text，其使用方法如下：

呈現(xiàn)結(jié)果

姓名：

原始碼

姓名：<input type="text" name="name" size="20">

</form>

它有下列可設(shè)定之屬性：

name="名稱"，是設(shè)定此一欄位的名稱，程式中常會(huì)用到。
size="數(shù)值"，是設(shè)定此一欄位顯現(xiàn)的寬度。
value="預(yù)設(shè)內(nèi)容"，是設(shè)定此一欄位的預(yù)設(shè)內(nèi)容。
align="對(duì)齊方式"，是設(shè)定此一欄位的對(duì)齊方式，其值有：top（向上對(duì)齊）、middle（向中對(duì)齊）、bottom（向下對(duì)齊）、right（向右對(duì)齊）、left（向左對(duì)齊）、texttop（向文字頂部對(duì)齊）、baseline（向文字底部對(duì)齊）、absmiddle（絕對(duì)置中）、absbottom（絕對(duì)置下）等。
maxlength="數(shù)值"，是設(shè)定此一欄位可設(shè)定輸入的最大長(zhǎng)度。

單選框：利用type="radio"就會(huì)產(chǎn)生單選核取表單，單選核取表單通常是好幾個(gè)選項(xiàng)一起擺出來(lái)供使用者點(diǎn)選，一次只能從中選一個(gè)，故為單選核取表單。

呈現(xiàn)結(jié)果

性別：男女

原始碼

<form>

性別：

男 <input type="radio" name="sex" value="boy">

女 <input type="radio" name="sex" value="girl">

</form>

它有下列可設(shè)定之屬性：

name="名稱"，是設(shè)定此一欄位的名稱，程式中常會(huì)用到。
value="內(nèi)容"，是設(shè)定此一欄位的內(nèi)容、值或是意義。
align="對(duì)齊方式"，是設(shè)定此一欄位的對(duì)齊方式，其值有：top（向上對(duì)齊）、middle（向中對(duì)齊）、bottom（向下對(duì)齊）、right（向右對(duì)齊）、left（向左對(duì)齊）、texttop（向文字頂部對(duì)齊）、baseline（向文字底部對(duì)齊）、absmiddle（絕對(duì)置中）、absbottom（絕對(duì)置下）等。
checked，是設(shè)定此一欄位為預(yù)設(shè)選取值。

復(fù)選框：利用type=" checkbox "就會(huì)產(chǎn)生復(fù)選核取表單，復(fù)選核取表單通常是好幾個(gè)選項(xiàng)一起擺出來(lái)供使用者點(diǎn)選，一次可以同時(shí)選好幾個(gè)，故為復(fù)選核取表單。

呈現(xiàn)結(jié)果

喜好：電影看書(shū)

原始碼

<form>

喜好：

<input type="checkbox" name="sex" value="movie">電影

<input type="checkbox" name="sex" value="book">看書(shū)

</form>

它有下列可設(shè)定之屬性：

name="名稱"，是設(shè)定此一欄位的名稱，程式中常會(huì)用到。
value="內(nèi)容"，是設(shè)定此一欄位的內(nèi)容、值或是意義。
align="對(duì)齊方式"，是設(shè)定此一欄位的對(duì)齊方式，其值有：top（向上對(duì)齊）、middle（向中對(duì)齊）、bottom（向下對(duì)齊）、right（向右對(duì)齊）、left（向左對(duì)齊）、texttop（向文字頂部對(duì)齊）、baseline（向文字底部對(duì)齊）、absmiddle（絕對(duì)置中）、absbottom（絕對(duì)置下）等。
checked，是設(shè)定此一欄位為預(yù)設(shè)選取值。

密碼表單：利用type=" password "就會(huì)產(chǎn)生一個(gè)密碼表單，密碼表單和文字輸入表單長(zhǎng)得幾乎一樣，差別就在于密碼表單在輸入時(shí)全部會(huì)以星號(hào)來(lái)取代輸入的文字，以防他人偷窺。

呈現(xiàn)結(jié)果

請(qǐng)輸入密碼：

原始碼

<form>

請(qǐng)輸入密碼：<input type="password" name="input">

</form>

它有下列可設(shè)定之屬性：

name="名稱"，是設(shè)定此一欄位的名稱，程式中常會(huì)用到。
size="數(shù)值"，是設(shè)定此一欄位顯現(xiàn)的寬度。
value="預(yù)設(shè)內(nèi)容"，是設(shè)定此一欄位的預(yù)設(shè)內(nèi)容，不過(guò)呈現(xiàn)出來(lái)仍是星號(hào)。
align="對(duì)齊方式"，是設(shè)定此一欄位的對(duì)齊方式，其值有：top（向上對(duì)齊）、middle（向中對(duì)齊）、bottom（向下對(duì)齊）、right（向右對(duì)齊）、left（向左對(duì)齊）、texttop（向文字頂部對(duì)齊）、baseline（向文字底部對(duì)齊）、absmiddle（絕對(duì)置中）、absbottom（絕對(duì)置下）等。
maxlength="數(shù)值"，是設(shè)定此一欄位可設(shè)定輸入的最大長(zhǎng)度。

送出按鈕：通常我們表單填完之后，都會(huì)有一個(gè)送出按鈕以及清除重寫(xiě)的按鈕，分別是利用type=" submit "及type=" reset "來(lái)產(chǎn)生，相當(dāng)?shù)暮?jiǎn)單易用。

呈現(xiàn)結(jié)果

原始碼

<form>

</form>

它有下列可設(shè)定之屬性：

name="名稱"，是設(shè)定此一按鈕的名稱。
value="文字"，是設(shè)定此一按鈕上要呈現(xiàn)的文字，若是沒(méi)有設(shè)定，瀏覽器也會(huì)自動(dòng)替您加上“送出查詢”、“重設(shè)”等字樣。
align="對(duì)齊方式"，是設(shè)定此一欄位的對(duì)齊方式，其值有：top（向上對(duì)齊）、middle（向中對(duì)齊）、bottom（向下對(duì)齊）、right（向右對(duì)齊）、left（向左對(duì)齊）、texttop（向文字頂部對(duì)齊）、baseline（向文字底部對(duì)齊）、absmiddle（絕對(duì)置中）、absbottom（絕對(duì)置下）等。

按鈕元件：表單中或是java script常會(huì)用到按鈕來(lái)作一些效果，因此，我們可以利用type=" button "來(lái)產(chǎn)生一個(gè)按鈕，相當(dāng)簡(jiǎn)單。

呈現(xiàn)結(jié)果

請(qǐng)按下按鈕：

原始碼

<form>

請(qǐng)按下按鈕：<input type="button" name="ok" value="我同意">

</form>

它有下列可設(shè)定之屬性：

name="名稱"，是設(shè)定此一按鈕的名稱。
value="文字"，是設(shè)定此一按鈕上要呈現(xiàn)的文字。
align="對(duì)齊方式"，是設(shè)定此一欄位的對(duì)齊方式，其值有：top（向上對(duì)齊）、middle（向中對(duì)齊）、bottom（向下對(duì)齊）、right（向右對(duì)齊）、left（向左對(duì)齊）、texttop（向文字頂部對(duì)齊）、baseline（向文字底部對(duì)齊）、absmiddle（絕對(duì)置中）、absbottom（絕對(duì)置下）等。

隱藏欄位：表單中有時(shí)有些東西因?yàn)槟承┮蛩兀幌胱屖褂谜呖吹剑虺淌叫枰獏s又不得不存在，此時(shí)，我們就可以利用type=" hidden "來(lái)產(chǎn)生一個(gè)隱藏的欄位。

呈現(xiàn)結(jié)果

隱藏欄位：

原始碼

<form>

隱藏欄位：<input type="hidden" name="nosee" value="看不到">

</form>

它有下列可設(shè)定之屬性：

name="名稱"，是設(shè)定此一欄位的名稱。
value="文字"，是設(shè)定此一欄位的值、文字或意義。

【大量文字輸入元件】

有時(shí)候我們會(huì)希望讓使用者輸入比較大量的文字，此時(shí)，文字輸入列就顯得不敷使用，因此我們就可以利用<textarea></textarea>來(lái)產(chǎn)生一個(gè)可以輸入大量文字的元件，夾在兩個(gè)標(biāo)簽中的文字會(huì)出現(xiàn)在框框中，可作為預(yù)設(shè)文字。

呈現(xiàn)結(jié)果

請(qǐng)輸入您的意見(jiàn)：

原始碼

<form>

請(qǐng)輸入您的意見(jiàn)：<br>

</form>

它有下列可設(shè)定之屬性：

name="名稱"，是設(shè)定此一欄位的名稱。
wrap="設(shè)定值"，是設(shè)定此一欄位的換行模式。設(shè)定值有三種：off（輸入文字不會(huì)自動(dòng)換行）、virtual（輸入文字在螢?zāi)簧蠒?huì)自動(dòng)換行，不過(guò)若是使用者沒(méi)有自行按下enter換行，送出資料時(shí)，也視為沒(méi)有換行）、physical（輸入文字會(huì)自動(dòng)換行，送出資料時(shí)，會(huì)將螢?zāi)簧系淖詣?dòng)換行，視為換行效果送出）。
cols="數(shù)值"，是設(shè)定此一欄位的行數(shù)（橫向字?jǐn)?shù)）。
rows="數(shù)值"，是設(shè)定此一欄位的列數(shù)（垂直字?jǐn)?shù)）。

【下拉式選單】

下拉式選單令整個(gè)網(wǎng)頁(yè)看起來(lái)有很專業(yè)的感覺(jué)，我們只要利用<select name="名稱">便可以產(chǎn)生一個(gè)下拉式選單，另外，還需要配合<option>標(biāo)簽來(lái)產(chǎn)生選項(xiàng)，這樣才算完整喔！

呈現(xiàn)結(jié)果

您喜歡看書(shū)嗎？：

非常喜歡

還算喜歡

不太喜歡

非常討厭

原始碼

<form>

您喜歡看書(shū)嗎？：

<option value="非常喜歡">非常喜歡

<option value="還算喜歡">還算喜歡

<option value="不太喜歡">不太喜歡

<option value="非常討厭">非常討厭

</select>

</form>

它有下列可設(shè)定之屬性：

size="數(shù)值"，是設(shè)定此一欄位的大小，預(yù)設(shè)值為1，若是您的選項(xiàng)有四個(gè)，然后您將size設(shè)成4，那么，下拉式選單便會(huì)變成選項(xiàng)方塊，將四個(gè)選項(xiàng)一起呈現(xiàn)在方塊中。

multiple，是設(shè)定此一欄位為復(fù)選，可以一次選好幾個(gè)選項(xiàng)。

....................................................................

我的微信公眾號(hào)：UI嚴(yán)選 —越努力，越幸運(yùn)

在線咨詢

上一篇：HTML <area> 標(biāo)簽
下一篇：拖拽設(shè)計(jì)頁(yè)面開(kāi)源項(xiàng)目，避免重復(fù)工作，大量提升開(kāi)發(fā)效率

您的項(xiàng)目需求

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

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

網(wǎng)頁(yè)基本知識(shí)

網(wǎng)頁(yè)的組成

（1）HTML

（2）CSS

（3）JavaScript

2. 網(wǎng)頁(yè)的結(jié)構(gòu)

3 節(jié)點(diǎn)樹(shù)及節(jié)點(diǎn)間的關(guān)系

4. 選擇器

5. 總結(jié)

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)簽類(lèi)型

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

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

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

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

您的項(xiàng)目需求