这是下一个大事件吗？如果继续发展下去，有可能。
在 2022 年 PyCon 美国大会期间，作为主题演讲嘉宾之一的 Peter Wang 公布了 PyScript，一种在 HTML 中直接编写 Python 脚本的方法。或许你不知道 Peter，但你可能听说过 Anaconda，这是一种流行的开源的 Python 和 R 语言的发行版本，特别关注数据科学。Peter 正是 Anaconda 的 CEO 和联合创始人。
换言之，PyScript 是由一家著名的科技公司开发的，这可能会保证它在不久的将来成为可行的方案。它在 Python 和 Web 开发者中受到了极大的关注，GitHub 上已有超过 10k 颗 Stars。然而，它是否能成为一个成功的、有竞争力的产品，取决于长期的时间和开发投入。目前，它还有一些已知的缺陷（将在最后讨论）。
闲话少说，让我们快速了解一下这个令人振奋的产品吧！
py-script 标签
我们知道，HTML 文件是大多数网站最常见的元素。在创建网站时，我们的工作就是直接或间接地通过一些框架来编制 HTML 文件。在典型的 HTML 文件中，你会看到各种类型的标签。例如，定义了 HTML 页面的元数据和关键信息，</span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">是整个文档的标题，而</span><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;"><h1></span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">、</span><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;"><h2></span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">等定义了不同级别的内容标题。</span></p><p data-track="10" class="syl-page-br" style><br></p><p data-track="11"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">如前所述，PyScript 允许你在 HTML 中编写 Python 脚本，它使用一个特殊的标签</span><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">py-script</span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">。在这个标签中，你可以嵌入 Python 脚本。要了解它是如何工作的，可以创建一个 HTML 文件，其中包含以下代码，并使用 Chrome 浏览器打开该文件。在 Chrome 浏览器中，你应该能够看到类似下面这样的内容：</span></p><p data-track="12" class="syl-page-br syl-page-br-hide" style><br></p><p data-track="13" class="syl-page-br syl-page-br-hide" style><br></p><p style="text-align: center;" data-track="14">作者截图</p><p data-track="15" class="syl-page-br" style><br></p><p data-track="16"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">在上面的代码片段中，你可能已经注意到以下三个关键点：</span></p><ul><li data-track="17"><span style="color: #292929; --tt-darkmode-color: #292929;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">link</span></span>标签定义了一个外部样式表。在这个例子中，我们使用了 PyScript 提供的<span style="color: #292929; --tt-darkmode-color: #292929;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">css</span></span>文件。</li><li data-track="18"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">我们使用</span><span style="color: #292929; --tt-darkmode-color: #292929;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">script</span></span>标签来嵌入一个由<span style="color: #292929; --tt-darkmode-color: #292929;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">src</span></span>定义、由 PyScript 托管的外部脚本。我们使用了<span style="color: #292929; --tt-darkmode-color: #292929;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">defer</span></span>，这样脚本会在下载和页面解析完成后执行——本质上是一种延迟执行，而不是实时执行。</li><li data-track="19"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">最有趣的部分是</span><span style="color: #292929; --tt-darkmode-color: #292929;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">py-script</span></span>标签。如你所见，<span style="color: #292929; --tt-darkmode-color: #292929;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">print("Hello, World!")</span></span>是 Python 代码。当执行 HTML 文件时，就可以看到代码求值结果。</li></ul><p data-track="20" class="syl-page-br" style><br></p><p data-track="21"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">这很酷，不是吗？如果你不熟悉 Web 开发，但了解 Python，就可以使用 PyScript 嵌入任何有效的 Python 代码。让我们再看一个例子。</span></p><p data-track="22" class="syl-page-br syl-page-br-hide" style><br></p><p data-track="23" class="syl-page-br syl-page-br-hide" style><br></p><p style="text-align: center;" data-track="24"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">另一个 PyScript 示例（图片由作者提供）</span></p><p data-track="25" class="syl-page-br" style><br></p><p data-track="26"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">在这里，我们写了一些需要计算的代码，可以看到，脚本得到了正确的执行。</span></p><h1 class="pgc-h-arrow-right" data-track="27">py-env 标签</h1><p data-track="28"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">在编写更复杂的代码时，就需要使用第三方库。在这种情况下，我们可以利用</span><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">py-env</span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">标签。你可能已经猜到的，env 是 environment 的缩写。</span><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">py-env</span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">标签中列出了运行代码所需的 Python 包。</span></p><p data-track="29" class="syl-page-br" style><br></p><p data-track="30"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">你可能知道，许多数据科学家都使用 pandas 进行数据处理工作。让我们看看下面的例子。</span></p><p data-track="31" class="syl-page-br syl-page-br-hide" style><br></p><p data-track="32" class="syl-page-br syl-page-br-hide" style><br></p><p style="text-align: center;" data-track="33"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">使用包的 PyScript（图片由作者提供）</span></p><p data-track="34" class="syl-page-br" style><br></p><p data-track="35"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">如你所见，我们在</span><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">py-env</span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">标签中指定了依赖项（即 Pandas），该标签包含在</span><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">head</span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">标签中。如果页面需要多个依赖项，可以在这里把它们全部列出：</span></p><p data-track="36" class="syl-page-br" style><br></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><py-env>
- pandas
- matplotlib
- numpy
</py-env></code></pre><p data-track="38"><span style="color: #888888; --tt-darkmode-color: #5E5E5E;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">复制代码</span></span></p><p data-track="39"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">如你所见，在</span><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">py-script</span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">标签中，我们确实可以使用 Pandas 库来创建一个</span><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">DataFrame</span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">对象。然而，当我们把打印出来时就会发现，它是一个单行，而不是一个结构化的数据表。没有一个适当的结构，我们就无法理解这些数据。幸运的是，我们可以使用</span><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">write</span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">函数（下文会讨论）。</span></p><h1 class="pgc-h-arrow-right" data-track="40">将内容写入指定标签</h1><p data-track="41"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">除了 Python 中的标准打印函数</span><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">print</span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">，作为脚本的一部分，PyScript 有自己的</span><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">write</span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">函数，可以将数据发送到页面上指定的 Web 元素中。请看下面的例子：</span></p><p data-track="42" class="syl-page-br syl-page-br-hide" style><br></p><p data-track="43" class="syl-page-br syl-page-br-hide" style><br></p><p style="text-align: center;" data-track="44"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">PyScript 写函数 write（图片由作者提供）</span></p><p data-track="45" class="syl-page-br" style><br></p><p data-track="46"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">与之前的例子相比，上述代码片段有两个重大变化：</span></p><ul><li data-track="47"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">我们现在定义了一个 id 为</span><span style="color: #292929; --tt-darkmode-color: #292929;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">"DataFrame"</span></span>的<span style="color: #292929; --tt-darkmode-color: #292929;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">div</span></span>，这样稍后就可以引用。</li><li data-track="48"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">在</span><span style="color: #292929; --tt-darkmode-color: #292929;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">py-script</span></span>标签中，我们创建一个与之前相同的<span style="color: #292929; --tt-darkmode-color: #292929;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">DataFrame</span></span>对象。但现在，我们不是调用<span style="color: #292929; --tt-darkmode-color: #292929;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">print</span></span>，而是调用<span style="color: #292929; --tt-darkmode-color: #292929;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">pyscript.write</span></span>函数，请求 PyScript 处理并在<span style="color: #292929; --tt-darkmode-color: #292929;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">"DataFrame"</span></span>中显示<span style="color: #292929; --tt-darkmode-color: #292929;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">DataFrame</span></span>对象。从输出可以看到，我们现在有一个结构化的表格了。</li></ul><p data-track="49" class="syl-page-br" style><br></p><p data-track="50"><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">write</span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">函数不仅能够打印表格，还能够打印数字。下面的例子向你展示了我们如何使用</span><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">matplotlib</span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">（一个流行的 Python 包，用于数据可视化）来显示由 Python 创建的图。</span></p><p data-track="51" class="syl-page-br syl-page-br-hide" style><br></p><p data-track="52" class="syl-page-br syl-page-br-hide" style><br></p><p style="text-align: center;" data-track="53"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">PyScript 打印图（图片由作者提供）</span></p><p data-track="54" class="syl-page-br" style><br></p><p data-track="55"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">如你所见，</span><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">write</span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;"> 函数以期望的方式显示了图。</span></p><h1 class="pgc-h-arrow-right" data-track="56">py-repl 标签</h1><p data-track="57" class="syl-page-br" style><br></p><p data-track="58"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">Python 学习的最好方法之一是使用 REPL：读取（Read）、求值（Evaluate）、打印（Print）和循环（Loop）。也就是说，使用一个交互式的 Python 控制台，输入一些代码，Python 对其进行求值并打印适当的输出，然后重复这个过程。Web 页面也可以提供这样的 REPL 环境，比如 Jupyter Notebook。</span></p><p data-track="59" class="syl-page-br" style><br></p><p data-track="60"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">PyScript 可以使用</span><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">py-repl</span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">标签提供与此类似的东西。在这个元素中，你可以让用户自己编写代码，也可以以编程方式输入代码。请看下面的例子：</span></p><p data-track="61" class="syl-page-br syl-page-br-hide" style><br></p><p data-track="62" class="syl-page-br syl-page-br-hide" style><br></p><p style="text-align: center;" data-track="63"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">PyScript REPL（图片由作者提供）</span></p><p data-track="64" class="syl-page-br" style><br></p><p data-track="65"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">如你所见，上图中有一个单元格，其中包括在</span><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">py-repl</span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">标签中指定的代码。值得注意的是，单元格中的代码可以引用我们之前在</span><span style="color: #494949; --tt-darkmode-color: #494949;"><span style="background-color: #F1F3F5; --tt-darkmode-bgcolor: #BDBEC0;">py-script</span></span><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">标签中定义的变量。一切看起来都很协调。</span></p><h1 class="pgc-h-arrow-right" data-track="66">感想</h1><p data-track="67" class="syl-page-br" style><br></p><p data-track="68"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">本文介绍的内容是现阶段 PyScript 所能提供的主要亮点。它似乎是一个很有前途的产品，因为它提供了一个灵活的框架，让 Python 程序员可以在没有太多 Web 开发知识的情况下创建 Web 应用。然而，也有其他类似的成功的产品，因此，竞争会很激烈。</span></p><p data-track="69" class="syl-page-br" style><br></p><p data-track="70"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">例如，如果我需要为自己的数据科学项目创建一个 Web 应用，我就会直接使用 Streamlit。它的功能已经相对成熟。请注意，虽然都与 Web 开发有关，但 PyScript 和 Streamlit 属于不同的产品系。PyScript 应该更通用，因为它的目标是让你可以在任何网页上嵌入任何 Python 代码，Streamlit 做不到这一点。</span></p><p data-track="71" class="syl-page-br" style><br></p><p data-track="72"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">在 PyScript 为更多的人所接受之前，它有几个问题必须解决。例如，Web 页面的加载速度非常慢。如果你尝试跟随本教程运行代码，可能就会注意到，在 Web 页面的显示会有一个明显的滞后。</span></p><p data-track="73" class="syl-page-br" style><br></p><p data-track="74"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">尽管如此，我还是觉得这个产品会继续发展，我的信心主要来自于它的开发者——给我们带来极好的 Anaconda 工具的 Anaconda 团队。</span></p><p data-track="75" class="syl-page-br" style><br></p><p data-track="76"><em><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">本文最初发布于 Better Programming。</span></em></p><p data-track="77" class="syl-page-br" style><br></p><p data-track="78"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;">查看英文原文：</span>Running Python Scripts on the Web Using PyScript</p><p data-track="79">了解更多软件开发与相关领域知识，点击访问 InfoQ 官网：https://www.infoq.cn/，获取更多精彩内容！</p></div>
<div class="clearfix mb10">
<div class="share fr">
<div class="social-share mb20 ta-c" data-initialized="true">
<a href="#" class="social-share-icon iconfont icon-weibo"></a>
<a href="#" class="social-share-icon iconfont icon-qq"></a>
<a href="#" class="social-share-icon iconfont icon-wechat"></a>
<a href="#" class="social-share-icon iconfont icon-qzone"></a>
</div>
<script src="http://www.itomcoil.com/zb_users/theme/tx_hao/script/social-share.min.js"></script>
</div>
<div class="info-tag">
<a href="http://www.itomcoil.com/tags-78.html" title="查看更多python div内容" rel="tag" target="_blank">python div</a> </div>
</div>
<div class="info-next">
<ul class="row">
<li class="col-12 col-m-24 mb10">上一篇：<a href="http://www.itomcoil.com/post/1613.html" title="Python与数据可视化:Dash框架入门">Python与数据可视化:Dash框架入门</a></li>
<li class="col-12 col-m-24 ta-r mb10">下一篇：<a href="http://www.itomcoil.com/post/1615.html" title="彻底搞懂了!Python 实现页面实时刷新">彻底搞懂了!Python 实现页面实时刷新</a></li>
</ul>
</div>
</div>
<h2 class="tx-title">相关推荐</h2>
<div class="home-news">
<dl class="news-box clearfix pd20 ">
<dt class="f-18 mb10"><a href="http://www.itomcoil.com/post/5480.html" title="《Queendom》宣布冠军!女团MAMAMOO四人激动落泪" class="f-black" target="_blank">《Queendom》宣布冠军!女团MAMAMOO四人激动落泪</a></dt>
<dd class="news-txt">
<p class="f-gray f-13">网易娱乐11月1日报道据台湾媒体报道，南韩女团竞争回归的生死斗《Queendom》昨(10/31)晚播出大决赛，并以直播方式进行，6组女团、女歌手皆演唱新歌，并加总前三轮的赛前赛、音源成绩与直播现场投...</p>
</dd>
</dl>
<dl class="news-box clearfix pd20 ">
<dt class="f-18 mb10"><a href="http://www.itomcoil.com/post/5479.html" title="正确复制、重写别人的代码，不算抄袭" class="f-black" target="_blank">正确复制、重写别人的代码，不算抄袭</a></dt>
<dd class="news-txt">
<p class="f-gray f-13">我最近在一篇文章提到，工程师应该怎样避免使用大量的库、包以及其他依赖关系。我建议的另一种方案是，如果你没有达到重用第三方代码的阈值时，那么你就可以自己编写代码。在本文中，我将讨论一个在重用和从头开始编...</p>
</dd>
</dl>
<dl class="news-box clearfix pd20 ">
<dt class="f-18 mb10"><a href="http://www.itomcoil.com/post/5478.html" title="HTML DOM tr 对象_html event对象" class="f-black" target="_blank">HTML DOM tr 对象_html event对象</a></dt>
<dd class="news-txt">
<p class="f-gray f-13">tr对象tr对象代表了HTML表格的行。HTML文档中出现一个<tr>标签，就会创建一个tr对象。tr对象集合W3C：W3C标签。集合描述W3Ccells返回...</p>
</dd>
</dl>
<dl class="news-box clearfix pd20 ">
<dt class="f-18 mb10"><a href="http://www.itomcoil.com/post/5477.html" title="JS 打造动态表格_js如何动态改变表格内容" class="f-black" target="_blank">JS 打造动态表格_js如何动态改变表格内容</a></dt>
<dd class="news-txt">
<p class="f-gray f-13">后台列表页最常见的需求：点击表头排序+一键全选。本文用原生js代码实现零依赖方案，涵盖DOM查询、排序算法、事件代理三大核心技能。效果速览一、核心思路事件入口：为每个<th>绑...</p>
</dd>
</dl>
<dl class="news-box clearfix pd20 ">
<dt class="f-18 mb10"><a href="http://www.itomcoil.com/post/5476.html" title="连肝7个晚上，总结了66条计算机网络的知识点" class="f-black" target="_blank">连肝7个晚上，总结了66条计算机网络的知识点</a></dt>
<dd class="news-txt">
<p class="f-gray f-13">作者|哪吒来源|程序员小灰（ID:chengxuyuanxiaohui）计算机网络知识是面试常考的内容，在实际工作中经常涉及。最近，我总结了66条计算机网络相关的知识点。1、比较http0....</p>
</dd>
</dl>
<dl class="news-box clearfix pd20 ">
<dt class="f-18 mb10"><a href="http://www.itomcoil.com/post/5475.html" title="Vue 中 强制组件重新渲染的正确方法" class="f-black" target="_blank">Vue 中 强制组件重新渲染的正确方法</a></dt>
<dd class="news-txt">
<p class="f-gray f-13">作者：MichaelThiessen译者：前端小智来源：hackernoon有时候，依赖Vue响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的...</p>
</dd>
</dl>
<dl class="news-box clearfix pd20 ">
<dt class="f-18 mb10"><a href="http://www.itomcoil.com/post/5474.html" title="为什么100个前端只有1人能说清?浏览器重排/重绘深度解析" class="f-black" target="_blank">为什么100个前端只有1人能说清?浏览器重排/重绘深度解析</a></dt>
<dd class="news-txt">
<p class="f-gray f-13">面试现场的"致命拷问""你的项目里做过哪些性能优化？能具体讲讲重排和重绘的区别吗？"作为面试官，我在秋招季连续面试过100多位前端候选人，这句提问几乎成了必考题。但令...</p>
</dd>
</dl>
<dl class="news-box clearfix pd20 ">
<dt class="f-18 mb10"><a href="http://www.itomcoil.com/post/5473.html" title="HTML DOM 介绍_dom4j html" class="f-black" target="_blank">HTML DOM 介绍_dom4j html</a></dt>
<dd class="news-txt">
<p class="f-gray f-13">HTMLDOM（文档对象模型）是一种基于文档的编程接口，它是HTML和XML文档的编程接口。它可以让开发人员通过JavaScript或其他脚本语言来访问和操作HTML和XML文档...</p>
</dd>
</dl>
<dl class="news-box clearfix pd20 ">
<dt class="f-18 mb10"><a href="http://www.itomcoil.com/post/5472.html" title="JavaScript 事件——“事件流和事件处理程序”的注意要点" class="f-black" target="_blank">JavaScript 事件——“事件流和事件处理程序”的注意要点</a></dt>
<dd class="news-txt">
<p class="f-gray f-13">事件流事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而NetscapeCommunicator的事件流是事件捕获流。事件冒泡即事件开始时由最具体的元素接收，然后逐级向上传播到较为不...</p>
</dd>
</dl>
<dl class="news-box clearfix pd20 ">
<dt class="f-18 mb10"><a href="http://www.itomcoil.com/post/5471.html" title="探秘 Web 水印技术_水印制作网页" class="f-black" target="_blank">探秘 Web 水印技术_水印制作网页</a></dt>
<dd class="news-txt">
<p class="f-gray f-13">作者：fransli，腾讯PCG前端开发工程师Web水印技术在信息安全和版权保护等领域有着广泛的应用，对防止信息泄露或知识产品被侵犯有重要意义。水印根据可见性可分为可见水印和不可见水印（盲水印）...</p>
</dd>
</dl>
<dl class="news-box clearfix pd20 ">
<dt class="f-18 mb10"><a href="http://www.itomcoil.com/post/5470.html" title="国外顶流网红为流量拍摄性侵女学生?仅被封杀三月，回归仍爆火" class="f-black" target="_blank">国外顶流网红为流量拍摄性侵女学生?仅被封杀三月，回归仍爆火</a></dt>
<dd class="news-txt">
<p class="f-gray f-13">曾经的油管之王，顶流网红DavidDobrik复出了。一切似乎都跟他因和成员灌酒性侵女学生被骂到退网之前一样：住在950万美元的豪宅，开着20万美元的阿斯顿马丁，每条视频都有数百万观看...人们仿佛...</p>
</dd>
</dl>
<dl class="news-box clearfix pd20 ">
<dt class="f-18 mb10"><a href="http://www.itomcoil.com/post/5469.html" title="JavaScript 内存泄漏排查方法_js内存泄漏及解决方法" class="f-black" target="_blank">JavaScript 内存泄漏排查方法_js内存泄漏及解决方法</a></dt>
<dd class="news-txt">
<p class="f-gray f-13">一、概述本文主要介绍了如何通过Devtools的Memory内存工具排查JavaScript内存泄漏问题。先介绍了一些相关概念，说明了Memory内存工具的使用方式，然后介绍了堆快照的...</p>
</dd>
</dl>
<dl class="news-box clearfix pd20 ">
<dt class="f-18 mb10"><a href="http://www.itomcoil.com/post/5468.html" title="外贸独立站，网站优化的具体内容_外贸独立站,网站优化的具体内容有哪些" class="f-black" target="_blank">外贸独立站，网站优化的具体内容_外贸独立站,网站优化的具体内容有哪些</a></dt>
<dd class="news-txt">
<p class="f-gray f-13">Wordpress网站优化，是通过优化代码、数据库、缓存、CSS/JS等内容，提升网站加载速度、交互性和稳定性。网站加载速度，是Google搜索引擎的第一权重，也是SEO优化的前提。1.优化渲染阻塞。...</p>
</dd>
</dl>
<dl class="news-box clearfix pd20 ">
<dt class="f-18 mb10"><a href="http://www.itomcoil.com/post/5467.html" title="这8个CSS工具可以提升编程速度_css用什么编译器" class="f-black" target="_blank">这8个CSS工具可以提升编程速度_css用什么编译器</a></dt>
<dd class="news-txt">
<p class="f-gray f-13">下面为大家推荐的这8个CSS工具，有提供函数的，有提供类的，有提取代码的，还有收集CSS的统计数据的……请花费两分钟的时间看完这篇文章，或许你会找到意外的惊喜，并且为你的编程之路打开了一扇新的大门。1...</p>
</dd>
</dl>
<dl class="news-box clearfix pd20 ">
<dt class="f-18 mb10"><a href="http://www.itomcoil.com/post/5466.html" title="vue的理解-vue源码 历史 简介 核心特性 和jquery区别 和 react对比" class="f-black" target="_blank">vue的理解-vue源码 历史 简介 核心特性 和jquery区别 和 react对比</a></dt>
<dd class="news-txt">
<p class="f-gray f-13">一、从历史说起Web是WorldWideWeb的简称，中文译为万维网我们可以将它规划成如下的几个时代来进行理解石器时代文明时代工业革命时代百花齐放时代石器时代石器时代指的就是我们的静态网页，可以欣...</p>
</dd>
</dl>
</div>
</div>
<div class="side-box col-6 col-m-24 col2-">
<dl class="side-hot">
<dt>一周热门</dt>
<dd>
<ul>
<li>
<a href="http://www.itomcoil.com/post/2208.html" title="我用 1 个 2 手计算器换了 3 台 MacBook(上)" target="_blank">
<h2 class="f-15">我用 1 个 2 手计算器换了 3 台 MacBook(上)</h2>
</a>
</li>
<li>
<a href="http://www.itomcoil.com/post/2234.html" title="零基础也能搞定!DeepSeek大模型本地安装全攻略" target="_blank">
<h2 class="f-15">零基础也能搞定!DeepSeek大模型本地安装全攻略</h2>
</a>
</li>
<li>
<a href="http://www.itomcoil.com/post/1194.html" title="Win7中同时安装python2和python3的方法" target="_blank">
<h2 class="f-15">Win7中同时安装python2和python3的方法</h2>
</a>
</li>
<li>
<a href="http://www.itomcoil.com/post/234.html" title="Python三目运算符(三元运算符)用法详解" target="_blank">
<h2 class="f-15">Python三目运算符(三元运算符)用法详解</h2>
</a>
</li>
<li>
<a href="http://www.itomcoil.com/post/78.html" title="PS零基础入门教程:Photoshop 2024工具详解—标尺工具" target="_blank">
<h2 class="f-15">PS零基础入门教程:Photoshop 2024工具详解—标尺工具</h2>
</a>
</li>
<li>
<a href="http://www.itomcoil.com/post/1721.html" title="按颜色计数、求和、算平均值或最大值?学这个函数就够啦!" target="_blank">
<h2 class="f-15">按颜色计数、求和、算平均值或最大值?学这个函数就够啦!</h2>
</a>
</li>
<li>
<a href="http://www.itomcoil.com/post/3066.html" title="SpringBoot中使用LocalDateTime踩坑记录" target="_blank">
<h2 class="f-15">SpringBoot中使用LocalDateTime踩坑记录</h2>
</a>
</li>
<li>
<a href="http://www.itomcoil.com/post/156.html" title="PS 零基础入门 040:图层样式选项" target="_blank">
<h2 class="f-15">PS 零基础入门 040:图层样式选项</h2>
</a>
</li>
<li>
<a href="http://www.itomcoil.com/post/140.html" title="PS零基础入门教程:Photoshop 2024工具详解—直线工具" target="_blank">
<h2 class="f-15">PS零基础入门教程:Photoshop 2024工具详解—直线工具</h2>
</a>
</li>
<li>
<a href="http://www.itomcoil.com/post/93.html" title="a4尺寸是多大像素多少厘米长宽，4k的纸是多大的纸是a4的吗" target="_blank">
<h2 class="f-15">a4尺寸是多大像素多少厘米长宽，4k的纸是多大的纸是a4的吗</h2>
</a>
</li>
</ul>
</dd>
</dl>
<dl class="function" id="divPrevious">
<dt class="function_t">最近发表</dt><dd class="function_c">
<ul><li><a title="《Queendom》宣布冠军!女团MAMAMOO四人激动落泪" href="http://www.itomcoil.com/post/5480.html">《Queendom》宣布冠军!女团MAMAMOO四人激动落泪</a></li>
<li><a title="正确复制、重写别人的代码，不算抄袭" href="http://www.itomcoil.com/post/5479.html">正确复制、重写别人的代码，不算抄袭</a></li>
<li><a title="HTML DOM tr 对象_html event对象" href="http://www.itomcoil.com/post/5478.html">HTML DOM tr 对象_html event对象</a></li>
<li><a title="JS 打造动态表格_js如何动态改变表格内容" href="http://www.itomcoil.com/post/5477.html">JS 打造动态表格_js如何动态改变表格内容</a></li>
<li><a title="连肝7个晚上，总结了66条计算机网络的知识点" href="http://www.itomcoil.com/post/5476.html">连肝7个晚上，总结了66条计算机网络的知识点</a></li>
<li><a title="Vue 中 强制组件重新渲染的正确方法" href="http://www.itomcoil.com/post/5475.html">Vue 中 强制组件重新渲染的正确方法</a></li>
<li><a title="为什么100个前端只有1人能说清?浏览器重排/重绘深度解析" href="http://www.itomcoil.com/post/5474.html">为什么100个前端只有1人能说清?浏览器重排/重绘深度解析</a></li>
<li><a title="HTML DOM 介绍_dom4j html" href="http://www.itomcoil.com/post/5473.html">HTML DOM 介绍_dom4j html</a></li>
<li><a title="JavaScript 事件——“事件流和事件处理程序”的注意要点" href="http://www.itomcoil.com/post/5472.html">JavaScript 事件——“事件流和事件处理程序”的注意要点</a></li>
<li><a title="探秘 Web 水印技术_水印制作网页" href="http://www.itomcoil.com/post/5471.html">探秘 Web 水印技术_水印制作网页</a></li>
</ul>
</dd>
</dl>
<dl class="function" id="divTags">
<dt class="function_t">标签列表</dt><dd class="function_c">
<ul><li><a title="ps图案在哪里" href="http://www.itomcoil.com/tags-11.html">ps图案在哪里<span class="tag-count"> (33)</span></a></li>
<li><a title="super().__init__" href="http://www.itomcoil.com/tags-16.html">super().__init__<span class="tag-count"> (33)</span></a></li>
<li><a title="python 获取日期" href="http://www.itomcoil.com/tags-20.html">python 获取日期<span class="tag-count"> (34)</span></a></li>
<li><a title="0xa" href="http://www.itomcoil.com/tags-22.html">0xa<span class="tag-count"> (36)</span></a></li>
<li><a title="super().__init__()详解" href="http://www.itomcoil.com/tags-23.html">super().__init__()详解<span class="tag-count"> (33)</span></a></li>
<li><a title="python安装包在哪里找" href="http://www.itomcoil.com/tags-30.html">python安装包在哪里找<span class="tag-count"> (33)</span></a></li>
<li><a title="linux查看python版本信息" href="http://www.itomcoil.com/tags-43.html">linux查看python版本信息<span class="tag-count"> (35)</span></a></li>
<li><a title="python怎么改成中文" href="http://www.itomcoil.com/tags-48.html">python怎么改成中文<span class="tag-count"> (35)</span></a></li>
<li><a title="php文件怎么在浏览器运行" href="http://www.itomcoil.com/tags-49.html">php文件怎么在浏览器运行<span class="tag-count"> (33)</span></a></li>
<li><a title="eval在python中的意思" href="http://www.itomcoil.com/tags-73.html">eval在python中的意思<span class="tag-count"> (33)</span></a></li>
<li><a title="python安装opencv库" href="http://www.itomcoil.com/tags-75.html">python安装opencv库<span class="tag-count"> (35)</span></a></li>
<li><a title="python div" href="http://www.itomcoil.com/tags-78.html">python div<span class="tag-count"> (34)</span></a></li>
<li><a title="sticky css" href="http://www.itomcoil.com/tags-79.html">sticky css<span class="tag-count"> (33)</span></a></li>
<li><a title="python中random.randint()函数" href="http://www.itomcoil.com/tags-83.html">python中random.randint()函数<span class="tag-count"> (34)</span></a></li>
<li><a title="python去掉字符串中的指定字符" href="http://www.itomcoil.com/tags-84.html">python去掉字符串中的指定字符<span class="tag-count"> (33)</span></a></li>
<li><a title="python入门经典100题" href="http://www.itomcoil.com/tags-86.html">python入门经典100题<span class="tag-count"> (34)</span></a></li>
<li><a title="anaconda安装路径" href="http://www.itomcoil.com/tags-89.html">anaconda安装路径<span class="tag-count"> (34)</span></a></li>
<li><a title="yield和return的区别" href="http://www.itomcoil.com/tags-91.html">yield和return的区别<span class="tag-count"> (33)</span></a></li>
<li><a title="1到10的阶乘之和是多少" href="http://www.itomcoil.com/tags-98.html">1到10的阶乘之和是多少<span class="tag-count"> (35)</span></a></li>
<li><a title="python安装sklearn库" href="http://www.itomcoil.com/tags-99.html">python安装sklearn库<span class="tag-count"> (33)</span></a></li>
<li><a title="dom和bom区别" href="http://www.itomcoil.com/tags-100.html">dom和bom区别<span class="tag-count"> (33)</span></a></li>
<li><a title="js 替换指定位置的字符" href="http://www.itomcoil.com/tags-112.html">js 替换指定位置的字符<span class="tag-count"> (33)</span></a></li>
<li><a title="python判断元素是否存在" href="http://www.itomcoil.com/tags-113.html">python判断元素是否存在<span class="tag-count"> (33)</span></a></li>
<li><a title="sorted key" href="http://www.itomcoil.com/tags-178.html">sorted key<span class="tag-count"> (33)</span></a></li>
<li><a title="shutil.copy()" href="http://www.itomcoil.com/tags-194.html">shutil.copy()<span class="tag-count"> (33)</span></a></li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="wide ta-c f-12">
</div>
</div>
<div class="fixed-box ">
<ul>
<li class="pchide wapflex"><a href="http://www.itomcoil.com/"><i class="fa fa-home"></i> 首页</a></li>
<li><a href="http://www.itomcoil.com/shoulu.html" title="收录申请" target="_blank"><i class="fa fa-chain-broken mr5"></i>收录</a></li>
<li><span class="gotop"><i class="fa fa-caret-up mr5"></i> 顶部</span></li>
</ul>
</div>
<script src="http://www.itomcoil.com/zb_users/theme/tx_hao/script/txcstx.min.js?v=2024-12-04"></script>
</body>
</html><!--157.01 ms , 13 queries , 3640kb memory , 0 error-->
