Python入門21之HTML
阿新 • • 發佈：2018-12-23
HTML基本結構
#使用的是html的哪個版本， 此處是html5
<!DOCTYPE html>
#主體 例如人基本結構
<html lang="en">
#大腦
<head>
#字元編碼
<meta charset="UTF-8">
<title>Title</title>
</head>
#身體
<body>
</body>
</html>
文字標籤
標題標籤: h1-h6 段落標籤: p 加粗標籤: b, strong 斜體標籤: i 下劃線標籤: u 刪除標籤: s 換行標籤: br-----(沒有成對出現的標籤) 水平分隔符標籤: hr-----(沒有成對出現的標籤) 預格式化文字標籤(保留文字的原有格式): pre標籤 上標和下標: sup， sub 塊引用標籤: blockquote 普通的文字: span — 行內標籤，元素是內聯元素 普通文字的標籤:div------文件中的分割槽或節，元素是塊級元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 style="color: #f10180">標題1</h1> <p>2014年 Martin Fowler 在<b>《MicroServices》</b>論文中首次提出了微服務的概念。</p> <p>近些年，伴隨著網際網路的日益發展，微服務在國內、甚至國際上的發展已達到一個新高潮。</p> <h2 style="color: #ffaaaa">標題2</h2> 在微服務流行之前，<strong>SOA（Service Oriented Architecture）</strong>被廣泛熟知與採用。<br> 微服務基於 SOA 發展而來，但與之相比，<s>錯誤的</s><u> 微服務更易於理解，也更利於設計者、開發者的實踐落地，它把“面向服務”的設計思想實現得更加徹底。</u> <hr> <h3 style="color: #ffff77">標題3</h3> <pre> 2014年 Martin Fowler 在《MicroServices》論文中首次提出了微服務的概念。 近些年，伴隨著網際網路的日益發展，微服務在國內、甚至國際上的發展已達到一個新高潮。 在微服務流行之前，SOA（Service Oriented Architecture）被廣泛熟知與採用。 微服務基於 SOA 發展而來，但與之相比，微服務更易於理解，也更利於設計者、開發者的實踐落地，它把“面向服務”的設計思想實現得更加徹底。 </pre> <h4>標題4</h4> x<sup>2</sup>+x<sub>1</sub> <br> <span>你好</span>世界 <div>你好</div>世界 </body> </html>
超連結及圖片
超連結標籤：a
<!--1. 跳轉到指定的url地址--> <a href="http://www.baidu.com"> 百度</a> <a href="http://www.baidu.com" target="_parent"> 百度</a> <!--新建一個瀏覽器視窗並開啟--> <a href="http://www.baidu.com" target="_blank"> 百度</a> <!--2. 跳轉到當前頁面的指定位置（錨點）--> <a href="#C1">第一個標題 </a> <a href="#C2">第2個標題 </a> <h1><a name="C1">第一個標題</a></h1> <h1><a name="C2">第2個標題</a></h1>
圖片標籤：img
<!--1. 插入影象並設定大小
src指定圖片的位置， 可以是url地址， 也可以是本地的圖片;
alt: 如果圖片不能正常載入， 則顯示alt裡面的文字;
-->
<!--2. 設定影象的對齊方式(html中已棄用， 通過css樣式實現功能)-->
AI會議即將開始: <img align="top" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<br/>
AI會議即將開始: <img align="middle" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<br/>
AI會議即將開始: <img align="bottom" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<!--3. 將影象浮動到文字的左側和右側-->
AI會議即將開始: <img align="left" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
AI會議即將開始: <img align="right" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<!--4. 影象連結 a標籤和img標籤-->
<a href="http://www.csdn.net"> <img src="img01.jpg"></a>
123456789101112131415
實驗程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://www.baidu.com"> 百度</a>
<a href="http://www.baidu.com" target="_parent">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="#C1">第一標題</a>
<a href="#C2">第二標題</a>
<h1><a name="C1">第一標題</a> </h1>
美圖:<a href="http://www.baidu.com"><img align="middle" src="http://img1.3lian.com/2016/w2/11/89.jpg" alt="圖1" ></a>
<h2><a name="C2">第二標題</a></h2>
<h1></h1>
</body>
</html>
序列化標籤
無序標籤：ul和li
<!--1. 無序標籤之ul和li-->
<h2>無序標籤</h2>
<!--去掉ul裡面的所有li標籤裡面的樣式-->
<!--案例1： 實現水平導航欄
list-style-type: none ---- 去掉圓點
display: inline-block ---- 變為行內元素， 並且可以設定高度和寬度
width: -----可以使用300px表示， 也可以用百分比來表示； 20%
-->
<ul style="list-style-type: none">
<li style="display: inline-block; width: 20%; background: azure;">
<a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
</li>
<li style="display: inline-block; width: 20%; background: azure;">CSS</li>
<li style="display: inline-block; width:20%; background: azure;">JS</li>
<li style="display: inline-block; width: 20%; background: azure;">python</li>
</ul>
<!--案例2： 實現豎直導航欄-->
<ul style="list-style-type: none">
<li style="display: block; width: 20%; background: azure;"></li>
<li style="display: block; width: 20%; background: azure;">CSS</li>
<li style="display: block; width:20%; background: azure;">JS</li>
<li style="display: block; width: 20%; background: azure;">python</li>
</ul>
有序標籤：ol和li
!--2. 有序標籤之ol和li-->
<!--type可以指定有序列表符號的型別
text-decoration: none; ---去掉原有標籤的文字裝飾
color: black： 設定字型顏色為黑色
-->
<ol type="A">
<li>
<a href="http://www.baidu.com" style="text-decoration: none; color: black">
html </a>
</li>
<li><a href="#"> CSS </a></li>
<li><a href="#"> JS </a></li>
<li><a href="#"> Python </a></li>
</ol>
巢狀標籤：dl ， dt 和 dd
<!--<!–3. 巢狀標籤之dl, dt和dd–>-->
<dl>
<dt>HTML</dt>
<dd>li</dd>
<dd>span</dd>
<dd>div</dd>
<dd>hr</dd>
<dd>sub</dd>
<dt>CSS</dt>
<dd>text-decoration</dd>
<dd>color</dd>
</dl>
表格及相關操作
表格標籤：
table代表一個表格
caption 表格的標題
td: 列
tr: 行
cellpadding=“3” -----設定表格的內邊距
cellspacing=“5” ----設定表格的外邊距
<table style=" text-align: center; width: 80%;" border="1px" cellpadding="5px" cellspacing="0px" >
<caption>表格的標題</caption>
<tr>
<!--第一行是表格的表頭， 讓自動加粗-->
<th>主機名</th>
<th>IP地址</th>
</tr>
<tr>
<td>server1</td>
<td>172.25.254.78</td>
</tr>
<tr>
<td>server1</td>
<td>172.25.254.78</td>
</tr>
<tr>
<td>server1</td>
<td>172.25.254.78</td>
</tr>
<tr>
<td>server1</td>
<td>172.25.254.78</td>
</tr>
<tr>
<td>server1</td>
<td>172.25.254.78</td>
</tr>
</table>
<br>
<table style="width: 80%; text-align: center;" cellpadding="3" border="1px"
cellspacing="5">
<caption>課程表</caption>
<tr>
<!--tr:一行內容-->
<!--td: 一列內容-->
<th>週一</th>
<th>周2</th>
<th>周3</th>
<th>周4</th>
<th>周5</th>
</tr>
<tr>
<td>週一</td>
<td>周2</td>
<td>周3</td>
<td>周4</td>
<td>周5</td>
</tr>
<tr>
<td>週一</td>
<td>周2</td>
<td>周3</td>
<td>周4</td>
<td>周5</td>
</tr>
<tr>
<td>週一</td>
<td>周2</td>
<td>周3</td>
<td>周4</td>
<td>周5</td>
</tr>
</table>
合併單元格
合併列單元格： colspan
<table style="text-align: center;width: 80%;" cellpadding="3" border="1px" cellspacing="0px">
<tr>
<td>主機名</td>
<!--<td>IP</td>-->
<!--<td>IP</td>-->
<!--<td>IP</td>-->
<td colspan="3">IP</td>
</tr>
<tr>
<td>server1</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
</tr>
<tr>
<td>server1</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
</tr>
<tr>
<td>server1</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
</tr>
</table>
合併行單元格: rowspan
<table style="text-align: center;width: 80%;" cellpadding="3" border="1px" cellspacing="1">
<tr>
<td>主機名</td>
<td>server1</td>
<td>server2</td>
<td>server3</td>
</tr>
<tr>
<td rowspan="3">IP</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
</tr>
<tr>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
</tr>
<tr>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
</tr>
</table>
表格巢狀標籤：
<table style="text-align:center; width:80%;" cellpadding="3" border="1px" >
<tr>
<td>
<img style="width:20%;" src="http://img1.3lian.com/2016/w2/11/89.jpg">
</td>
<td>
<ul>
<li>html</li>
<li>html</li>
<li>html</li>
</ul>
</td>
</tr>
<tr>
<td>
<pre>
fkjrefre
trgtrhryt
</pre>
</td>
<td>
<strong>hdhefreg</strong>
</td>
</tr>
</table>
</body>
表單標籤
form：
<!--<!– 1. form表單標籤 –>-->
<h1>個人資訊</h1>
<form method="get">
<!--文字域-->
<span>使用者名稱: </span><input type="text"><br/>
<!--密碼域-->
<span>密碼:</span><input type="password">
<br/>
<!--文字域-->
<span>個人簡介:</span><textarea>
</textarea><br/>
<!--提交檔案-->
<span>個人簡歷：</span><input type="file"><br/>
<!--日期-->
<span>出生日期:</span><input type="date">
<!--提交按鈕-->
<input type="submit" value="登陸">
<input type="reset" value="重置">
</form>
個人資訊
<h2>詳細資訊</h2>
<!--單選按鈕-->
<span>性別:</span>
<!--name和value是為了將使用者選擇的資訊傳遞給伺服器， gender=1-->
<span style="font-size: small">男</span><input type="radio" name="gender" value="1">
<span style="font-size: small">女</span><input type="radio" name="gender" value="2">
<br/>
<!--多選按鈕-->
<span>你喜歡的書籍:</span>
<ul>
<li><input type="checkbox" name="java"><span>java</span></li>
<li><input type="checkbox" name="python1"><span>python1</span></li>
<li><input type="checkbox"><span>python2</span></li>
<li><input type="checkbox"><span>python3</span></li>
</ul>
<!--下拉列表-->
<select>
<option>--選擇省份--</option>
<option>陝西</option>
<option>山西</option>
<option>河南</option>
<option>河北</option>
</select>
<!--圍繞資料的標籤-->
<fieldset>
<legend>個人簡介</legend>
<h1>使用者登陸</h1>
<hr/>
使用者名稱: <input type="text"><br/>
<input type="submit" value="登陸">
</fieldset>
</body>
案例：
<h1 align="center">個人資訊</h1>
<table width="50%" border="1px" cellpadding="5" cellspacing="0"
style=" margin: 0 auto; background: snow">
<tr>
<td style="background: #c0ffff">姓名</td>
<td><input style="width: 95%; " type="text"></td>
<td>性別</td>
<td>
<select style="width: 95%">
<option>男</option>
<option>女</option>
</select>
</td>
</tr>
<tr>
<td>手機號碼</td>
<td><input style="width: 95%; " type="tel"></td>
<td>電子郵箱</td>
<td><input style="width: 95%; " type="email"></td>
</tr>
<tr>
<td>教育程度</td>
<td><input style="width: 95%; " type="text"></td>
<td>工作職位</td>
<td><input style="width: 95%; " type="text"></td>
</tr>
<tr>
<td>工作城市</td>
<td><input style="width: 95%; " type="text"></td>
<td>期望工資</td>
<td><input style="width: 95%; " type="text"></td>
</tr>
<tr>
<td>自我介紹</td>
<td colspan="3"><input type="text" style="width: 98%"></td>
</tr>
<tr>
<td>特長</td>
<td colspan="3"><input style="width: 95%; " type="text"></td>
</tr>
<tr>
<td>地址</td>
<td colspan="3"><input style="width: 95%; " type="text"></td>
</tr>
<tr>
<td colspan="4"><br/></td>
</tr>
<tr>
<td colspan="4" align="right">
<input type="submit" value="新增">
<input type="reset" value="關閉">
</td>
</tr>
</table>
