---恢復內容開始---
python/HTML基礎
HTML：
超文本標記（標簽）語言 （以<>擴起來的都是標簽語言，放入標簽里的不僅僅是文本）一套語言規則
瀏覽器的渲染順序是從上到下，從左到右
不同的瀏覽器，對同一標簽可能會有不完全相同的解釋（兼容性）至今已經解決的差不多了
.html或htm 靜態網頁文件擴展名后綴
標簽可以進行嵌套，但是不能進行交叉嵌套
HTML 不是一種編程語言，而是一種標記語言，HTML使用標記標簽來描述網頁
HTML結構：
<html></html>:是文件的開始標記和結束標記（包含 了<head><body>）
<head><head>:是不能會渲染出的
<body><body>:之間的文本是可見的網頁主題內容
html的標簽通常都是成對出現的（單獨的是自閉合標簽）
html的標簽不區分大小寫
HTML標簽格式：
標簽的語法：
<標簽名 屬性名=‘ 屬性值’>內容部分<標簽名>
常用標簽
<！DOCTYPE> 標簽聲明文檔的最前面的位置，處於<html>標簽之前，此標簽告知瀏覽器文檔使用哪種解析類型（html或xhtml）
<！DOCTYPE> 標簽作用：避免瀏覽器的怪異模式。
document.compatMode:
1、BackCopat:怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。
2、CSS1Compat：標准模式，瀏覽器使用W3C的標准解析渲染頁面
這個屬性會被劉拉你識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認就是BackCompat
<head>內常用標簽：
<meta>標簽
meta介紹
<meta>元素可提供有關頁面的元信息，針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標簽位於文檔的頭部，不包含任何內容。
<meta>提供的信息是用戶不可見的
meta標簽的組成：meta標簽共有倆個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。
（1）name屬性：主要用於描述網頁，與只對應的屬性值為content，content中的內容主要是便於搜索引起機器人查找信息和分類信息用的。
例如：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="keywords" content="IT"> name屬性 6 <meta name="description" content="老男孩開的"> name屬性 7 <title>Meet</title> 8 <link rel="icon" href="https://www.jd.com/favicon.ico"> 9 <meta http-equiv="refresh" content=""> 10 </head> 11 <body> 12 <a href="http://www.baidu.com"><img src="hello.jpg" width="640" height="413" title="機車"></a> 13 </body>
（2）http-equiv屬性：相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="keywords" content="IT"> 6 <meta name="description" content="老男孩開的"> 7 <title>Meet</title> 8 <link rel="icon" href="https://www.jd.com/favicon.ico"> 9 <meta http-equiv="refresh" content="3;http：//www.baidu.com"> 這是一個（跳轉，3是幾秒后，http：//www.baidu.com 是要跳轉到的網址） 10 </head> 11 <body> 12 <a href="http://www.baidu.com"><img src="hello.jpg" width="640" height="413" title="機車"></a> 13 </body> 14
1 <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 是聲明瀏覽的兼容性
非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>
<body>內常用標簽
基本標簽（塊級標簽和內聯標簽）
<hn> n的取值范圍是1~6，從小到大，用來比表示標題
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <h1>Meet</h1> 10 <h2>Meet</h2> 11 <h3>Meet</h3> 12 <h4>Meet</h4> 13 <h5>Meet</h5> 14 <h6>Meet</h6> 15 16 </body> 17 </html>
<p> 段落標簽，包裹的內容被換行，並且也上下內容之間有一行空白
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <p>千山鳥飛絕</p> 10 <p>萬經人終滅</p> 11 <p>孤舟梭立翁</p> 12 <p>獨釣寒江雪</p> 13 14 </body> 15 </html>
<b> <strong>: 加粗標簽
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <b>Meet</b>Meet 10 11 </body> 12 </html>
<strike>: 為文字加上一條中線
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <strike>100</strike> 10 11 </body> 12 </html>
<em>: 文字變成斜體
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <em>yuan</em> 10 </body> 11 </html>
<sup>和<sub>: 上角標 和 下角表 以及 換行
1 <!--2<sub>3</sub>--> 2 <!--<br>--> 3 <!--2<sup>3</sup>-->
<hr>:水平線
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <b>GBY</b> 10 <hr> 11 </body> 12 </html>
<dir>和<span>
<div></div> ： <div>只是一個塊級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現.
<span></span>： <span>表示了內聯行(行內元素),並無實際的意義,主要通過CSS樣式為其賦予不同的表現.
塊級元素與行內元素的區別
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門為定義CSS樣式而生的。
常用標簽：
hn(標題） p（分段，段落） br（強制換行） a標簽
標簽分類：
1、塊級標簽 -----block
塊級便簽獨占一行
h1、p、div、
2、內聯標簽 -----inline
根據內容而定
sub 、 sup、span
圖形標簽<img>
src: 要顯示圖片的路徑. alt: 圖片沒有加載成功時的提示. title: 鼠標懸浮時的提示信息. width: 圖片的寬 height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="keywords" content="IT"> 6 <meta name="description" content="老男孩開的"> 7 <title>Meet</title> 網頁的標題名稱 8 <link rel="icon" href="https://www.jd.com/favicon.ico"> 網頁的圖片 9 <meta http-equiv="refresh" content=""> 10 </head> 11 <body> 12 <a href="http://www.baidu.com"><img src="helloo.jpg" alt="出錯啦" width="640" height="413" title="機車"></a> 13 </body>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="keywords" content="IT"> 6 <meta name="description" content="老男孩開的"> 7 <title>Meet</title> 網頁的標題名稱 8 <link rel="icon" href="https://www.jd.com/favicon.ico"> 網頁的圖片 9 <meta http-equiv="refresh" content=""> 10 </head> 11 <body> 12 <a href="http://www.baidu.com"><img src="hello.jpg" alt="出錯啦" width="640" 寬 height="413" 高 title="機車" 懸浮提示 ></a> 13 </body>
超鏈接標簽（錨標簽）<a></a>
什么是超級鏈接？ 所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上 的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序
1 什么是URL？ 2 URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網頁地址，是因特網上標准的資源的地址。 3 URL舉例 4 http://www.sohu.com/stu/intro.html 5 http://222.172.123.33/stu/intro.html 6 7 URL地址由4部分組成 8 第1部分：為協議：http://、ftp://等 9 第2部分：為站點地址：可以是域名或IP地址 10 第3部分：為頁面在站點中的目錄：stu 11 第4部分：為頁面名稱，例如 index.html 12 各部分之間用“/”符號隔開。
href屬性指定目標網頁地址。該地址可以有幾種類型：
1 <a href="http://www.baidu.com"></a> 2 指向另一個地址 3 <a href="hello.jpg"></a> 4 指向本地文件 5 <a href="#part1"></a> 6 指向本內容中的‘錨’
列表標簽：
2 無序列表、有序列表、定義列表 3 無序列表： unorder list----ul 4 <ul> 5 <li>111<li> 6 <li>222<li> 7 <li>333<li> 8 </ul> 9 有序列表 : order list----ol 10 <ol> 11 <li>111<li> 12 <li>222<li> 13 <li>333<li> 14 </ol> 15 定義列表:define list ----dl 16 17 <dl> 18 <dt>標題</dt> define title 19 <dd>222<dd> define data 20 <dd>333<dd> 21 </dl>
表格標簽：<table>
表格概念，表格是一個二維 數據空間，一個表格由若干行租成，一行又有由若干單元格組成，單元格可以包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容
表格最重要的目的是顯示表格類數據，表格類數據是指最適合組織為表格格式（即按行和列組織）的數據
表格的基本結構：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>菜單</title> 6 </head> 7 <body> 8 9 <table border="2px" cellpadding="10px" cellspacing="1px"> 10 <tr> 11 <th colspan="3" align="center">星期一菜譜</th> 12 </tr> 13 <tr> 14 <td rowspan="2">素菜</td> 15 <td>青草茄子</td> 16 <td>花椒扁豆</td> 17 </tr> 18 <tr> 19 <td>小蔥豆腐</td> 20 <td>炒包菜</td> 21 </tr> 22 <tr> 23 <td rowspan="2">葷菜</td> 24 <td>油燜大蝦</td> 25 <td>海參魚翅</td> 26 </tr> 27 <tr> 28 <td><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1494917021&di=8e8587c2bbe1f2ea7f6b0b923e411c73&src=http://pic30.photophoto.cn/20140219/0042040275809384_b.jpg" height="300px" width="300px">紅燒肉</td> 29 <td>烤全羊</td> 30 </tr> 31 </table> 32 33 </body> 34 </html>
表單標簽：<form>
功能：表單用於向服務器輸出數據，從而實現 用戶與Web服務器的交互
表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等等
表單還可以包含textarea、select、fieldset和label標簽
表單屬性：
action：表單提交到哪？，一般指向服務器端一個程序，程序接受到表單提交過來的數據（即表單元素值）作相應的處理，比如http：//www.sogou.com/web
method:表單的提交方式post/get默認取值就是get
表單元素
基本概念：
HTML表單時HTML元素中較為復雜的部分，表單往往和腳本、動態頁面、數據處理等功能相結合，因此它是自作動態網站很重要的內容
表單一般用來收集用用戶的輸入信息
表單工作原理：
訪問者在瀏覽器有表單的網頁時，可填寫必要的信息，然后按摸個按鈕提交。這些信息通過internet傳送到服務器上
服務器上專門的程序對這些數據進行處理，如果有錯誤返回錯誤信息，並要求糾正錯誤。當數據完整無誤后，服務器反饋一個輸入完成的信息
<input>系列標簽
<1>表單類型
form表單需要加上屬性enctype='multipart/form-data'
上傳文件注意兩點：
1.請求方式必須是post
2.enctype='multipart/form-data'
<表單屬性>
name：表單提交項的鍵
注意和ID屬性的區別：naem屬性是和服務器通信時使用的名稱；
而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程編程，而在css和javascript中使用的
value 表單提交項的值，對於不同的輸入類型，value屬性的用法也不同
type=‘button’，‘reset’，‘submit’-定義按鈕上的顯示的文本
type=‘text’，‘password’，‘hidden’-定義輸入字段的初始值
type=‘checkbox’，‘radio’，‘image’-定義與輸入相關聯的值
checked：radio和checkbox默認被選中
readonly 只讀 .text和password
disabled：對所用input都好使
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <h1>用戶注冊</h1> 9 <form action="11.html" method="post"> 10 <p>用戶名：<input type="text" name="username"></p> #通過type屬性 導入文本輸入框 11 <p>密 碼：<input type="password" name="pasd"></p> #通過type屬性 導入密碼輸入框（輸入密碼時，不會顯示出來） 12 <p>愛 好：籃球<input type="checkbox" name="愛好" value="basktball"> # 通過type屬性 導入多選框，在多選框前邊添加名稱 13 足球<input type="checkbox" name="愛好" value="football"> 14 乒乓球<input type="checkbox" name="愛好" value="pingpang"></p> 15 <p>性 別：男<input type="radio" name="sex" value="man">女<input type="radio" name="sex"value="women">其他<input type="radio" name="sex" value="None"></p> 16 #通過typee屬性 導入單選框 17 18 <p><input type="file" name="filename"></p> #通過type屬性 導入提交文件 19 <p><input type="hidden" name="data" value="22"></p> 20 <!--不顯示的對應標簽--> 21 <p><input type="button" value="button"></p> 22 <!--只是單純的按鈕--> 23 <p><input type="submit" value="submit"></p> 24 25 </form> 26 27 </body> 28 </html>
select標簽
<select>下拉標簽屬性
name：表單提交項的鍵
size：選項個數
multiple：multiple（在屬性和屬性值相同時不用寫屬性值）
<optgroup>為每一項加上分組
<option> 下拉選中的每一項 屬性
value：表單提交項的值
selected：selected下拉選默認被選中
1 <select name="province" size="2" multiple> 2 <optgroup label="中國"> 3 <option value="hebei" selected>河北省</option> 4 <option value="henan" >河南省</option> 5 <option value="shanxi">陝西省</option> 6 <option value="sanxi">山西省</option> 7 <option value="sichuan">四川省</option> 8 9 </optgroup> 10 11 </select>
<textarea>多行文本框
<form id='form' name='form1' method='post' action=''>
<textarea clas='寬度 rows='高度' name='名稱'>
</textarea>
</form>
1 <form action="11.html" method="post"> 2 <p>用戶名：<input type="text" name="username"></p> 3 <p>密 碼：<input type="password" name="pasd"></p> 4 <p>愛 好：籃球<input type="checkbox" name="愛好" value="basktball"> 5 足球<input type="checkbox" name="愛好" value="football"> 6 乒乓球<input type="checkbox" name="愛好" value="pingpang"></p>
<label>標簽
定義：<label>標簽為input元素定義標注（標記）
說明：
1、label元素不會像用戶呈現熱河特殊效果
2、<label>標簽的for屬性值應當與相關元素的id屬性值相同
<form method='post' action=''>
<label for ='uesrnaem'>用戶名</label>
<input type='text name='usernaem' id='usernaem' size='20'></form>
1 <label for="username">用戶名</label> 2 <input type="text" name="'username" id="username">
<fieldset>標簽
<fieldset>
<legend>登錄吧</legend>
<input type='text'>
</fieldset>
1 <fieldset> 2 <legend>登錄</legend> 3 <input type='text'> 4 </fieldset>