HTML中的塊級(jí)元素與內(nèi)聯(lián)元素-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

級(jí)元素與內(nèi)聯(lián)元素的概念與區(qū)別

在HTML中，大多數(shù)元素都被定義為塊級(jí)元素或內(nèi)聯(lián)元素。

塊級(jí)元素通常會(huì)獨(dú)立成行，而內(nèi)聯(lián)元素會(huì)并排顯示。

在我們學(xué)過(guò)的元素中，

塊級(jí)元素如：<h> <p> <table>這些。

內(nèi)聯(lián)元素如<td><a><img>

下面我們通過(guò)練習(xí)來(lái)直觀看看他們的區(qū)別。

塊級(jí)元素展示，代碼如下：

<body>
  <h1>第一個(gè)網(wǎng)頁(yè)</h1><hr><h2>表格元素</h2><hr>
  <p>塊級(jí)元素與內(nèi)聯(lián)元素</p>
  <p>零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作</p>
  <table border="1" width="50%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標(biāo)題</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>
  <table border = "1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body>

如圖：

內(nèi)聯(lián)元素展示如下

示例代碼：這段代碼被我放在了</table>后面。

<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">殲20戰(zhàn)斗機(jī)</a>
<img src="img/戰(zhàn)斗機(jī)/image3.jpg" width = "200px"/>

效果如圖：

其中，<img>標(biāo)簽中的width屬性規(guī)定了圖片的寬度為200px，也就是200像素。

HTML中，如果只對(duì)圖片的寬或高進(jìn)行數(shù)值指定，那么未指定的數(shù)值會(huì)隨著指定數(shù)值進(jìn)行等比例縮放！

熟知html元素是塊級(jí)還是內(nèi)聯(lián)對(duì)以后進(jìn)行頁(yè)面布局有一定的指導(dǎo)意義。

<div>與<span>標(biāo)簽

為了方便開(kāi)發(fā)者對(duì)頁(yè)面內(nèi)容進(jìn)行布局和調(diào)整，html開(kāi)發(fā)者為html加入了專(zhuān)門(mén)的區(qū)塊元素<div></div>。

<div></div>是一個(gè)塊級(jí)元素，大家可以把它理解為一個(gè)容器，它本身是不會(huì)顯示在頁(yè)面上的。

比如這個(gè)！

筆者第一個(gè)漫畫(huà)作品

如果拋開(kāi)畫(huà)面內(nèi)容，我們看到的是一堆對(duì)畫(huà)面進(jìn)行分割的方格子。像這樣

<div></div>元素的作用就是對(duì)頁(yè)面進(jìn)行了這樣的分割。

實(shí)際上我們的頁(yè)面布局都是基于這樣思路進(jìn)行分割的，只是頁(yè)面上不會(huì)像漫畫(huà)一樣顯示外邊框而已。例如：

強(qiáng)制為其添加邊框分割：

大家看明白了嗎？<div></div>就是用來(lái)對(duì)頁(yè)面進(jìn)行分割劃區(qū)域的。

通過(guò)給<div>標(biāo)簽設(shè)置不同的id屬性，可以在css文件中對(duì)不同<div>區(qū)塊中的所有信息進(jìn)行統(tǒng)一調(diào)整樣式的操作。

這是對(duì)塊級(jí)元素整體改變樣式的方法。

但是，如果我們想對(duì)一個(gè)塊級(jí)元素中的不同文字或圖片這些內(nèi)聯(lián)元素進(jìn)行單獨(dú)操作怎么做呢？

html開(kāi)發(fā)者為我們提供了<span></span>這樣的內(nèi)聯(lián)標(biāo)簽。比如我們對(duì)<p>我有一個(gè)夢(mèng)想</p>這個(gè)段落元素中的"夢(mèng)想"兩個(gè)字進(jìn)行變化顏色的操作，我們可以這樣寫(xiě)：

通過(guò)對(duì)<span>指定不同的id或class屬性在CSS文件中對(duì)"夢(mèng)想"二字進(jìn)行改變顏色的操作而不會(huì)影響段落元素中的其他文字。

今天的內(nèi)容結(jié)束了，下一次我們建立一個(gè)新的頁(yè)面來(lái)簡(jiǎn)單看看<div>元素的基本用法。

喜歡的小伙伴請(qǐng)關(guān)注我，閱讀中遇到任何問(wèn)題請(qǐng)給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

第一個(gè)HTML頁(yè)面如何寫(xiě)？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

txt文件變成html網(wǎng)頁(yè)文件

如果您看過(guò)《HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作》這篇教程，請(qǐng)按照其中說(shuō)明創(chuàng)建一個(gè)txt文件。具體過(guò)程如下：

step1：在您方便的磁盤(pán)中建立一個(gè)文件夾，命名為"零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作"。例如我在D盤(pán)中建立了"零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作"文件夾。

step2：在文件夾中創(chuàng)建"HTML框架.txt"文件。鼠標(biāo)移動(dòng)到空白處點(diǎn)擊右鍵選擇"文本文檔"。

命名為"html框架"，如下圖所示。

如果您的電腦沒(méi)有顯示".txt"后綴的話，請(qǐng)做如下操作：點(diǎn)擊"工具"，找到"文件夾選項(xiàng)"

菜單如下：點(diǎn)擊"查看選項(xiàng)"。

下拉滑條，找到"隱藏已知文件類(lèi)型的擴(kuò)展名"選項(xiàng)，將前面的對(duì)勾去掉。

如果您使用的是win10的話請(qǐng)參考《邊學(xué)邊做網(wǎng)頁(yè)篇------初識(shí)HTML》，這也是我做的教程，不過(guò)以后都使用這個(gè)賬號(hào)來(lái)發(fā)了。

step3：把"HTML框架"復(fù)制粘貼到"html框架.txt"文件中。HTML框架代碼如下：

<!DOCTYPE HTML> <html> <head> </head><body> </body> </html>

代碼講解請(qǐng)參照《HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作》這篇教程中的講解。

粘貼后效果如下：使用CTRL+s組合鍵保存文件。

step4：復(fù)制"html框架.txt"文件，更名為"第一個(gè)網(wǎng)頁(yè).txt"。原始的"html框架.txt"文件為以后備用。

如圖所示：

step5：把"第一個(gè)網(wǎng)頁(yè).txt"的后綴名".txt"改為".html"。

首先將光標(biāo)放在"第一個(gè)網(wǎng)頁(yè).txt"文件上，點(diǎn)擊右鍵，選擇"重命名"。如圖：

選擇".txt"

更改為".html",敲擊回車(chē)鍵。這時(shí)會(huì)彈出一個(gè)對(duì)話框，如圖:

大膽的點(diǎn)擊"是"即可。

修改后文件是這樣的，如圖：因?yàn)槲业哪J(rèn)瀏覽器是360，所以，".html"文件圖標(biāo)顯示為360瀏覽器的圖標(biāo)，顯示其他瀏覽器的圖標(biāo)也沒(méi)有問(wèn)題。

step6：將鼠標(biāo)移動(dòng)到"第一個(gè)網(wǎng)頁(yè).html"文件上，單擊右鍵，選擇打開(kāi)方式，如圖：

選擇任何一個(gè)瀏覽器打開(kāi)即可，我使用的是火狐瀏覽器（Firefox），打開(kāi)后如圖所示：空白一片。

點(diǎn)擊鍵盤(pán)F12鍵，看一下控制臺(tái)，如圖：查看器中已經(jīng)顯示我們的代碼框架了。成功！

如果網(wǎng)頁(yè)是一道菜，那么，html框架我們可以理解為裝菜的白盤(pán)子，所以我們打開(kāi)框架時(shí)，瀏覽器顯示一片白。下面我們?yōu)楸P(pán)子中加些簡(jiǎn)單的"菜"。

為html頁(yè)面添加標(biāo)題與段落

首先我們?yōu)轫?yè)面添加"標(biāo)題"

在添加標(biāo)題前，我們來(lái)看一下html框架代碼中的內(nèi)容，在<html></html>標(biāo)簽中有<head></head>和<body></body>兩個(gè)兄弟標(biāo)簽。

我們?cè)陧?yè)面中看到的所有的內(nèi)容都是添加到<body></body>標(biāo)簽中間！

<head></head>標(biāo)簽中的內(nèi)容并不會(huì)顯示在頁(yè)面中。

那么如何添加"標(biāo)題"呢？

標(biāo)題在HTML中用<h></h>標(biāo)簽表示。在<h></h>中間加入文字內(nèi)容即可。如下所示：

<h>第一個(gè)頁(yè)面</h>

右鍵，使用"記事本"打開(kāi)"第一個(gè)網(wǎng)頁(yè).html"文件。如圖所示：如果您的"打開(kāi)方式"中沒(méi)有"記事本"請(qǐng)點(diǎn)擊"選擇默認(rèn)程序"

在"其他程序"中找到"記事本"。點(diǎn)擊"確定"。從此，"記事本"就一直存在于"打開(kāi)方式"中了。

我們把這句代碼粘貼到<body></body>之間。如下所示：保存后使用瀏覽器打開(kāi)。

<!DOCTYPE HTML><html><head> </head> <body> <h>第一個(gè)頁(yè)面</h> </body> </html>

然后，使用瀏覽器打開(kāi)，如圖所示：標(biāo)題出現(xiàn)在頁(yè)面中了。

下面，我們來(lái)添加段落內(nèi)容。

段落在HTML中使用<p></p>標(biāo)簽添加。代碼如下

<p>千里之行始于足下</p>

請(qǐng)各位自行將代碼添加到"第一個(gè)網(wǎng)頁(yè).html"文件中吧！示例代碼如下：

<!DOCTYPE HTML> <html> <head> </head> <body> <h>第一個(gè)網(wǎng)頁(yè)</h><p>千里之行始于足下</p> </body> </html>

結(jié)果如圖所示：

通過(guò)這個(gè)練習(xí)，我們可以發(fā)現(xiàn)一個(gè)規(guī)律，在<body></body>中，子元素代碼的上下順序代表了它在頁(yè)面中顯示的排版順序。

這也簡(jiǎn)單回答了代碼結(jié)構(gòu)與排版的關(guān)系，html的標(biāo)簽語(yǔ)句只是標(biāo)記了它所承載的信息的屬性和版面位置。

基于這個(gè)特性，html被稱(chēng)為超文本標(biāo)記語(yǔ)言。

下一期我們具體討論頁(yè)面中文字編輯的技巧。

喜歡的小伙伴請(qǐng)加關(guān)注，有任何問(wèn)題請(qǐng)給我留言，歡迎大家給與指正！感激不盡！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML頁(yè)面中嵌入其他頁(yè)面的方法

在自己的頁(yè)面中嵌入其他頁(yè)面是一個(gè)非常重要的操作，既能豐富自己的頁(yè)面樣式又能增強(qiáng)頁(yè)面的信息量。

舉個(gè)例子，如果打算在自己的頁(yè)面中插入一個(gè)視頻網(wǎng)站的視頻該怎么做呢？

假如我現(xiàn)在自己的頁(yè)面中嵌入這個(gè)視頻，

我只需要在視頻下側(cè)找到"分享"。

點(diǎn)擊之后出現(xiàn)這樣的對(duì)話框，如圖：

通過(guò)在我們的頁(yè)面中粘貼這段通用代碼就可以顯示這個(gè)視頻了。

代碼如下：

<iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>

下面就寫(xiě)到我們的頁(yè)面中試試吧。

首先復(fù)制"第一個(gè)網(wǎng)頁(yè).html"文件，改名為"在頁(yè)面中嵌入頁(yè)面.html"保存，然后用記事本打開(kāi)，修改<head></head>標(biāo)簽中的<title>第一個(gè)頁(yè)面</title>編輯為"在頁(yè)面中嵌入頁(yè)面"即可，完整代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在頁(yè)面中嵌入頁(yè)面</title>
  </head> 
  <body>
  <iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>
  </body>
  </html>

頁(yè)面效果如下：

怎么樣，是不是很神奇！

下面我們來(lái)分析一下這段代碼的含義。

首先要引入一個(gè)新標(biāo)簽<iframe>，HTML的使用手冊(cè)中翻譯為"框架"，說(shuō)實(shí)話，這么翻譯初學(xué)者是不知所云的。這個(gè)框架元素的主要作用就是在自己的頁(yè)面中嵌入其他頁(yè)面。

在<iframe>標(biāo)簽中先指定路徑屬性即src。這里使用的是單引號(hào)，實(shí)際上只要是半角符號(hào)，單引號(hào)和雙引號(hào)都可以的。

然后設(shè)置長(zhǎng)寬屬性，即width和height，大家可以嘗試改變數(shù)據(jù)看看。

frameborder可以為iframe的窗口指定一個(gè)邊框，大家可以嘗試把0改成1看看。大家注意哈，這里輸入30和輸入1是一樣的，因?yàn)檫@個(gè)屬性不是定義邊框的寬度，而是定義是否顯示邊框！在編程中叫做布爾值，0代表沒(méi)有邊框，1代表有邊框！和我們點(diǎn)燈的開(kāi)關(guān)一樣！

如圖：多了個(gè)邊框出來(lái)。

最后'allowfullscreen'這個(gè)描述非常的奇葩，把它刪掉沒(méi)有任何影響。不曉得是干什么的，主要是也不符合html的語(yǔ)法（也可能是我沒(méi)見(jiàn)識(shí)）。如果有詳細(xì)了解的小伙伴歡迎留言指教，感激不盡。

下面我們嘗試修改一下src屬性，給它一個(gè)別的路徑看看。例如:

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在頁(yè)面中嵌入頁(yè)面</title>
  </head> 
  <body>
  <iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'>
  </iframe>
  </body>
  </html>

需要注意的是，修改了src并保存文件之后要把原頁(yè)面關(guān)閉然后重新打開(kāi)才可以正常顯示！

效果如下：

在瀏覽網(wǎng)頁(yè)時(shí)我們還經(jīng)常遇到這樣的情況，就是有一個(gè)獨(dú)立窗口顯示嵌套的頁(yè)面，上面有個(gè)標(biāo)題，一點(diǎn)擊就會(huì)跳到那個(gè)嵌入的頁(yè)面上，這個(gè)其實(shí)很簡(jiǎn)答，使用一個(gè)<a></a>元素即可辦到，示例代碼如下:

<a href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作</a>
<iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'></iframe>

頁(yè)面示例如下：

框架元素并沒(méi)有換行，所有我們可以推測(cè)出<iframe>標(biāo)簽實(shí)際上是個(gè)內(nèi)聯(lián)元素，如何讓它換行呢？

為<iframe>的style屬性中寫(xiě)入display:block即可。這句代碼的意思是按照塊元素來(lái)顯示<iframe>內(nèi)容。

示例代碼如下：

<iframe height=498 width=510 style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'></iframe>

頁(yè)面效果如下：

是不是很有意思。

下面我們來(lái)介紹一個(gè)更有趣的玩法。如圖所示：

這個(gè)怎么做呢？

這就要介紹<iframe>標(biāo)簽中的另一個(gè)屬性：name（名字）

示例代碼如下：name="iframe"

<iframe name = "iframe" height=498 width=510style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'allowfullscreen'></iframe>

這里講個(gè)題外話，如果大家了解中國(guó)古代的"請(qǐng)神術(shù)"的話就會(huì)知道這樣一個(gè)有趣的傳說(shuō)，就是如果我們能叫出鬼神的名字就可以驅(qū)使它。

編程也是這樣，我們給函數(shù)或變量一個(gè)名字后，就可以隨時(shí)隨地的驅(qū)使它。

現(xiàn)在我們給<iframe>起了個(gè)名字叫做"iframe"，當(dāng)然您可以使用其他名字也沒(méi)問(wèn)題，但要使用英文或漢語(yǔ)拼音命名，名字是英語(yǔ)字母組合最好。

有了名字之后，<a>標(biāo)簽就要驅(qū)使<iframe>標(biāo)簽來(lái)顯示自己路徑下的內(nèi)容，如何驅(qū)使呢？

大家還記得<a>標(biāo)簽中有一個(gè)target屬性嗎？只要讓target="iframename"即可！

也就是target="iframe"。示例代碼如下：大家要注意的是<a>標(biāo)簽也是內(nèi)聯(lián)元素，也需要添加display:block，不然也是排在一列顯示。

<a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作</a><!--第一個(gè)a鏈接的是頭條文章-->
<a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin"> 殲20戰(zhàn)斗機(jī)百科</a><!--第二個(gè)a鏈接的是百度百科-->
<a style = "display:block;"target="iframe" href="image1.jpg">IT美女</a><!--第三個(gè)a鏈接的是本地圖片-->
<iframe name = "iframe" height=498 width=510style = "display:block;"></iframe>

只要我們?yōu)椴煌?lt;a>標(biāo)簽賦予target="iframe"的屬性，點(diǎn)擊這些<a>標(biāo)簽就可以在叫做"iframe"的框架元素中顯示自己的頁(yè)面。這時(shí)我們可以把<iframe>標(biāo)簽中的src屬性刪除掉，保存文件后，關(guān)閉測(cè)試網(wǎng)頁(yè)，再重新打開(kāi)，效果如下:

初始狀態(tài)下，因?yàn)榭蚣茉刂械膕rc是空的，所以打開(kāi)后是空白的。如果您覺(jué)得單調(diào)可以任意復(fù)制3個(gè)<a>中的一個(gè)href中的鏈接路徑給<iframe>的src屬性，打開(kāi)就是相應(yīng)的標(biāo)簽。這個(gè)就不演示了，大家自己試試即可。

點(diǎn)擊第一個(gè)鏈接效果如下：

點(diǎn)擊第二個(gè)鏈接如下：

點(diǎn)擊第三個(gè)鏈接如下：

最后再?gòu)?qiáng)調(diào)一下，改完框架的src屬性后需要關(guān)閉頁(yè)面后重新打開(kāi)才可以，刷新的話并不能正確顯示！切記！

今天的示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在頁(yè)面中嵌入頁(yè)面</title>
  </head> 
  <body>
  <a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作</a>
  <a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin">殲20戰(zhàn)斗機(jī)百科</a>
<a style = "display:block;" target="iframe" href="image1.jpg">IT美女</a>
<iframe name = "iframe" height=498 width=510 style = "display:block;"></iframe>
</body>
</html>

今天的內(nèi)容結(jié)束了，明天我將會(huì)為大家介紹<object>和<embed>這兩個(gè)標(biāo)簽，它們可以在頁(yè)面中嵌入更多有趣的東西。

喜歡的小伙伴請(qǐng)關(guān)注我，閱讀中遇到任何問(wèn)題請(qǐng)給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

第一個(gè)HTML頁(yè)面如何寫(xiě)？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

在線咨詢

上一篇：2017年最全的excel函數(shù)大全8—文本函數(shù)（下）
下一篇：Jsp+Servlet+Mysql實(shí)現(xiàn)的在線鮮花商城源碼附帶視頻指導(dǎo)運(yùn)行教程

您的項(xiàng)目需求

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

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

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

級(jí)元素與內(nèi)聯(lián)元素的概念與區(qū)別

HTML完整學(xué)習(xí)目錄

txt文件變成html網(wǎng)頁(yè)文件

為html頁(yè)面添加標(biāo)題與段落

HTML完整學(xué)習(xí)目錄

HTML頁(yè)面中嵌入其他頁(yè)面的方法

HTML完整學(xué)習(xí)目錄

您的項(xiàng)目需求