10_02、HTTP協議
阿新 • • 發佈：2022-03-08
一、HTML概念
HTML的全稱為超文字標記語言，是一種標記語言。它包括一系列標籤．通過這些標籤可以將網路上的文件格式統一，使分散的Internet資源連線為一個邏輯整體。HTML文字是由HTML命令組成的描述性文字，HTML命令可以說明文字，圖形、動畫、聲音、表格、連結等。 [1]超文字是一種組織資訊的方式，它通過超級連結方法將文字中的文字、圖表與其他資訊媒體相關聯。這些相互關聯的資訊媒體可能在同一文字中，也可能是其他檔案，或是地理位置相距遙遠的某臺計算機上的檔案。這種組織資訊方式將分佈在不同位置的資訊資源用隨機方式進行連線，為人們查詢，檢索資訊提供方便。
二、書寫和開啟HTML程式碼檔案
方式1：
直接新建一個txt檔案，只需要把字尾名改為.html即可
雙擊檔名開啟
方式2：
pycharm中新建html檔案
在pycharm中右鍵執行開啟，或在右上角點選瀏覽器圖示開啟
三、HTML的文件結構
<!DOCTYPE html>
<html lang="en">
<head>
這裡是文件的頭部 ...主要給瀏覽器設定的配置資訊 ...
</head>
<body>
這裡是文件的主體 ...直接給使用者檢視的相關資訊 ...
</body>
</html>
# head標籤一般寫的不是讓使用者看的
# body標籤一般寫想讓使用者看的到的東西
四、常用標籤
head內常用標籤
title 定義網頁標題資訊
style 內部支援直接書寫css程式碼
link 引入外部css檔案
script 內部可以直接書寫js程式碼，也可以引入外部js檔案
meta 定義網頁源資訊
body內的常用標籤
h1-h6 標題標籤
p 段落標籤
hr 水平線
br 換行
b 加粗
i 斜體
u 下劃線
s 刪除線
div劃定區域範圍
span劃定文字範圍
img標籤
<img src="../../img/aaa/123.png" title="好美哦" width="200px" alt="">
src:
1. 外鏈地址
2. 本地地址
title:
當滑鼠懸浮時候顯示的文字資訊, title屬性是所有標籤都有的屬性
width：
設定圖片的大小，一般只設置一個寬或者一個高，預設是等比例縮放
alt：
當圖片載入失敗的時候，顯示的提示資訊
a標籤
<a href="http://www.baidu.com" title="這是標題" target="_blank">點我</a>
href:
跳轉的地址
target：
_self 預設，從當前標籤跳轉
_blank 新開一個標籤跳轉
表格標籤
表格標籤的常用屬性
# border:邊框的寬度 # cellpadding: 內容距離內邊框的距離 # cellspacing: 單元格與單元格之間的距離
例項:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格標籤測試</title> </head> <body> <table border='1' cellpadding cellspacing="5"> <thead> <tr> <td>id</td> <td>name</td> <td>age</td> <td>gender</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>tom</td> <td>18</td> <td>male</td> </tr> <tr> <td>2</td> <td>jerry</td> <td>15</td> <td>male</td> </tr> </tbody> </table> </body> </html>View Code
無序列表
無序列表： <ul type="circle"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>
有序列表(瞭解) <ol type="A" start="2"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> </ol>
標題列表(瞭解) <dl> <dt>標題</dt> <dd>內容</dd> <dt>標題</dt> <dd>內容</dd> </dl>
form表單
form表單可以讓前端輸入的資料提交到後端 <form action="" method="post"> # 朝後端提交的地址 1. 什麼都不寫，預設提交的是當前地址 2. 全寫：https://passport.baidu.com/v2/api/?login 3. 只寫字尾 /index/ # 他會自動幫你拼接 ip:port/index/ 修改請求方式： method="post" 請求資料格式： 1. urlencode 2. form-data 3. json form表單只能提交： 1. urlencode 2. form-data # 不能提交json格式的資料 提交json格式的資料： 1. ajax 2. api管理工具
結合後端驗證form表單如何提交資料
輕量級的python框架：flask
安裝： pip install flask
form表單提交資料時候，每一個標籤都應該有一個name屬性，否則，後端是接收不到的
而name的屬性值相當於字典的key，使用者資料的資料相當於字典的value
form上傳檔案：
1. 請求方式必須是post請求
2. enctype='multipart/form-data'
五、標籤的相關特徵
標籤的分類
1. 單雙分類
單標籤
雙標籤
2. 性質分類
塊兒級標籤：
內容獨自佔一行
div, p, h1~h6都是
行內標籤：
內容不是獨自佔一行，自身文字有多大就站多大
b,i, u, s, span
標籤的巢狀
塊兒級元素可以巢狀所有的行內元素，行內元素不可以巢狀塊兒元素
注意：p標籤不能巢狀塊兒級元素
我們在前端中使用親戚關係表示巢狀關係
'''
<div> div是p和span的父親
<p> p是span的父親
<span>span是p的兒子，是div 的孫子，後代</span>
<p>
<span></span>
</div>
<span>是div的弟弟</span>
'''
標籤的兩個重要屬性
id # id屬性不能重複 class # class屬性可以重複
<div id='d1' class='c1'>這兩個屬性是所有標籤自帶的</div>