品|開源中國
文|局長
知名 Python 發行版 Anaconda 開發商近日宣布了可在瀏覽器端運行的 Python —— PyScript。
根據官方的介紹,PyScript 是一個開發框架,為開發者提供了在標準 HTML 中嵌入編寫 Python 代碼的能力、使用 Python 調用 JavaScript 函數庫,以及創建 Python Web 應用。PyScript 旨在提供“一等公民(first-class)”的編程語言,它具有一致的風格化規則、更具表現力且更易于學習。
PyScript 示例代碼
<py-script>
"Hello World"
</py-script>
<py-script src="/my_own_file.py"></py-script>
<py-env>
- bokeh
- numpy
- paths:
- /utils.py
</py-env>
PyScript 核心特性
PyScript 目標
PyScript 基于 Pyodide 構建,Pyodide 由編譯成 WebAssembly 的 CPython 3.8 解釋器組成,允許在網頁瀏覽器中運行 Python。Pyodide 可以安裝來自 PyPi 的任何 Python 包。Pyodide 還包括一個外部函數接口,可以將 Python 包暴露給 JavaScript,并將瀏覽器 UI,包括 DOM,暴露給 Python。
關于 PyScript 運行原理的更多信息查看:https://engineering.anaconda.com/2022/04/welcome-pyscript.html
目前 PyScript 處于 alpha 測試階段,下載和安裝地址:https://pyscript.net/
1.基本html結構
2.生成div加類名的快捷鍵
3.帶類名的div
4.帶id的div
5.屬性【】
6.后代>
7.兄弟+
8.上級^
9.乘法*
10.文本{}
注意:這里輸入“!”+回車鍵前,需要清空原來生成的基本結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
<div class="list">
<div class="item_1"></div>
<div class="item_2"></div>
<div class="item_3"></div>
<div class="item_4"></div>
<div class="item_5"></div>
<div class="item_6"></div>
</div>
<div class="wrapper"></div>
<div id="wrapper"></div>
<span title="test"></span>
<span title="test"></span>
<div></div>
<p></p>
<span></span>
<div><span></span></div>
<i></i>
<ul>
<li></li>
<li></li>
</ul>
<div><span>這是文本</span></div>
4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼,另外兩種是引入 外部 CSS 文件。下面我們就來看看這些方式和它們的優缺點。
內聯方式
內聯方式指的是直接在 HTML 標簽中的 style 屬性中添加 CSS。
示例:
<div style="background: red"></div>
這通常是個很糟糕的書寫方式,它只能改變當前標簽的樣式,如果想要多個 <div> 擁有相同的樣式,你不得不重復地為每個 <div> 添加相同的樣式,如果想要修改一種樣式,又不得不修改所有的 style 中的代碼。很顯然,內聯方式引入 CSS 代碼會導致 HTML 代碼變得冗長,且使得網頁難以維護。
嵌入方式
嵌入方式指的是在 HTML 頭部中的 <style> 標簽下書寫 CSS 代碼。
示例:
<head> <style> .content { background: red; } </style> </head>
嵌入方式的 CSS 只對當前的網頁有效。因為 CSS 代碼是在 HTML 文件中,所以會使得代碼比較集中,當我們寫模板網頁時這通常比較有利。因為查看模板代碼的人可以一目了然地查看 HTML 結構和 CSS 樣式。因為嵌入的 CSS 只對當前頁面有效,所以當多個頁面需要引入相同的 CSS 代碼時,這樣寫會導致代碼冗余,也不利于維護。
鏈接方式
鏈接方式指的是使用 HTML 頭部的 <head> 標簽引入外部的 CSS 文件。
示例:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式,所有的 CSS 代碼只存在于單獨的 CSS 文件中,所以具有良好的可維護性。并且所有的 CSS 代碼只存在于 CSS 文件中,CSS 文件會在第一次加載時引入,以后切換頁面時只需加載 HTML 文件即可。
導入方式
導入方式指的是使用 CSS 規則引入外部 CSS 文件。
示例:
<style> @import url(style.css); </style>
比較鏈接方式和導入方式
鏈接方式(下面用 link 代替)和導入方式(下面用 @import 代替)都是引入外部的 CSS 文件的方式,下面我們來比較這兩種方式,并且說明為什么不推薦使用 @import。
小結:我們應盡量使用 <link> 標簽導入外部 CSS 文件,避免或者少用使用其他三種方式。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。