前端之HTML5

時間 2019-11-07

標籤前端 html5 html 欄目 HTML5 简体版

原文原文鏈接

第1章 Html基礎瞭解
css

1.1Web運行本質：

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

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. 超文本標記語言（），經過標記符號來標記要顯示的網頁中的內容web

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

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

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

1.4W3C（瞭解內容）：

Ø W3C是什麼？app

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

Ø w3c的主要工做？ide

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	布爾屬性，設置當前文本框爲禁用狀態