js如何獲取iframe頁面內的對象

單介紹iframe標簽，所有的瀏覽器都支持<iframe>標簽，iframe 元素會創建包含另外一個文檔的內聯框架（即行內框架）。通常我們常用的iframe標簽的屬性有：width（iframe 的寬度）、height（iframe 的高度）、frameborder（顯示框架周圍的邊框）、src（iframe 中顯示的文檔的 URL）。

那么如何使用js來獲取iframe頁面內的對象呢，以及反過來說內嵌的iframe頁面又該如何得到父級頁面的對象？

注意地方：

1.需要在服務器下運行

2.父級頁面須保證頁面內容加載完畢，即js獲取iframe頁面內容需要在window.onload中寫

相關方法：

1.父級頁面獲取iframe頁面中的元素對象（關鍵contentWindow）：

document.getElementById(iframe的id).contentWindow.document.getElementById(iframe頁面元素id)

2.iframe頁面獲取父級頁面的元素對象（關鍵window.parent）：

window.parent.document.getElementById(父級頁面的元素id)

代碼示例：

說明：父級頁面test.html，iframe子級頁面：iframe.html

test.html

iframe.html

在服務器下打開test.html文件，chrome瀏覽器測試結果：

iframe.html先獲取到它的父級頁面test.html的h1元素的內容“父級頁面”，并輸出在控制臺；

然后到text.html頁面獲取iframe.html中的h1元素的內容“子級頁面”，并輸出在控制臺。

薦閱讀：

阿里架構師精選Nginx+Redis+Sping+SpringBoot源碼級PDF文檔分享

微服務+Docker完美教程，被阿里架構師匯集到這2份文檔里面了！

引言

對于面試常問的從瀏覽器輸入 URL 到頁面展示過程發生了什么？，我想大家都或多或少能說出一二。但是，其實這個問題很有深度，而你是否回答的有深度，在很大程度上會影響到面試官對你的印象。

并且，網上各種資料都是淺嘗輒止地講解這個過程，經常會出現今天看到這個版本，明天看到另一個版本地情況。所以，這次我們就來深入淺出一下這整個過程~

一、Chrome 多進程架構

首先，在開始講解整個過程前，我們需要認識一下 Chrome 多進程架構。因為，從瀏覽器輸入 URL 到頁面渲染的整個過程都是由 Chrome 架構中的各個進程之間的配合完成。

Chrome 的多進程架構：

瀏覽器進程，它負責用戶界面（地址欄、菜單等等）、子進程的管理（例如，進程間通信和數據傳遞）、存儲等等
渲染進程，它負責將接收到的 HTML 文檔和 JavaScript 等轉化為用戶界面
網絡進程，它負責網絡資源的請求，例如 HTTP請求、WebSocket 模塊
GPU（圖形處理器）進程，它負責對 UI 界面的展示
插件進程，它負責對插件的管理

二、過程詳解

2.1 解析輸入

發生這個過程的前提，用戶在地址欄中輸入了 URL，而地址欄會根據用戶輸入，做出如下判斷：

輸入的是非 URL 結構的字符串，則會用瀏覽器默認的搜索引擎搜索該字符串
輸入的是 URL 結構字符串，則會構建完整的 URL 結構，瀏覽器進程會將完整的 URL 通過進程間通信，即 IPC，發送給網絡進程

2.2 請求過程

在網絡進程接收到 URL 后，并不是馬上對指定 URL 進行請求。首先，我們需要進行 DNS 解析域名得到對應的 IP，然后通過 ARP 解析 IP 得到對應的 MAC（Media Access Control Address）地址。

域名是我們取代記憶復雜的 IP 的一種解決方案，而 IP 地址才是目標在網絡中所被分配的節點。MAC 地址是對應目標網卡所在的固定地址。

1. DNS 解析

而 DNS 解析域名的過程分為以下幾個步驟：

詢問瀏覽器 DNS 緩存
詢問本地操作系統 DNS 緩存（即查找本地 host 文件）
詢問 ISP（Internet Service Provider）互聯網服務提供商（例如電信、移動）的 DNS 服務器
詢問根服務器，這個過程可以進行遞歸和迭代兩種查找的方式，兩者都是先詢問頂級域名服務器查找

2. 通信過程

首先，建立 TCP 連接，即三次握手過程：

客戶端發送標有 SYN 的數據包，表示我將要發送請求。
服務端發送標有 SYN/ACK 的數據包，表示我已經收到通知，告知客戶端發送請求。
客戶端發送標有 ACK 的數據包，表示我要開始發送請求，準備被接受。

然后，利用 TCP 通道進行數據傳輸：

服務端接收到數據包，并發送確認數據包已收到的消息到客戶端，不斷重復這個過程
客戶端在發送一個數據包后，未接收到服務端的確定消息，則重新發送該數據包，即 TCP 的重發機制
當接收完所有的數據包后，接收端會按照 TCP 頭中的需要進行排序，形成完整的數據

最后，斷開 TCP 連接，即四次握手過程：

客戶端發送請求，申請斷開連接，進入等待階段，此時不會發送數據，但是會繼續接收數據。
服務端接收請求后，告知客戶端已明白，此時服務端進入等待狀態，不會再接收數據，但是會繼續發送數據。
客戶端收到后，進入下一階段等待。
服務端發送完剩余的數據后，告知客戶端可以斷開連接，此時服務端不會發送和接收數據。
客戶端收到后，告知服務端我開始斷開連接。
服務端收到后，開始斷開連接。

而這整個過程的客戶端則是網絡進程。并且，在數據傳輸的過程還可能會發生的重定向的情況，即當網絡進程接收到狀態碼為 3xx 的響應報文，則會根據響應報文首部字段中的 Location 字段的值進行重新向，即會重新發起請求

3. 數據處理

當網絡進程接收到的響應報文狀態碼，進行相應的操作。例如狀態碼為 200 OK 時，會解析響應報文中的 Content-Type 首部字段，例如我們這個過程 Content-Type 會出現 application/javascript、text/css、text/html，即對應 Javascript 文件、CSS 文件、HTML 文件。

詳細的 MIME 類型講解可以看 MDN

2.3 創建渲染進程

當前需要渲染 HTML 時，則需要創建渲染進程，用于后期渲染 HTML。而對于渲染進程，如果是同一站點是可以共享一個渲染進程，例如 a.abc.com 和 c.abc.com 可以共享一個渲染渲染進程。否則，需要重新創建渲染進程

需要注意的是，同站指的是頂級域名和二級域名相等

2.4 開始渲染

在創建完渲染進程后，網絡進程會將接收到的 HTML、JavaScript 等數據傳遞給渲染進程。而在渲染進程接收完數據后，此時用戶界面上會發生這幾件事：

更新地址欄的安全狀態
更新地址欄的 URL
前進后退此時 enable，顯示正在加載狀態
更新網頁

2.5 渲染過程

大家都知道頁面渲染的過程也是面試中單獨會考的點，并且時常會由這個點延申出另一個問題，即如何避免回流和重繪。

渲染過程，是整個從理器輸入 URL 到頁面渲染過程的最后一步。而頁面渲染的過程可以分為 9 個步驟：

解析 HTML 生成 DOM 樹
解析 CSS 生成 CSSOM
加載或執行 JavaScript
生成渲染樹（Render Tree）
布局
分層
生成繪制列表
光柵化
顯示

2.5.1 構建 DOM 樹

由于網絡進程傳輸給渲染進程的是 HTML 字符串，所以，渲染進程需要將 HTML 字符串轉化成 DOM 樹。例如：

需要注意的是這個 DOM 樹不同于 Chrome-devtool 中 Element 選項卡的 DOM 樹，它是存在內存中的，用于提供 JavaScript 對 DOM 的操作。

2.5.2 構建 CSSOM

構建 CSSOM 的過程，即通過解析 CSS 文件、style 標簽、行內 style 等，生成 CSSOM。而這個過程會做這幾件事：

規范 CSS，即將 color: blue 轉化成 color: rgb() 形式，可以理解成類似 ES6 轉 ES5 的過程
計算元素樣式，例如 CSS 樣式會繼承父級的樣式，如 font-size、color 之類的。

CSS Object Model 是一組允許用 JavaScript 操縱 CSS 的 API。詳細 API 講解可以看 MDN

2.5.3 加載 JavaScript

通常情況下，在構建 DOM 樹或 CSSOM 的同時，如果也要加載 JavaScript，則會造成前者的構建的暫停。當然，我們可以通過 defer 或 sync 來實現異步加載 JavaScript。雖然 defer 和 sync 都可以實現異步加載 JavaScript，但是前者是在加載后，等待 CSSOM 和 DOM 樹構建完后才執行 JavaScript，而后者是在異步加載完馬上執行，即使用 sync 的方式仍然會造成阻塞。

而 JavaScript 執行的過程，即編譯和運行 JavaScript 的過程。由于 JavaScript 是解釋型的語言。所以這個過程會是這樣的：

針對每句代碼進行分行處理，即 Token 化
根據 Token，生成 AST（Abstract Sytanx Tree) 抽象語法樹和創建上下文
解釋器解析和執行 AST，生成字節碼。
編譯器針對需要反復執行的代碼，生成對應的機器碼，提高運行效率

2.5.4 生成渲染樹（Render Tree）

在有了 DOM 樹和 CSSOM 之后，需要將兩者結合生成渲染樹 Render Tree，并且這個過程會去除掉那些 display: node 的節點。此時，渲染樹就具備元素和元素的樣式信息。

2.5.5 布局

根據 Render Tree 渲染樹，對樹中每個節點進行計算，確定每個節點在頁面中的寬度、高度和位置。

需要注意的是，第一次確定節點的大小和位置的過程稱為布局，而第二次才被稱為回流

2.5.6 分層

由于層疊上下文的存在，渲染引擎會為具備層疊上下文的元素創建對應的圖層，而諸多圖層的疊加就形成了我們看到的一些頁面效果。例如，一些 3D 的效果、動畫就是基于圖層而形成的。

值得一提的是，對于內容溢出存在滾輪的情況也會進行分層

2.5.7 生成繪制列表

對于存在圖層的頁面部分，需要進行有序的繪制，而對于這個過程，渲染引擎會將一個個圖層的繪制拆分成繪制指令，并按照圖層繪制順序形成一個繪制列表。

2.5.8 光柵化

有了繪制列表后，渲染引擎中的合成線程會根據當前視口的大小將圖層進行分塊處理，然后合成線程會對視口附近的圖塊生成位圖，即光柵化。而渲染進程也維護了一個柵格化的線程池，專門用于將圖塊轉為位圖。

柵格化的過程通常會使用 GPU 加速，例如使用 wil-change、opacity，就會通過 GPU 加速顯示

2.5.9 顯示

當所有的圖塊都經過柵格化處理后，渲染引擎中的合成線程會生成繪制圖塊的指令，提交給瀏覽器進程。然后瀏覽器進程將頁面繪制到內存中。最后將內存繪制結果顯示在用戶界面上。

而這個整個從生成繪制列表、光柵化、顯示的過程，就是我們常說的重繪的過程

結語

整個瀏覽器輸入 URL 到頁面渲染的過程涉及到的知識點非常廣，如 Chrome 多進程的架構、HTTP 通信過程、瀏覽器解析 JavaScript 過程、瀏覽器繪制頁面過程以及一些計算機的基礎知識等等，并且，這整個過程的分析其實和 Chrome-devtools 密切相關，所以很好的使用 Chrome-devtools 是非常重要的，后續應該會出一篇關于使用 Chrome-devtools 的指南。當然，本篇文章仍然存在諸多不足，歡迎提 issue ~

作者：五柳
鏈接：https://juejin.im/post/5e871ee56fb9a03c832b0013

成	語言	描述
結構	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 塊級標簽