一、HTML網頁介紹

HTML是一種用於創建網頁的標準標記語言,是一種與python不同的編程語言。網頁文件的擴展名通常為.html或.htm。

1、簡單的HTML網頁框架

每一個HTML網頁都包含一個基礎框架,其他的內容都是在基礎框架內進行擴充的、

Pycharm 裏設置html模板_#爬蟲

<!DOCTYPE html>標籤:用於聲明此HTML網頁為HTML5網頁,此標籤在整個網頁中只需要一個

<html lang="en">標籤:表示HTML網頁的根元素,此標籤需要成對出現,第一個<html>標籤表示HTML頁面的開始,第二個</html>標籤表示網頁的結束,標籤之間是HTML網頁的全部內容.另外標籤中的屬性lang是language的縮寫,表示此網頁使用哪種語言,en表示english,即該網頁使用的是英語,如果是中文網頁則使用lang="zh-CN"

<head>標籤:網頁的頭部標籤,此標籤需要成對出現.標籤之間通常插入HTML網頁的標題,樣式,元數據等內容(並不是網頁窗口中的內容)

<meta charset="UTF-8">標籤:其中的<meta>標籤用於描述基本的元數據,此標籤在整個網頁中只需要一個,是單標籤,通常用於表明網頁的描述,關鍵詞,字符編碼方式等.charset="UTF-8"表示字符編碼方式為UTF-8,瀏覽器獲取到此標籤信息會按照UTF-8編碼方式翻譯此網頁內容

<title>標籤:用於設置網頁的標題,此標題需要成對出現,標籤中的內容為網頁標題

<body>標籤:用於顯示在網頁窗口中的內容,即網頁的正文,此標籤需要成對出現,表示標籤之間的內容都會顯示在網頁窗口中.<body>標籤中的內容可以插入多個內容標籤來充分地展示多元化的網頁信息 注意:運行操作和python不同,而是點擊右上角出現的軟件直接跳轉執行,但是要注意電腦裏要有這個軟件才能執行。

二、常用標籤

1、標題標籤

在HTML網頁中,可以使用標籤<h1>~<h6>來表示網頁中正文內容的標籤。不同標題的顯示效果不同,<h1>標籤的標題級別高於<h2>標籤的標題級別,依次類推,<h6>標籤的標題級別最低

Pycharm 裏設置html模板_#python_02

2、段落標籤

在HTML網頁中,可以使用<p>標籤來表示一個段落的內容

Pycharm 裏設置html模板_#python_03

3、超鏈接標籤

超鏈接標籤<a>可用於實現在網頁中單擊某個信息鏈接後自動跳轉到另一個網頁

Pycharm 裏設置html模板_#python_04

4、註釋標籤

註釋標籤由<!-- ->和<!-->

Pycharm 裏設置html模板_#html_05

5、標籤屬性

一個標籤除了標籤名、標籤內容外,還可以包含標籤屬性。標籤屬性用於給標籤設置附加功能,類似於python語言中的方法,當通過類創建一個對象時,如果對象包含其他的屬性和方法,該對象便具備更多的功能

常用的標籤屬性有class、id、style和title

class:為HTML網頁元素定義一個或多個類名

id:定義元素的唯一id,此id值在整個網頁中都是唯一的

style:定義標籤的行內樣式

title:設置標籤的額外信息,當鼠標指針移到此標籤上時會顯示一段提示文本

三、設置字體格式

1、設置字體格式的字形與效果

給字體設置粗體格式使用<b>標籤

Pycharm 裏設置html模板_#html_06

給字體設置斜體格式使用<i>標籤,設置上標格式使用<sup>標籤,設置下標格式使用<sub>標籤,設置下劃線格式使用<u>標籤

Pycharm 裏設置html模板_HTML_07

2、設置字體顏色

字體顏色可以通過標籤的屬性style設置,形式如下:

<標籤名 style="color:顏色值">內容</標籤名>

Pycharm 裏設置html模板_#爬蟲_08

3、設置字體大小

可以通過給樣式style賦予font-size的值來使用,形式如下:

<標籤名 style="font-size:38pt">內容</標籤名>

設置字體大小的單位可以有多種形式

Pycharm 裏設置html模板_標籤名_09

4、添加多媒體

1)添加網頁圖片

在網頁中插入圖片可以使用<img>標籤(<img>標籤是單標籤,即整個網頁中只需要1個此標籤)來實現,形式如下:

<img src="網址" alt="文字" width="304px" height="228px">

<img>標籤中存在多個屬性,這裏列舉了常見的src、alt、width、height屬性

屬性src:指必須填入的屬性,表面插入的圖片的網址(url)

屬性alt:指當src鏈接的圖片url失效了或因其他原因無法顯示圖片時出現的提示性文字

屬性width、height:表示圖片的寬度和高度,其單位為px,表示像素。當只填入一個參數時,默認按原尺寸自動縮放

Pycharm 裏設置html模板_#爬蟲_10

Pycharm 裏設置html模板_HTML_11

2)添加網頁音頻

在HTML中可以使用<audio>標籤實現在網頁中插入音頻。形式如下:

<audio controls='controls' src="音頻地址.mp3" type="音頻類型">當瀏覽器不允許播放時就會出現這段文件</audio>

屬性controls:為網頁音頻播放提供控件,例如暫停、播放、音頻調節等

屬性src:用於鏈接音頻文件的地址

屬性type:表示音頻文件的類型

Pycharm 裏設置html模板_標籤名_12

3)添加網頁視頻

在HTML中使用<video>標籤實現在網頁中插入視頻,形式如下:

<video src="視頻網址" controls="controls" width="寬度值" height="高度值"autoplay loop muted></video>

Pycharm 裏設置html模板_#html_13

四、創建容器

為了讓網頁的佈局更加美觀,HTML提供了容器的概念

1、<div>標籤

在HTML中使用<div>標籤來建立一個容器,形式如下:

<div>其他標籤</div>

被<div>標籤所包含的標籤都隸屬於同一個容器,當使用<div>標籤設置屬性形式時,整個容器都會顯示此樣式

Pycharm 裏設置html模板_標籤名_14

2、佈局

當需要對網頁頁面進行佈局時,需要設置<div>標籤的相應屬性,形式如下:

<div style="width:容器寬度;height:容器高度;float:容器位置"></div>

參數width和height:表示容器的寬度和高度,長度單位為px,即像素

參數float:表示容器的位置,值可以為right(靠右側)、left(靠左側)、bottom(靠底部)、

top(靠頂部)

Pycharm 裏設置html模板_#爬蟲_15

五、創建表格

1、表格標籤

在HTML中可以使用表格標籤<table>創建表格,其中表格的行數由<tr>標籤的個數決定,表格的列數由<tr>標籤中<td>標籤的個數決定

Pycharm 裏設置html模板_HTML_16

其中的border用來控制表格邊框的顯示和粗細,border="2"邊框粗度

2、添加表格表頭

可以使用<th>標籤來實現在表格中插入表頭的操作

Pycharm 裏設置html模板_#python_17

其中的colspan="2"代表將兩列合併成了一列

3、添加表頭標題

創建表格標題可以使用標籤<caption>來實現,形式如下:

<caption>標題內容</caption>

Pycharm 裏設置html模板_#html_18