前端三劍客---HTML、CSS
一、web服務的本質
服務端：
import socket
sock=socket.socket()
sock.bind(("127.0.0.1",8800))
sock.listen(5)
while 1:
print("waiting....")
conn,addr=sock.accept()
data=conn.recv(1024)
print(‘data‘,data)
with open("index.html") as f:
response=f.read()
conn.send(("HTTP/1.1 201 OK\r\n\r\n %s" %response).encode("utf8")) #聲明通信的協議
conn.close()
二、html
HTML：超文本編輯語言，通過標簽語言來標記要顯示的網頁中的各個部分，瀏覽器認識的規則，它是一種標記語言，不是編程語言，使用標記標簽來描述網頁
靜態網頁文件擴展名：.html 或 .htm
1.html結構
<!DOCTYPE html> #聲明解析html文檔的格式
<html lang="en"> #<html> </html>是文檔的開始標記和結束標記<head> #<head></head>元素出現在文檔的開頭部分
<title>網頁標題</title> #<title></title>定義網頁標題
</head>
<body> #<body></body>之間的文本是可見的網頁主體內容
</body>
</html>
<!DOCTYPE html> 告訴瀏覽器使用什麽樣的html或者xhtml來解析
<html></html>是文檔的開始標記和結束標記。此元素告訴瀏覽器其自身是一個 HTML 文檔，在它們之間是文檔的頭部<head>和主體<body>。
<head></head>元素出現在文檔的開頭部分。<head>與</head>之間的內容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。
<title></title>定義網頁標題，在瀏覽器標題欄顯示。
<body></body>之間的文本是可見的網頁主體內容
2.html標簽格式
標簽的語法：
<標簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標簽名>
<標簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
a.由尖括號包圍的關鍵字。如<html>
b.通常是成對出現的（雙邊標記）。如<div></div>
c.標簽不區分大小寫，推薦使用小寫
d.標簽分為兩部分：開始標簽<a>和結束標簽</a>，兩個標簽之間的部分叫做標簽體，有些標簽功能比較簡單，使用一個標簽即可，這種標簽叫做自閉和標簽。如<br/>、<hr/>、<input/>、<img/>
e.標簽可以有若幹屬性，也可以不帶屬性。如<head>元素不帶任何屬性
f.標簽可以嵌套，但不能交叉嵌套。如<a><b><a/><b/>
3.常用標簽
標簽分為兩類：
block（塊級標簽）---自己獨占一行
inline（內聯標簽）---按內容劃分
<!DOCTYPE>
聲明位於文檔中的最前面的位置，處於<html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範
作用：聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式
document.compatMode：
BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面
CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面
如果未指定DOCTYPE聲明，則默認使用BackCompat
<head>內常用標簽
<meta>標簽
<meta>元素可提供有關頁面的元信息（meta-information），針對搜索引擎和更新頻度的描述和關鍵詞
<meta>標簽位於文檔的頭部，不包含任何內容。
<meta>提供的信息是用戶不可見的
meta標簽的組成：meta標簽共有兩個屬性
name屬性: 主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
http-equiv屬性：相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值
非meta標簽
<title></title>
<link rel=”icon” href=”www.baidu.com”>
<link rel="stylesheet"href="css.css">
<scriptsrc="hello.js"></script>
<body>內常用標簽
基本標簽（塊級標簽和內聯標簽）
<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.
<p>: 段落標簽. 包裹的內容被換行.並且也上下內容之間有一行空白.
<b> <strong>: 加粗標簽.
<strike>: 為文字加上一條中線.
<em>: 文字變成斜體.
<sup>和<sub>: 上角標 和 下角表.
<br>:換行.
<hr>:水平線
<div>和<span>
<div></div>：塊級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現
<span></span>：表示了內聯行(行內元素),並無實際的意義,主要通過CSS樣式為其賦予不同的表現
如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響，這兩個元素是專門為定義CSS樣式而生的
<img>圖形標簽
src：要顯示圖片的路徑.
alt：圖片沒有加載成功時的提示.
title：鼠標懸浮時的提示信息.
width：圖片的寬
height：圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
<a></a>超鏈接標簽（錨標簽）
指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序
什麽是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=""target="_blank" >click</a>
href屬性指定目標網頁地址。該地址可以有幾種類型：
絕對 URL - 指向另一個站點（比如 href="http://www.jd.com）
相對 URL - 指當前站點中確切的路徑（href="index.htm"）
錨 URL - 指向頁面中的錨（href="#top"）
列表標簽
<ul>：無序列表 [type屬性：disc(實心圓點)(默認)、circle(空心圓圈)、square(實心方塊)]
<ol>：有序列表
<li>：列表中的每一項.
<dl>：定義列表
<dt> 列表標題
<dd> 列表項
<table>表格標簽
表格概念
表格是一個二維數據空間，一個表格由若幹行組成，一個行又有若幹單元格組成，單元格裏可以包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示表格類數據。表格類數據是指最適合組織為表格格式（即按行和列組織）的數據
表格的基本結構：
<table>
<tr>
<th>標題</th>
<th>標題</th>
</tr>
<tr>
<td>內容</td>
<td>內容</td>
</tr>
</table>
<tr>: table row
<th>: table head cell
<td>: table data cell
屬性:
border: 表格邊框
cellpadding: 內邊距
cellspacing: 外邊距
width: 像素 百分比（最好通過css來設置長寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合並單元格）
<form>表單標簽
功能
表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互
表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等
表單還可以包含textarea、select、fieldset和 label標簽。
表單屬性
action: 表單提交到哪.一般指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）作相應處理
method: 表單的提交方式 post/get，默認取值就是get
表單元素
基本概念：
HTML表單是HTML元素中較為復雜的部分，表單往往和腳本、動態頁面、數據處理等功能相結合，因此它是制作動態網站很重要的內容。
表單一般用來收集用戶的輸入信息
表單工作原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，然後按某個按鈕提交。這些信息通過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，如果有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成的信息
<input>系列標簽
<1> 表單類型
type: text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框
submit 提交按鈕
button 按鈕(需要配合js使用.)
file 提交文件，form表單需要加上屬性enctype="multipart/form-data"
上傳文件註意兩點：
1 請求方式必須是post
2enctype="multipart/form-data"
<2> 表單屬性
name 表單提交項的鍵
與id屬性的區別：
name屬性是和服務器通信時使用的名稱，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都生效
select下拉選標簽
name 表單提交項的鍵.
size 選項個數
multiple：multiple
<optgroup> 為每一項加上分組
<option> 下拉選中的每一項屬性：
value 表單提交項的值
selected selected下拉選默認被選中
<textarea> 多行文本框
<form id="form1"name="form1" method="post" action="">
<textarea cols=“寬度” rows=“高度” name=“名稱”>
默認內容
</textarea>
</form>
<label>標簽
定義：<label> 標簽為 input 元素定義標註（標記）
說明：
1 label 元素不會向用戶呈現任何特殊效果。
2 <label> 標簽的 for 屬性值應當與相關元素的 id 屬性值相同。
<form method="post"action="">
<label for=“username”>用戶名</label>
<input type=“text” name=“username” id=“username” size=“20” />
</form>
<fieldset>標簽
<fieldset>
<legend>登錄吧</legend>
<input type="text">
</fieldset>
二、CSS
1.CSS語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明
selector{
property:value;
property:value;
... property: value
}
例如：
h1 {color:red; font-size:14px;}
2.CSS的四種引入方式
a.行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用
<p style="background-color:rebeccapurple">hello yuan</p>
b.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
c.鏈接式
將一個.css文件引入到HTML文件中
<linkhref="mystyle.css" rel="stylesheet" type="text/css"/>
d.導入式
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中
<style type="text/css">
@import"mystyle.css";此處要註意.css文件的路徑
</style>
註意：
導入式會在整個網頁裝載完後再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是鏈接式的優點
3.CSS選擇器
基本選擇器
本文出自 “lyndon” 博客，請務必保留此出處http://lyndon.blog.51cto.com/11474010/1967742
前端三劍客---HTML、CSS