標籤：pre 網頁 height 簽名 div 空白 form 上下 red
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 Yuan</h1>","utf8")) conn.close()if __name__ == ‘__main__‘: main()html是什嗎？
HTML 不是一種程式設計語言，而是一種標記語言 (markup language)
HTML 使用標記標籤來描述網頁
html結構
標籤的文法：
<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標籤名>
<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。
作用：聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。
document.compatMode：
這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那麼compatMode預設就是BackCompat
<head>內常用標籤 <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="老男孩培訓機構是由一個很老的男孩建立的">
(2)http-equiv屬性：相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以協助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變數值。
<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意後面的引號，分別在秒數的前面和網址的後面) <meta http-equiv="content-Type" charset=UTF8"> <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />非meta標籤
<title>oldboy</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> <link rel="stylesheet" href="css.css"> <script src="hello.js"></script><body>內常用標籤基本標籤（ 塊級標籤和內聯標籤）
‘‘‘<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.<p>: 段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白.<b> <strong>: 加粗標籤.<strike>: 為文字加上一條中線.<em>: 文字變成斜體.<sup>和<sub>: 上角標 和 下角表.<br>:換行.<hr>:水平線特殊字元： < >；"；©®‘‘‘<div>和<span>
<div></div> ： <div>只是一個區塊層級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現.
<span></span>： <span>表示了內聯行(行內元素),並無實際的意義,主要通過CSS樣式為其賦予不同的表現.
區塊層級元素與行內元素的區別
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
‘‘‘src: 要顯示圖片的路徑.alt: 圖片沒有載入成功時的提示.title: 滑鼠懸浮時的提示資訊.width: 圖片的寬height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)‘‘‘超連結標籤(錨標籤): <a> </a>
什麼是超級連結？所謂的超連結是指從一個網頁指向一個目標的串連關係，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個檔案，甚至是一個應用程式URL
‘‘‘<a href="" target="_blank" >click</a>href屬性指定目標網頁地址。該地址可以有幾種類型： 絕對 URL - 指向另一個網站（比如 href="http://www.jd.com） 相對 URL - 指當前網站中確切的路徑（href="index.htm"） 錨 URL - 指向頁面中的錨（href="#top"）‘‘‘列表標籤
‘‘‘<ul>: 無序列表 [type屬性：disc(實心圓點)(預設)、circle(空心圓圈)、square(實心方塊)]<ol>: 有序列表 <li>:列表中的每一項.<dl> 定義列表 <dt> 列表標題 <dd> 清單項目‘‘‘表格標籤: <table>
表格概念
表格是一個二維資料空間，一個表格由若干行組成，一個行又有若干儲存格組成，儲存格裡可以包含文字、列表、圖案、表單、數字記號、預置文本和其它的表格等內容。
表格最重要的目的是顯示表格類資料。表格類資料是指最適合組織為表格格式（即按行和列組織）的資料。
表格的基本結構：
<table> <tr> <td>標題</td> <td>標題</td> </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: 儲存格橫跨多少列（即合併儲存格）‘‘‘
練習：
Day 45（07/31）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
