當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Python开发之--前端 HTML基础

發布時間：2023/12/10 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 Python开发之--前端 HTML基础小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一：HTML介紹

HTML：超文本標記語言，標準通用標記語言下的一個應用。包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關于網頁的信息，“主體”部分提供網頁的具體內容。

超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。

標記語言: 標記（標簽）構成的語言.

網頁==HTML文檔，由瀏覽器解析，用來展示的

靜態網頁：靜態的資源，如xxx.html

動態網頁：html代碼是由某種開發語言根據用戶請求動態生成的

平常我們就是先通過瀏覽器（也就是客戶端）輸入網址去訪問頁面，百度（即服務端）再把信息傳遞給我們，在打開的頁面右鍵檢查一下就會發現一大堆代碼，其實這就是這個頁面的HTML實現代碼，

?我們來寫一個服務端的py文件來看一下客戶端和服務端的之間的信息傳遞，來看代碼的實現

import socketdef main():sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)sock.bind(('localhost',8089))sock.listen(5)while True:connection, address = sock.accept()buf = connection.recv(1024)print(buf.decode("utf8"))connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))connection.sendall(bytes("<h1>Hello,World</h1>","utf8"))connection.close()if __name__ == '__main__':main() 服務端

我們在網頁上輸入端口號就可以看到我們在py文件里寫的內容，而瀏覽器也會把內容發給我們

GET / HTTP/1.1 Host: 127.0.0.1:8089 Connection: keep-alive Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.22 Safari/537.36 SE 2.X MetaSr 1.0 Accept-Encoding: gzip, deflate, sdch Accept-Language: zh-CN,zh;q=0.8 反饋內容

我們也可以在新建一個html文件把我們想要展示的內容寫在里面，在py文件里面已打開文件的形式讀取。

在后面我們還會介紹一下css和jss,以及他們之間的關系，這個在后面會有介紹。

二：HTML的入門學習

來看一下html的文件格式：

<head><meta charset="UTF-8"><title>Title</title> </head> <body>hello yuan
<h1>yuan</h1> </body> </html>

下面是html的樹結構：此處為借鑒別人的圖片

?2.1什么是標簽？

1 是由一對尖括號包裹的單詞構成例如: <html> *所有標簽中的單詞不可能以數字開頭. 2 標簽不區分大小寫.<html> 和 <HTML>. 推薦使用小寫. 3 標簽分為兩部分: 開始標簽<a> 和結束標簽</a>. 兩個標簽之間的部分我們叫做標簽體. 4 有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉和標簽.例如: <br/> <hr/> <input /> <img /> 5 標簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>

2.2標簽的屬性：

1 通常是以鍵值對形式出現的. 例如 name="alex" 2 屬性只能出現在開始標簽或自閉和標簽中. 3 屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹例如 name="alex" 4 如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly

2.3具體有哪些標簽？

2.31 ? ?head標簽

meta

非meta標簽

<title>oldboy</title><link rel="icon" href="http://www.jd.com/favicon.ico"> 這個語句就是比如說京東就是前面的那個圖標JD<link rel="stylesheet" href="css.css"><script src="hello.js"></script>　

2.32 ?body標簽

2.321 ?基本標簽（塊級標簽（block）和內斂標簽()inline）通俗來講塊級標簽就是單獨占一部分除了他自己其他不能用，內斂就是一行可以與多個值，

<hn>: n的取值范圍是1~6; 從大到小. 用來表示標題.<p>: 段落標簽. 包裹的內容被換行.并且也上下內容之間有一行空白.<b> <strong>: 加粗標簽.<strike>: 為文字加上一條中線.<em>: 文字變成斜體.<sup>和<sub>: 上角標和下角表.<br>:換行.<hr>:水平線<div><span> 基本標簽

注意下div標簽就是什么都不做，即它的內容以及格式不會變化，因為后面我們會大量使用一個標簽，我們不希望內容改變，所以呢每一個標簽都有自己得一個功能。

塊級標簽：<p><h1><table><ol><ul><form><div>

內聯標簽：<a><input><img><sub><sup><textarea><span>

所有標簽通分為塊級標簽和內斂標簽

block（塊）元素的特點① 總是在新行上開始； ② 高度，行高以及外邊距和內邊距都可控制； ③ 寬度缺省是它的容器的100%，除非設定一個寬度。 ④ 它可以容納內聯元素和其他塊元素inline元素的特點① 和其他元素都在一行上； ② 高，行高及外邊距和內邊距不可改變； ③ 寬度就是它的文字或圖片的寬度，不可改變 ④ 內聯元素只能容納文本或者其他內聯元素對行內元素，需要注意如下設置寬度width 無效。設置高度height 無效，可以通過line-height來設置。設置margin 只有左右margin有效，上下無效。設置padding 只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內容是沒影響的。特殊字符< &gt；&quot；©®

2.33 ?圖形標簽（img）

src: 要顯示圖片的路徑.alt: 圖片沒有加載成功時的提示.title: 鼠標懸浮時的提示信息.width: 圖片的寬height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.) 圖形標簽

2.34 ?超鏈接標簽 ? 錨標簽 ?<a>

href:要連接的資源路徑格式如下: href="http://www.baidu.com" target: _blank : 在新的窗口打開超鏈接. 框架名稱: 在指定框架中打開連接內容.name: 定義一個頁面的書簽.用于跳轉 href : #id.（錨）超鏈接標簽

2.35 ?列表標簽

<ul>: 無序列表<ol>: 有序列表<li>:列表中的每一項.<dl> 定義列表<dt> 列表標題<dd> 列表項列表標簽

2.36 ?表格標簽<table>

border: 表格邊框.cellpadding: 內邊距cellspacing: 外邊距.width: 像素百分比.（最好通過css來設置長寬）<tr>: table row<th>: table head cell<td>: table data cellrowspan: 單元格豎跨多少行colspan: 單元格橫跨多少列（即合并單元格）<th>: table header <tbody>(不常用): 為表格進行分區. 表格標簽

2.37 ?表單標簽<form>

表單用于向服務器傳輸數據。

? ? ? 表單能夠包含?input 元素，比如文本字段、復選框、單選框、提交按鈕等等。

? ? ? 表單還可以包含textarea、select、fieldset和?label 元素。

2.371 ?表單屬性：

HTML 表單用于接收不同類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標簽, 要提交的所有內容都應該在該標簽中.action: 表單提交到哪. 一般指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）作相應處理，比如https://www.sogou.com/webmethod: 表單的提交方式 post/get 默認取值就是 get（信封）get: 1.提交的鍵值對.放在地址欄中url后面. 2.安全性相對較差. 3.對提交內容的長度有限制.post:1.提交的鍵值對不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.get/post是常見的兩種請求方式.

2.372 ?表單元素

<input> 標簽的屬性和對應值 type: text 文本輸入框password 密碼輸入框radio 單選框checkbox 多選框 submit 提交按鈕 button 按鈕(需要配合js使用.) button和submit的區別？file 提交文件：form表單需要加上屬性enctype="multipart/form-data" name: 表單提交項的鍵.注意和id屬性的區別：name屬性是和服務器通信時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在css和javascript中使用的value: 表單提交項的值.對于不同的輸入類型，value 屬性的用法也不同：1 type="button", "reset", "submit" - 定義按鈕上的顯示的文本2 type="text", "password", "hidden" - 定義輸入字段的初始值3 type="checkbox", "radio", "image" - 定義與輸入相關聯的值　　checked: radio 和 checkbox 默認被選中4 readonly: 只讀. text 和 password5 disabled: 對所用input都好使. 表單元素

上傳文件：

def index(request):print request.POSTprint request.GETprint request.FILESfor item in request.FILES:fileObj = request.FILES.get(item)f = open(fileObj.name, 'wb')iter_file = fileObj.chunks()for line in iter_file:f.write(line)f.close()return HttpResponse('ok')

2.38 ? ?<select> 下拉選標簽屬性

name:表單提交項的鍵.size：選項個數multiple：multiple <option> 下拉選中的每一項屬性：value:表單提交項的值. selected: selected下拉選默認被選中<optgroup>為每一項加上分組 View Code

2.39 ???<textarea> 文本域? ??

1 name: 表單提交項的鍵. 2 3 cols: 文本域默認有多少列 4 5 rows: 文本域默認有多少行 <label> 1 <label for="www">姓名</label> 2 <input id="www" type="text"><fieldset>1 <fieldset> 2 <legend>登錄吧</legend> 3 <input type="text"> 4 </fieldset>

轉載于:https://www.cnblogs.com/mars527/p/6026730.html

總結

以上是生活随笔為你收集整理的Python开发之--前端 HTML基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：使用setsockopt（）接口，设置T
下一篇：加速群辉Docker镜像下载速度的方法