HTML介紹

web服務本質

import socket def 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()

web本質之socket

html說明

html是什麼

超文本標記語言（Hypertext Markup Language，HTML）經過標籤語言來標記要顯示的網頁中的各個部分。一套規則，瀏覽器認識的規則 瀏覽器按順序渲染網頁文件，而後根據標記符解釋和顯示內容。但須要注意的是，對於不一樣的瀏覽器，對同一標籤可能會有不徹底相同的解釋（兼容性） 靜態網頁文件擴展名：.html 或 .htm

html不是什麼

HTML 不是一種編程語言，而是一種標記語言 (markup language) HTML 使用標記標籤來描述網頁

html結構

<!DOCTYPE html> 告訴瀏覽器使用什麼樣的html或者xhtml來解析html文檔
<html></html>是文檔的開始標記和結束標記。此元素告訴瀏覽器其自身是一個 HTML 文檔，在它們之間是文檔的頭部<head>和主體<body>。
<head></head>元素出如今文檔的開頭部分。<head>與</head>之間的內容不會在瀏覽器的文檔窗口顯示，可是其間的元素有特殊重要的意義。
<title></title>定義網頁標題，在瀏覽器標題欄顯示。
<body></body>之間的文本是可見的網頁主體內容

標籤說明

標籤格式

標籤的語法：javascript

<標籤名屬性1=「屬性值1」屬性2=「屬性值2」……>內容部分</標籤名>
<標籤名屬性1=「屬性值1」屬性2=「屬性值2」…… />css

幾個重要的標籤屬性

id：定義標籤的惟一ID，HTML文檔樹中惟一 class：爲html元素定義一個或多個類名（classname）(CSS樣式類名) style：規定元素的行內樣式（CSS樣式）

註釋

<!--註釋內容-->

塊級標籤和內聯標籤說明

塊級元素與行內元素的區別： 所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。 這兩個元素是專門爲定義CSS樣式而生的。 注意： 關於標籤嵌套：一般塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。 p標籤不能包含塊級標籤。

經常使用標籤

<!DOCTYPE>標籤

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標籤以前。 <!DOCTYPE> 聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪一個 HTML 版本進行編寫的指令。

<head>內經常使用標籤

標籤	意義
<title></title>	定義網頁標題
<style></style>	定義內部樣式表
<script></script>	定義JS代碼或引入外部JS文件
<link/>	引入外部樣式表文件
<meta/>	定義網頁原信息

meta標籤

Meta標籤介紹： <meta>元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。 <meta>標籤位於文檔的頭部，不包含任何內容。 <meta>提供的信息是用戶不可見的。 meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。

(1)http-equiv屬性：至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。 html

<!--2秒後跳轉到對應的網址，注意引號-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文檔的編碼類型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告訴IE以最高級模式渲染文檔-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

meta標籤的http-equiv屬性

2.name屬性: 主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。前端

<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="老男孩教育Python學院">

meta標籤的name屬性

其餘標籤：title、link、style。script等

<!-- 標題，顯示在瀏覽器標籤 -->
<title>oldboy</title>

<link rel="icon" href="http://www.jd.com/favicon.ico">

<!-- 引入CSS文件 -->
<link rel="stylesheet" href="css.css">

<!-- 定義css -->
<style> ...定義css... </style>

<!-- 引入js文件 -->
<script src="hello.js"></script>

<!-- 在head定義js -->
<script> ....定義js... </script>

其餘標籤：title、link、style。script等

<body>內經常使用標籤

基本標籤

<!-- 乾淨的標籤 -->
<div>塊級標籤、無任何樣式</div>
<span>內聯標籤、無任何樣式</span>


<!-- 其餘經常使用標籤 -->
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>

<p>段落標籤</p>

<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除</s>

<!--換行-->
<br>

<!--水平線-->
<hr>

特殊字符

特殊符號	命名實體	十進制編碼	特殊符號	命名實體	十進制編碼	特殊符號	命名實體	十進制編碼
Α	Α	Α	Β	Β	Β	Γ	Γ	Γ
Δ	Δ	Δ	Ε	Ε	Ε	Ζ	Ζ	Ζ
Η	Η	Η	Θ	Θ	Θ	Ι	Ι	Ι
Κ	Κ	Κ	Λ	Λ	Λ	Μ	Μ	Μ
Ν	Ν	Ν	Ξ	Ξ	Ξ	Ο	Ο	Ο
Π	Π	Π	Ρ	Ρ	Ρ	Σ	Σ	Σ
Τ	Τ	Τ	Υ	Υ	Υ	Φ	Φ	Φ
Χ	Χ	Χ	Ψ	Ψ	Ψ	Ω	Ω	Ω
α	α	α	β	β	β	γ	γ	γ
δ	δ	δ	ε	ε	ε	ζ	ζ	ζ
η	η	η	θ	θ	θ	ι	ι	ι
κ	κ	κ	λ	λ	λ	μ	μ	μ
ν	ν	ν	ξ	ξ	ξ	ο	ο	ο
π	π	π	ρ	ρ	ρ	ς	&sigmaf;	ς
σ	σ	σ	τ	τ	τ	υ	υ	υ
φ	φ	φ	χ	χ	χ	ψ	ψ	ψ
ω	ω	ω	ϑ	&thetasym;	ϑ	ϒ	&upsih;	ϒ
ϖ	ϖ	ϖ	•	•	•	…	…	…
′	′	′	″	″	″	‾	&oline;	‾
⁄	&frasl;	⁄	℘	&weierp;	℘	ℑ	&image;	ℑ
ℜ	&real;	ℜ	™	™	™	ℵ	&alefsym;	ℵ
←	←	←	↑	↑	↑	→	→	→
↓	↓	↓	↔	↔	↔	↵	&crarr;	↵
⇐	⇐	⇐	⇑	&uArr;	⇑	⇒	⇒	⇒
⇓	&dArr;	⇓	⇔	⇔	⇔	∀	∀	∀
∂	∂	∂	∃	∃	∃	∅	∅	∅
∇	∇	∇	∈	∈	∈	∉	∉	∉
∋	&ni;	∋	∏	∏	∏	∑	∑	−
−	−	−	∗	&lowast;	∗	√	√	√
∝	&prop;	∝	∞	∞	∞	∠	&ang;	∠
∧	&and;	⊥	∨	&or;	⊦	∩	∩	∩
∪	∪	∪	∫	∫	∫	∴	&there4;	∴
∼	&sim;	∼	≅	&cong;	≅	≈	≈	≅
≠	≠	≠	≡	&equiv;	≡	≤	≤	≤
≥	≥	≥	⊂	⊂	⊂	⊃	⊃	⊃
⊄	&nsub;	⊄	⊆	&sube;	⊆	⊇	&supe;	⊇
⊕	&oplus;	⊕	⊗	&otimes;	⊗	⊥	&perp;	⊥
⋅	⋅	⋅	⌈	&lceil;	⌈	⌉	&rceil;	⌉
⌊	&lfloor;	⌊	⌋	&rfloor;	⌋	◊	&loz;	◊
♠	&spades;	♠	♣	&clubs;	♣	♥	&hearts;	♥
♦	&diams;	♦				¡	¡	¡
¢	¢	¢	£	£	£	¤	¤	¤
¥	¥	¥	¦	¦	¦	§	§	§
¨	¨	¨	©	©	©	ª	ª	ª
«	«	«	¬	¬	¬
®	®	®	¯	¯	¯	°	°	°
±	±	±	²	²	²	³	³	³
´	´	´	µ	µ	&#181	"	"	"
<	<	<	>	>	>	'		'

乾淨的div標籤和span標籤

div標籤用來定義一個塊級元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現。
span標籤用來定義內聯(行內)元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現。java

<div>無樣式，塊級標籤</div>

<span>無樣式，內聯標籤</span>

div和span 使用

img標籤

<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">

img 使用

a標籤

<a href="http://www.oldboyedu.com" target="_blank" >點我</a>



<!-- href屬性指定目標網頁地址。該地址能夠有幾種類型： 絕對URL - 指向另外一個站點（好比 href="http://www.jd.com） 相對URL - 指當前站點中確切的路徑（href="index.htm"） 錨URL - 指向頁面中的錨（href="#top"） target： _blank表示在新標籤頁中打開目標網頁 _self表示在當前標籤頁中打開目標網頁 -->

a 使用

列表（ul、ol、dl）

<ul type="disc">
  <li>第一項</li>
  <li>第二項</li>
</ul>




<!-- type屬性： disc（實心圓點，默認值） circle（空心圓圈） square（實心方塊） none（無樣式） -->

無序列表

<ol type="1" start="2">
  <li>第一項</li>
  <li>第二項</li>
</ol>



<!-- type屬性： 1 數字列表，默認值 A 大寫字母 a 小寫字母 Ⅰ大寫羅馬 ⅰ小寫羅馬 -->

有序列表

<dl>
  <dt>標題1</dt>
  <dd>內容1</dd>
  <dt>標題2</dt>
  <dd>內容1</dd>
  <dd>內容2</dd>
</dl>

標題列表

表格（table）

<!-- 表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里能夠包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。 表格最重要的目的是顯示錶格類數據。表格類數據是指最適合組織爲表格格式（即按行和列組織）的數據。 表格的基本結構： -->

<table>
  <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>


<!-- 屬性: border: 表格邊框. cellpadding: 內邊距 cellspacing: 外邊距. width: 像素 百分比.（最好經過css來設置長寬） rowspan: 單元格豎跨多少行 colspan: 單元格橫跨多少列（即合併單元格） -->

table

表單（form）

功能： 表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互 表單可以包含input系列標籤，好比文本字段、複選框、單選框、提交按鈕等等。 表單還能夠包含textarea、select、fieldset和 label標籤。

form說明

表單屬性web

屬性	描述
accept-charset	規定在被提交表單中使用的字符集（默認：頁面字符集）。
action	規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete	規定瀏覽器應該自動完成表單（默認：開啓）。
enctype	規定被提交數據的編碼（默認：url-encoded）。
method	規定在提交表單時所用的 HTTP 方法（默認：GET）。
name	規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
novalidate	規定瀏覽器不驗證表單。
target	規定 action 屬性中地址的目標（默認：_self）。

基本概念： HTML表單是HTML元素中較爲複雜的部分，表單每每和腳本、動態頁面、數據處理等功能相結合，所以它是製做動態網站很重要的內容。 表單通常用來收集用戶的輸入信息 表單工做原理： 訪問者在瀏覽有表單的網頁時，可填寫必需的信息，而後按某個按鈕提交。這些信息經過Internet傳送到服務器上。 服務器上專門的程序對這些數據進行處理，若是有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成的信息

基本概念及工做原理

input標籤

<input> 元素會根據不一樣的 type 屬性，變化爲多種形態。編程

type屬性值	表現形式	對應代碼
text	單行輸入文本	<input type=text" />
password	密碼輸入框	<input type="password" />
date	日期輸入框	<input type="date" />
checkbox	複選框	<input type="checkbox" checked="checked" />
radio	單選框	<input type="radio" />
submit	提交按鈕	<input type="submit" value="提交" />
reset	重置按鈕	<input type="reset" value="重置" />
button	普通按鈕	<input type="button" value="普通按鈕" />
hidden	隱藏輸入框	<input type="hidden" />
file	文本選擇框	<input type="file" />

屬性說明: name：表單提交時的「鍵」，注意和id的區別 value：表單提交時對應項的值 type="button", "reset", "submit"時，爲按鈕上顯示的文本年內容 type="text","password","hidden"時，爲輸入框的初始值 type="checkbox", "radio", "file"，爲輸入相關聯的值 checked：radio和checkbox默認被選中的項 readonly：text和password設置只讀 disabled：全部input均適用

以上input標籤的屬性說明

 file 提交文件： form表單須要加上屬性enctype="multipart/form-data" 上傳文件注意兩點： 1 請求方式必須是post 2 enctype="multipart/form-data"

file說明

select標籤

<select> 下拉選標籤屬性 name:表單提交項的鍵. size：選項個數 multiple：multiple <optgroup>爲每一項加上分組 <option> 下拉選中的每一項 屬性： value:表單提交項的值. selected: selected下拉選默認被選中 <!-- 屬性說明： multiple：布爾屬性，設置後爲多選，不然默認單選 disabled：禁用 selected：默認選中該項 value：定義提交時的選項值 -->

select標籤

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">廣州</option>
    <option value="4">深圳</option>
  </select>
</form>



<!-- 屬性說明： multiple：布爾屬性，設置後爲多選，不然默認單選 disabled：禁用 selected：默認選中該項 value：定義提交時的選項值 -->

select例子

label標籤

<!-- 定義：<label> 標籤爲 input 元素定義標註（標記）。 說明： label 元素不會向用戶呈現任何特殊效果。 <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。 -->


<form action="">
  <label for="username">用戶名</label>
  <input type="text" id="username" name="username">
</form>

label標籤

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10"> 默認內容 </textarea>


<!-- 屬性說明： name：名稱 rows：行數 cols：列數 disabled：禁用 -->

textarea多行標籤

<fieldset>標籤

<fieldset>
    <legend>登陸吧</legend>
    <input type="text">
</fieldset>

fieldset標籤

HTML的規範

一、HTML代碼的基本規範

一、全部元素建議小寫 HTML代碼全部的標籤名和屬性應該都爲小寫，雖然HTML代碼是大小寫不敏感的，可是W3c的規範建議爲小寫；屬性值應該用雙引號包括。 二、全部的關鍵元素定義元素的id和class，適當使用下劃線（_）和中劃線（-） 給全部的關鍵元素定義元素的id和class，便於和CSS，JavaScript的交互；id名稱中的關鍵詞用下劃線（_）鏈接，class的關鍵詞用中劃線（-）鏈接，根據實際的意義和Dom樹的層級關係定義合適的名稱。 三、4格縮進，空元素獨佔一行 HTML代碼的層級縮進爲4個空格；值爲空的元素定義應該單獨佔用一行；包含子元素的元素的起始標籤和閉合標籤分別單獨佔用一行。 例子： <div id="info_container" class="info-container">
    <div class="container-top"></div>
    <article> ... </article>
    <div class="container-bottom"></div>
</div>

HTML的命名和格式

樣式能夠直接寫在標籤的style屬性裏面，也能夠寫在頁面head區域的style標籤裏面，這兩種方式都是很差的方式，尤爲第一種方式。應該把樣式單獨寫到css樣式文件中，方便代碼的重用和維護。

CSS代碼和HTML代碼分離

一、全部的HTML標籤應該正確閉合；全部的元素定義都要有起始和閉合標籤，即便元素的值爲空，除了以下這些標籤，以下的標籤是能夠自閉合：<br/><hr/><input/><img/>等。 二、中止規範不支持的標籤，以下的標籤規範已經不推薦使用，儘管瀏覽器能夠正確的解析：<center><font><s><strike><u><menu>等。 三、中止使用規範不支持的屬性，以下的屬性已經不推薦使用：body的background屬性，某些標籤的align屬性，td和th上的nowrap屬性，某些標籤的width和height屬性等。其實這些規範不推薦的標籤和屬性都是一些影響外觀的標籤和屬性，均可以經過CSS樣式來設置

寫標準的HTML代碼

二、高可讀性的HTML代碼

HTML代碼不是純粹爲了讓瀏覽器展示，也須要良好的可讀性，方便代碼的檢查和維護，更重要的是各類搜索引擎也能更好地識別頁面內容，因此要寫有語義的HTML代碼，即常常提到的HTML標籤語義化。 div和span是兩個典型的沒有任何語義的標籤，因此使用這兩個標籤以前先確認，是否有更具備語義的標籤能夠代替。 <h1>~<h6> h1到h6是做爲標題的，h1是最高級別的標題，網頁中顯示標題的地方應該使用這些標題標籤。 <em>和<strong> 這兩個標籤的語義是強調和重點強調，代替了沒有任何語義的標籤<i>和<b>。 <table> table標籤最先是常常用於佈局，至今還有大量的頁面是由table來佈局的，table佈局遭到了前端工程師們的一致唾棄，使得不少新手不敢使用這個標籤了，這裏要強調的是table的語義是表格，若是須要列出一些統計數據等，table標籤是首選。 <ul>，<ol>，<li>

<ul>是無序列表，<ol>是有序列表，因此網頁的導航菜單最合適用ul，而一些有序的列表，好比章節列表等，則應該用ol標籤。 很差例子： <div class="title">文章標題</div>
 
<p> 正文內容，<b>須要強調的內容</b>
</p>
 
<div class="main-menu">
    <span>導航1</span>
    <span>導航2</span>
    <span>導航3</span>
</div> 好的例子： <h1>文章標題</h1>
 
<p> 正文內容，<strong>須要強調的內容</strong>
</p>
 
<ul class="main-menu">
    <li>導航1</li>
    <li>導航2</li>
    <li>導航3</li>
</ul>

合適的地方用合適的標籤

meta信息描述有關頁面的信息，放在頁面的head部分，用於搜索引擎更友好的識別。以下是經常使用的一些定義： <meta name="author" content="John Doe">
<meta name="copyright" content="&copy; 1997 Acme Corp.">
<meta name="keywords" content="corporate,guidelines,cataloging">
<meta name="date" content="1994-11-06T08:49:37+00:00">

給頁面添加必要的meta

<img>標籤的alt屬性的做用是當圖片不能正常顯示的時候的替換文字，<a>標籤的title屬性可做爲說明信息，而且當鼠標hover時顯示爲提示信息。

不要省略某些標籤的屬性

三、高性能的HMTL代碼

JavaScript文件的下載和解析會阻塞頁面的加載，因此在head部分，CSS的引用寫在前面，而JavaScript文件的引用寫在後面； 另外script標籤有兩個屬性async和defer,defer設置爲true,則意味着此JavaScript文件滯後執行,不影響頁面HTML的渲染，async是HTML5中新引入的屬性，已經獲得了大多數現代瀏覽器的支持，此屬性設置爲true意味着文件異步加載和執行。兩個屬性的區別是async下載完成後就會執行，而defer則會仍是按照在頁面的的次序來執行，因此下載和執行不必定會連續。能夠根據實際的項目狀況設置這兩個屬性，提升頁面加載的速度。

CSS文件在前，JavaScript文件在後，JavaScript代碼放到頁面底部

越精簡的HTML代碼，頁面的傳輸的時間就會越短，頁面的渲染的時間也會更快,相應的用戶體驗就會越好，因此頗有必要精簡頁面加載的HTML代碼。 頁面的精簡主要從以下幾個地方入手： 一、刪除多餘標籤 二、動態加載和渲染非關鍵區域

精簡HTML代碼

iframe有兩個缺點：1，iframe會阻塞主頁面的Onload事件；2，iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。使用iframe以前須要考慮這兩個缺點。 若是須要使用iframe，最好是經過javascript動態給iframe添加src屬性值，這樣能夠能夠繞開以上兩個問題。

謹慎使用iframe

前端_html

目錄

HTML介紹

web服務本質

html說明

html是什麼

html不是什麼

html結構

標籤說明

標籤格式

幾個重要的標籤屬性

註釋

塊級標籤和內聯標籤說明

經常使用標籤

<!DOCTYPE>標籤

<head>內經常使用標籤

meta標籤

其餘標籤：title、link、style。script等

<body>內經常使用標籤

基本標籤

特殊字符

乾淨的div標籤和span標籤

img標籤

a標籤

列表（ul、ol、dl）

表格（table）

表單（form）

input標籤

select標籤

label標籤

textarea多行文本

<fieldset>標籤

HTML的規範

一、HTML代碼的基本規範

二、高可讀性的HTML代碼

三、高性能的HMTL代碼