HTML基礎教程：框架實例大合集

何使用 <noframes> 標簽

本例演示：如何使用 <noframes> 標簽。

<html>
<frameset cols="25%,25%,25%">
 <frame src="/example/html/frame_a.html">
 <frame src="/example/html/frame_b.html">
 <frame src="/example/html/frame_c.html">
<noframes>
<body>您的瀏覽器無法處理框架！</body>
</noframes>
</frameset>
</html>

HTML基礎教程：框架實例大合集

混合框架結構

本例演示如何制作含有三份文檔的框架結構，同時將他們混合置于行和列之中。

<html>
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>

HTML基礎教程：框架實例大合集

含有 noresize="noresize" 屬性的框架結構

本例演示 noresize 屬性。在本例中，框架是不可調整尺寸的。在框架間的邊框上拖動鼠標，你會發現邊框是無法移動的。

<html>
<frameset cols="50%,*,25%">
 <frame src="/example/html/frame_a.html" noresize="noresize" />
 <frame src="/example/html/frame_b.html" />
 <frame src="/example/html/frame_c.html" />
</frameset>
</html>

HTML基礎教程：框架實例大合集

導航框架

本例演示如何制作導航框架。導航框架包含一個將第二個框架作為目標的鏈接列表。名為 "contents.htm" 的文件包含三個鏈接。

<html>
<frameset cols="120,*">
 <frame src="/example/html/html_contents.html" >
 <frame src="/example/html/frame_a.html" name="showframe">
</frameset>
</html>

HTML基礎教程：框架實例大合集

內聯框架

本例演示如何創建內聯框架（HTML 頁中的框架）。

<html>
<body>
<iframe wigth="200" height="100" src="/i/eg_landscape.jpg"></iframe>
<p>一些老的瀏覽器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可見的。</p>
</body>
</html>

HTML基礎教程：框架實例大合集

跳轉至框架內的一個指定的節

本例演示兩個框架。其中的一個框架設置了指向另一個文件內指定的節的鏈接。這個"link.htm"文件內指定的節使用 <a name="C9"> 進行標識。

<html>
<frameset cols="20%,80%">
 <frame src="/example/html/frame_a.html">
 <frame src="/example/html/link.html#C9">
</frameset>
</html>

HTML基礎教程：框架實例大合集

使用框架導航跳轉至指定的節

本例演示兩個框架。左側的導航框架包含了一個鏈接列表，這些鏈接將第二個框架作為目標。第二個框架顯示被鏈接的文檔。導航框架其中的鏈接指向目標文件中指定的節。

<html>
<frameset cols="200,*">
<frame src="/example/html/content.html">
<frame src="/example/html/link.html" name="showframe">
</frameset>
</html>

HTML基礎教程：框架實例大合集

希望以上可以解決你們心中的一些疑惑，其中可能會有不對的地方或是需要改進的地方，歡迎留言糾正。感覺還不錯歡迎關注收藏轉載哦

者：俊欣

來源：關于數據分析與可視化

今天小編來為大家安利另外一個用于繪制可視化圖表的Python框架，名叫Dash，建立在Flask、Plotly.js以及React.js的基礎之上，在創建之出的目的是為了幫助前端知識匱乏的數據分析人員，以純Python編程的方式快速制作出交互特性強的數據可視化大屏，在經過多年的迭代發展，如今不僅僅可以用來開發在線數據可視化作品，即便是輕量級的數據儀表盤、BI應用甚至是博客或者是常規的網站都隨處可見Dash框架的影子，今天小編就先來介紹一下該框架的一些基礎知識，并且來制作一個簡單的數據可視化大屏。

Dash框架中的兩個基本概念

我們先來了解一下Dash框架中的兩個基本概念

Layout
Callbacks

Layout顧名思義就是用來設計可視化大屏的外觀和布局，添加一些例如下拉框、單選框、復選框、輸入框、文本框、滑動條等組件，其中Dash框架對HTML標簽也進行了進一步的封裝，使得我們直接可以通過Python代碼來生成和設計每一個網頁所需要的元素，例如

<div>
    <h1>Hello World!!</h1>
    <div>
        <p>Dash converts Python classes into HTML</p>
    </div>
</div>

我們轉化成Dash的Python結構就是

html.Div([
    html.H1('Hello Dash'),
    html.Div([
        html.P('Dash converts Python classes into HTML'),
    ])
])

Callbacks也就是回調函數，基本上是以裝飾器的形式來體現的，實現前后端異步通信的交互，例如我們在點擊按鈕或者下拉框之后出現的功能就是通過回調函數來實現的。

安裝和導入模塊

在導入模塊之前，我們先用pip命令來進行安裝，

! pip install dash   
! pip install dash-html-components
! pip install dash-core-components                           
! pip install plotly

然后我們導入這些剛剛安裝完的模塊，其中dash-html-components用來生成HTML標簽，dash-core-components模塊用來生成例如下拉框、輸入框等組件，這里我們還需要用到plotly模塊，因為我們需要用到的數據來自該模塊，里面是一眾互聯網公司過去一段時間中股價的走勢

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go
import plotly.express as px

讀取數據并且繪制折線圖

那么我們讀取數據并且用plotly來繪制折線圖，代碼如下

app=dash.Dash()   #實例化Dash
df=px.data.stocks() #讀取股票數據 

def stock_prices():
    # 繪制折線圖
    fig=go.Figure([go.Scatter(x=df['date'], y=df['AAPL'],
                                line=dict(color='firebrick', width=4), name='Apple')
                     ])
    fig.update_layout(title='股價隨著時間的變幻',
                      xaxis_title='日期',
                      yaxis_title='價格'
                      )
    return fig
    
app.layout=html.Div(id='parent', children=[
    html.H1(id='H1', children='Dash 案例一', style={'textAlign': 'center',
                                                 'marginTop': 40, 'marginBottom': 40}),
    dcc.Graph(id='line_plot', figure=stock_prices())
])

if __name__=='__main__':
    app.run_server()

我們點擊運行之后會按照提示將url復制到瀏覽器當中便可以看到出來的結果了，如下所示

從代碼的邏輯上來看，我們通過Dash框架中的Div方法來進行頁面的布局，其中有參數id來指定網頁中的元素，以及style參數來進行樣式的設計，最后我們將會指出來的圖表放在dcc.Graph()函數當中。

添置一個下拉框

然后我們再添置一個下拉框，當我們點擊這個下拉框的時候，可是根據我們的選擇展示不同公司的股價，代碼如下

dcc.Dropdown(id='dropdown',
             options=[
                 {'label': '谷歌', 'value': 'GOOG'},
                 {'label': '蘋果', 'value': 'AAPL'},
                 {'label': '亞馬遜', 'value': 'AMZN'},
             ],
             value='GOOG'),

output

options參數中的label對應的是下拉框中的各個標簽，而value對應的是DataFrame當中的列名

df.head()

output

添加回調函數

最后我們將下拉框和繪制折線圖的函數給連接起來，我們點擊下拉框選中不同的選項的時候，折線圖也會相應的產生變化，

@app.callback(Output(component_id='bar_plot', component_property='figure'),
              [Input(component_id='dropdown', component_property='value')])
def graph_update(dropdown_value):
    print(dropdown_value)
    # Function for creating line chart showing Google stock prices over time
    fig=go.Figure([go.Scatter(x=df['date'], y=df['{}'.format(dropdown_value)],
                                line=dict(color='firebrick', width=4))
                     ])
    fig.update_layout(title='股價隨著時間的變幻',
                      xaxis_title='日期',
                      yaxis_title='價格'
                      )
    return fig

我們看到callback()方法中指定輸入和輸出的媒介，其中Input參數，里面的component_id對應的是下拉框的id也就是dropdown，而Output參數，當中的component_id對應的是折線圖的id也就是bar_plot，我們來看一下最后出來的結果如下

最后，全部的代碼如下所示

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

iframe語法:

該URL指向不同的網頁。

Iframe - 設置高度與寬度

height 和 width 屬性用來定義iframe標簽的高度與寬度。

屬性默認以像素為單位, 但是你可以指定其按比例顯示 (如："80%").

實例

<iframesrc="demo_iframe.htm"width="200"height="200"></iframe>

Iframe - 移除邊框

frameborder 屬性用于定義iframe表示是否顯示邊框。

設置屬性值為 "0" 移除iframe的邊框:

實例

<iframesrc="demo_iframe.htm"frameborder="0"></iframe>

使用iframe來顯示目錄鏈接頁面

iframe可以顯示一個目標鏈接的頁面

目標鏈接的屬性必須使用iframe的屬性，如下實例:

實例

<iframesrc="demo_iframe.htm"name="iframe_a"></iframe><p><a>RUNOOB.COM</a></p>

HTML iframe 標簽

標簽	說明
<iframe>	定義一個內聯的iframe

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

在線咨詢

上一篇：代碼達人必備：高效解碼Quoted-Printabl
下一篇：CSRF攻擊與防御

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML基礎教程：框架實例大合集

何使用 <noframes> 標簽

混合框架結構

含有 noresize="noresize" 屬性的框架結構

導航框架

內聯框架

跳轉至框架內的一個指定的節

使用框架導航跳轉至指定的節

Dash框架中的兩個基本概念

安裝和導入模塊

讀取數據并且繪制折線圖

添置一個下拉框

添加回調函數

您的項目需求