Python全棧之學(xué)習(xí)HTML
更新時(shí)間：2022年01月24日 17:01:22 作者：熬夜泡枸杞
這篇文章主要為大家介紹了Python全棧之HTML，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
1. vscode相關(guān)配置
w3c school 手冊(cè)： https://www.w3school.com.cn/html/index.asp
插件安裝： chinese live server（html以服務(wù)端的形式進(jìn)行顯示，而不是以文件的形式進(jìn)行顯示） icon （文件有圖標(biāo)） 快捷操作： ctrl + k / ctrl + t 選擇主題 light+ 文件 -> 首選項(xiàng) -> 設(shè)置 -> -> 字體 -> font-weight setting.json文件中配置 vscode 1.開發(fā)前段寫代碼速度比較快 2.免費(fèi) 選擇live server插件 選擇齒輪 擴(kuò)展設(shè)置
2. html認(rèn)識(shí)
2.1 html認(rèn)識(shí)
<!--
html : 網(wǎng)頁的骨架
css : 網(wǎng)頁的樣式
js/jq: 網(wǎng)頁的動(dòng)作
-->
<!DOCTYPE html> 聲明文檔的類型是html 超文本標(biāo)記語言
<html>
<head>
此處寫入web網(wǎng)頁的配置信息
</head>
<body>
此處寫入網(wǎng)頁的主體內(nèi)容
<font color="yellow" size=5> 學(xué)習(xí)html </font>
</body>
</html>
2.2 html結(jié)構(gòu)
<!DOCTYPE html>
<html>
<head>
<!-- 設(shè)置編碼集 -->
<meta charset="utf-8" />
<!-- 設(shè)置網(wǎng)站標(biāo)題 -->
<title>這是前端內(nèi)容</title>
<!-- 設(shè)置網(wǎng)站圖標(biāo) -->
<!-- http://www.bitbug.net/ 制作小圖標(biāo)的網(wǎng)址-->
<link rel="shortcut icon" />
<!-- 設(shè)置搜索引擎抓取頁面的關(guān)鍵字 -->
<meta name="keywords" content="html再線學(xué)習(xí) html課外學(xué)習(xí) html線下學(xué)習(xí)" />
<!-- 設(shè)置搜索引擎抓取頁面的描述信息 -->
<meta name="description" content="html再線學(xué)習(xí) css在線學(xué)習(xí) js再線學(xué)習(xí) 前端再線學(xué)習(xí)" />
<!-- 設(shè)置幾秒之后頁面跳轉(zhuǎn) -->
<!-- <meta http-equiv="refresh" content="3;url=http://www.baidu.com" /> -->
</head>
<body>
<!-- 一個(gè)及多個(gè)空白符,都會(huì)被理解成一個(gè)空白符 -->
1111 3333 343434 234234
<!-- 換行標(biāo)簽 -->
<br />
5<d c>10
<!-- 分割線標(biāo)簽 -->
<hr />
字符實(shí)體:使用字符實(shí)體來表達(dá)實(shí)際的字符含義;
使用字符實(shí)體表達(dá)多個(gè)空格
例子:
11111
<br />
< : < 小于號(hào) > 大于號(hào)
例子:
5<d c>10
<!-- 格式化預(yù)覽標(biāo)簽 原型化輸出所有內(nèi)容 <pre> -->
<pre>
333
+444
------
777
</pre>
</body>
</html>
2.3 html語法特征
1.內(nèi)容不區(qū)分大小寫 2.標(biāo)簽結(jié)構(gòu)分為單閉合、雙閉合標(biāo)簽(標(biāo)簽成對(duì)顯示) 3.一個(gè)及多個(gè)空白符,都會(huì)被理解成一個(gè)空白符
3. 標(biāo)簽種類_列表
3.1 常見標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> 常見標(biāo)簽 </title>
</head>
<body>
<h1>一級(jí)標(biāo)簽</h1>
<h2>二級(jí)標(biāo)簽</h2>
<h3>三級(jí)標(biāo)簽</h3>
<h4>四級(jí)標(biāo)簽</h4>
<h5>五級(jí)標(biāo)簽</h5>
<h6>六級(jí)標(biāo)簽</h6>
<hr />
<!-- 下角標(biāo) sub -->
h20 => h<sub>2</sub>0
<br />
co2 => co<sub>2</sub>
<br />
<!-- 上角標(biāo) sup -->
x2 = 100 => x<sup>2</sup> = 100
<!-- p 是段落標(biāo)簽 -->
<p>這是第一個(gè)段落</p>
<p>這是第二個(gè)段落</p>
<hr />
<!-- (了解)邏輯強(qiáng)調(diào) 帶有語義話的含義 [w3c標(biāo)準(zhǔn)] 推薦-->
<strong>川普是我的偶像</strong>
<em>我的愛人</em>
<!-- (了解)物理強(qiáng)調(diào) 帶有語義話的含義 [非w3c標(biāo)準(zhǔn)] -->
<b>川普是我的偶像</b>
<i>我的愛人</i>
</body>
</html>
3.2 標(biāo)簽種類
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>標(biāo)簽的種類</title>
</head>
<body>
<!--
標(biāo)簽的種類:
(1) 行內(nèi)元素標(biāo)簽: 不能獨(dú)占一行,不能設(shè)置寬和高,橫向排列
例子: span a
(2) 塊狀元素標(biāo)簽: 獨(dú)占一行,可以設(shè)置寬和高,縱向排列
例子: div h1~h6 p
(3) 行內(nèi)塊狀標(biāo)簽: 不能獨(dú)占一行,能設(shè)置寬和高,橫向排列
例子: button img input
span 和 div 都屬于無語義化標(biāo)簽,用來布局頁面,劃分頁面結(jié)構(gòu)
-->
<!-- 行內(nèi)元素 -->
<span style="width:200px;height:200px;background-color:yellowgreen;">我愛你
<span>奧斯托夫羅斯基</span>
</span> 111
<!-- 塊狀元素 -->
<div style="width:100%;height:200px;background-color:seagreen;">我是網(wǎng)頁的頭部</div>
<div style="width:100%;height:200px;background-color: skyblue;">我是網(wǎng)頁的身體</div>
<div style="width:200px;height:200px;background-color: tan;">我是網(wǎng)頁的腳部</div>
<!-- 行內(nèi)塊狀標(biāo)簽 -->
<button style="width:100px;height:20px;background-color: salmon;">按我1</button>
<button style="width:100px;height:20px;background-color:sandybrown;">按我2</button>
<button style="width:100px;height:20px;background-color:seagreen">按我3</button>
</body>
</html>
3.3 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 無序列表 *** -->
<!-- square 方塊 circle 空心圓 -->
<ul type="square">
<li>姜子牙</li>
<li>我和我的家鄉(xiāng)</li>
<li>八百</li>
<li>唐人街探案3</li>
</ul>
<!-- 有序列表 -->
<!-- type="i" 指定羅馬數(shù)字 -->
<ol start=10 type="i">
<li>姜子牙</li>
<li>我和我的家鄉(xiāng)</li>
<li>八百</li>
<li>唐人街探案3</li>
</ol>
<!-- 定義列表 -->
<dl>
<!-- dt定義標(biāo)題 -->
<dt>女生曾經(jīng)說過的謊言:</dt>
<!-- dd定義內(nèi)容 -->
<dd>不要</dd>
<dd>你真壞</dd>
<dd>你是個(gè)好人</dd>
<dd>我給你介紹個(gè)漂亮的小姑娘</dd>
</dl>
</body>
</html>
3.4 超鏈接標(biāo)簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>a 超鏈接標(biāo)簽</title>
</head>
<body>
<!--
GET - 從服務(wù)端請(qǐng)求數(shù)據(jù) (可以攜帶參數(shù)來獲取數(shù)據(jù),參數(shù)會(huì)暴露在地址欄上,傳參大小受瀏覽器限制,控制在2k~8k范圍內(nèi),顯式傳值)
POST - 向服務(wù)端發(fā)送數(shù)據(jù) (發(fā)送數(shù)據(jù)時(shí)候不限制發(fā)送數(shù)據(jù)的大小,隱式傳值)
-->
<!-- target="_self" 代表本頁面跳轉(zhuǎn) target="_blank" 新窗口跳轉(zhuǎn) -->
<a href="./2.html" target="_self">點(diǎn)我1</a>
<a target="_blank">點(diǎn)我2</a>
<a target="_blank">點(diǎn)我3</a>
<a href="./2.html?a=1&b=2&c=3&d=4" target="_blank">點(diǎn)我4</a> <!--地址欄傳值 -> get顯式傳值-->
<!-- 刷新頁面 -->
<a href="">點(diǎn)5</a>
<!-- 不刷新頁面 -->
<a href="#">點(diǎn)6</a>
<!-- 把數(shù)據(jù)扔到a連接中的href屬性中 , 默認(rèn)下載操作 -->
<a href="VSCodeUserSetup-x64-1.51.0.exe">點(diǎn)7</a>
</body>
</html>
3.5 a鏈接跳錨點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> a鏈接 跳錨點(diǎn) </title>
</head>
<body>
<ul>
<li><a href="#a1">第一章</a></li>
<li><a href="#a2">第二章</a></li>
<li><a href="#a3">第三章</a></li>
</ul>
<a id="a1">第一章內(nèi)容</a>
<p style="width:500px;height:1000px;background-color: silver;">孫悟空三打白骨精</p>
<a id="a2">第二章內(nèi)容</a>
<p style="width:500px;height:1000px;background-color:skyblue;">孫悟空怒錘紅孩兒</p>
<a id="a3">第三章內(nèi)容</a>
<p style="width:500px;height:1000px;background-color:tan;">孫悟空大鬧凌霄殿</p>
<a href="#">回到頂部</a>
</body>
</html>
3.6 img圖片標(biāo)簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>img 圖片標(biāo)簽</title>
</head>
<body>
<!-- img 單獨(dú)調(diào)整width或者h(yuǎn)eight可以隨著比例進(jìn)行縮放,如果同時(shí)指定有可能失真; title屬性設(shè)置圖片的提示功能 -->
<a >
<img src="zhouxingchi1.jpg" width="200px" height="200px;" title="周星馳" />
</a>
<img src="zhouxingchi1.jpg" width="200px" height="200px;" />
</body>
</html>
3.7 table表格標(biāo)簽
表格標(biāo)簽：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> table 表格標(biāo)簽</title>
</head>
<body>
<!--
### part1
table 表格 border 表框 width 寬度設(shè)置
tr 表示一行
th 表示標(biāo)題加粗
td 表示一個(gè)單元格
-->
<table border=1 width="1000px;">
<thead style="background-color: tan;">
<tr>
<th>姓名</th>
<th>年齡</th>
<th>薪水</th>
<th>部門</th>
</tr>
</thead>
<tbody style="background-color: teal;">
<tr>
<td>王文</td>
<td>18</td>
<td>10萬</td>
<td>python</td>
</tr>
<tr>
<td>王偉</td>
<td>20</td>
<td>11美元</td>
<td>開發(fā)部門</td>
</tr>
<tr>
<td>王致和</td>
<td>22</td>
<td>100萬</td>
<td>臭豆腐研發(fā)部門</td>
</tr>
</tbody>
<tfoot style="background-color: thistle;">
<tr>
<td>lianxi1</td>
<td>lianxi2</td>
<td>lianxi3</td>
<td>lianxi4</td>
</tr>
</tfoot>
</table>
<hr style="width:20px;height:100px;"/>
<!--
colspan 橫向合并
rowspan 縱向合并
-->
<table border=1 width="1000px;">
<thead style="background-color: tan;">
<tr>
<th>姓名</th>
<th>年齡</th>
<th>薪水</th>
<th>部門</th>
</tr>
</thead>
<tbody style="background-color: teal;">
<tr>
<td colspan=2>123</td>
<td>10萬</td>
<td rowspan="3">銷售</td>
</tr>
<tr>
<td>王偉</td>
<td>20</td>
<td>11美元</td>
</tr>
<tr>
<td>王致和</td>
<td>22</td>
<td>100萬</td>
</tr>
</tbody>
<tfoot style="background-color: thistle;">
<tr>
<td colspan=4>lianxi1</td>
</tr>
</tfoot>
</table>
</body>
</html>
表格的方向?qū)傩裕?/strong>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table 表格的方向?qū)傩?lt;/title>
</head>
<body>
<!--
水平方向設(shè)置 align : left center right
垂直方向設(shè)置 valign: top middle bottom
cellspacing td 與td 之間的間距
cellpadding td 與其中內(nèi)容之間的間距
-->
<table border=1 width="1000px;" height="200px;" cellspacing = "10" cellpadding="10">
<tr align="center" valign="top">
<td>王致和</td>
<td>藍(lán)色</td>
<td>踢球</td>
<td>江西</td>
</tr>
<tr align="center" valign="middle"">
<td>王致和</td>
<td>藍(lán)色</td>
<td>踢球</td>
<td>江西</td>
</tr>
<tr align="center" valign="bottom">
<td>王致和</td>
<td>藍(lán)色</td>
<td>踢球</td>
<td>江西</td>
</tr>
</table>
</body>
</html>
table中的九宮格方向：
3.8 iframe子窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> iframe 子窗口</title>
</head>
<body>
<iframe src="" name="isme" width="1000px" height="200px;"></iframe>
<hr />
<a target="isme">點(diǎn)我跳轉(zhuǎn)百度</a>
<a href="3.html" target="isme">點(diǎn)我跳轉(zhuǎn)3.html</a>
<a href="4.html" target="isme">點(diǎn)我跳轉(zhuǎn)4.html</a>
</body>
</html>
4. 音視頻_表單
4.1 音視頻標(biāo)簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- https://www.w3school.com.cn/html/index.asp w3c school 手冊(cè) -->
<video src="ceshi.mp4" controls = "controls" style="width:100px;">
抱歉~! 您的瀏覽器不支持,該扔了
</video>
<audio src="潮汐-她的城市.mp3" controls = "controls">
抱歉~! 您的瀏覽器不支持,該扔了
</audio>
</body>
</html>
4.2 form標(biāo)簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form表單<</title>
</head>
<body>
<!-- action 表示提交的數(shù)據(jù)地址
method 表示數(shù)據(jù)以什么樣的形式提交
get 顯式獲取數(shù)據(jù)(參數(shù)在地址欄上,參數(shù)大小在2k~8k左右)
post 隱式提交數(shù)據(jù)(參數(shù)不在地址欄,參數(shù)大小沒有限制)
input 是行內(nèi)塊狀元素
type 指定input的類型
name 指定input的名字
value 指定input的默認(rèn)值
-->
<form action="" method="">
手機(jī)號(hào):<input type="text" name="phone" value="王文" />
<br />
密碼: <input type="password" name="pwd" value="李四" style="width:200px;height:50px;" />
<br />
<input type="submit" value="提交" />
</form>
</body>
</html>
5. 小練習(xí)
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Python多進(jìn)程Process和管道Pipe的使用方式
這篇文章主要介紹了Python多進(jìn)程Process和管道Pipe的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
下劃線前綴的含義是告知其他程序員：以單個(gè)下劃線開頭的變量或方法僅供內(nèi)部使用，該約定在PEP 8中有定義，這篇文章主要介紹了Python下劃線命名模式,需要的朋友可以參考下2023-10-10
Python利用柯里化實(shí)現(xiàn)提高代碼質(zhì)量
柯里化（Currying）是函數(shù)式編程中的一個(gè)重要概念,它可以將一個(gè)多參數(shù)函數(shù)轉(zhuǎn)化為一系列單參數(shù)函數(shù)的組合,本文將詳細(xì)解釋什么是柯里化,如何在Python中實(shí)現(xiàn)柯里化,感興趣的可以了解下2024-01-01
這篇文章主要介紹了Django解決frame拒絕問題的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
關(guān)于AnacondaNavigator?Jupyter?Notebook更換Python內(nèi)核的問題
因?yàn)樾掳惭b的Anaconda?Navigator默認(rèn)安裝了一個(gè)Python，Jupyter?Notebook默認(rèn)使用的內(nèi)核就是這個(gè)Python，跟我系統(tǒng)安裝好的Python沖突了，下面小編給大家介紹AnacondaNavigator?Jupyter?Notebook更換Python內(nèi)核的問題,需要的朋友可以參考下2022-02-02
Python模塊學(xué)習(xí)之subprocess詳解
subprocess是Python?2.4中新增的一個(gè)模塊,它允許你生成新的進(jìn)程,連接到它們的?input/output/error?管道,并獲取它們的返回（狀態(tài)）碼,下面小編就來和大家聊聊它的具體使用吧2023-08-08
python正則表達(dá)式match和search用法實(shí)例
這篇文章主要介紹了python正則表達(dá)式match和search用法,實(shí)例分析了正則表達(dá)式中match和search的功能、定義及相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
django 中使用DateTime常用的時(shí)間查詢方式
今天小編就為大家分享一篇django 中使用DateTime常用的時(shí)間查詢方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-12-12
Python中關(guān)于面向?qū)ο蟾拍畹脑敿?xì)講解
要了解面向?qū)ο笪覀兛隙ㄐ枰戎缹?duì)象到底是什么玩意兒。關(guān)于對(duì)象的理解很簡單，在我們的身邊，每一種事物的存在都是一種對(duì)象?？偨Y(jié)為一句話也就是：對(duì)象就是事物存在的實(shí)體2021-10-10
Python matplotlib繪制圖形實(shí)例(包括點(diǎn),曲線,注釋和箭頭)
這篇文章主要介紹了Python matplotlib繪制圖形實(shí)例(包括點(diǎn),曲線,注釋和箭頭)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-04-04