brython | HTML 元素
持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情
关于往期brython的文章:
brython | 初始化项目： juejin.cn/post/715364…
本篇将讲述brython的HTML元素。
brython支持哪些元素
我们打开brython的官网，选择browser.html，我们会发现其brython支持很多的标签，以及元素，例如：
我们将其做一个对比
html元素 | brython元素 | 含义 |
|---|---|---|
<html> | browser.html.HTML | 顶级元素 |
<base> | browser.html.BASE | 元素相对URL的根URL |
<head> | browser.html.HEAD | 规定文档的配置元数据 |
<link> | browser.html.LINK | 应用外部资源 |
<style> | browser.html.STYLE | 样式 |
<title> | browser.html.TITLE | 表示文档的标题 |
<a> | browser.html.A | 表示链接元素 |
<b> | browser.html.B | 表示字体加粗 |
<br> | browser.html.BR | 表示换行 |
<blockquote> | browser.html.BLOCKQUOTE | 表示引用内容 |
<h1> | browser.html.H1 | 一级标题 |
<h2> | browser.html.H2 | 二级标题 |
<h3> | browser.html.H3 | 三级标题 |
通过上述的对比，不难发现，brython为了能够让人快速上手，其方法和html元素一一对应，例如: <a>和 browser.html.A。
下面，讲述一下如何在brython中使用这些标签，以及写一个demo出来。
通过brython操作元素
brython初始环境
虽然上一篇文章，我们介绍了环境的搭建，这里还是提及一下，后续代码我们就省略html的内容，只描述python的内容（即<script type="text/python"></script>标签中的代码）。
要想使用brython，需要做如下步骤：
-
导入
brython.js -
在需要
brython标签，标志为:onload="brython()" -
写
python的时候，script标签为:<script type="text/python"></script>
具体代码模板截图如下
设置网页标题
我们可以使用browser.html.TITLE设置网页标题，例如:
import browser
browser.document <= browser.html.TITLE("brython | juejin pdudo")
如上代码将网页标题设置为: "brython | juejin pdudo" 。
执行代码效果图如下
定义一个a便签
假设我们想定义一个a标签，显示为juejin.cn，其href值为www.juejin.cn，使用brython，其代码如下:
browser.document <= browser.html.A("juejin.cn",href="http://www.juejin.cn")
执行代码效果图如下
设置h1、h2、h3等标题
在brython中，可以使用browser.html.H1、browser.html.H2等，设置1级标题、2级标题。
例如，如下代码
browser.document <= browser.html.H1("这是一级标题")
browser.document <= browser.html.H2("这是二级标题")
browser.document <= browser.html.H3("这是三级标题")
执行效果如下
还有等等，就不一一展示了。
使用brython做一个小demo
我们先使用html标签的形式，写一个小demo，然后再使用brython写一个。我们开始吧。
html代码如下:
<h1>Welcome brython pages</h1>
<h4>这是 <b><code>brython</code></b> 的测试页面,其 <b><code>github</code></b> 地址为：<a href="https://github.com/brython-dev/brython">brython</a></h4>
<h5>by <a href="https://juejin.cn/user/2981531267892856">juejin pdudo</a> 2022年10月13日</h5>
展示的效果如下
我们使用brython翻译一下上述的标记语言，其编写如下:
import browser
browser.document <= browser.html.H1("Welcome brython pages")
browser.document <= browser.html.H4("这是 " + browser.html.B(browser.html.CODE("brython")) + "的测试页面,其" + browser.html.B(browser.html.CODE("github")) + "地址为：" + browser.html.A("brython",href="https://github.com/brython-dev/brython"))
browser.document <= browser.html.H5("by "+ browser.html.A("juejin pdudo",href="https://juejin.cn/user/2981531267892856") +" 2022年10月13日")
其展示的结果为:
还是老规矩，我已经将代码放置到了【码上掘金】上：
总结
通过上述文章，不难发现，brython和现有的HTML标签极其相似，避免了重复式无意义学习，如果我们会写html，我们恰恰好会使用python，那么我们完全可以使用brython来写html，但是不建议这么使用。
怎么样，好玩么？ 快来动动你的小手指来试试吧。
浙公网安备 33010602011771号