標籤：ble open 儲存格 while 空間 isp 中國汽車 規則 target
HTML基礎
Web的本質就是利用瀏覽器訪問socket服務端，socket服務端收到請求回複資料提供給瀏覽器進行渲染顯示。
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)（Hypertext Markup Language，HTML）是一門標記語言，並不是程式設計語言，該語言通過瀏覽器能識別的規則標籤來標記要顯示的網頁中的各個部分。瀏覽器按順序渲染網頁檔案，然後根據標記符解釋和顯示內容。但需要注意的是，對於不同的瀏覽器，對同一標籤可能會有不完全相同的解釋（相容性）。
靜態網頁副檔名：.html 或 .htm
HTML結構
<!DOCTYPE html> #告訴瀏覽器使用什麼標記語言解釋，如html、html5、xhtml等<html lang="en"> #Html檔案聲明的開始<head> #檔案開頭部分，裡面的元素不會顯示在頁面中，但是每一個元素都有特殊的含義 <meta charset="UTF-8"> <title>Title</title> #網頁的標題</head><body> #檔案主體部分</body></html> #Html檔案聲明的結束
HTML標籤格式
標籤的文法
閉合標籤： <標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標籤名>
自閉合標籤： <標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
<!DOCTYPE>標籤
此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。聲明文檔的解析類型，避免瀏覽器的怪異模式。
BackCompat：怪異模式，瀏覽器使用自己的預設的模式解析渲染頁面。
CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。
這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那麼渲染模式預設就是BackCompat
樣本：設定為html
<!DOCTYPE html>
head內常用標籤
meta標籤
<meta>元素可提供有關頁面的元資訊（meta-information），針對搜尋引擎和更新頻度的描述和關鍵詞。
<meta>標籤位於文檔的頭部，<meta>提供的資訊是使用者不可見的。
meta標籤的組成：http-equiv屬性和name 屬性。
(1)name屬性: 主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜尋引擎機器人尋找資訊和分類資訊用的。
#汽車之家首頁源碼<meta name="keywords" content="汽車,汽車之家,汽車網,汽車報價,汽車圖片,新聞,評測,社區,俱樂部"/> #搜尋引擎搜尋的關鍵字<meta name="description" content="汽車之家為您提供最新汽車報價，汽車圖片，汽車價格大全，最精彩的汽車新聞、行情、評測、導購內容，是提供資訊最快最全的中國汽車網站。"/> #搜尋的說明資訊
(2)http-equiv屬性：相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以協助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變數值。
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> #開啟該html檔案，兩秒後轉到百度<meta http-equiv="content-Type" charset=UTF8"> #設定文本類型和編碼<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> #聲明渲染瀏覽器，開發人員無需考慮ie8的差別
非meta標籤
<title>我的第一個網站</title> #標題資訊<link rel="icon" href="http://www.jd.com/favicon.ico"> #標題的表徵圖<link rel="stylesheet" href="css.css"> #匯入css樣式檔案<script src="hello.js"></script> #匯入js指令碼
body內常用標籤
基本標籤
<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.<p>: 段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白.<b> <strong>: 加粗標籤.<strike>: 為文字加上一條中線.<em>: 文字變成斜體.<sup>和<sub>: 上角標 和 下角表.<br>:換行.<hr>:水平線特殊字元： < >；"；©®
html特殊符號
<div>和<span>標籤<div></div> ： <div>只是一個區塊層級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現.
<span></span>： <span>表示了內聯行(行內元素),並無實際的意義,主要通過CSS樣式為其賦予不同的表現.
區塊層級元素與內嵌元素的區別
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
標籤嵌套標準：塊級標籤可以嵌套內聯標籤和塊級標籤，內聯標籤只能嵌套內聯標籤
<img> 標籤src: 要顯示圖片的路徑.alt: 圖片沒有載入成功時的提示.title: 滑鼠懸浮時的提示資訊.width: 圖片的寬height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
<a>超連結標籤(錨標籤)
什麼是超級連結？
所謂的超連結是指從一個網頁指向一個目標的串連關係，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個檔案，甚至是一個應用程式
什麼是URL？URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網頁地址，是網際網路上標準的資源的地址。URL舉例http://www.sohu.com/stu/intro.htmlhttp://222.172.123.33/stu/intro.htmlURL地址由4部分組成第1部分：為協議：http://、ftp://等 第2部分：為網站地址：可以是網域名稱或IP地址第3部分：為頁面在網站中的目錄：stu第4部分：為頁面名稱，例如 index.html各部分之間用“/”符號隔開。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>
#表格屬性border: 表格邊框.cellpadding: 內邊距cellspacing: 外邊距.width: 像素 百分比.（最好通過css來設定長寬）rowspan: 儲存格豎跨多少行colspan: 儲存格橫跨多少列（即合併儲存格）
表格練習
<table width="450"> <tr> <th>課程表</th> </tr> </table> <table border="2" cellspacing="3" cellpadding="3"> <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>課程表
<table border="1" cellpadding="3" cellspacing="3"> <tr> <th colspan="3">星期一菜譜</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://xt.fangyuan365.com/uploadfiles/image/20160116/20160116090876957695.jpg" alt="aaa"></td> <td>烤全羊</td> </tr> </table>菜譜
HTML基礎-DAY1
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
