在HTML頁(yè)面中嵌入其他頁(yè)面的方法-零基礎(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è)制作

生 CSS 嵌套（Native CSS nesting）已經(jīng)被所有現(xiàn)代桌面瀏覽器所支持！，但是請(qǐng)注意，移動(dòng)端瀏覽器支持的還很有限。

1.原生 CSS 嵌套

原生 CSS 嵌套可以像 SASS、LESS 預(yù)處理器一樣，將相關(guān)的選擇器組合在一起，從而減少需要編寫(xiě)的規(guī)則數(shù)量，它可以節(jié)省打字時(shí)間，并使語(yǔ)法更易于閱讀和維護(hù)。您可以將選擇器嵌套到任意深度，但要小心不要超過(guò)兩層或三層。嵌套深度沒(méi)有技術(shù)限制，但它會(huì)使代碼更難以閱讀，并且生成的 CSS 可能會(huì)變得不必要的冗長(zhǎng)。

.button {
   background-color: red;

   &.warning {
     background-color: blue;
   }

   & .icon {
      width: 1rem;
      height: 1rem;
   }
}

雖然原生 CSS 嵌套語(yǔ)法在過(guò)去幾年中不斷發(fā)展，使大多數(shù) Web 開(kāi)發(fā)人員感到滿意，但不要指望所有 SCSS 代碼都能像您期望的那樣直接工作。

2.原生 CSS 嵌套規(guī)則

您可以將任何選擇器嵌套在另一個(gè)選擇器中，但它必須以符號(hào)開(kāi)頭，例如 &, .（類選擇器）、#（ID選擇器）、@（對(duì)于媒體查詢）、:、::、+、 ~、 > 或 [。換句話說(shuō)，它不能是對(duì) HTML 元素的直接引用。下面的代碼是無(wú)效的，不會(huì)對(duì) input 元素選擇器進(jìn)行解析：

.parent {
  color: red;

  input {
    margin: 1em;
  }
}
/* Invalid, because "input" is an identifier. */

解決此問(wèn)題的最簡(jiǎn)單方法是使用與號(hào) ( &)，它以與 Sass 相同的方式引用當(dāng)前選擇器。

2.1.& 符號(hào)的使用

.parent {
  color: red;

  & input {
    margin: 1em;
  }

  /* use pseudo-elements and pseudo-classes */
  &::after {}

  &:hover {}

  &:target {}
}
/* valid, no longer starts with an identifier */

或者，您可以使用其中之一：

> input：只對(duì)子元素生效
:is(input)：將選擇器列表作為參數(shù)，并選擇該列表中任意一個(gè)選擇器可以選擇的元素
:where(input)：優(yōu)先級(jí)總是為 0

它們都可以在這個(gè)簡(jiǎn)單的示例中工作，但是稍后您可能會(huì)遇到更復(fù)雜的樣式表的特異性問(wèn)題。

它還&允許您在父選擇器上定位偽元素和偽類。例如：

p.my-element {

  &::after {}

  &:hover {}

  &:target {}
}

請(qǐng)注意，& 可以在選擇器中的任何位置使用。例如：

.child1 {
  .parent3 & {
    color: red;
  }
}

這將轉(zhuǎn)換為以下非嵌套語(yǔ)法：

.parent3 .child1 { color: red; }

您甚至可以在選擇器中使用多個(gè) & 符號(hào)：

ul {
  & li & {
    color: blue;
  }
}

這將以嵌套 <ul> 元素 ( ul li ul) 為目標(biāo)，但如果您想保持理智，我建議不要使用它！

2.2.@ 符號(hào)的使用

嵌套媒體查詢示例：

p {
  color: cyan;
  @media (min-width: 800px) {
    color: purple;
  }
}

3.原生 CSS 嵌套陷阱

3.1.場(chǎng)景一：父選擇器包裝在 :is() 中

原生 CSS 嵌套將父選擇器包裝在 :is() 中，這可能會(huì)導(dǎo)致與 Sass 輸出的差異，比如以下嵌套代碼：

.parent1, #parent2 {
  .child1 {

  }
}

當(dāng)它在瀏覽器中解析時(shí)，它實(shí)際上變成以下內(nèi)容：

:is(.parent1, #parent2) .child1 {

}

Sass 將相同的代碼編譯為：

.parent1 .child1,
#parent2 .child1 {

}

3.2.場(chǎng)景二：& 符號(hào)后置

您可能還會(huì)遇到一個(gè)更微妙的問(wèn)題。考慮一下：

.parent .child {
  .grandparent & {}
}

原生 CSS 等效項(xiàng)是：

.grandparent :is(.parent .child) {}

這與以下錯(cuò)誤排序的 HTML 元素匹配：

<div class="parent">
  <div class="grandparent">
    <div class="child">MATCH</div>
  </div>
</div>

MATCH變得有樣式是因?yàn)?CSS 解析器執(zhí)行以下操作：

它會(huì)查找所有元素，其所屬類的child祖先也parent為DOM 層次結(jié)構(gòu)中的任何點(diǎn)。

找到包含MATCH的元素后，解析器會(huì)grandparent在 DOM 層次結(jié)構(gòu)中的任何位置再次檢查它是否具有 — 的祖先。它找到一個(gè)并相應(yīng)地設(shè)置該元素的樣式。

Sass 中的情況并非如此，它編譯為：

.grandparent .parent .child {} 上面的 HTML 沒(méi)有樣式化，因?yàn)樵仡惒蛔裱瓏?yán)格的grandparent、parent、和child順序。

3.3.場(chǎng)景三：字符串替換

Sass 使用字符串替換，因此如下所示的聲明是有效的，并且與類的任何元素相匹配 .btn-primary：

.btn {
  &-primary {
    color: blue;
  }
}

但是原生 CSS 嵌套會(huì)忽略&-space選擇器。

4.CSS 預(yù)處理器還需要嗎？

從短期來(lái)看，現(xiàn)有的 CSS 預(yù)處理器仍然至關(guān)重要。Sass 開(kāi)發(fā)團(tuán)隊(duì)宣布，他們將支持 .css 文件中的原生 CSS 嵌套，并按原樣輸出代碼。他們將一如既往地編譯嵌套 SCSS 代碼，以避免破壞現(xiàn)有代碼庫(kù)，但當(dāng)全球?yàn)g覽器支持率達(dá)到 98% 時(shí)，他們將開(kāi)始輸出 :is() 選擇器。

我猜想，PostCSS 插件等預(yù)處理器目前會(huì)擴(kuò)展嵌套代碼，但隨著瀏覽器支持的普及，就會(huì)取消這一功能。當(dāng)然，使用預(yù)處理器還有其他很好的理由，比如將部分代碼捆綁到一個(gè)文件中，以及對(duì)代碼進(jìn)行精簡(jiǎn)。但如果嵌套是你唯一需要的功能，你當(dāng)然可以考慮在較小的項(xiàng)目中使用原生 CSS。

總結(jié)

CSS 嵌套是最有用、最實(shí)用的預(yù)處理器功能之一。瀏覽器供應(yīng)商努力創(chuàng)造了一個(gè)與 CSS 非常相似的原生 CSS 版本，以滿足網(wǎng)絡(luò)開(kāi)發(fā)人員的需求。雖然兩者之間存在細(xì)微差別，而且在使用（過(guò)于）復(fù)雜的選擇器時(shí)可能會(huì)遇到不尋常的特殊性問(wèn)題，但很少有代碼庫(kù)需要進(jìn)行徹底修改。

原生嵌套可能會(huì)讓你重新考慮是否需要 CSS 預(yù)處理器，但它們?nèi)阅芴峁┢渌锰帯ass 和類似工具仍然是大多數(shù)開(kāi)發(fā)者工具包的重要組成部分。

TML 基礎(chǔ)

非常簡(jiǎn)單的HTML文檔

HTML 標(biāo)題

HTML 段落

HTML 鏈接

HTML 圖片

實(shí)例解析

HTML 標(biāo)題

HTML 標(biāo)題

在html源碼中插入注釋

插入水平線

實(shí)例解析

HTML 段落

HTML 段落

更多段落

本例演示在 HTML 文檔中折行的使用。

HTML 格式化的某些問(wèn)題。

實(shí)例解析

HTML 文本格式化

文本格式化

此例演示如何使用 pre 標(biāo)簽對(duì)空行和空格進(jìn)行控制。

此例演示不同的"計(jì)算機(jī)輸出"標(biāo)簽的顯示效果。

此例演示如何在 HTML 文件中寫(xiě)地址。

此例演示如何實(shí)現(xiàn)縮寫(xiě)或首字母縮寫(xiě)。

此例演示如何改變文字的方向。

此例演示如何實(shí)現(xiàn)長(zhǎng)短不一的引用語(yǔ)。

文本下劃線與刪除線

實(shí)例解析

HTML 樣式

HTML Style 元素

背景色樣式

字體樣式，顏色，大小

文本對(duì)齊樣式

設(shè)置文本字體

設(shè)置文本字體大小

設(shè)置文本字體顏色

設(shè)置文本字體，字體大小，字體顏色

HTML使用不同樣式

沒(méi)有下劃線的鏈接

鏈接到一個(gè)外部樣式表

實(shí)例解析

HTML 鏈接

創(chuàng)建超級(jí)鏈接

將圖像作為鏈接

在新的瀏覽器窗口打開(kāi)鏈接

鏈接到同一個(gè)頁(yè)面的不同位置

跳出框架

創(chuàng)建電子郵件鏈接

創(chuàng)建電子郵件鏈接 2

實(shí)例解析

HTML 圖像

插入圖像

從不同的位置插入圖片

排列圖片

本例演示如何使圖片浮動(dòng)至段落的左邊或右邊。

制作圖像鏈接

創(chuàng)建圖像映射

實(shí)例解析

HTML 表格

簡(jiǎn)單的表格

沒(méi)有邊框的表格

表格中的表頭

帶有標(biāo)題的表格

跨行或跨列的表格單元格

表格內(nèi)的標(biāo)簽

單元格邊距(Cell padding)

單元格間距(Cell spacing)

實(shí)例解析

HTML 列表

無(wú)序列表

有序列表

不同類型的有序列表

不同類型的無(wú)序列表

嵌套列表

嵌套列表 2

定義列表

實(shí)例解析

HTML Forms 和 Input

創(chuàng)建文本域(Text fields)

創(chuàng)建密碼域

復(fù)選框

單選按鈕

簡(jiǎn)單的下拉列表

預(yù)選下拉列表

本例演示如何創(chuàng)建一個(gè)文本域（多行文本輸入控件）。

創(chuàng)建一個(gè)按鈕

本例演示如何在數(shù)據(jù)周?chē)L制一個(gè)帶標(biāo)題的框。

帶有文本域與輸入域的表單

帶有復(fù)選框與提交按鈕的form表單

帶有單選框與提交按鈕的表單

發(fā)送郵件表單

實(shí)例解析

HTML iframe

內(nèi)聯(lián)框架 (HTML頁(yè)面中插入框架)

實(shí)例解析

HTML 頭部元素

描述了文檔標(biāo)題

HTML頁(yè)面中默認(rèn)的URL鏈接

提供文檔元數(shù)據(jù)

實(shí)例解析

HTML 腳本

插入一個(gè)腳本

使用 <noscript> 標(biāo)簽

實(shí)例解析

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：HTML 中的 box-border 盒子邊框詳解
下一篇：解決ios15系統(tǒng)的手機(jī)使用html2canvas截圖頁(yè)面空白崩潰

您的項(xiàng)目需求

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

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

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

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

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

1.原生 CSS 嵌套

2.原生 CSS 嵌套規(guī)則

2.1.& 符號(hào)的使用

2.2.@ 符號(hào)的使用

3.原生 CSS 嵌套陷阱

3.1.場(chǎng)景一：父選擇器包裝在 :is() 中

3.2.場(chǎng)景二：& 符號(hào)后置

3.3.場(chǎng)景三：字符串替換

4.CSS 預(yù)處理器還需要嗎？

總結(jié)

您的項(xiàng)目需求