2. 程式人生 > 其它 >8.10前端之Html框架

8.10前端之Html框架

阿新 • • 發佈：2021-08-11

8.10前端之Html框架

作用

通過使用框架，你可以在同一個瀏覽器視窗中顯示不止一個頁面。

  • 每份HTML文件稱為一個框架

  • 每個框架都獨立於其他的框架。

使用框架的壞處：

  • 開發人員必須同時跟蹤更多的HTML文件

  • 很難列印整張頁面

分類

  • 垂直框架

  • 水平框架

  • 混合框架

  • 導航框架

  • 內聯框架

框架結構標籤<frameset>

  • 框架結構標籤（<frameset>）定義如何將視窗分割為框架

  • 每個 frameset 定義了一系列行或列

  • rows/columns 的值規定了每行或每列佔據螢幕的面積

框架標籤<frame>

  • 定義了放置在每個框架中的 HTML 文件

一個框架有可見邊框，使用者可以拖動邊框來改變它的大小。為了避免這種情況發生，可以在 <frame> 標籤中加入：noresize="noresize"。

重要提示

不能將 <body></body> 標籤與 <frameset></frameset> 標籤同時使用！不過，假如你新增包含一段文字的 <noframes> 標籤，就必須將這段文字巢狀於 <body></body> 標籤內。（在下面的第一個例項中，可以檢視它是如何實現的。）

使用<noframes>
標籤
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="這是一個框架的練習" />
        <title>A demo about frame</title>
    </head>
    
    <frameset cols="40%,30%,30%">
        <frame src="SemanticDemoPractice.html" />
        <frame src="BootstrapDemoPractice.html" />
        <frame src="ColumnPracticeDemoNo1.html" />
        
        <noframes>
            <body>
            瀏覽器無法處理框架!!!
            <body>
        </noframes>
    </frameset>
</html>
垂直框架--->cols(列屬性)
    <frameset cols="40%,30%,30%">
        <frame src="SemanticDemoPractice.html" />
        <frame src="BootstrapDemoPractice.html" />
        <frame src="ColumnPracticeDemoNo1.html" />
        
        <noframes>
            <body>
            瀏覽器無法處理框架!!!
            <body>
        </noframes>
    </frameset>
水平框架--->rows(行屬性)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="這是一個框架的練習，試用水平排版" />
        <title>This is a practice about rows</title>
    </head>
    
    <frameset rows="30%,20%,30%">
        <frame src="IframePractice.html" />
        <frame src="PracticeDemoNo1.html" />
        <frame src="ResponsiveDesignPractice.html" />
    </frameset>
    <body>
    </body>
</html>
混合框架結構--->巢狀<frameset>標籤
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="這是一個關於框架的練習Demo" />
        <title>This is a Demo</title>
    </head>
    <frameset rows="50%">
        <frame src="FramesetPracticeDemoNo3.html" />
        <frameset cols="30%,30%,40%">
            <frame src="SemanticDemoPractice.html" />
            <frame src="PracticeList.html" />
            <frame src="IframePractice.html" />
        </frameset>
    </frameset>
</html>
導航框架

目標Html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a href="BootstrapDemoPractice.html" target="showframe">沒有錨的連線</a>
        <br />
        <a href="SemanticDemoPractice.html#C10" target="showframe">帶有錨的連線</a>
    </body>
</html>

SemanticDemoPractice

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="語義元素的練習" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Practice about Semantic Elements</title>
    </head>
    <body>
        <nav>
            <a href="TablePracticeDemoNo1.html">Table</a> |
            <a href="SemanticDemoPractice.html">Semantic</a> |
            <a href="ResponsiveDesignPractice.html">Response</a>
        </nav>
        <section contenteditable="false">
            <h1>Semantic Elements</h1>
            <p contenteditable="true" style="font-family: '微軟雅黑'; color: saddlebrown; font-size: medium;">This is a content about Semantic Elements</p>
        </section>
        <section contenteditable="false">
            <h1>Content</h1>
            <p contenteditable="true" style="font-family: '微軟雅黑'; color: darkmagenta; font-size: large;">Input Something</p>
        </section>
        <article contenteditable="false" style="font-family: '微軟雅黑'; color: black; font-size: large;">
            <h1>What can you do</h1>
            <p contenteditable="false" style="font-family: '微軟雅黑'; color: royalblue; font-size: medium;">It is a content</p>
        </article>
        <br />
        <article contenteditable="false" style="font-family: '微軟雅黑'; color: blanchedalmond;">
            <header contenteditable="false" style="font-family: '微軟雅黑'; color: darkblue; font-size: larger;">
                <h1>Title of the article</h1>
                <p contenteditable="false" style="font-family: '微軟雅黑'; color: black; font-size: medium;">What is the title of the article</p>
            </header>
            <p contenteditable="true" style="font-family: '微軟雅黑'; color: black; font-size: initial;">Input your answer</p>
            <footer contenteditable="false" style="font-family: '微軟雅黑'; color: darkcyan; font-size: inherit;">
                <p contenteditable="false">Information from:<a href="PracticeList.html">[email protected]</a>.</p>
            </footer>
        </article>
        <br />
        <article contenteditable="false" style="font-family: '微軟雅黑';" id="C10">
      <!--這裡是錨的位置-->
            <p contenteditable="false" style="font-family: '微軟雅黑';">This is a content</p>
            <aside contenteditable="false" style="font-family: '微軟雅黑'; color: red; font-size: inherit;">
                <ul contenteditable="false" style="font-family: '微軟雅黑'; color: hotpink;">
                    <li>Html</li>
                    <li>Css</li>
                    <li>JavaScript</li>
                </ul>
            </aside>
        </article>
        <br />
        <p contenteditable="false">This is a content about picture</p>
        <figure>
            <figcaption contenteditable="false" style="font-family: '微軟雅黑'; color: red; text-align: left;">皮卡丘，大大大</figcaption>
            <img src="../Picture/Big.gif" alt="This is a Picture" width="304" height="228" />
        </figure>
<br />
<p contenteditable="false" style="font-family: '微軟雅黑';color: red;">字元實體</p>
<p contenteditable="false">&X;</p>
<p contenteditable="false">&#174</p>
<br />
<p contenteditable="false">將要顯示 &</p>
<p contenteditable="false">將要顯示 &#8364</p>
<p contenteditable="false">將要顯示 &#x20AC</p>
</body>
</html>

導航Html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="這是另一個關於框架的練習" />
        <title>This is another practice about frameset</title>
    </head>
    <frameset cols="120,*">
        <frame src="TargetDemo.html" />
        <frame src="SemanticDemoPractice.html#C10" name="showframe" />
    </frameset>
</html>
不可改變框架大小的屬性--->noresize屬性
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>This is a Demo</title>
    </head>
    <frameset cols="30%,30%" noresize="noresize">
        <frame src="ColumnPracticeDemoNo1.html" />
        <frame src="TargetDemo.html" />
    </frameset>
    <body>
    </body>
</html>

這個效果會將目標的引用部分的內容直接指向內聯框架--->實現在一個Html介面開啟多個Html內容

幾個需要注意的點：

  • 使用框架導航跳轉至指定的節--->需要定位到指定Html的錨的話需要在src引用的時候帶上錨

  • 跳轉至框架內一個指定的節--->直接在src引用上帶上錨，在frameset會直接展示錨部分的內容

  • 沒有noresize屬性的框架其邊界都是可以拖動的

It's a lonely road!!!

相關推薦

8.10前端之Html框架

8.10前端之Html框架 作用 通過使用框架，你可以在同一個瀏覽器視窗中顯示不止一個頁面。

8.5前端之Html樣式和文字格式化

8.5前端之Html樣式和文字格式化 樣式屬性<style> style 屬性用於改變 HTML 元素的樣式

8.3前端之Html列表

8.3前端之Html列表 列表的分類 有序列表 無序列表 自定義列表 對應標籤： 標籤描述

8.3前端之Html區塊和佈局

8.3前端之Html區塊和佈局 塊級元素 特點： 大多數 HTML 元素被定義為塊級元素或內聯元素。

8.10前端之字元實體和符號

8.10前端之字元實體和符號 特點 HTML 中的預留字元必須被替換為字元實體 像<、>號這些東西瀏覽器會誤以為是標籤。希望正確地顯示預留字元，我們必須在 HTML 原始碼中使用字元實體（character entities）。

8.9前端之Html語義

8.9前端之Html語義 什麼是語義元素 語義元素清楚地向瀏覽器和開發者描述其意義

前端之HTML基礎等相關內容-50

1.基礎 <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\"

前端之HTML標籤等相關內容-51

1.列表標籤 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title>​<style>ul {list-style: none;}</style></head><bo

前端之Bootstrap框架

前端之Bootstrap框架 目錄前端之Bootstrap框架一、Bootstrap簡介二、環境配置三、全域性CSS樣式1、佈局容器2、柵格系統3、柵格引數4、排版5、表格6、表單7、按鈕8、圖表四、元件1、導航條2、分頁器3、彈框五、案例

web前端之html基礎複習

------------恢復內容開始------------ web前端（網頁前端開發）主要由html超文字標記語言，css層疊樣式表，JavaScript指令碼語言組成

從零開始，學習web前端之HTML基礎

什麼是前端前端對於網站來說，通常是指，網站的前臺部分包括網站的表現層和結構層。因此前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺程式碼實現，包括基本的

7.30前端之Html表格

7.30前端之Html表格 涉及到的標籤 <table> <tr> <th> <td> 實現列排序、行排序、一列多值排序、一行多值排序等

8.11前端之背景顏色

8.11前端之背景顏色 背景顏色是一個屬性 標籤 <Background> 作用 將背景設定為影象。屬性值為影象的URL。如果影象尺寸小於瀏覽器視窗，那麼影象將在整個瀏覽器視窗進行復制。

8.11前端之Form表單

8.11前端之Form表單 表單的作用 HTML 表單用於蒐集不同型別的使用者輸入 表單的元素

8.9前端之響應設計模式

8.9前端之響應設計模式 什麼是響應設計模式(Responsive Web Design) 響應式 web 設計會讓您的網頁在所有裝置上看起來都不錯

Web 前端之HTML內容

1 HTML簡介 HTML是超文字標記語言，它不是一種程式語言，而是一種標記語言。標記標籤是一套標記標籤，這種標記標籤通常被稱為HTML標記標籤。瀏覽器不會顯示HTML標記標籤，而是使用標籤來解釋頁面的內容。標籤基本上

前端之HTML標籤

一、簡介 1.超文字標記語言（Hypertext Markup Language, HTML）是一種用於建立網頁的標記語言。

前端語言之HTML基礎語句

sublime text3怎麼快速生成html程式碼Ctrl + N，新建一個文件。Ctrl + Shift + P，開啟命令模式，再輸入 sshtml 進行模糊匹配，將語法切換到html模式。輸入 !，再按下 Tab鍵或者 Ctrl + E ，就能快速開啟HTML5的整體

前端基礎之HTML

一、HTML初始 1. Web服務本質 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

前端編碼風格規範之 HTML 規範

HTML 規範 文件型別 推薦使用 HTML5 的文件型別申明：<!DOCTYPE html>. （建議使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的屬性，比如application/xhtml+xml在瀏覽器中的應用支援與優化空間都