day042前端之HTML
阿新 • • 發佈：2018-12-16
本節內容：
1、HTML的介紹
2、HTML文件結構
3、HTML常用標籤
一、HTML的介紹
1、web服務的本質
web實際上就是一個socket服務端，
流程：
瀏覽器發請求 --> HTTP協議 --> 服務端接收請求 --> 服務端返回響應
--> 服務端把HTML檔案內容發給瀏覽器 --> 瀏覽器渲染頁面
服務端
import socket
sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5) while True: conn, addr = sk.accept() data = conn.recv(8096) conn.send(b"HTTP/1.1 200 OK\r\n\r\n") conn.send(b"<h1>Hello world!</h1>") conn.close() 2、HTML是什麼？
1.超文字標記語言（Hypertext Markup Language, HTML）是一種用於建立網頁的標記語言。
2.本質上是瀏覽器可識別的規則，我們按照規則寫網頁，瀏覽器根據規則渲染我們的網頁。
對於不同的瀏覽器，對同一個標籤可能會有不同的解釋。（相容性問題）
3.網頁檔案的副檔名：.html或.htm
3、HTML不是什麼？
HTML是一種標記語言（markup language），它不是一種程式語言。 HTML使用標籤來描述網頁。 不像python程式語言一樣，有邏輯什麼的，這個標記語言是沒有邏輯的
二、HTML文件結構
1、最基本的HTML文件：
<!DOCTYPE html>
<html lang="zh-CN"> #這個language表示語言，zh-CN是中文的意思，就是說，你整個文件的內容以中文為主，如果以英文為主，就寫成lang='en'
<head>
<meta charset="UTF-8">
<title>css樣式優先順序</title>
</head>
<body>
</body>
</html>
1.<!DOCTYPE html>宣告為HTML5文件。
2、<html></html>是文件的開始標記和結束的標記。
是HTML頁面的根元素，在它們之間是文件的頭部（head）和主體（body）。
3.<head>、</head>定義了HTML文件的開頭部分。
它們之間的內容不會在瀏覽器的文件視窗顯示。
包含了文件的元（meta）資料，配置資訊等，是給瀏覽器看的，你看到的是在body標籤裡面寫的。
4.<title>、</title>定義了網頁標題，在瀏覽器標題欄顯示。
（修改一下title中的內容，然後看一下瀏覽器，你就會發現title是什麼了，就是瀏覽器上面的小標題）
5.<body>、</body>之間的文字是可見的網頁主體內容。
注意：對於中文網頁需要使用 宣告編碼，否則會出現亂碼。
有些瀏覽器會設定 GBK 為預設編碼，則你需要設定為 。
pycharm中建立一個html檔案，你就會發現，整個結構都給你直接生成好了，
因為不管什麼瀏覽器，這個文件結構都是這樣的。
pycharm可以直接點選瀏覽器，開啟寫好的HTML檔案，
你會發現位址列是種file:///這也是一個協議，瀏覽器開啟自己本地檔案的協議。
2、HTML標籤格式，嚴格封閉
HTML標籤通常是成對出現的，比如：<div>和</div>，第一個標籤是開始，第二個標籤是結束。結束標籤會有斜線。
HTML標籤是由尖括號包圍的關鍵字如：<div>、<html>等，
也有一部分標籤是單獨呈現的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
標籤裡面可以有若干屬性，也可以不帶屬性。
3、標籤的語法
第一種寫法：（成對出現的）
<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標籤名>
第二種寫法：（單獨呈現的）
<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
有些屬性是沒有特殊的效果的，而有些屬性是有效果的，
比如 <h1 s='name'>xxx<h1/>，其中s='name'是沒什麼效果的，
而<a src='http://www.baidu.com'>xxx</a>，你會看到一些效果，可以點選，有下劃線，有顏色。
4、幾個很重要的屬性
1、id
定義標籤的唯一ID，HTML文件樹中唯一，id不能重複
寫在標籤裡面，不是被標籤包圍，<span id="1"></span>
用來區分頁面上的標籤，我們就可以通過id來快速查詢到這個標籤
2、class
為html元素定義一個類名（class="類名"）,<div class="c1"></div>
或者多個類名（class="類名1 類名2 ···"）
(CSS樣式類名) 詳見下一篇css
3、style
成對的被<head>M</head>,夾住
規定元素的行內樣式（css樣式）
如何註釋：
<!--註釋內容-->
#找到一行內容ctrl+/就能註釋，註釋的內容不會在網頁上顯示出來
5、 標籤
<!DOCTYPE> 宣告必須是 HTML 文件的第一行，位於 <html> 標籤之前。
<!DOCTYPE> 宣告不是 HTML 標籤；
它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。
三、HTML常用標籤
1、head內常用標籤
2、Meta標籤（head裡的內容,瞭解）
Meta標籤介紹： #作為了解內容
<meta>元素可提供有關頁面的元資訊（meta-information）,針對搜尋引擎和更新頻度的描述和關鍵詞。
<meta>標籤位於文件的頭部，不包含任何內容。
<meta>提供的資訊是使用者不可見的。
1、meta標籤共有兩個屬性，（瞭解）
分別是http-equiv屬性
和name 屬性
不同的屬性又有不同的引數值，這些不同的引數值就實現了不同的網頁功能。
2.http-equiv屬性：（瞭解）
相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以幫助正確地顯示網頁內容，
與之對應的屬性值為content，content中的內容其實就是各個引數的變數值。
<!--2秒後跳轉到對應的網址，注意引號-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> #如果把URL和後面的內容去掉，就是2秒鐘重新整理一次，這些內容瞭解一下就行 <!--指定文件的編碼型別--> <meta http-equiv="content-Type" charset=UTF8"> <!--告訴IE以最高階模式渲染文件--> <meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微軟的一個全新的瀏覽器,其實就是告訴IE瀏覽器，你按照最高標準來渲染我的頁面，瞭解一下就可以啦 2、name屬性:
主要用於描述網頁，與之對應的屬性值為content，
content中的內容主要是便於搜尋引擎機器人查詢資訊和分類資訊用的。
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> # 關鍵字，也就是別人是可以通過這些關鍵字搜尋到我的這個文章的， # 搜尋引擎就是能夠這個content內容來幫別人搜尋到你的這個文件的 #SEO就是做這個的，就是怎麼讓你們公司的網站在別人搜尋的時候能夠靠前顯示， # 不算那個花錢的，百度是充值的，你衝個20w，別人可能一天就給你點選完了，特別的貴 <meta name="description" content="xxxxxpythonxxx學習"> #是對這個文件的描述，在百度一些內容的頁面上，f12開啟看看 下面這個紅框裡面就是描述資訊：
4、瀏覽器核心：
「瀏覽器核心」也就是瀏覽器所採用的「渲染引擎」，
渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式資訊。
渲染引擎是相容性問題出現的根本原因。
3、body內常用標籤（HTML中的重點）
1、基本標籤（塊級標籤和內聯標籤）
基本標籤
不加標籤的純文字也是可以在body中寫的
<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除</s>
<p>段落標籤</p> #獨佔一個段落
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
<!--換行-->
<br>
<!--水平線--><hr> #就是單獨個一個水平線
每次加上一些內容，別忘了重新整理一下頁面，才能看到新新增的效果或者內容，
其實上面這些標籤很少用
4、特殊字元（瞭解）
（還有好多其他的，可以直接百度搜HTML特殊符號對照表）
5、div標籤和span標籤（常用）
這兩個標籤沒有特別的樣式，可以隨意的通過css來設計樣式；
div標籤用來定義一個塊級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現。
span標籤用來定義內聯(行內)元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現。
1、塊級元素與行內元素的區別：
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。
如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
剛才學的標籤：
塊級標籤：p、h1--h6、hr、div
內聯標籤：b、i、u、s
2、關於標籤巢狀：
關於標籤巢狀：通常塊級元素可以包含內聯元素或某些塊級元素，
但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
div是可以包含div的
p標籤比較特殊，不能包含塊級標籤，p標籤也不能包含p標籤。
可以試一下p標籤套p標籤，f12你會發現三個p標籤
5、img標籤（常用）
<img src="圖片的路徑" alt="圖片未載入成功時的提示" title="滑鼠懸浮時提示資訊"
width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">
src的路徑又分為兩種：網上的一個圖片路徑和本地的一個圖片路徑
6、a標籤–超連結標籤（常用）
所謂的超連結是指從一個網頁指向一個目標的連線關係，這個目標可以是另一個網頁，
也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，
一個檔案，甚至是一個應用程式。
什麼是URL
什麼是URL？
URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網頁地址，
是因特網上標準的資源的地址。
URL舉例
http://www.sohu.com/stu/intro.html http://222.172.123.33/stu/intro.html URL地址由4部分組成 第1部分：為協議：http://、ftp://等 第2部分：為站點地址：可以是域名或IP地址 第3部分：為頁面在站點中的目錄：stu 第4部分：為頁面名稱，例如 index.html 各部分之間用“/”符號隔開。 <a href="http://www.oldboyedu.com" target="_blank" >點我</a> 1、該地址可以有幾種型別：
href屬性指定目標網頁地址。
1、絕對URL - 指向另一個站點（比如 href="http://www.jd.com）
2、相對URL - 指當前站點中確切的路徑（href="index.htm"） #學django的時候會用的比較多
3、錨URL - 指向頁面中的錨（href="#top"），部落格的目錄經常用到，（回到頂部）
還可以跳轉到 name屬性為p1的a標籤上，<a name='top'>xxx</a>
4、_blank表示在新標籤頁中開啟目標網頁
5、_self表示在當前標籤頁中開啟目標網頁
7、列表
1、無序列表
<ul type="disc"> <li>第一項</li> <li>第二項</li> </ul> types屬性：
disc（實心圓點，預設值）
circle（空心圓圈）
square（實心方塊）
none（無樣式）
2、有序列表
<ol type="1" start="2"> <li>第一項</li> <li>第二項</li> </ol> type屬性： start是從數字幾開始
1 數字列表，預設值
A 大寫字母
a 小寫字母
Ⅰ大寫羅馬
ⅰ小寫羅馬
3、標題列表（就像大綱一樣，有一個層級效果）
<dl>
<dt>標題1</dt> <dd>內容1</dd> <dt>標題2</dt> <dd>內容1</dd> <dd>內容2</dd> </dl> 8、表格
表格是一個二維資料空間，一個表格由若干行組成，一個行又有若干單元格組成，
單元格里可以包含文字、列表、圖案、表單、數字符號、預置文字和其它的表格等內容。
表格最重要的目的是顯示錶格類資料。
表格類資料是指最適合組織為表格格式（即按行和列組織）的資料。
表格的基本結構：
<table border='1'>
<thead> #標題部分
<tr> #一行
<th>序號</th> #一個單元格
<th>姓名</th>
<th>愛好</th>
</tr>
</thead>
<tbody> #內容部分
<tr> #一行
<td>1</td> #一個單元格
<td>Egon</td>
<td>槓娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>
1、屬性:
border: 表格邊框.
cellpadding: 內邊距 （內邊框和內容的距離）
cellspacing: 外邊距.（內外邊框的距離）
width: 畫素 百分比.（最好通過css來設定長寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合併單元格）
其實標籤又可以分為兩類：1、展示給使用者看的 2、獲取使用者輸入內容的標籤，
下面要學的標籤是捕獲使用者輸入的標籤。基本上HTML中常用的就這些標籤
9、form（最後再學這個標籤，先去學input標籤）
功能：
表單用於向伺服器傳輸資料，從而實現使用者與Web伺服器的互動
表單能夠包含input系列標籤，比如文字欄位、複選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標籤。
1、表單屬性
屬性 描述
accept-charset 規定在被提交表單中使用的字符集（預設：頁面字符集）。
action 規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete 規定瀏覽器應該自動完成表單（預設：開啟）。
enctype 規定被提交資料的編碼（預設：url-encoded）。
method 規定在提交表單時所用的 HTTP 方法（預設：GET）。
name 規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
novalidate 規定瀏覽器不驗證表單。
target 規定 action 屬性中地址的目標（預設：_self）。
2、表單元素
HTML表單是HTML元素中較為複雜的部分，
表單往往和指令碼、動態頁面、資料處理等功能相結合，因此它是製作動態網站很重要的內容。
訪問者在瀏覽有表單的網頁時，可填寫必需的資訊，然後按某個按鈕提交。
這些資訊通過Internet傳送到伺服器上。
伺服器上專門的程式對這些資料進行處理，如果有錯誤會返回錯誤資訊，並要求糾正錯誤。
當資料完整無誤後，伺服器反饋一個輸入完成的資訊。
3、如何將瀏覽器使用者輸入的內容傳送到服務端
1、input中type=submit的那個按鈕，
點選提交按鈕，input中type=submit的那個按鈕，然後就會將form表單中所有使用者輸入的內容或者選擇的內容（{name屬性:值，}）
都發給服務端（以我們自己寫的那個socket舉例，列印一下接收的內容），
但是所有的輸入標籤必須有一個叫做name的屬性。
2、讓使用者選擇的，必須指定一個value值，
要不然後端接收不到內容，使用者自己填寫的標籤，不需要指定value值
3、我們用post封裝提交寫資訊，到一個訊息體裡面，
但是這樣並不好，因為url中顯示了你的資訊，並且如果內容很多的話，
你的位址列不能夠輸入那麼長的內容，為什麼會預設拼接到url裡面呢，
因為form表單預設是get請求提交內容，我們可以改為post，
來看看：post會把所有你提交的資訊封裝到一個訊息體裡面，
在瀏覽器上就看不到了，
對於小白來說，看著安全一些。
然後我們後端通過提交過來的資料，
來做某些事情，該驗證的驗證，該儲存的儲存
4、記住form表單裡面有兩個屬性
action控制往哪裡提交資料、
method控制用什麼方式提交。
5、還有一個檔案input
因為我們剛才說，資料是通過組成一個字典發給後端的，
但是檔案怎麼做鍵值對啊，做不了，
所以需要通過二進位制流的形式一點一點的傳送給後端，就是這個multipart搞的事情，
有個瞭解就行了，別糾結，到了django我們在細說。
6、注意：
form表單提交資料的時候，必須有個submit按鈕
django的示例
from django.conf.urls import url
from django.shortcuts import HttpResponse
def upload(request):
print("request.GET:", request.GET)
print("request.POST:", request.POST)
if request.FILES:
filename = request.FILES["file"].name
with open(filename, 'wb') as f:
for chunk in request.FILES['file'].chunks():
f.write(chunk)
return HttpResponse('上傳成功')
return HttpResponse("收到了！")
urlpatterns = [
url(r'^upload/', upload),
]
10、input(都去練一下)
<input> 元素會根據不同的 type 屬性，變化為多種形態。
1、屬性說明:
name： 表單提交時的“鍵”，注意和id的區別
value： 表單提交時對應項的值
type="button", "reset", "submit"時，為按鈕上顯示的文字年內容
type="text","password","hidden"時，為輸入框的初始值
type="checkbox", "radio", "file"，為輸入相關聯的值
checked： radio和checkbox預設被選中的項
readonly： text和password設定只讀
disabled： 所有input均適用
11、select標籤
<form action="" method="post"> <select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> #預設選中，當屬性和值相同時，可以簡寫一個selected就行了 <option value="3">廣州</option> <option value="4">深圳</option> </select> </form> 1、屬性說明
multiple：布林屬性，設定後為多選下拉框，否則預設單選
disabled：禁用
selected：預設選中該項
value：定義提交時的選項值
12、label標籤
定義：<label> 標籤為 input 元素定義標註（標記）。
如果不用這個label給input標籤一個標記，input會變黃，不影響使用，
只是提示你，別忘了給使用者一些提示，也就是這個label標籤。
說明：
1、label 元素不會向用戶呈現任何特殊效果。
但是點選label標籤裡面的文字，那麼和他關聯的input標籤就獲得了游標，讓你輸入內容
2、<label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。
<form action=""> <label for="username">使用者名稱</label> #for和input的id屬性一樣，就關聯在一起了 <input type="text" id="username" name="username"> </form> 
13、textarea多行文字
<textarea name="memo" id="memo" cols="30" rows="10"> 預設內容 </textarea> 1、屬性說明：
name：名稱
rows：行數 #相當於文字框高度設定
cols：列數 #相當於文字框長度設定
disabled：禁用