前端--HTML

學習地址：http://www.shangzekai.xyz/2017/05/07/html基礎目錄/

一、HTML是什麼?

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

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

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

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

1.1、HTML寫法

< !DOCTYPE html >   <!--#告訴瀏覽器以什麼樣的規則去解釋html，類似於shell的 "#!/bin/bash"-->
<html lang="en">    <!--#lang語言="en"英文。lang是一個屬性,en是屬性值。-->
	<head>          <!--#頭部-->
	  	<meta charset="UTF-8">    <!--meta：描述源信息，這裏表面整個頁面是以"UTF-8"字符集解析-->
	  	<title>網頁標題</title>    <!--網站的標題-->
	</head>
	<body>                            <!--#內容-->
	      文件體
	</body>
</html>

單標籤閉合：如 <br />、<hr />和<img src=“images/1.jpg” />等
雙標籤閉合：比如 <div> 和 </div>

二、html常用標籤之Meta

三、排版標識

1.標題部分

<body>         
    <h1>Hello World</h1>
    <h2>Hello World</h2>
    <h3>Hello World</h3>
    <h4>Hello World</h4>
    <h5>Hello World</h5>
    <h6>Hello World</h6>
</body>

6種標題效果標籤。分別爲h1~h6。<h1>字體最大，<h6>字體最小

2.分割線

<html>
    <hr>
</html>

3.換行 <br>

<html>
    <br>
</html>

4、換行2 <p>

<p>sudada</p>sudada

5、屏幕滾動(輪播)

<marquee behavior="" direction="left">Hello</marquee>

direction #指的是往哪個方向滾動，可以使用"上"下"左"右"

Hello #滾動的內容

四、標籤列表

4.1、無序列表

<body>
     <ul>                   # 帶屬性寫法： <ul type="circle">
        <li>zhangsan</li>
        <li>lisi</li>
        <li>wangwu</li>
     </ul>
</body>

效果圖：

常用屬性解釋：

屬性：disc(實心圓點)(默認)、circle(空心圓圈)、square(實心方塊)

4.2、有序列表

<body>
    <ol>                  # 帶屬性寫法 <ol type="a">
        <li>zhangsan</li>
        <li>lisi</li>
        <li>wangwu</li>
    </ol>
</body>

效果圖：

常用屬性解釋：

屬性：type編號類型，默認爲整數。可選（1、A、a、Ⅰ、i）
屬性：start起始編號，默認爲1，即由最小編號開始

五、常用標籤之a標籤

1、語法：<a 屬性=“屬性值”>標籤內容</a>

2、常見的屬性：href

接遠程目標：通過URL地址鏈接到遠程目標。

鏈接本地頁面：可以通過相對路徑或者絕對路徑鏈接本地頁面。

相對路徑：指相對於當前頁面位置的路徑
./    ：表示當前頁面所在的目錄
../   ：表示當前頁面所在的上一級目錄

絕對路徑：絕對路徑指當前站點中確切的路徑，一般以”/”開始 例如：<a href=“/admin/index.py”>後臺首頁</a>

3、常見例子：

做域名跳轉 (類似於office的超鏈接)

<a href="https://www.baidu.com">跳轉到百度</a>
<a href=“http://www.sina.com.cn”>新浪網</a>

# 寫法：<a href="跳轉的地址">
# 域名前必須寫http或者https，否則讀取的是當前目錄下的文件。

跳轉到本地文件：

相對路徑：<a href="include/login.html">登錄頁面</a>
絕對路徑：<a href="/html/123.html">國內新聞</a>

鏈接到郵箱：

<a href=“mailto:[email protected]”>給我發郵件</a>

下載文件：

<a href="/download/winRAR.rar">下載WinRAR</a>
<a href="download/office2007.rar">下載office2007</a>

4、新開一個瀏覽器窗口打開跳轉的頁面 target

<a href="https://www.baidu.com" target="_blank">跳轉到百度</a>
<a href="https://www.baidu.com" target="_self">跳轉到百度</a>

# _blank表示在新窗口中打開目標網頁
# _self表示在當前窗口中打開目標網頁

六、常用標籤之img標籤

語法：<img src="URL" alt="規定圖像的替代文本"/>

<body>
    <img src="DDD.jpg" alt="貓咪">  #如果顯示不出來這個圖片，那麼就顯示貓咪這個文字說明
</body>

如圖：

img常見的屬性用法說明：

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

七、html常用標籤之div和span元素
1. <div></div>

<div>只是一個塊級元素，並無實際的意義. 主要通過CSS爲其賦予不同的表現

2. <span></span>

<span>內聯行(行內元素),並無實際的意義. 主要通過CSS爲其賦予不同的表現

塊級元素與行內元素的區別:

塊級元素：h1-h6,<hr>,<p>

行內元素：span img

所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行，如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響，這兩個元素是專門爲定義CSS樣式而生的。

八、html常用標籤之table標籤

<body>

    <table border="1px">
        <tr>
            <td>用戶名</td>
            <td>年齡</td>
            <td>性別</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</body>

效果圖：

1.參數

1), <table></table>表示的表格的開始和結束
2), <tr></tr>表示的是表格的一行
3), <td></td>表示的是一個單元數據格
4), <th></th>表示表格標題單元格，且加粗居中顯示

2.table的常用屬性

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

3.例子

<body>

    <table border="1px">
        <tr>
            <td>ID</td>
            <td>新聞標題</td>
            <td>點擊量</td>
            <td>發佈時間</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
    </table>
</body>

效果圖：

九、常用標籤之form表單元素標籤
9.1、基本概念：

HTML表單是HTML元素中較爲複雜的部分，表單往往和腳本、動態頁面、數據處理等功能相結合，因此它是製作動態網站很重要的內容。
表單一般用來收集用戶的輸入信息。

9.2、表單的工作原理：

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

9.3、常用的輸入用戶名和密碼框：

<body>
    <input type="text">
    <input type="password">
    <input type="submit">
    <!--<input type="button" value="普通按鈕">-->    <!-- #button只是一個普通的按鈕不能提交-->
</body>

效果圖：

9.4、常見的INPUT標籤

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.5、常見輸入用戶名和密碼提交，以及後端校驗數據

前端代碼：

<form action="http://127.0.0.1:8888/index" method="get">         
    用戶名：<input type="text" name="username" placeholder="用戶名">
    密碼：<input type="password" name="pwd" placeholder="密碼">
    <input type="submit">
    <input type="reset" value="重置">
</form>

效果圖：

關鍵參數介紹：

form action ：向服務端發送請求，默認已GET的方式請求。可以通過method="post"的方式來定義請求方式。
POST請求方式: POST是通過HTTP協議發送數據到服務端的
GET請求方式: GET是通過瀏覽器地址欄的方式發送數據到服務端的

後端代碼： #需要先安裝tornado 方法：pip3 install tornado

#服務端

import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        username=self.get_argument('username')
        pwd=self.get_argument('pwd')
        print(username)
        # 這裏把拿到的用戶名，與數據庫裏面的用戶名做檢查，如果在DB裏面可以拿到的話那麼就登錄成功，否則就登錄失敗！
        self.write(username)
        self.write("Hello, world this is a GET")

    def post(self):
        username = self.get_argument('username')
        print(username)
        self.write('This is a POST')

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

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

9.6、表單標記屬性

屬性	值	含義
action	url	指定一個表單處理目標URL，表單數據將被提交到該URL地址的處理程序。如果該屬性值爲空，則提交到文檔自身。該屬性值可以爲絕對地址、相對地址、文檔片段，甚至是腳本代碼
method	get或post	將表單數據提交到http服務器的方法，可能值有兩個：get和post
enctype	application/x-www-form-urlencoded	指定表單數據的編碼類型，此屬性只有在method屬性設置爲post時纔有效。默認值爲application/x-www-form-urlencoded對所有字符進行編碼。如果表單包含用於文件上傳的控件（input type=“file”），那麼這個屬性值必須設爲multipart/form-data ，不對字符進行編碼。

9.7、Get和Post提交的區別

Get方式提交：
如果爲get，那麼所提交的數據集將被作爲一個由表單的所有名/值對組成的查詢字符串（query string）添加到表單處理器的URL（action屬性）的末尾。
比如：http://127.0.0.1:8888/index?username=123&pwd=123
這種方法提交的信息在長度上有一定限制，而且不安全，適合簡單的數據查詢。

Post方式提交：
如果爲post，那麼數據集將直接發給表單處理程序，而不是以可見的URL查詢字符串的形式。
post方法可以提交更長的數據，並且相對安全一些，傳送的數據類型更多一些（不限於ASCII字符），因而適用於數據更復雜的表單

9.8、Input標籤測試和練習：

    <form action="http://127.0.0.1:8888/index" method="post">
        用戶名：<input type="text" name="username" placeholder="用戶名">
        密碼：<input type="password" name="pwd" placeholder="密碼">
        <input type="submit">

        <input type="button" value="普通按鈕">
        <input type="reset" value="重置按鈕">
        <input type="hidden" value="123123" name="salary"><p>   <!--隱藏一個數據"123123"，給它賦值爲"salary"，那麼在服務端調用的時候就調用這個salary就OK-->

        <input type="file"><p>

        足球: <input type="checkbox" name="hobby" value="足球" checked>  <!--複選框(可以多選),如果要把這麼數據提交給服務端的話，需要加name="hobby",value="足球"。那麼服務端調用的時候就調用這個hobby就可以拿到"足球"這個值了-->
        籃球: <input type="checkbox" name="hobby" value="籃球">
        排球: <input type="checkbox" name="hobby" value="排球"><br>

        male: <input type="radio" name="gender" value="male">      <!--單選選框(只能選取一個),如果要把這麼數據提交給服務端的話，需要加name="gender",value="male"。那麼服務端調用的時候就調用這個gender就可以拿到"male"這個值了-->
        female：<input type="radio" name="gender" value="female">
        
    </form>

# checked 表示默認選擇足球這一列

效果圖：

9.9、Input標籤各個用法需要注意的問題
上傳文件控件 file

有“上傳文件域”，必須指定MIME類型enctype=“multipart/form-data”>，否則無法上傳文件。

上傳文件域，只在method=“post”下才有效。

隱藏控件 hidden

<input type=“hidden” name=“nid” value=“234” />
隱藏字段對於用戶是不可見的，隱藏字段通常會存儲一個默認值，一般用在，修改某條數據時，用來記錄數據的id號。

普通按鈕 button

<input type=“button” name=“button” value=“普通按鈕” />，定義可點擊的按鈕，但沒有任何行爲，一般配合JS使用。

十、SELECT下拉列表

10.1、常見的基本結構

<body>
    <form action="http://127.0.0.1:8888/index" method="post" enctype="multipart/form-data">
        請選擇城市：<select name="city" id="city">
            <option value="bj">北京</option>
            <option value="sh" selected="selected">上海</option>
            <option value="gz">廣州</option>
            <option value="hz">杭州</option>
        </select>
        <input type="submit">
    </form>
</body>

#默認顯示第一列內容"北京"，加上selected="selected"的話，那麼第一個顯示的內容就是"上海"

效果圖：

10.1.1、屬性說明

multiple : 布爾屬性，設置後允許多選，否則只能選擇一個
disabled : 禁用該下拉列表
selected : 首次顯示時,爲選中狀態
value : 定義發往服務器的選項值

10.2、TEXTAREA多行文本框

<body>
    <form>
    <textarea name="question" id="question" cols="30" rows="10"></textarea>
    </form>
</body>

# cols  列數
# rows  行數

效果圖：

10.2.1、屬性說明

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

10.3、LABEL表單修飾

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

說明：

label 元素不會向用戶呈現任何特殊效果
<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同
結合CSS可以控制表單文本或控件對齊，美化表單

十一、小例子：

Flask，7

Flask，1-2

Flask，3-6

Python 面向對象1——面向對象編程介紹

Django從入門到放棄三 -- cookie,session,cbv加裝飾器,ajax,django中間件等

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結