python學習之web中的html基礎

時間 2021-03-14

標籤 css html 前端 html5 python 數據庫編程後端瀏覽器服務器欄目 Python 简体版

原文原文鏈接

HTML簡介及相關標籤介紹css

首先，咱們要了解什麼是HTML?html

HTML被稱做超文本標記語言，是一門標記語言，即該語言由各種標記標籤組成。前端

爲何學python要學HTML？html5

無論學習哪一個語言，咱們最後免不了要和網絡、服務器等打交道，連網頁都看不懂，你玩錘子呢。python

<正式內容>數據庫

首先，咱們不須要知道他的底層代碼是怎麼寫的，可是咱們要知道HTML的結構和用法是怎麼樣的。編程

HTML結構，很簡單，在pycharm中新建一個html文件，而後基礎結構就會自動給你標好：後端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

首先看下，第一行「<!DOCTYPE html>」實際上是說明，告訴解釋器，請按照html5規則解讀如下內容，稱做文檔類型標籤，第二行「<html lang="en">」，與文末的</html>組成一對，前者表示開始，後者表示結尾，是規定語言，被稱做根標籤，lang即language，en表明English，根據你我的要求，能夠將en改成zh，即中文【對於我這種菜雞而言，最好仍是不要改了】，第三行看是就是標籤，head標籤，被稱做網頁頭部標籤，他由<head></head>組成一對兒，這種由一對標籤組成的，是正常標籤，在head標籤內部，<meta charset="UTF-8">只有一個標籤，被稱做自閉和標籤，這行的意思是規定本頁面的解碼器是utf8，title標籤的內容，則是修改網頁自己的題目，就是流量拿起最上方，瀏覽器網頁標籤的顯示內容。而後</head>出現，網頁頭部結束，head標籤中止，meta，和title這兩個標籤均內嵌在head標籤中。接下來就是body標籤，body標籤中的內容，即咱們網頁中的正文內容，形式會根據你標籤的不一樣表現有不一樣展現。至此，HTML網頁代碼基礎結構咱們就看明白了。瀏覽器

接下來，咱們補充幾個上一段提到知識點：服務器

正常標籤的構成形式:由開始標籤和結束標籤構成，二者單詞相同，結束標籤會多一個/，例如<body> </body>， 等等，他們均組隊出現，單獨出現就報錯
自閉和標籤的狀況：自閉和標籤是簡易標籤格式，即他自己會自帶閉合功能，不須要第二個標籤使用/來結束標籤，例如<hr>, ,<input>,<img>,<meta>等等，他們單獨出現，就能夠完成全部功能。
標籤的嵌套問題：標籤嵌套，顧名思義就是標籤內部還有其餘標籤，【既然是學python的，就參考下python裏面的函數嵌套概念】，外層標籤必須劃定一個範圍，來防止內置的標籤，因此，咱們這裏通常不提自閉和標籤，均指正常標籤，例如上面的基本機構代碼中，最外層的標籤就是<html> ...</html>，後面的head標籤和body標籤，都嵌套在其中，同理，title標籤也嵌套在head標籤中。可是要注意，嵌套，是徹底包裹進去，不能夠交叉，以下這個形式，就是錯誤的：
```
<A>

</A>

```
這是個低級錯誤
大小寫問題：抱歉，咱們這裏無論大小寫的事情。
標籤內容是否能夠由數字開頭？：本人解答以下：兄弟，咱新手就不要搞發明創造了，行不！等你成了大佬，改寫底層代碼，說不定標籤開頭畫個彩虹，標籤結尾畫個龍呢！

標籤屬性

標籤的目的是什麼？

標籤的目的是告訴瀏覽器，我這個內容是對應什麼格式，是什麼表現形式，瀏覽器根據個人需求將內容渲染出來，那麼問題來了，網頁的表現形式各式各樣，如何作到的呢？固然是修改標籤的屬性內容了，一行文字，咱們找到他的顏色屬性，就能夠把他們改爲紅橙黃綠青藍紫，咱們找到他的字體屬性，就能夠把他變成行書草書楷體等等。

標籤屬性的基礎知識點：

標籤屬性一般以鍵值對形式出現，好比顏色通常是 color=「red」
標籤屬性也在正常標籤的開始標籤內，或者自閉和標籤內。爲何呢，這個就要說到代碼運行問題，代碼運行是由上而下，由左而右，你要是寫到結束標籤內，都渲染完了，你告訴我你要換這個格式？你拿一個肯德基桶給我，我吃完後你告訴我，你給我是但願我幫你把過時的肯德基扔垃圾桶去？自閉和標籤的話，就一個標籤，你想寫到哪兒?
正常狀況下呢，咱們標籤和屬性名字都用小寫單詞，固然，對應的value，就不必定了......
有個簡單的寫法，當屬性的key和value是如出一轍的單詞的時候，例如 checked=「checked」，咱們就能夠偷懶，寫checked就行了，瀏覽器他會下意識的給你補全，總之，他認得。

標籤怎麼寫？咱們不須要每次都打全單詞，由於pycharm是款很是友好的殘疾人編程器，你打一個單詞，而後按一下tab，pycharm就自動給你補全了。

標籤分哪幾種，有什麼特色？

通常狀況下，咱們將標籤分爲兩大類，即內聯標籤和塊狀標籤。塊狀標籤通常有p標籤，h標籤，table標籤，ol標籤，ul標籤，form標籤等等；內聯標籤通常有a標籤，input標籤，img標籤，sub標籤，sup標籤，span標籤等等；塊狀標籤的特色以下：第一條，他獨佔一行，他有本身的行高，和寬度，可是這一行，除非你用其餘代碼來修正（這裏就是css和js的工做），不然，這一行，只有這個標籤內容，他所佔的地方，整行都是他的，也就是說，他前面有內容，那麼他就另外一起行，若是他後面有內容，那麼請他後面的內容另起一行，若是不設置寬度，那麼寬度就是等於你這一行的長度，塊狀標籤內能夠嵌套其餘元素標籤，好比body內部欠一個a標籤或者div標籤，這都是基操。內聯標籤的特效以下：他不獨佔一行，是的，不獨佔，致使的結果就是幾個標籤會從左到右跟你寫字同樣逐個排列，他沒法設置寬和高，由於，永遠等於文本內容大小，內聯標籤若是內嵌的話，只能嵌套內聯標籤。

經常使用標籤

一、標題標籤，h1-->h6，字體大小不一樣

二、段落標籤，p標籤

三、列表標籤，又分無序列表ul，有序列表ol，自定義列表dl。【這裏內容自行百度，不作贅述】

四、div標籤，特色是「沒有特色！」，是的，你沒看錯......這裏我要解釋下，不少時候，咱們爲了代碼更加簡單易懂，就會盡量的減小標籤使用，帶來的問題就是，沒有標籤，我對於內容的屬性設置咋辦？我要搞個黃色，沒地方放屬性的設定啊，這個時候，就有了div標籤，他沒有任何的特色，他就是一個單純的塊狀標籤，單純到，你隨便設置，他都按你的來。

五、圖片標籤，img標籤，用於插入圖片

六、加粗/斜體標籤，加粗是b標籤或者strong標籤，斜體是i標籤或者em標籤，理論上b和i已經被淘汰了，可是耐不住人家只有一個字母，翹起來方便啊

七、超連接標籤，這是爬蟲的時候，你須要不停看的一個標籤，很重要哦，a標籤。

8.文本標籤，其自己就是個相似div的內聯標籤，也看不出效果，須要css

特殊符號

咱們常常須要打一排空格，可是在HTML中，你就是空格敲了一網頁，渲染的時候，也認爲你只有一個空格，這就很尷尬了，爲了解決這個問題，寫底層代碼的大佬爲了彌補這個bug，就推出了特殊字符這個概念，他就是一些比較奇奇怪怪的符號，正常輸入，是沒辦法顯示的。

詳情見--->https://www.jb51.net/onlineread/htmlchar.htm

特殊符號以&開頭，以；結尾，而咱們常常用的特殊符號有如下幾個：

一、英文空格：&nbsp；

二、字符空格：&emsp；

三、半字空格：&ensp；

四、小於符號：<

五、大於符號：>

六、商標符號：&trade；

七、版權符號：©

八、註冊符號：&reg；

要注意的是，大於和小於號，由於他的表型和標籤的尖括號是如出一轍的，和字母一塊兒使用的時候，會被解釋器認爲你標籤沒寫對出錯。

表格：

表格通常用於後端數據展現，分爲表頭和表身兩部分，相關標籤以下：

表格：table

行標籤：tr

列標籤：td

表格標題：caption

合併行：rowspan

合併列：colspan

表單：

表單是用於收集數據並向後端發送數據的，是一種交互模式，常見的，好比註冊列表這種，蒐集用戶信息，反饋給後端，一樣還有百度搜索，在搜索框內數字文字，它蒐集到內容發送給後端，而後後端進行處理，匹配數據給你。

表單的標籤以下：

表單標籤：form

form內的屬性：action=「提交的網址」，method=「get/post」這個屬性只有兩個選項，通常搜索用get，註冊用post，post會保護一部分隱私entype通常不改，須要上傳文件的時候會調整爲multipart/form-data，其中的text-plain通常沒人會用，聽說比較渣......

input標籤，這是個神奇的標籤，表單中，他的存在佔了一大半。

textarea，文本域。

select，下拉框。

這裏詳細說下input標籤的屬性，他有很多，也都常常用。

input標籤下的屬性:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <input type="text">文本框
10 <input type="password">密碼框，輸入的東西會顯示「······」
11 <input type="radio">單選框
12 <input type="checkbox">多選框
13 <input type="file">文件上傳按鈕
14 <input type="submit">提交按鈕
15 <input type="reset">重置按鈕
16 <input type="hidden">隱藏域，壓根看不到什麼
17 
18 </body>
19 </html>

由於input更多爲了交互，須要從前端把數據發送到後端服務器的數據庫，那麼咱們要考慮到傳輸的方式和內容的格式，正常輸入數據庫，咱們以鍵值對形式，那麼，咱們須要一個name和一個value，那麼name須要在這裏定義好。假設咱們註冊某個帳號，按照要求填寫用戶名12345，密碼123456，前端給後端發送的內容是什麼？難道是{12345,123456}？這個誰看得懂啊，，，，正確的格式應該是{name:"12345",password="123456"}，數據庫從中提取後寫入保存，因此，這裏咱們須要設置一個name屬性，固然name=「？」，這個？看我的需求，一樣value就是輸入的內容，若是是單選或者多選，你就要對應寫好value值。

其餘屬性補充：

placeholder屬性，輸入框內的提示性文字

readonly屬性，只讀，寫該屬性後，輸入框就不能輸入了

disable屬性，顧名思義，禁用

咱們來描述一個簡單的案例，咱們須要作一個以下圖的信息蒐集頁面，或者說註冊頁面：

首先作個簡單的分析和標籤對應。

第一，這個是個表單，須要form標籤；

第二，這裏面大量使用了input標籤，拿出input標籤那塊的知識點放在旁邊。

第三，有按鈕，提交和重置，這個和一開始的輸入框都比較簡單，能夠先寫下來。

完成代碼：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>疏樓龍宿HTML做業</title>
 6 </head>
 7 <body>
 8 <div>
 9 <form action="https://www.baidu.com/s" method="get">
10     <p> 用戶名 : <input type="text" name="username" maxlength="100" placeholder="請輸入用戶名" size="24"></p>
11     <p>密&emsp;碼 : <input type="password" name="password" placeholder="請輸入密碼" size="24"></p>
12     <p>性&emsp;別 : 男 <input type="radio" name="gender" checked="checked" value="male">
13                女 <input type="radio" name="gender" value="female"></p>
14     <p>愛&emsp;好 : 唱歌 <input type="checkbox" name="aihao" value="sing">
15                  跳舞 <input type="checkbox" name="aihao" value="dance">
16                  畫畫 <input type="checkbox" name="aihao" value="draw"></p>
17     <p>上傳頭像： <input type="file" value="選擇文件" accept="image/*"></p>
18     <p>地&emsp;址： <select name="address" id="address" style="width:50px">
19     <option value="nanjing">南京</option>
20     <option value="suzhou">蘇州</option>
21     <option value="taizhou">泰州</option>
22     <option value="xuzhou">徐州</option>
23     <option value="yangzhou">揚州</option>
24     </select></p>
25     <p>我的簡介：<textarea rows="10" cols="28"></textarea></p>
26     <p><input type="submit" value="提交">
27     <input type="reset" value="重置"></p>
28 </form>
29 </div>
30 </body>
31 </html>