第1章 Html基礎瞭解

1.1Web運行本質：

對於所有web應用，本質上都是一個socket服務端，用戶的瀏覽器就是一個socket的客戶端

import socket

def handle_request(client):
    buf=client.recv(1024)
    client.send(bytes("HTTP/1.1 200 OK\r\n\r\n",encoding='utf-8'))
    client.send(bytes("Hello, World",encoding='utf-8'))

def main():
    sock=socket.socket(socket.AF_INET,socket.SOCK_STREAM)
    sock.bind(('localhost',8080))
    sock.listen(5)

    while True:
        connection,address=sock.accept()
        handle_request(connection)
        connection.close()

if __name__ == '__main__':
    main()

1.2前端內容：

1.3什麼是html？

1. 超文本標記語言（），通過標記符號來標記要顯示的網頁中的內容

2. 其實就是一套規則，瀏覽器認識的規則

3. 瀏覽器按照順序渲染網頁文件，然後根據標記符解釋和顯示內容

4. 對於不同的瀏覽器，對同一標籤可能會有不完全相同的解釋（不同客戶端兼容性的問題）

1.4W3C（瞭解內容）：

Ø W3C是什麼？

萬維網聯盟（）創建於1994年，是web技術領域具有權威影響力的國際標準化組織

Ø w3c的主要工作？

W3c的主要工作就是製作web規範，到目前爲止，w3c已經發布了200多項影響深遠的web技術標準

比如：XHTML、HTML5、XML、CSS、DOM、XSTL

1.5html發展歷史：

第2章 html文件結構以及標籤格式

2.1html文件格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網頁標題</title>
</head>
<body>
    文件體
</body>
</html>

2.1.1代碼說明：

1. <html></html>是文檔開始標記和結束標記，此元素告訴瀏覽器其自身是一個html文檔，在他們中間是文檔的頭部和主體

2. <head></head>元素出現在文檔的開頭部分，<head>與</head>之間的內容不會在瀏覽器的文檔窗口顯示，但是其中的元素有特別重要的意義

3. <title></title>定義網頁標題，在瀏覽器標題欄顯示

4. <body></body>之間的文本是可見的網頁主體內容

2.2html標籤格式

html是用尖括號包圍的關鍵詞，比如<html>

標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤

html標籤通常是成對出現的（雙邊標記），<div>和</div>

但也有單獨呈現的標籤（單邊標記），如：<br /> <hr />和<img src=”images/1.jpg” />

標籤也可以有若干個屬性，也可以不帶屬性，比如head就不帶任何屬性

第3章 Html常用標籤mate

3.1Meta標籤：

3.2meta用法：

 <head> 
    <metacharset="UTF-8">
    <meta name="author" content="姜伯洋">#用來標註網頁的作者
    <meta name="copyrught" content="說明信息">#用來註釋版權信息
     <title>姜伯洋H5頁面</title>
</head> 

第4章排版標籤

4.1排版元素

<p></p>用來創建一個段落，該元素自動在其前後創建一些空白

<br/>換行

<hr/>華麗的分割線

<h1></h1><h6></h6>六種效果標籤，字體由大到小

<!DOCTYPE html> 
<html lang="en">
 <head> 
    <metacharset="UTF-8">
     <title>姜伯洋H5頁面</title>
</head> 
<body>
     hello
    <h1>nihao</h1>
    <h2>nihao</h2>
    <h3>nihao</h3>
    <h4>nihao</h4>
    <h5>nihao</h5>
    <h6>nihao</h6>
</body> 
</html>

4.2滾動標籤：

<!DOCTYPE html> 
<html lang="en">
 <head> 
    <metacharset="UTF-8">
     <title>姜伯洋H5頁面</title>
</head> 
<body>
    <marquee diretion="left">
        hello
    </marquee>
</body> 
</html>

第5章列表

5.1無序列表：

type屬性：disc=實心原點，circle=空心圓圈，square=實心方塊

<ul type="circle">
<li>jiang</li>
<li>jiangboyang</li>
</ul>

5.2有序列表：

type屬性：type編號類型，默認爲整數，start起始編號，默認爲1，即由最小編號開始

<ol>
<li>jiang</li>
<li>jiangboyang</li>
</ol>

第6章 a標籤之跳轉元素

6.1連接到遠程地址

<body>
<a href="http://baidu.com">跳轉到百度</a>
</body> 

6.2連接到本地地址：

<body>
<a href="./jia .py">跳轉到百度</a>
</body> 

6.3img標籤：

6.4常見屬性：

href – 指定目標網頁地址

target – 跳轉方式

1. _blank表示在新窗口中打開

2. _self表示在當前窗口中打開

第7章 div和span元素

7.1常見屬性用法說明

屬性	值	含義
src	圖像URL	規定圖像的URL
alt	字符串	規定圖像的替代文本
width	px / %	規定圖像的寬
height	px / %	規定圖像的高
border	px	圖像的邊框粗細

7.2說明：

div：只是一個塊級元素，沒有實際意義，主要通過css爲其賦予不同的表現

span：內聯行級元素，沒有實際意義，主要通過css爲其賦予不同的表現

塊級元素就是另起一行開始渲染的元素，行內元素則不另起一行

<body>
<div>nihao</div>
<span>hello</span>
</body> 

第8章 table 表格標籤

8.1表格基本用法

8.2解釋說明：

1. tr-表示表格的一行

2. td-表示的是一個單元數據格

3. th-表示表格標題單元格，且加粗居中顯示

8.3常用屬性

屬性	值	含義
width	px或%	表格的寬度
height	px或%	表格的高度
border	px	表格的邊框的粗細
align	Left/center/right	元素的對齊方式

8.4案例實現：

第9章 form表單

9.1基本概念

HTML表單是HTML元素中較爲複雜的部分，表單往往和腳本，動態頁面，數據處理等功能相結合，因此它是製作動態網站很重要的內容

9.2表單的工作原理

訪問者在瀏覽有表單的網頁時，可填寫必須的信息，然後按某個按鈕進行提交，這些信息通過網絡傳送到服務器上，服務器上專門的程序對這些數據進行處理，如果有錯誤會返回錯誤信息，並要求糾正錯誤

import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    defget(self):
        self.write("Hello, world")

    defpost(self):
        self.write('this is a test')

application = tornado.web.Application([
    (r"/index", MainHandler),
])

if __name__ == "__main__":
    application.listen(8888)
   tornado.ioloop.IOLoop.instance().start()

9.3常見的結構

<form action="http://localhost:8080/index" method="get">
    <input type="text" name="username" placeholder="用戶名">
    <input type="password" name="pwd" placeholder="密碼">
    <input type="button" value="登陸">
    <input type="submit" value="提交">
    <input type="reset" value="重置"><br>
    足球:<input type="checkbox" name="hobby" value="football"><br>
    male:<input type="radio"name="gender" value="male">
    female:<input type="radio"name="gender" value="female">
</form>

9.4表單常見屬性：

action：url 指定一個表單處理目標url，表單數據將被提交到該url地址的處理程序，如果該屬性爲空，則提交到文檔自身，該屬性值可以絕對地址，相對地址，文檔片段，甚至是腳本代碼

method：get/post 將表單提交到http服務器的方法

enctype：application/x-www-form-urlencoded 指定表單數據的編碼類型，此屬性只有在method屬性設置爲post時纔有效，默認值爲application/x-www-form-urlencoded對所有字符進行編碼，如果表單包含用於文件上傳的控件（input type=‘file’）那麼這個屬性值必須爲multipart/form-data，不對字符進行編碼

9.5input標籤常見屬性：

type屬性值	空間名稱	對應代碼
text	單行文本輸入框	<input type="text"/>
password	密碼輸入框	<input type="password"/>
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" value=“隱藏按鈕”/>
file	文本選擇框	<input type="file"/>

9.6select標籤：

9.7屬性說明：

multiple：布爾屬性，設置後允許多選，否則只能選一個

disabled：禁用該下拉列表

selected：首次顯示時，爲選中狀態

value：定義發往服務器的選項值

9.8textarea多行文本框

屬性	屬性值	說明
name	name	控件名稱
rows	number	設置多行文本框的顯示行數（高度）
cols	number	設置多行文本框的顯示列數（寬度）
disabled	disabled	布爾屬性，設置當前文本框爲禁用狀態

9.9表單修飾：

說明：

label元素不會向用戶呈現任何特殊效果

<label>標籤的for屬性應當與相關元素的id屬性相同

結合CSS可以控制表單文本或者控件對齊，美化表單

前端之HTML5