Web開發（二）HTML

時間 2019-11-13

標籤 web 開發 html 欄目 HTML 简体版

原文原文鏈接

前端概述

 1 import socket
 2 
 3 def main():
 4     sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
 5     sock.bind(('localhost',8089))
 6     sock.listen(5)
 7 
 8     while True:
 9         connection, address = sock.accept()
10         buf = connection.recv(1024)
11 
12         connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))
13 
14         connection.sendall(bytes("<h1>Hello,World</h1>","utf8"))
15 
16         connection.close()
17 
18 if __name__ == '__main__':
19 
20     main()

HTML簡述

概念

HTML（Hypertext Markup Language，超文本標記語言），html文件是文本文件javascript

超文本：指超連接，就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素css

標記語言：標記語言是一套標記標籤 <> ，HTML 使用標記標籤來描述網頁的不一樣組成部分html

做用

　　負責網頁結構前端

　　網頁==HTML文檔，由瀏覽器解析，用來展現的html5

靜態網頁：靜態的資源，如xxx.htmljava

動態網頁：html代碼是由某種開發語言根據用戶請求動態生成的web

歷史

標籤和元素

元素

一個完整的標籤成爲元素，一般標籤 = 元素瀏覽器

元素間的關係：安全

　　父元素子元素兄弟元素祖先元素（祖先元素包括父元素）後代元素（後代元素包括子元素）服務器

內聯元素

特色：行內元素，只佔自身大小的元素，不會獨佔一行，一行容不下會自動換行

常見內聯元素：span a iframe img

<span> </span>

　　沒有任何語義

　　span用於選擇文字，爲其設置樣式

塊元素

特色：塊元素獨佔一行塊元素主要用來對頁面對局

常見塊元素：div p h1 hr

<div></div>

　　沒有任何語義，只是一個單純的塊元素

　　而且不會爲其中的內容設置任何的默認樣式

　　div元素主要用於頁面佈局

內聯元素、塊元素使用原則

通常使用塊元素包含內聯元素，而不使用內聯元素去包含塊元素

a標籤能夠包含任何元素（除了自己）

p標籤不能夠包含任何塊元素

標籤的屬性

概念

一般是以鍵值對形式出現的. 例如 name="alex"
屬性須要設置在開始標籤或自閉和標籤中.
屬性名字所有小寫. *屬性值必須使用雙引號或單引號包裹例如 name="alex"
若是屬性值和屬性名徹底同樣.直接寫屬性名便可. 例如 readonly
多個屬性之間用空格隔開

id

該屬性能夠做爲標籤的惟一標識（同一個頁面中不能有重複的id值）

id屬性值通常以字母開頭

例如 <p id="hello"></p> ,若是超連接地址設置爲「#hello」就會跳轉到該p標籤

Class

用來爲標籤分組，相同class值的標籤爲一組

能夠爲一個標籤指定多個class值，多個值之間用空格隔開

Title

用來指定標籤的標題

能夠給任何一個標籤設置title屬性，當鼠標移入該元素時會顯示 title中的內容

Content

最簡單的HTML頁面

 1 <!DOCTYPE html>  
 2 <html>  
 3     <head>  
 4         <meta charset="utf-8" />  
 5        <title>這是網頁標題</title>  
 6    </head>  
 7    <body>  
 8        <h1>這是一級標題</h1>  
 9     </body>  
10 </html>

文檔聲明

做用

　　用於聲明當前網頁的編寫標準，方便瀏覽器解析網頁（html4.0.1，xhtml1.0，html5）

爲了兼容舊頁面，瀏覽器有兩種解析模式

　　標準模式（Standards Mode）

　　怪異模式（Quirks Mode），解析後的頁面不正常顯示，產生緣由：未書寫文檔聲明

語法

　　文檔聲明必定要寫在網頁的最上端，不區分大小寫

　　html5的文檔聲明語法 <!doctype html>

html

一個頁面有且只有一個根標籤<html></html>，網頁全部的內容都應寫在根標籤中

告訴瀏覽器這個文檔包含的信息是用html編寫的

子元素有 <head></head> <body></body>

head

做用

　　head標籤幫助瀏覽器解析頁面，標籤中的內容不會顯示在網頁中

　　用來表示網頁的元數據，包含了瀏覽器和搜索引擎使用的其餘不可見信息

用法：head是html的子標籤，一個網頁中只能有一個head

子元素： <title></title> <meta/>

body

做用：設置網頁主體內容，全部頁面中能看到的內容都應該編寫到body標籤中

用法：body做爲html的子標籤使用

title

做用

　　表示網頁的標題，通常會在網頁的標題欄顯示

　　title標籤中的文字是搜索引擎搜索時的第一位置，是頁面優化的重要元素

用法

　　建議title標籤緊貼在head後面編寫，這樣便於搜索引擎檢索

　　網站中多個頁面的title不該該重複，這樣不利於搜索引擎檢索

註釋

做用：幫助開發人員理解代碼

並且：

　　註釋中的內容不會在網頁顯示

　　註釋不能嵌套

語法

經常使用標籤

標題標籤

效果

　　在HTML中一共有六級標題標籤（h1-h6），在顯示效果上，h1-h6字號依次變小，但字號不是關注點

　　使用HTML標籤時關注的時標籤的語義，咱們使用的標籤都是語義標籤

使用

　　搜索引擎檢索完title，會當即查看 h1 標籤中的內容，因此h1影響頁面在搜索引擎的排名

　　一個頁面只有一個h1

　　通常頁面中的標題標籤只有h1，h2，h3三種

段落標籤

<p></p>

做用：用來表示一個段落

效果

　　標籤中的文字默認獨佔一行，而且段落之間存在間距

　　在HTML中，字符間隔再多的空格、換行符，瀏覽器都會解析爲一個空格

換行

做用：可使br標籤後的內容另起一行

分割線

做用：在頁面中打印一條水平線

圖片標籤

<img/>

做用向網頁中引入外部圖片

語法：<img src=" ' alt=" " />

src: source,要顯示圖片的路徑  其中../  表示返回上一級目錄，可疊加使用

alt: 圖片沒有加載成功時的提示.（搜索引擎經過alt屬性識別不一樣的圖片）

title: 鼠標懸浮時的提示信息.

width: 圖片的寬

height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

常見圖片格式：

JPEG（JPG）

　　支持的顏色多，可壓縮，不透明

　　通常用於保存顏色豐富的圖片

GIF

　　支持的顏色少，支持簡單透明，支持動態圖

　　用於顏色單一或動態圖

PNG

　　支持的顏色多，支持複雜透明

　　用於顏色豐富的透明圖片

　　IE6對png24格式的支持度不高，致使透明效果沒法顯示

　　解決方法1：使用png8格式代替png24，可是圖片清晰度降低

　　解決方法2：在body的末尾引入外部js文件

1 <script type="text/javascript src="js/DD_belatedPNG_0.0.8a-min.js"></scrip  
2 <script type="text/javascript">  
3     DD_belatedPNG.fix('img');  
4 </script>

圖片選擇原則

　　效果一致，使用小的

　　效果不一致，使用好的

超連接

<a></a>

做用

　　設置超連接：<a href="https://baike.baidu.com" target="_blank">百度百科</a>

該標籤能夠嵌套任何元素（除了自己）

屬性

href
要鏈接的資源路徑 ，能夠是相對路徑或絕對路徑  格式以下:     href="http://www.baidu.com" 

target: 
_blank : 在新的窗口打開超連接. 
_self  在當前窗口打開（默認值）
_blank  在新窗口中打開
框架名稱: 在指定的內聯框架中打開連接內容.


name: 定義一個頁面的書籤.

用於跳轉 href : #id.（錨）

應用

　　連接地址不肯定時，能夠暫時使用井號#代替，連接會跳轉到當前頁面頂部

　　連接地址設置爲 #id值，會跳轉到該id值所在的位置

　　連接設置爲 "mailto:郵箱地址"，會自動打開計算機中默認的郵件客戶端，方便發送郵件

內聯框架

做用

　　使用iframe建立一個內聯框架，用於引入外部頁面

　　開發中不推薦使用內聯框架，內聯框架中的內容不會被搜索引擎檢索

屬性

　　name屬性用於給內聯框架命名

　　src設置跳轉連接

轉義字符串

做用

　　在html中，一些特殊字符如 < > 不能直接使用，須要用一些特殊符號（實體）代替表示，瀏覽器解析到實體時會自動轉化爲對應的特殊符號

語法

　　&實體名；

框架集標籤

做用

　　使用框架集引入外部頁面

　　框架集能夠同時引入多個頁面，內聯框架只能引入一個，在h5標準中，推薦使用框架集

屬性

　　rows屬性，指定框架集中全部框架按行排列

　　cols屬性，指定框架集中全部框架按列排列

　　cols和rows必須在frameset中選擇一個，而且指定每一個框架的大小

例如：<frameset rows="50% 20% 30%"></frameset>

做用：在frameset中使用frame子標籤來指定引入的頁面，引入幾個頁面就寫幾個frame

語法：<frame src="" />

注意

　　frameset不能和body出如今同一個頁面

　　frameset中的內容不被搜索引擎檢索

　　frameset中加載每個frame瀏覽器都須要從新發送一次請求，用戶體驗差

文本標籤

　　主要表示語氣的強調（emphasize），默認斜體顯示

　　主要表示內容的強調，比em更強烈，默認粗體顯示

<i></i>

　　i標籤的內容以斜體顯示

<b></b>

　　b標籤的內容粗體顯示

　　small標籤中的內容比父元素字號小一些

　　網站中加書名號的內容均可以用cite標籤，表示參考的內容，比書名，歌名等

<q></q>

　　表示一個短的引用（行內引用）

　　q標籤的內容默認加引號（引號在css中before和after中添加的），不能被選中

　　表示一個長引用（塊引用），塊標籤

　　sub中的內容會變成下標

　　sup中的內容會變成上標

　　del中的內容會添加刪除線

　　ins中的內容會添加下劃線

　　pre是一個預格式標籤，自動保存代碼中的格式，不會忽略多個空格

　　code用於存放代碼，但不會保留代碼格式

　　一般code和pre結合使用

列表標籤

無序列表

　　ul用於建立無序列表（unonder list），塊元素

　　在html中使用type屬性設置項目符號（不推薦）

　　在CSS中，liststyle屬性能夠設置項目符號樣式，

　　在CSS中，liststyle:none; 能夠用來清除項目符號

　　li用於在ul中建立一個一個列表項，塊元素

有序列表

　　ol用於建立有序列表（order list），塊元素

　　默認使用有序序號做爲項目符號

　　在html中，type屬性能夠指定序號類型（不推薦）

　　　　1，默認值，使用阿拉伯數字

　　　　a，採用小寫字母做爲序號

　　　　A，採用大寫字母做爲序號

　　　　i，採用小寫羅馬字母做爲序號

　　　　I，採用大小寫羅馬字母做爲序號

　　使用li建立列表項

定義列表

　　建立定義列表，用於對一些內容或詞彙進行定義

　　dl的子標籤，表示被定義的內容

　　dl的子標籤，表示對被定義內容的描述

注意：ul、ol、dl能夠相互嵌套

表單標籤

表單用於向服務器傳輸數據。

表單可以包含 input 元素，好比文本字段、複選框、單選框、提交按鈕等等。

表單還能夠包含textarea、select、fieldset和 label 元素。

建立表單

<form action="url"></form>

form標籤用於建立表單

　　現實生活中用表單提交信息，例如簡歷、銀行卡申請表等

　　網頁中的表單用來向服務器提交表單，如Baidu搜索框

　　在form中建立表單項，表單項默認有邊框borderstyle

HTML 表單用於接收不一樣類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標籤, 要提交的全部內容都應該在該標籤中.

屬性

　　action: 表單提交到的服務器地址. 通常指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）做相應處理，好比https://www.sogou.com/web

　　method: 表單的提交方式 post/get 默認取值就是 get（信封）

　　　　get: 1.提交的鍵值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.

post:1.提交的鍵值對不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.

表單項

單行文本框

　　<input type="text" name="屬性名" value="默認屬性值" />

　　在文本框和文本域中，設置placeholder來設置提示文字（文字水印），IE8及如下不支持該屬性，須要js

密碼框

　　<input type="password" name="屬性名"/>

提交按鈕

　　<input type="submit" value="按鈕文字" />

　　<button type="submit">按鈕文字</button>

單選框

　　<input type="radio" name="屬性名" value="屬性值" />

　　Checked屬性值設置爲checked的話，則該默認選中該選項

多選框

　　<input type="checkbox" name="屬性名" value="屬性值" />

　　在單選框或多選框中指定默認選中的選項，能夠在對應的項中添加checked="checked"屬性

上傳文件

　　<input type="file" name="屬性名" value="屬性值" />　　

　　form表單須要加上屬性enctype="multipart/form-data"

　　上傳文件注意兩點：

　　　　 1 請求方式必須是post

　　　　 2 enctype="multipart/form-data"

def index(request):
    print request.POST
    print request.GET
    print request.FILES
    for item in request.FILES:
        fileObj = request.FILES.get(item)
        f = open(fileObj.name, 'wb')
        iter_file = fileObj.chunks()
        for line in iter_file:
            f.write(line)
        f.close()
    return HttpResponse('ok')

下拉列表框

　　<select name="屬性名"> </select>

　　　　用於建立下拉列表

　　　　下拉列表的name屬性指定給select標籤

　　　　爲select添加multiple=「multiple",則變爲一個多選的下拉列表

　　<option value="屬性值"></option>

　　　　用於在select中建立列表項

　　　　下拉列表的value屬性指定給option

　　　　在option中添加selected=「selected」，將選項設置爲默認選中

　　<optgroup label="組名">

　　　　對下拉列表項進行分組，同一個optgroup的列表項爲一組

　　　　使用label屬性指定分組的名字