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><ahref="http://www.runoob.com"target="iframe_a">RUNOOB.COM</a></p>

HTML iframe 标签

标签	说明
<iframe>	定义一个内联的iframe

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：代码达人必备：高效解码Quoted-Printabl
下一篇：CSRF攻击与防御

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML基础教程：框架实例大合集

何使用 <noframes> 标签

混合框架结构

含有 noresize="noresize" 属性的框架结构

导航框架

内联框架

跳转至框架内的一个指定的节

使用框架导航跳转至指定的节

Dash框架中的两个基本概念

安装和导入模块

读取数据并且绘制折线图

添置一个下拉框

添加回调函数

您的项目需求