標籤：另一個 重要 程式 文本 地址 mat port byte sha
一、HTML 初識web服務本質import socketdef main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind((‘localhost‘,8081)) sock.listen(5) while True: print("server is working.....") conn, address = sock.accept() request = conn.recv(1024) conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n<h1>Hello World</h1>","utf8")) conn.close()if __name__ == ‘__main__‘: main()
通過上面的代碼可以類比瀏覽器訪問網頁的過程
html介紹html是什嗎？
html不是什嗎？
python解譯器解釋py檔案，瀏覽器解釋.html檔案
html結構html標籤格式
標籤的文法：
<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標籤名>
<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
二、常用標籤1、<!DOCTYPE>標籤
<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。
作用：聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。
document.compatMode：
這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那麼compatMode預設就是BackCompat
2、<head>內常用標籤1) <meta>標籤
meta介紹
<meta>元素可提供有關頁面的元資訊（meta-information），針對搜尋引擎和更新頻度的描述和關鍵詞。
<meta>標籤位於文檔的頭部，不包含任何內容。
<meta>提供的資訊是使用者不可見的
meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。
(1)name屬性: 主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜尋引擎機器人尋找資訊和分類資訊用的。
<meta name="keywords" content="meta總結,html,meta,meta屬性,meta跳轉"><meta name="description" content="歡迎訪問py1024">
(2)http-equiv屬性：相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以協助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變數值。
2)非meta標籤
1 <title>oldboy</title>2 <link rel="icon" href="http://www.jd.com/favicon.ico">3 <link rel="stylesheet" href="css.css">4 <script src="hello.js"></script>
3、<body>內常用標籤1)基本標籤（ 塊級標籤和內聯標籤）
標籤分為：塊級標籤 內聯標籤
塊級標籤：獨佔一行 ，比如 h1,p
內聯標籤：按文本佔位置， 比如b，em
嵌套原則： 塊級標籤可以嵌套內聯標籤和塊級標籤，內聯標籤只可以嵌套內聯標籤
‘‘‘<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.h1>h2>h3<p>: 段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白.<b> <strong>: 加粗標籤.<strike>: 為文字加上一條中線.<em>: 文字變成斜體.<sup>和<sub>: 上角標 和 下角表.<br>:換行.<hr>:水平線特殊字元： < >；"；??‘‘‘
2）<div>和<span>標籤
<div></div> ： <div>只是一個區塊層級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現.
<span></span>： <span>表示了內聯行(行內元素),並無實際的意義,主要通過CSS樣式為其賦予不同的表現.
區塊層級元素與行內元素的區別
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
<div>和<span>標籤樣本：
3)圖形標籤: <img> <img> 標籤為內聯標籤src: 要顯示圖片的路徑.alt: 圖片沒有載入成功時的提示.title: 滑鼠懸浮時的提示資訊.width: 圖片的寬height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)4）超連結標籤(錨標籤): <a> </a>
超連結是指從一個網頁指向一個目標的串連關係，這個目標可以是另一個網頁，也可以是相同網頁上 的不同位置，還可以是一個圖片，一個電子郵件地址，一個檔案，甚至是一個應用程式
‘‘‘<a href="" target="_blank" >click</a>href屬性指定目標網頁地址。該地址可以有幾種類型： 絕對 URL - 指向另一個網站（比如 href="http://www.jd.com） 相對 URL - 指當前網站中確切的路徑（href="index.htm"） 錨 URL - 指向頁面中的錨（href="#top"）‘‘‘5）列表標籤
‘‘‘<ul>: 無序列表 [type屬性：disc(實心圓點)(預設)、circle(空心圓圈)、square(實心方塊)]<ol>: 有序列表 <li>:列表中的每一項.<dl> 定義列表 <dt> 列表標題 <dd> 清單項目‘‘‘<ul> <li>111</li> <li>222</li> <li>333</li></ul><ol> <li>111</li> <li>222</li> <li>333</li></ol><dl> <dt>河北省</dt> <dd>保定市</dd> <dd>石家莊</dd> <dd>唐山</dd></dl>6）表格標籤: <table>
表格概念
表格是一個二維資料空間，一個表格由若干行組成，一個行又有若干儲存格組成，儲存格裡可以包含文字、列表、圖案、表單、數字記號、預置文本和其它的表格等內容。
表格最重要的目的是顯示表格類資料。表格類資料是指最適合組織為表格格式（即按行和列組織）的資料。
表格的基本結構：
<table> <tr> <th>標題</th> <th>標題</th> </tr> <tr> <td>內容</td> <td>內容</td> </tr></table>
表格的屬性：
‘‘‘<tr>: table row #換行<th>: table head cell #表格的欄位，內建加粗效果<td>: table data cell #表格的儲存格屬性: border: 表格邊框. cellpadding: 內邊距 cellspacing: 外邊距. width: 像素 百分比.（最好通過css來設定長寬） rowspan: 儲存格豎跨多少行 colspan: 儲存格橫跨多少列（即合併儲存格）‘‘‘
表格練習：
<!DOCTYPE html><html lang="en"><head> <meta name="keywords" content="meta總結,html,meta,meta屬性,meta跳轉"> <meta name="description" content="歡迎訪問py1024"> <meta http-equiv="content-type" charset="UTF-8"> <meta http-equiv="Refresh" content="253;URL=http://www.py1024.com"> <meta charset="UTF-8"> <title>py1024</title> <link rel="icon" href="https://www.jd.com/favicon.ico"></head><body><br><div align="center">歡迎訪問py1024.com</div><br><table border="1" cellspacing="0" align="center" bordercolor="magenta"> <tr> <th colspan="3" align="center">星期一菜譜</th> </tr> <tr> <td rowspan="2">素菜</td> <td>清炒茄子</td> <td>花椒扁豆</td> </tr> <tr> <td>小蔥豆腐</td> <td>炒白菜</td> </tr> <tr> <td rowspan="2">葷菜</td> <td>油燜大蝦</td> <td>海參魚翅</td> </tr> <tr> <td>紅燒肉<img src="http://img1.imgtn.bdimg.com/it/u=1630273743,3931106288&fm=26&gp=0.jpg" alt="紅燒肉" height="100"></td> <td>烤全羊</td> </tr></table ><br><p align="center">Python全棧S5課程表</p><table border="1" cellpadding="3" align="center" bordercolor="blue"> <tr> <th>項目</th> <th colspan="5">上課</th> <th colspan="2">休息</th> </tr> <tr> <th>星期</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> <th>星期日</th> </tr> <tr> <td rowspan="4">上午</td> <td>語文</td> <td>數學</td> <td>英語</td> <td>英語</td> <td>物理</td> <td>電腦</td> <td rowspan="4">休息</td> </tr> <tr> <td>數學</td> <td>數學</td> <td>地理</td> <td>曆史</td> <td>化學</td> <td>電腦</td> </tr> <tr> <td>化學</td> <td>語文</td> <td>體育</td> <td>電腦</td> <td>英語</td> <td>電腦</td> </tr> <tr> <td>政治</td> <td>英語</td> <td>體育</td> <td>曆史</td> <td>地理</td> <td>電腦</td> </tr> <tr> <td rowspan="2">下午</td> <td>語文</td> <td>數學</td> <td>英語</td> <td>英語</td> <td>物理</td> <td>電腦</td> <td rowspan="2">休息</td> </tr> <tr> <td>數學</td> <td>數學</td> <td>地理</td> <td>曆史</td> <td>化學</td> <td>電腦</td> </tr></table></body></html>表格標籤練習
7）表單標籤: <form>
功能：表單用於向伺服器傳輸資料，從而實現使用者與Web伺服器的互動
表單能夠包含input系欄標籤，比如文字欄位、複選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標籤。
表單一般用來收集使用者的輸入資訊
表單屬性
action: 表單提交到哪.一般指向伺服器端一個程式,程式接收到表單提交過來的資料（即表單元素值）作相應處理，比如https://www.sogou.com/web
method: 表單的提交方式 post/get預設取值就是get
表單元素
基本概念：
HTML表單是HTML元素中較為複雜的部分，表單往往和指令碼、動態網頁面、資料處理等功能相結合，因此它是製作動態網站很重要的內容。
表單工作原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的資訊，然後按某個按鈕提交。這些資訊通過Internet傳送到伺服器上。
伺服器上專門的程式對這些資料進行處理，如果有錯誤會返回錯誤資訊，並要求糾正錯誤。當資料完整無誤後，伺服器反饋一個輸入完成的資訊
前端基礎之HTML
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
