當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

Python前端HTML介绍

發布時間：2024/8/26 综合教程 40 生活家

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

一、HTML介紹

HTML定義：　

超級文本標記語言是標準通用標記語言下的一個應用，也是一種規范，一種標準，
它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁文件，然后根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果.

特點：

1.簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便。

2.可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。

3.平臺無關性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文本標記語言可以使用在廣泛的平臺上，這也是萬維網（WWW）盛行的另一個原因。

4.通用性：HTML是網絡的通用語言,一種簡單、通用的全置標記語言。它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

簡單理解：正如我們寫的python代碼，解釋器是python，html的代碼解釋器就是瀏覽器，解釋器當然就有相應的解釋“規則”，而這些規則就是html語言。

<!DOCTYPE html> #html文檔類型，這個是html5寫法
<html>
    <head>

    </head>
    <body>

    </body>
</html>
<!--
以html開頭和html結尾，中間包含了head和body，如果把html看作人，那么head就是頭，body就是身體，所以頭部里都東西一般都是看不見的。
<head>和</head>之間的內容，是元信息和網站的標題 元信息一般是不顯示出來的,但是記錄了該HTML文件的很多有用的信息
<body>和</body>之間的內容，是瀏覽器呈現出來的，用戶看到的頁面效果。也就是說這里是網頁的主體。也就是body的身體之意。
-->

二、HTML之標簽

所謂HTML標簽是指：諸如<head>、<body>、<table>等被尖括號“<”和“>”包起來的對象，絕大部分的標簽都是成對出現的，如<table></talbe>、<form></form>。當然還有少部分不是成對出現的，如<br>、<hr>等，標簽可以嵌套，比如在body標簽中嵌套form標簽，在form中又可以嵌套其他標簽。

標簽分類：

1.按語法分類：

閉合標簽：有開始表示和結束標簽，必須成對出現，比如上面的<html></html>
自閉合標簽：單個存在的標簽，自己封閉，如<br/>,這里不加/也不會出錯。

head標簽

head頭部中包含的標記是頁面的標題、序言、說明等內容，它本身不作為內容來顯示，但影響網頁顯示的效果。頭部中最常用的標記符是標題標記符和meta標記符，其中標題標記符用于定義網頁的標題，它的內容顯示在網頁窗口的標題欄中，網頁標題可被瀏覽器用作書簽和收藏清單。
設置文檔標題和其它在網頁中不顯示的信息，比如direction方向、語言代碼Language Code（實體定義!ENTITY % i18n）、指定字典中的元信息、等等。

title：在head中是為數不多的能在網頁中顯示的標簽，效果是顯示網頁的名字

<title>hello wd</title>

mate：定義了一個文檔和外部資源之間的關系,提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞、頁面編碼。

設置編碼

<meta charset="UTF-8">

自動刷新頁面

<meta http-equiv="Refresh" content="3"> #3秒刷新一次頁面

跳轉

<meta http-equiv="refresh" content="3;Url=http://www.baidu.com">#3秒鐘后跳轉至www.baidu.com

關鍵字信息

<meta name="keywords" content="this is wd home">

兼容IE：X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;IE=EmulateIE7" />

TIPS：

微軟的IE6是通過XP、Win2003等操作系統發布出來，作為占統治地位的桌面操作系統，也使得IE占據了通知地位，許多的網站開發的時候，就按照IE6的標準去開發，而IE6自身的標準也是微軟公司內部定義的。到了IE7出來的時候，采用了微軟公司內部標準以及部分W3C的標準，這個時候許多網站升級到IE7的時候，就比較痛苦，很多代碼必須調整后，才能夠正常的運行。而到了微軟的IE8這個版本，基本上把微軟內部自己定義的標準拋棄了，而全面的支持W3C的標準，由于基于對標準徹底的變化了，使得原先在早期IE8版本上能夠訪問的網站，在IE8中無法正常的訪問，會出現一些排版錯亂、文字重疊，顯示不全等各種兼容性錯誤。

與任何早期瀏覽器版本相比，Internet Explorer 8 對行業標準提供了更加緊密的支持。因此，針對舊版本的瀏覽器設計的站點可能不會按預期顯示。為了幫助減輕任何問題，Internet Explorer 8 引入了文檔兼容性的概念，從而允許您指定站點所支持的 Internet Explorer 版本。文檔兼容性在 Internet Explorer 8 中添加了新的模式；這些模式將告訴瀏覽器如何解釋和呈現網站。如果您的站點在 Internet Explorer 8 中無法正確顯示，則可以更新該站點以支持最新的 Web 標準（首選方式），也可以強制 Internet Explorer 8 按照在舊版本的瀏覽器中查看站點的方式來顯示內容。通過使用 meta 元素將 X-UA-Compatible 標頭添加到網頁中，可以實現這一點。

當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用指令來確定如何顯示該網頁。如果該指令丟失或未指定基于標準的文檔類型，則 Internet Explorer 8 將以 IE5 模式（Quirks 模式）顯示該網頁。

Link

<link>

css
< link rel="stylesheet" type="text/css" href="css/common.css" >

icon
< link rel="shortcut icon" href="image/favicon.ico">#圖標

body標簽

分類：

塊級標簽：標簽獨占一行，如：a、div、select
行內標簽：標簽本身占多少頁面上就占多少，如：p、h、span

特殊符號（常見）：

&nbsp:空格

&gt：>（大于）

&lt：<（小于）

<br/>:換行

1.標題：H標簽

標題（heading）通過h1-h6,來定義，大小分別遞增。

<h1>wd</h1>
<h6>wd</h6>

2.段落：p標簽

p段落標簽是塊級標簽，段落與段落之間有間距，并可以嵌套<br/>換行標簽。

<p>段落1</p>
<p>段落2</p>
<p>段落3<br/>這里換行了</p>

3.div

div可理解為“白板”，本身不對內容做任何渲染，后續會提及使用style來渲染，屬于塊級標簽。

<div>my name is wd</div>

4.span

通div一樣，span也是空白，本身不對內容做渲染，但是屬于行內標簽。

 <span>haha</span>
 <span>yes yes</span>

5.a標簽

a標簽是應用網站鏈接使用的標簽，并且a標簽可以是圖片或者其他html元素

<a >百度搜索</a>

target屬性：定義超鏈接是在當前窗口顯示還是新窗口顯示

<a  target="_blank">百度搜索</a>
#超鏈接在新窗口打開

a標簽做錨點

href中通過設置#+標簽id關聯跳轉，實質也是跳轉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hell wd</title>
</head>
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<!--關聯關系必須使用id，并且href中必須使用#+id形式-->
<div id="i1">第一章內容</div>
<div id="i2">第二章內容</div>
<div id="i3">第三章內容</div>
<div id="i4">第四章內容</div>
</body>
</html>

6.input系列

input是我們我們用的最為多的標簽之一，并且其屬性有多種，不同的屬性對應著不同樣式。

type屬性：

1)text：文本

輸入的字符串為文本

2)password：密碼

輸入的字符串為密文

3)button:按鈕

默認并無實際作用，后續會在js中提及其作用。

4)submit:提交

提交form表單使用

5)value:屬性值

6)name：為傳輸的內容設置key，方便后臺取數據。

demo:

<body>
<input type="text"/>
<input type="password">
<input type="button" value="登錄" >
<input type="submit" value="登錄1">
</body>

form表單：用于提交數據。

上面的input的標簽提交數據是需要配合form標簽才能進行提交。

1)atcion

設置提交數據的url

2)method

提交數據的方法，分為post和get，區別，get提交數據顯示在url中，post提交數據在body中

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello wd</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
    <!-- action屬性設置提交數據的url-->
   <div>用戶名：
       <input type="text" name="username"/>
        <input type="button" value="登錄" >
       <!-- name屬性為輸入的內容設置key，為了后續去數據方便-->
   </div>
    <div>密碼：
        <input type="password" name="password">
        <input type="submit" value="登錄1">
    </div>
</form>
</body>
</html>

選擇標簽：raido

name屬性不同，代表多選，name屬性相同表示互斥(也就是單選)，value代表為選擇設置key,checked設置默認值。

demo：

<div>
        <p>請選擇性別：</p>
        <span>
            男：<input type="radio" name="sex" value="man">
            女：<input type="radio" name="sex" value="woman">
            <!--name屬性相同表示單選,value表示選擇對應的key-->
            </span>
        <p>
        <input type="submit" value="提交">
        </p>
    </div>

復選框：checkbox

使用的時候通常將name設置為相同，name此時的作用相當于區別是復選框的種類，因為可能有多種復選框，用value設置key，checked，設置默認值。

demo:

<div>
        <p>請選擇性別：</p>
        <span>
            男：<input type="radio" name="sex" value="man" checked="checked">
            女：<input type="radio" name="sex" value="woman">
            <!--name屬性相同表示單選,value表示選擇對應的key-->
            </span>
        <p>愛好：</p>
        上網<input type="checkbox" name="favor" value="1" checked="checked">
        音樂<input type="checkbox" name="favor" value="2">
        打球<input type="checkbox" name="favor" value="3">
        p>技能：</p>
        python<input type="checkbox" name="skill" value="1">
        shell<input type="checkbox" name="skill" value="2">
        nginx<input type="checkbox" name="skill" value="3">
        <div>
        <input type="submit" value="提交">
        </div>
    </div>

上傳文件：file

name屬性設置文件名字，特別注意上傳文件依賴form表單中的屬性(enctype="multipart/form-data"),該屬性表示將文件一點點發給服務器。

demo：

 <div>
            <p>上傳文件：</p>
            <input type="file" name="filename">
            <input type="submit" value="提交">
            <input type="reset" value="重置" >
</div>

重置：reset

將輸入的數據重新清空

7.textarea

多行文本輸入，name表示為提交內容設置key，默認值被包裹在標簽中。

 <textarea name="usermsg">wd</textarea>
 <input type="submit" value="提交">

8.select標簽

下拉框

option：設置選項

optgroup：設置分組

name：設置select的key

value：設置值option的值，提交數據時候使用

multiple="multiple"：設置多選

selected="selected"：設置默認選項，

size：設置顯示多少個，默認顯示一個。

demo:

<select name="city"  multiple="multiple" size="1">
        <optgroup label="四川">
            <!--optgroup 設置組，是不能被選中的-->
             <option value="3">成都</option>
             <option value="3">達州</option>
        </optgroup>
        <option value="1">北京</option>
        <option value="2">上海</option>

        <option value="4">杭州</option>
        <option value="5" selected="selected">廣州</option>
    </select>

9.img標簽

圖片標簽

src：標識圖片來源

title：設置圖片標題，鼠標放在圖片上可看見

alt：設置圖片背后顯示內容（當圖片不存在時候顯示）

demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello wd</title>
</head>
<body>
<a >
    <img src="timg.jpeg" alt="小清新" title="圖片小清新">
</a>
</body>
</html>

10.列表

有序列表ol
無需列表ul
自定義列表dl

有序列表：

<ol>
    <li>python</li>
    <li>linux</li>
    <li>go</li>
</ol>

無序列表：

<ul>
    <li>linux</li>
    <li>pyhton</li>
</ul>

自定義列表：dt設置標題，dd設置條目：

<dl>
    <dt>技能</dt>
    <dd>go</dd>
    <dd>python</dd>
    <dd>linux</dd>
    <dt>愛好</dt>
    <dd>電影</dd>
    <dd>音樂</dd>
</dl>

11.table標簽

表格

thead：設置表頭

th：設置表頭中的列

tbody：設置表內容

border：設置表格邊框

tr：設置表格行

td：設置每行中的數據(列數據)

colspan：設置行單元格所占大小

rowspan：設置列單元格所占大小

demo：

<table border="1">
    <thead>
    <th>ip</th>
    <th>主機名</th>
    <th>端口</th>
    </thead>
    <tbody>
    <tr>
        <td>10.0.0.11</td>
        <td>mysql</td>
        <td>3306</td>
    </tr>
       <tr>
        <td>10.0.0.21</td>
        <td>nginx</td>
        <td>80</td>
    </tr>
    </tbody>
</table>

合并單元格：

思路：取消一個單元格，通過colspan、rowspan設置其他單元格所占大小。

demo：合并同行

<table border="1">
    <thead>
    <th>表頭一</th>
    <th>表頭二</th>
    <th>表頭三</th>
    <th>表頭四</th>
    </thead>
    <tbody>
    <tr>
        <td colspan="2">1</td>
        <td>1</td>
        <td>1</td>
     
    </tr>
       <tr>
        <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>
    </tr>
    </tbody>
</table>

demo：合并同一列

</table>

<table border="1">
    <thead>
    <th>表頭一</th>
    <th>表頭二</th>
    <th>表頭三</th>
    <th>表頭四</th>
    </thead>
    <tbody>
    <tr>
        <td rowspan="2">1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
       <tr>

        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    </tbody>
</table>

12.label標簽

label一般和input配合使用，用于關聯標簽，通過使用id關聯的標簽，使得點擊label標簽也能在input中中獲取光標進行內容輸入。

for：設置關聯名字(關聯標簽使用id)

demo：

<label for="username">用戶名</label>
#點擊用戶名也能就能進行輸入
    <input id="username" type="text" name="user">
    <label for="1">密碼</label>
    <input id="1" type="password" name="1" >

13.fieldset

設置帶字段的邊框

legend：設置邊框包裹的內容

demo：

<fieldset>
    <legend>登錄</legend>
    <label for="username">用戶名</label>
    <input id="username" type="text" name="user">
    <label for="1">密碼</label>
    <input id="1" type="password" name="1" >
</fieldset>

14.cursor屬性

用來顯示一些不同的光標

常用值pointer：鼠標放上變成小手。