超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。
您可以使用 HTML 來建立自己的 WEB 站點,HTML 運行在瀏覽器上,由瀏覽器來解析。
服務(wù)端代碼:
#!/usr/bin/env python # -*- coding:utf-8 -*- #Author: nulige import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('localhost',8080)) sock.listen(5) while True: connection, address = sock.accept() buf = connection.recv(1024) f=open("test.html","rb") #以讀的方式打開test.html文件 data=f.read() connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8")) connection.sendall(data) connection.close() if __name__ == '__main__': main()
test.html代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>nulige</title> <title>oldboy</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> <link rel="stylesheet" href="css.css"> <script src="hello.js"></script> </head> <body> <h1>hello world</h1>> <h2>hello world</h2>> <input type="text" readonly> <p>img src="file:///D:/python/day42/1.jpg" width="120" height="80" align=</p> <h1 style="color:red">hello h1</h1> <div>style</div> </body> <!--<script>--> <!--alert(window.top.document.compatMode)--> <!--</script>--> </html>
客戶端就是瀏覽器,通過瀏覽器去訪問test.html,得到的效果如下:
示例2:訪問京東網(wǎng)站
從瀏覽器訪問京東的服務(wù)器原理圖
html css js 稱為:網(wǎng)絡(luò)三劍客
上網(wǎng):其實就是下載網(wǎng)頁
瀏覽器:就是一個解釋器
常見模式有兩種:
一種是cs模式:c: client s:server
一種是bs模式:b: browser s: server
標簽語言:<>
標簽分為:自閉合標簽和不閉合標簽
塊級標簽:只占自己字體的一小塊
內(nèi)聯(lián)標簽:占用一行
HTML 是什么?
htyper text markup language 即超文本標記語言
超文本: 就是指頁面內(nèi)可以包含圖片、鏈接,甚至音樂、程序等非文字元素。
標記語言: 標記(標簽)構(gòu)成的語言.
網(wǎng)頁==HTML文檔,由瀏覽器解析,用來展示的
靜態(tài)網(wǎng)頁:靜態(tài)的資源,如xxx.html
動態(tài)網(wǎng)頁:html代碼是由某種開發(fā)語言根據(jù)用戶請求動態(tài)生成的
html文檔樹形結(jié)構(gòu)圖:
什么是標簽
是由一對尖括號<>包裹的單詞構(gòu)成 例如: <html> *所有標簽中的單詞不可能以數(shù)字開頭.
標簽不區(qū)分大小寫.<html> 和 <HTML>. 推薦使用小寫.
標簽分為兩部分: 開始標簽<a> 和 結(jié)束標簽</a>. 兩個標簽之間的部分 我們叫做標簽體.
有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉標簽.例如: <br/> <hr/> <input /> <img />
標簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>
標簽的屬性
通常是以鍵值對形式出現(xiàn)的. 例如 name="alex"
屬性只能出現(xiàn)在開始標簽 或 自閉和標簽中.
屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="alex"
如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly
示例:
<body> <input type="text" readonly> </body>
<!DOCTYPE html>標簽
由于歷史的原因,各個瀏覽器在對頁面的渲染上存在差異,甚至同一瀏覽器在不同版本中,對頁面的渲染也不同。在
W3C標準出臺以前,瀏覽器在對頁面的渲染上沒有統(tǒng)一規(guī)范,產(chǎn)生了差異(Quirks mode或者稱為Compatibility
Mode);由于W3C標準的推出,瀏覽器渲染頁面有了統(tǒng)一的標準(CSScompat或稱為Strict mode也有叫做Standars
mode),這就是二者最簡單的區(qū)別。
W3C標準推出以后,瀏覽器都開始采納新標準,但存在一個問題就是如何保證舊的網(wǎng)頁還能繼續(xù)瀏覽,在標準出來以前,
很多頁面都是根據(jù)舊的渲染方法編寫的,如果用的標準來渲染,將導(dǎo)致頁面顯示異常。為保持瀏覽器渲染的兼容性,使以
前的頁面能夠正常瀏覽,瀏覽器都保留了舊的渲染方法(如:微軟的IE)。這樣瀏覽器渲染上就產(chǎn)生了Quircks mode
和Standars mode,兩種渲染方法共存在一個瀏覽器上。
window.top.document.compatMode: //BackCompat:怪異模式,瀏覽器使用自己的怪異模式解析渲染頁面。 //CSS1Compat:標準模式,瀏覽器使用W3C的標準解析渲染頁面。
用法示例:
<script> alert(window.top.document.compatMode) </script>
這個屬性會被瀏覽器識別并使用,但是如果你的頁面沒有DOCTYPE的聲明,那么compatMode默認就是BackCompat,
這也就是惡魔的開始 -- 瀏覽器按照自己的方式解析渲染頁面,那么,在不同的瀏覽器就會顯示不同的樣式。
如果你的頁面添加了<!DOCTYPE html>那么,那么就等同于開啟了標準模式,那么瀏覽器就得老老實實的按照W3C的
標準解析渲染頁面,這樣一來,你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。
這就是<!DOCTYPE html>的作用。
head標簽
<meta>
meta標簽的組成:meta標簽共有兩個屬性,它們分別是http-equiv屬性和name 屬性,不同的屬性又有不同的參數(shù)值,這些不同的參數(shù)值就實現(xiàn)了不同的網(wǎng)頁功能。
1: name屬性主要用于描述網(wǎng)頁,與之對應(yīng)的屬性值為content,content中的內(nèi)容主要是便于搜索引擎機器人查找信息和分類信息用的。
<meta name="keywords" content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)"> <meta name="description" content="快維工作室培訓(xùn)機構(gòu)是由一個努力哥創(chuàng)建的">
2: http-equiv顧名思義,相當于http的文件頭作用,它可以向瀏覽器傳回一些有用的信息,以幫助正確和精確地顯示網(wǎng)頁內(nèi)容,與之對應(yīng)的屬性值為content, content中的內(nèi)容其實就是各個參數(shù)的變量值。
<meta http-equiv="Refresh"content="2;URL=https://www.baidu.com"> //(注意后面的引號,分別在秒數(shù)的前面和網(wǎng)址的后面) <meta http-equiv="content-Type"charset=UTF8"> <meta http-equiv = "X-UA-Compatible"content = "IE=EmulateIE7" />
注意:X-UA-Compatible(兼容:IE6 and IE7)
每個主要版本IE新增的功能都是為了讓瀏覽器更容易使用、增加安全性及更支持業(yè)界標準。以這些作為IE的特色,其中 一個風險就是舊版本網(wǎng)站無法正確的顯示。 為了將這個風險降到最低,IE6允許網(wǎng)頁開發(fā)人員選擇IE編譯和顯示他們網(wǎng)頁的方式。"Quirks mode"為預(yù)設(shè),這會 使頁面以舊版本瀏覽器的視點顯示,"Standards mode"(也稱為"strict mode")特點是支持業(yè)界標準最為完善。 然而要利用這個增強的支持功能,網(wǎng)頁必須包含恰當?shù)?lt;!DOCTYPE>指令。 若一個網(wǎng)頁沒有包含<!DOCTYPE>指令,IE6會將它以quirks mode顯示。若網(wǎng)頁包含有效的<!DOCTYPE>指令但瀏 覽器無法辨識,IE6會將它以IE6 standards mode顯示。因為少數(shù)網(wǎng)站已經(jīng)包含<!DOCTYPE>指令,兼容性模式的 切換相當成功。這使網(wǎng)頁開發(fā)人員能選擇將他們的網(wǎng)頁轉(zhuǎn)移為standards mode的最佳時機。 隨著時間經(jīng)過,更多網(wǎng)站開始使用standards mode。它們也開始使用IE6的特性和功能來檢測IE。舉例來說,IE6 不支持universal selector(即css之全局選擇器 * {}),一些網(wǎng)站便使用它來針對IE做特定的對應(yīng)。 當 IE7增加了對全域選擇器的支持,那些依賴IE6特點的網(wǎng)站便無法偵測出這個新版本的瀏覽器。因此那些針對IE的 特定對應(yīng)無法應(yīng)用于IE7,造成這些網(wǎng)站便無法如他們預(yù)期的顯示。由于<!DOCTYPE>只支持兩種兼容性模式,受到影 響的網(wǎng)站擁有者被迫更新他們的網(wǎng)站使其能支持IE7。 IE8 比之前的任何版本瀏覽器都更支持業(yè)界標準,因此針對舊版本瀏覽器設(shè)計的網(wǎng)頁可能無法如預(yù)期般呈現(xiàn)。為了幫 助減輕所有問題,IE8引入文件兼容性的概念,使你能選擇你的網(wǎng)頁設(shè)計要對應(yīng)的特定IE版本。文件兼容性在IE8增加 了一些新的模式,這些模式能告訴瀏覽器如何解析和編譯一個網(wǎng)頁。若你的網(wǎng)頁無法在 ie8正確的顯示,你可以更新 你的網(wǎng)站使它支持最新的網(wǎng)頁標準(優(yōu)先選項)或在你的頁面上新增一個meta元素用于告訴IE8如何依照舊版本瀏覽器 編譯你的頁面。 這能讓你選擇將你的網(wǎng)站更新支持IE8新特點的時機。 當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網(wǎng)頁時,它將使用 <!DOCTYPE> 指令來確 定如何顯示該網(wǎng)頁。 如果該指令丟失或未指定基于標準的文檔類型,則 Internet Explorer 8 將以 IE5 模式 (Quirks 模式)顯示該網(wǎng)頁。
非meta標簽
<title>nulige</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> <link rel="stylesheet" href="css.css"> <script src="hello.js"></script>
body標簽
設(shè)置標簽背景色
<h3 style="padding: 2px 0px 2px 10px; font-size: 15px; line-height: 24px; background: #009acd; color: #ffffff; font-family: 'comic sans ms', 微軟雅黑, 宋體, 黑體, Arial; height: 24px; width: 507.47px; margin: 12px 0px !important;">body標簽</h3>
一 基本標簽(塊級標簽和內(nèi)聯(lián)標簽)
<hn>: n的取值范圍是1~6; 從大到小. 用來表示標題. <h1> hello world <h1> <p>: 段落標簽. 包裹的內(nèi)容被換行.并且也上下內(nèi)容之間有一行空白. (塊級標簽) <b> <strong>: 加粗標簽. <strike>: 為文字加上一條中線. <em>: 文字變成斜體. <sup>和<sub>: 上角標 和 下角表. <br>:換行. <hr>:水平線 <div> <div> hello world</div> 就是什么都不做(重點) <span> :只占一小塊空間 (內(nèi)聯(lián)標簽) 內(nèi)聯(lián)標簽:只能嵌套內(nèi)聯(lián)標簽 塊級標簽:可以嵌套內(nèi)聯(lián)標簽
示例:演示div標簽
<div style="color: green; background-color: aquamarine;height: 100px;width: 50%;font-size: 40px;text-align: center">hello</div>
運行效果:
塊級標簽:<p><h1><table><ol><ul><form><div>
內(nèi)聯(lián)標簽:<a><input><img><sub><sup><textarea><span>
block(塊)元素的特點
總是在新行上開始;
寬度缺省是它的容器的100%,除非設(shè)定一個寬度。
它可以容納內(nèi)聯(lián)元素和其他塊元素
inline元素的特點
和其他元素都在一行上;
寬度就是它的文字或圖片的寬度,不可改變
內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
特殊字符
大于 = < 小于=>;";©® 空格=nbsp
HTML 特殊符號編碼對照表
參考:http://tool.chinaz.com/Tools/HtmlChar.aspx
CSS樣式參考:
http://v3.bootcss.com/
二 圖形標簽: <img>
src: 要顯示圖片的路徑. alt: 圖片沒有加載成功時的提示. title: 鼠標懸浮時的提示信息. width: 圖片的寬 height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
示例:打開一張圖片
<body> <img src="1.jpg" alt="截圖" title="京東" width="200px" height="200"> </body>
三 超鏈接標簽(錨標簽) <a>
href:要連接的資源路徑 格式如下: href="http://www.baidu.com" target: _blank : 在新的窗口打開超鏈接. 框架名稱: 在指定框架中打開連接內(nèi)容. name: 定義一個頁面的書簽. 用于跳轉(zhuǎn) href : #id.(錨)
示例:
<body> <a href="http://www.xiaohuar.com">?;ňW(wǎng)</a>> <a href="http://www.xiaohuar.com" target="_blank">?;ňW(wǎng)</a>> <a href="http://www.xiaohuar.com" target="_blank"><img src="1.jpg" alt="">?;ňW(wǎng)</a>> #實現(xiàn)打開圖片自動跳轉(zhuǎn)到?;ňW(wǎng) </body>
四 列表標簽:
<ul>: 無序列表 <ol>: 有序列表 <li>:列表中的每一項. <dl> 定義列表 <dt> 列表標題 <dd> 列表項
示例:
<body> #unorder list <ul> #快捷鍵,輸入ul,再按tab鍵會自動補全 <li>111</li> <li>222</li> <li>333</li> </ul> #older list <ol> <li>111</li> <li>222</li> <li>333</li> </ol> #定義列表 <dl> <dt>第一章</dt> <dd>第一節(jié)</dd> <dd>第二節(jié)</dd> </dl> </body>
執(zhí)行效果:
五 表格標簽: <table>
border: 表格邊框. cellpadding: 內(nèi)邊距 cellspacing: 外邊距. width: 像素 百分比.(最好通過css來設(shè)置長寬) <tr>: table row <th>: table head cell <td>: table data cell rowspan: 單元格豎跨多少行 colspan: 單元格橫跨多少列(即合并單元格) <th>: table header <tbody>(不常用): 為表格進行分區(qū).
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--表格--> <!--布局--> <table border="1px" cellpadding="5px" cellspacing="5px"> <thead> <tr> <!--標題加粗--> <th>111</th> <th>222</th> <th>333</th> </tr> </thead> <tbody> <tr> <!--內(nèi)容正常顯示,不加粗--> <td rowspan="2">111</td> <td>222</td> <td>333</td> </tr> <tr> <td>111</td> <td>222</td> </tr> <tr> <td>111</td> <td colspan="2">222</td> </tr> </tbody> </table> </body> </html>
執(zhí)行結(jié)果:
六 表單標簽<form>
表單用于向服務(wù)器傳輸數(shù)據(jù)。
表單能夠包含 input 元素,比如文本字段、復(fù)選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label 元素。
1.表單屬性
HTML 表單用于接收不同類型的用戶輸入,用戶提交表單時向服務(wù)器傳輸數(shù)據(jù),從而實現(xiàn)用戶與Web服務(wù)器的交互。表單標簽, 要提交的所有內(nèi)容都應(yīng)該在該標簽中.
action: 表單提交到哪. 一般指向服務(wù)器端一個程序,程序接收到表單提交過來的數(shù)據(jù)(即表單元素值)作相應(yīng)處理,比如https://www.sogou.com/web
method: 表單的提交方式 post/get 默認取值 就是 get(信封)
get: 1.提交的鍵值對.放在地址欄中url后面. 2.安全性相對較差. 3.對提交內(nèi)容的長度有限制.
post:1.提交的鍵值對 不在地址欄,數(shù)據(jù)封裝在form Data 請求體里面。 2.安全性相對較高. 3.對提交內(nèi)容的長度理論上無限制.
get/post是常見的兩種請求方式.
2.表單元素
<input> 標簽的屬性和對應(yīng)值
type: text 文本輸入框 password 密碼輸入框 radio 單選框 checkbox 多選框 submit 提交按鈕 button 按鈕(需要配合js使用.) button和submit的區(qū)別? file 提交文件:form表單需要加上屬性enctype="multipart/form-data" name: 表單提交項的鍵.注意和id屬性的區(qū)別:name屬性是和服務(wù)器通信時使用的名稱;而id屬性是瀏覽器端使用的名稱,該屬性主要是為了方便客 戶端編程,而在css和javascript中使用的 value: 表單提交項的值.對于不同的輸入類型,value 屬性的用法也不同: 2 4 type="button", "reset", "submit" - 定義按鈕上的顯示的文本 type="text", "password", "hidden" - 定義輸入字段的初始值 type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值 checked: radio 和 checkbox 默認被選中 readonly: 只讀. text 和 password disabled: 對所用input都好使.
示例:寫一個注冊頁面
代碼1:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>注冊頁面</h1> <!--action:就是提交數(shù)據(jù)到服務(wù)端 method{get,post}默認:get--> <!--<form action="http://127.0.0.1:8080/index" method="post">--> <!--上傳文件加這句--> <form action="http://127.0.0.1:8080/index" method="post" enctype="multipart/form-data"> <!--輸入框--> <!--type="" 隨便輸入一個內(nèi)容--> <p>用戶名:<input type="test" name="username" placeholder="姓名"></p> <!--password:不顯示密碼--> <p>密碼:<input type="password" name="password" placeholder="密碼"></p> <!--password:不顯示密碼,只讀不能寫密碼--> <!--<p>密碼:<input type="password" name="password" placeholder="密碼" readonly="readonly"></p>--> <!--多選框--> <p>愛好: 音樂<input type="checkbox" name="hobby" value="music"> 電影<input type="checkbox" name="hobby" value="movie"></p> <!--單選框--> <p>性別: 男<input type="radio" name="gender" value="men"> 女<input type="radio" name="gender" value="women"></p> <!--重置 --> <p><input type="reset" value="重置"></p> <!--提交:會觸發(fā)事件,提交給服務(wù)端--> <p><input type="submit" value="提交注冊"></p> <!--提交按鍵:不會觸發(fā)內(nèi)容--> <p><input type="button" value="提交注冊"></p> <!--選擇文件--> <p><input type="submit" value="提交注冊"></p> </form> </body> </html>
代碼2 1 <!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>注冊頁面</h1> <!--<strike>用戶注冊</strike>--> #劃掉“用戶注冊”幾個字 <!--action:就是提交數(shù)據(jù)到服務(wù)端 method{get,post}默認:get--> <!--<form action="http://127.0.0.1:8080/index" method="post">--> <!--上傳文件加這句--> <form action="http://127.0.0.1:8080/index" method="post" enctype="multipart/form-data"> <!--輸入框--> <!--type="" 隨便輸入一個內(nèi)容--> <p>用戶名:<input type="test" name="username" placeholder="姓名" disabled></p> <!--password:不顯示密碼--> <p>密碼:<input type="password" name="password" placeholder="密碼"></p> <!--password:不顯示密碼,只讀不能寫密碼--> <!--<p>密碼:<input type="password" name="password" placeholder="密碼" readonly="readonly"></p>--> <!--多選框--> <p>愛好: 音樂<input type="checkbox" name="hobby" value="music" checked> 電影<input type="checkbox" name="hobby" value="movie"></p> <!--單選框--> <p>性別: 男<input type="radio" name="gender" value="men"> 女<input type="radio" name="gender" value="women"></p> <!--重置 --> <p><input type="reset" value="重置"></p> <!--提交:會觸發(fā)事件,提交給服務(wù)端--> <p><input type="submit" value="提交注冊"></p> <!--提交按鍵:不會觸發(fā)內(nèi)容--> <p><input type="button" value="提交注冊"></p> <!--選擇文件--> <p><input type="submit" value="提交注冊"></p> </form> </body> </html>
執(zhí)行結(jié)果:
實現(xiàn):返回頂部功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="www"></div> <img src="1.jpg" alt="截圖" title="京東" width="800" height="800"><br> <a href="#www">返回頂部</a> </body> </html>
執(zhí)行效果:
示例:實現(xiàn)上傳文件功能
在服務(wù)端里面添加這段代碼:
#實現(xiàn)上傳文件效果 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')
前端頁面代碼:
實現(xiàn):上傳文件功能
<body> <form> <!--上傳文件--> <p><input type="file" ></p> </form> </body>
<select> 下拉選標簽屬性
name:表單提交項的鍵. size:選項個數(shù) multiple:multiple <option> 下拉選中的每一項 屬性: value:表單提交項的值. selected: selected下拉選默認被選中 <optgroup>為每一項加上分組
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 省<select name="" id=""> <option value="">北京市</option> <option value="">河北市</option> <option value="">河南市</option> <option value="">山西市</option> </select> 省<select name="province" multiple size="2"> <option value="beijing">北京市</option> <option value="hebei">河北市</option> <!--默認選中河南省selected--> <option value="henan" selected="selected">河南市</option> <option value="shanxi">山西市</option> </select> <!--選擇框--> 省<select name="province" > <optgroup label="廣東省"> <option value="beijing">廣州</option> <option value="hebei">東莞</option> <!--默認選中河南省selected--> <option value="henan" selected="selected">中山市</option> <option value="shanxi">珠海市</option> </optgroup> </select> </body> </html>
執(zhí)行結(jié)果:
<textarea> 文本域
name: 表單提交項的鍵. cols: 文本域默認有多少列 rows: 文本域默認有多少行
<label>
<label for="www">姓名</label> <input id="www" type="text">
<fieldset>
<fieldset> <legend>登錄吧</legend> <input type="text"> </fieldset>
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--文本框--> 簡介<textarea name="desc" id="" cols="30" rows="10"></textarea> <fieldset> <legend>登錄吧</legend> <input type="text"> </fieldset> <!--特效--> <label for="www">姓名</label> <input id="www" type="text"> </body> </html>
執(zhí)行結(jié)果:
最后總結(jié):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <!--提交數(shù)據(jù)到服務(wù)端(方式有g(shù)et and post)--> <form action="http://127.0.0.1:8080/index" method="post"> <!--input標簽的屬性和對應(yīng)值--> <input type="test" name="username"> <input type="password" name="pwd"> <input type="checkbox" name="hobby" value="musci"> <input type="radio" name="gender" value="man"> <input type="file" name="filename" > <input type="submit" name="提交" > <input type="button" name="提交" > <input type="reset" name="重置" > <!--下拉選標簽屬性--> <select name=""> <option value=""></option> <option value=""></option> </select> <!--文本域--> 簡介<textarea name="" id="" cols="30" rows="10"></textarea> </form> </body> </html>
更多前端之html語言相關(guān)文章請關(guān)注PHP中文網(wǎng)!
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com