HTML基礎(chǔ)教程：框架實(shí)例大合集

何使用 <noframes> 標(biāo)簽

本例演示：如何使用 <noframes> 標(biāo)簽。

<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>您的瀏覽器無(wú)法處理框架！</body>
</noframes>
</frameset>
</html>

混合框架結(jié)構(gòu)

本例演示如何制作含有三份文檔的框架結(jié)構(gòu)，同時(shí)將他們混合置于行和列之中。

<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基礎(chǔ)教程：框架實(shí)例大合集

含有 noresize="noresize" 屬性的框架結(jié)構(gòu)

本例演示 noresize 屬性。在本例中，框架是不可調(diào)整尺寸的。在框架間的邊框上拖動(dòng)鼠標(biāo)，你會(huì)發(fā)現(xiàn)邊框是無(wú)法移動(dòng)的。

<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基礎(chǔ)教程：框架實(shí)例大合集

導(dǎo)航框架

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

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

HTML基礎(chǔ)教程：框架實(shí)例大合集

內(nèi)聯(lián)框架

本例演示如何創(chuàng)建內(nèi)聯(lián)框架（HTML 頁(yè)中的框架）。

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

HTML基礎(chǔ)教程：框架實(shí)例大合集

跳轉(zhuǎn)至框架內(nèi)的一個(gè)指定的節(jié)

本例演示兩個(gè)框架。其中的一個(gè)框架設(shè)置了指向另一個(gè)文件內(nèi)指定的節(jié)的鏈接。這個(gè)"link.htm"文件內(nèi)指定的節(jié)使用 <a name="C9"> 進(jìn)行標(biāo)識(shí)。

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

HTML基礎(chǔ)教程：框架實(shí)例大合集

使用框架導(dǎo)航跳轉(zhuǎn)至指定的節(jié)

本例演示兩個(gè)框架。左側(cè)的導(dǎo)航框架包含了一個(gè)鏈接列表，這些鏈接將第二個(gè)框架作為目標(biāo)。第二個(gè)框架顯示被鏈接的文檔。導(dǎo)航框架其中的鏈接指向目標(biāo)文件中指定的節(jié)。

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

HTML基礎(chǔ)教程：框架實(shí)例大合集

希望以上可以解決你們心中的一些疑惑，其中可能會(huì)有不對(duì)的地方或是需要改進(jìn)的地方，歡迎留言糾正。感覺(jué)還不錯(cuò)歡迎關(guān)注收藏轉(zhuǎn)載哦

者：俊欣

來(lái)源：關(guān)于數(shù)據(jù)分析與可視化

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

Dash框架中的兩個(gè)基本概念

我們先來(lái)了解一下Dash框架中的兩個(gè)基本概念

Layout
Callbacks

Layout顧名思義就是用來(lái)設(shè)計(jì)可視化大屏的外觀和布局，添加一些例如下拉框、單選框、復(fù)選框、輸入框、文本框、滑動(dòng)條等組件，其中Dash框架對(duì)HTML標(biāo)簽也進(jìn)行了進(jìn)一步的封裝，使得我們直接可以通過(guò)Python代碼來(lái)生成和設(shè)計(jì)每一個(gè)網(wǎng)頁(yè)所需要的元素，例如

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

我們轉(zhuǎn)化成Dash的Python結(jié)構(gòu)就是

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

Callbacks也就是回調(diào)函數(shù)，基本上是以裝飾器的形式來(lái)體現(xiàn)的，實(shí)現(xiàn)前后端異步通信的交互，例如我們?cè)邳c(diǎn)擊按鈕或者下拉框之后出現(xiàn)的功能就是通過(guò)回調(diào)函數(shù)來(lái)實(shí)現(xiàn)的。

安裝和導(dǎo)入模塊

在導(dǎo)入模塊之前，我們先用pip命令來(lái)進(jìn)行安裝，

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

然后我們導(dǎo)入這些剛剛安裝完的模塊，其中dash-html-components用來(lái)生成HTML標(biāo)簽，dash-core-components模塊用來(lái)生成例如下拉框、輸入框等組件，這里我們還需要用到plotly模塊，因?yàn)槲覀冃枰玫降臄?shù)據(jù)來(lái)自該模塊，里面是一眾互聯(lián)網(wǎng)公司過(guò)去一段時(shí)間中股價(jià)的走勢(shì)

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

讀取數(shù)據(jù)并且繪制折線(xiàn)圖

那么我們讀取數(shù)據(jù)并且用plotly來(lái)繪制折線(xiàn)圖，代碼如下

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

def stock_prices():
    # 繪制折線(xiàn)圖
    fig=go.Figure([go.Scatter(x=df['date'], y=df['AAPL'],
                                line=dict(color='firebrick', width=4), name='Apple')
                     ])
    fig.update_layout(title='股價(jià)隨著時(shí)間的變幻',
                      xaxis_title='日期',
                      yaxis_title='價(jià)格'
                      )
    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()

我們點(diǎn)擊運(yùn)行之后會(huì)按照提示將url復(fù)制到瀏覽器當(dāng)中便可以看到出來(lái)的結(jié)果了，如下所示

從代碼的邏輯上來(lái)看，我們通過(guò)Dash框架中的Div方法來(lái)進(jìn)行頁(yè)面的布局，其中有參數(shù)id來(lái)指定網(wǎng)頁(yè)中的元素，以及style參數(shù)來(lái)進(jìn)行樣式的設(shè)計(jì)，最后我們將會(huì)指出來(lái)的圖表放在dcc.Graph()函數(shù)當(dāng)中。

添置一個(gè)下拉框

然后我們?cè)偬碇靡粋€(gè)下拉框，當(dāng)我們點(diǎn)擊這個(gè)下拉框的時(shí)候，可是根據(jù)我們的選擇展示不同公司的股價(jià)，代碼如下

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

output

options參數(shù)中的label對(duì)應(yīng)的是下拉框中的各個(gè)標(biāo)簽，而value對(duì)應(yīng)的是DataFrame當(dāng)中的列名

df.head()

output

添加回調(diào)函數(shù)

最后我們將下拉框和繪制折線(xiàn)圖的函數(shù)給連接起來(lái)，我們點(diǎn)擊下拉框選中不同的選項(xiàng)的時(shí)候，折線(xiàn)圖也會(huì)相應(yīng)的產(chǎn)生變化，

@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='股價(jià)隨著時(shí)間的變幻',
                      xaxis_title='日期',
                      yaxis_title='價(jià)格'
                      )
    return fig

我們看到callback()方法中指定輸入和輸出的媒介，其中Input參數(shù)，里面的component_id對(duì)應(yīng)的是下拉框的id也就是dropdown，而Output參數(shù)，當(dāng)中的component_id對(duì)應(yīng)的是折線(xiàn)圖的id也就是bar_plot，我們來(lái)看一下最后出來(lái)的結(jié)果如下

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

過(guò)使用框架，你可以在同一個(gè)瀏覽器窗口中顯示不止一個(gè)頁(yè)面。

iframe語(yǔ)法:

該URL指向不同的網(wǎng)頁(yè)。

Iframe - 設(shè)置高度與寬度

height 和 width 屬性用來(lái)定義iframe標(biāo)簽的高度與寬度。

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

實(shí)例

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

Iframe - 移除邊框

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

設(shè)置屬性值為 "0" 移除iframe的邊框:

實(shí)例

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

使用iframe來(lái)顯示目錄鏈接頁(yè)面

iframe可以顯示一個(gè)目標(biāo)鏈接的頁(yè)面

目標(biāo)鏈接的屬性必須使用iframe的屬性，如下實(shí)例:

實(shí)例

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

HTML iframe 標(biāo)簽

標(biāo)簽	說(shuō)明
<iframe>	定義一個(gè)內(nèi)聯(lián)的iframe

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

在線(xiàn)咨詢(xún)

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

您的項(xiàng)目需求

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

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

HTML基礎(chǔ)教程：框架實(shí)例大合集

何使用 <noframes> 標(biāo)簽

混合框架結(jié)構(gòu)

含有 noresize="noresize" 屬性的框架結(jié)構(gòu)

導(dǎo)航框架

內(nèi)聯(lián)框架

跳轉(zhuǎn)至框架內(nèi)的一個(gè)指定的節(jié)

使用框架導(dǎo)航跳轉(zhuǎn)至指定的節(jié)

Dash框架中的兩個(gè)基本概念

安裝和導(dǎo)入模塊

讀取數(shù)據(jù)并且繪制折線(xiàn)圖

添置一個(gè)下拉框

添加回調(diào)函數(shù)

您的項(xiàng)目需求