brython | HTML 元素

关于往期brython的文章:

brython | 初始化项目： juejin.cn/post/715364…

本篇将讲述brython的HTML元素。

brython支持哪些元素

我们打开brython的官网，选择browser.html，我们会发现其brython支持很多的标签，以及元素，例如：

我们将其做一个对比

通过上述的对比，不难发现，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日")

其展示的结果为:

还是老规矩，我已经将代码放置到了【码上掘金】上：

code.juejin.cn/pen/7153945…

总结

通过上述文章，不难发现，brython和现有的HTML标签极其相似，避免了重复式无意义学习，如果我们会写html，我们恰恰好会使用python，那么我们完全可以使用brython来写html，但是不建议这么使用。

怎么样，好玩么？ 快来动动你的小手指来试试吧。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！