（数据科学学习手札108）Python+Dash快速web应用开发——静态部件篇（上） (2)

　　前面我们针对常用的一些与文字格式相关的静态部件进行了介绍，而在实际应用中我们不仅要展示文字内容，还需要展示图片、音频、视频等多媒体内容，下面我们来学习如何在Dash中构造更加丰富的内容展示形式：

基于Blockquote()实现块引用

　　利用dash_html_components中的Blockquote()，我们可以直接传入字符串，或嵌套其他元素，从而构造出块引用，就像markdown中的>所包含渲染的内容那样，参考下面的例子：

app3.py

import dash import dash_html_components as html import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div( dbc.Container( html.Blockquote( html.P('这是一段由块引用包裹的文字内容' * 10), style={ 'background-color': 'rgba(211, 211, 211, 0.25)', 'text-indent': '3rem' } ) ) ) if __name__ == "__main__": app.run_server(debug=True)

图4

基于Ol()与Li()渲染有序列表

　　利用Ol()嵌套多个Li()，可以自动渲染出带序号的有序列表，就像下面这个简单的例子：

app4.py

import dash import dash_html_components as html import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div( dbc.Container( html.Ol( [ html.Br(), html.Br(), html.Li('待办事项1'), html.Li('待办事项2'), html.Li('待办事项3'), html.Li('待办事项4') ] ) ) ) if __name__ == "__main__": app.run_server(debug=True)

图5

基于Ul()与Li()渲染层级列表

　　而除了与Ol()相互配合之外，Li()还可以嵌套在Ul()中渲染带层级关系的列表：

app5.py

import dash import dash_html_components as html import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div( dbc.Container( html.Ul( [ html.Br(), html.Br(), html.Li('1'), html.Li('2'), html.Ul( [ html.Li('2.1'), html.Li('2.2'), html.Li('2.3'), html.Ul( [ html.Li('2.1.1'), html.Li('2.1.2'), html.Li('2.1.3'), ] ) ] ), html.Li('3'), html.Li('4') ] ) ) ) if __name__ == "__main__": app.run_server(debug=True)

图6

利用Img()渲染图片

　　Img()等价于html中的img标签，我们通过src参数传入图片地址来渲染出图片，以我以前一篇博客的作品图片为例：

app6.py

import dash import dash_html_components as html import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div( dbc.Container( [ html.H5('（在模仿中精进数据可视化05）疫情期间市值增长top25公司'), html.Img(src='https://img2020.cnblogs.com/blog/1344061/202011/1344061-20201129183046286-1089258422.png', style={'width': '100%'}) ] ) ) if __name__ == "__main__": app.run_server(debug=True)

图7

利用Audio()与Video()播放音频与视频

　　利用Audio()和Video()，我们可以通过参数src传入对应音频与视频文件的url地址，从而实现在网页中嵌入音频与视频，其中参数controls必须设置为True否则不会正常渲染：

app7.py

import dash import dash_html_components as html import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div( dbc.Container( [ html.H5('音频示例：'), html.Audio(src='https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3', controls=True), html.H5('视频示例：'), html.Video(src='https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4', controls=True, style={'width': '100%'}), ] ) ) if __name__ == "__main__": app.run_server(debug=True)

图8

利用Iframe()嵌入其他网页