这是我的系列教程Python+Dash快速web应用开发的第六期，在上一期的文章中，我们完成了对Dash中回调交互高级特性的探讨，在今后陆续推出的教程内容中，我们将一起来学习Dash生态中那些丰富的页面部件，从而赋予我们打造各种强大交互式web应用的能力。
而在今天的教程内容中，我将带大家学习Dash中实用的一些基础性的静态部件，它们可以帮助我们打造更加正式的web应用。
我们在这里所说的静态页面部件，主要指的是其本身不具备直接的交互功能，而是以呈现内容为主要功能，就像下面的简单对比一样：
app1.py
import dash import dash_html_components as html import dash_bootstrap_components as dbc import dash_core_components as dcc app = dash.Dash(__name__) app.layout = html.Div( dbc.Container( [ html.Br(), html.H1('静态部件示例'), html.Hr(), html.H2('这是二级标题'), html.H3('这是三级标题'), html.H4('这是四级标题'), html.P( [ '这是一个', html.A('链接', href='#'), '，而这是一段', html.Strong('加粗文字'), '，这是一段带上下标的文字：', '测试', html.Sup('上标'), '，测试', html.Sub('下标') ] ), html.Br(), html.H1('交互部件示例'), html.Br(), dcc.Dropdown( options=[ {'label': '测试1', 'value': '测试1'}, {'label': '测试2', 'value': '测试2'}, {'label': '测试3', 'value': '测试3'}, ]), html.Br(), dcc.Checklist( options=[ {'label': '测试1', 'value': '测试1'}, {'label': '测试2', 'value': '测试2'}, {'label': '测试3', 'value': '测试3'}, ], value=['测试1'] ), html.Br(), dcc.RangeSlider( min=0, max=20, step=0.5, value=[5, 15] ) ] ) ) if __name__ == '__main__': app.run_server(debug=True)可以看到，静态部件其实就是我们平时浏览网页看到的各种内容元素，他们本身不直接承担回调交互功能，只能配合其他交互部件来实现交互功能。
2.1 Dash中常用的基础静态部件在Dash中所集成的一些常用基础性静态部件，其实就是对一些常见html元素的迁移，对应着dash_html_components中封装的众多类，这里我们只介绍部分比较常用的：
2.1.1 与文字格式相关的常用部件首先我们来介绍Dash众多基础静态部件中，与组织页面或文字格式相关的一些：
H1()到H6()
在dash_html_components中，H1()到H6()分别对应着1级到6级标题。
Br()与Hr()
dash_html_components中的Br()表示换行，而Hr()则表示水平分割线，这在我们布局元素时经常使用到。
P()
P()用于表示一段文字或内容，典型如我们在博客中看到的每一段落内容都是由P()标签所组织的，配合css中的text-indent属性可以用来设置首行缩进。
A()
A()用于表示一个可点击的链接，其参数href用于填入对应跳转的地址，也可以配合id，实现点击重新定位到页面内的其它元素，其target参数用于设置跳转方式，譬如target="_blank"会在新标签页跳转打开，具体内容可参考（https://www.w3school.com.cn/tags/att_a_target.asp）。
I()、Code()、U()、Mark()
I()主要用于在段落中将包裹的文字内容变为斜体，Code()用于在一段文字中表示代码片段，U()用于给所包含内容添加下划线，Mark()则用于高亮标注文字。
以上所介绍的这些静态部件可以通过下面的小例子直观的感受一下：
app2.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.H1('一级标题',), html.H2('二级标题'), html.H3('三级标题'), html.H4('四级标题'), html.H5('五级标题'), html.H6('六级标题'), html.Br(), # 换行 html.Hr(), # 水平分割线 html.P('这是一段文字。'*20), html.P('这是另一段带有首行缩进的文字。'*10, style={'text-indent': '3rem'}), html.A('跳转到费弗里的Github仓库', target='_blank', href='http://github.com/CNFeffery/DataScienceStudyNotes'), # 跳转到外部链接 html.Br(), html.A('跳转到六级标题', href='#demo2'), html.P( [ '一段文字中出现了', html.I('斜体'), '，以及代码片段', html.Code('import dash'), '，还有一段', html.U('带下划线的文字'), '，一段', html.Mark('高亮标注文字'), '，以及另一段', html.Mark('不同颜色的高亮标注文字。', style={'background-color': 'lightblue'}) ] ) ] + [html.Br()] * 50 + [html.A('回到顶端一级标题', href='#demo1'), html.H1('页内元素跳转示例标题',)] ) ) if __name__ == '__main__': app.run_server(debug=True)