HTML全稱超文本標記語言(Hyper Text Markup Language)，它不是一種編程語言，而是一種標記語言，通常用來製作網頁。

超文本指的是頁面上除了可以顯示普通的文字以外，還可以顯示圖片、鏈接、甚至音頻視頻和程序等非文字元素。

標記語言是指，使用各種各樣具有特俗含義的標籤，給代碼上的普通文字賦予特殊的含義，讓文字在界面上顯示特殊的效果。HTML語言主要就是學習各種標籤的使用。

一.HTML文檔結構

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

</body>
</html>

代碼說明:

<!DOCTYPE html> :文檔類型聲明，聲明當前HTML文檔的類型，它指向網絡上的一個DTD文件，這個DTD文件會用來驗證文檔中出現的標籤是否合理。

<html>標籤:是整個HTML文檔的根標籤，所有的其它標籤都應該包含在這個標籤內，作爲這個標籤的子標籤。

<head>標籤:HTML文檔的頭部標籤，<head>標籤裏的子標籤可以引用腳本、指示瀏覽器在哪裏找到樣式表、提供元信息等等。常見的子標籤有:<title>標籤、<meta>標籤、<style>標籤、<link>標籤和<script>標籤等。

<body>標籤:HTML文檔的主體，標籤包含界面上的所有顯示內容。

二.標籤介紹

HTML語言就是使用各種各樣具有不同含義的標籤對代碼裏的普通文字進行標註，讓普通的文字具有自己特殊的含義。所以，各個標籤到底具有哪些功能，就是掌握的重點。

單標籤和雙標籤

一般的，標籤都是成對出現，例如h1標籤， <h1> 表示的是標籤的開始，</h1>表示標籤的結束，在開始標籤和結束標籤中間，編寫標籤裏顯示的內容。但是對於單標籤，例如<hr>標籤、<br>標籤、<img>標籤等，這類標籤裏不需要顯示文字內容，只需要使用一個單標籤就能完成，它們的書寫方式是 <標籤名 />

標籤列表

HTML5標籤大全

三.註釋標籤

註釋是用來給開發人員看的，瀏覽器在解析時，會忽略註釋裏的內容。HTML裏，使用的格式來表示一個註釋。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 我是HTML裏的註釋，瀏覽器在看到我的時候不會解析 -->
</body>
</html>

四.結構標籤

類別標籤一般對於文檔的結構會有一定的影響，主要包含一下幾個標籤：

1.h系列標籤

h系列標籤用作顯示標題，包含h1〜h6系列一共六個標籤。被h系列標籤修飾的文字，字體會加粗，大小會發生變化。h系列標籤具有特殊的語義，搜索引擎在看到這些。標籤時，會特別留意這些標籤，所以，當你只是想把一段普通文字加粗變大，不要輕易使用h標籤，使用CSS樣式來完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>我是h1標題</h1>
<h2>我是h2標題</h2>
<h3>我是h3標題</h3>
<h4>我是h4標題</h4>
<h5>我是h5標題</h5>
<h6>我是h6標題</h6>
</body>
</html>

2.p標籤

p標籤全稱段落，用於表示這一點，它是一個行內元素，一個標籤獨佔一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>9月15日，蘋果最新發布的iPhone11系列手機13日正式啓動預約。國內預購渠道除了蘋果中國官網外，此次iPhone 11 系列預售的平臺還有天貓和京東。
<p>據外媒報道，今年iPhone 11系列全球的首批訂單量預計在800萬臺左右，相比去年2018款iPhone至少減少了10%。其中，iPhone 11佔訂單總數的60%，iPhone 11 Pro佔10%，iPhone 11 Pro Max佔30%。</p>
<p>儘管國內社交網站上關於新iPhone的“浴霸”攝像頭吐槽鋪天蓋地，不過，從國內各大電商平臺發佈的預售數據來看，新iPhone依然搶手。其中，此次新增的綠色版最受歡迎。</p>
<p>本次預售的iPhone新機中包含了三個型號，分別是，iPhone 11：白色、黑色、綠色、黃色、紫色和紅色可選，國行售價64GB爲5499元、128GB爲5999元、256GB爲6799元；</p>
<p>iPhone 11 Pro有深空灰色、銀色、金色和暗夜綠色可選，國行售價64GB爲8699元、256GB爲9999元、512GB、11799元；</p>
</body>
</html>

3. hr標籤

hr標籤全稱水平規則，使用顯示一個分割線。這是一個單標籤，開始標籤和結束標籤是同一個標籤。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>我是一個P</p>
<hr>
<p>我也是一個P</p>
</body>
</html>

4.br標籤

br標籤全稱barter rabbet，它是一個標籤，用來對文本文字進行換行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
你好, <br>我是文字
</body>
</html>

5.div標籤

div標籤是一個無語義的標籤，它獨佔一行，一般結合CSS進行界面佈局，俗稱div + CSS。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        div {
            width:800px;
            margin: 0 auto;
            margin-bottom:5px;
        }
        .one {
            height:50px;
            background-color:yellow;
        }
        .two {
            height:300px;
            background-color:pink;
        }
        .three {
            height:200px;
        }
        .four {
            width:48%;
            height:100%;
            background-color:skyblue;
            float:left;
        }
        .five {
            width:48%;
            height:100%;
            background-color:springgreen;
            float:right;
        }

    </style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three">
    <div class="four"></div>
    <div class="five"></div>
</div>
</body>
</html>

6. span標籤

span是一個無語義的標籤，一般結合CSS來對文字進行樣式的設置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            color:red;
        }
    </style>
</head>
<body>
<p>我是p裏的內容，<span>這段內容的文字需要變成紅色</span>，可以使用span標籤來修飾那一段內容，然後再使用CSS來設置樣式</p>
</body>
</html>

五.a(超鏈接)

a 標籤全稱 anchor,我們可以稱它爲錨點標籤，一般用來顯示一個超鏈接。

<a href="http://www.youku.com">優酷</a>

a標籤用作錨點定位

<!-- href標籤指向的地址裏的 # 表示界面上的摸一個元素的id -->
<a href="#mubiao">跳轉到目標位置</a>
<p>我是p</p>
<p>我是p</p>
<div id="mubiao">我是div</div>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>

不同狀態下的顯示區別

<a href="http://www.jd.com">未被訪問的鏈接帶有下劃線而且是藍色的</a><br>
<a href="http://www.taobao.com">已被訪問的鏈接帶有下劃線而且是紫色的</a><br>
<a href="http://www.baidu.com">活動鏈接帶有下劃線而且是紅色的</a>

不同狀態下的超鏈接，顯示的效果也是不一樣的，超鏈接的狀態分爲三種:

未訪問狀態(超鏈接對應的URL從未訪問過)
已訪問狀態(超鏈接對應的URL地址以前訪問過，即歷史記錄裏存在)
激活狀態(鼠標點擊超鏈接的一瞬間)
常見屬性

屬性名	取值	含義
href	任意URL地址	指定a標籤指向的鏈接地址
target	_sel 默認值	表示在瀏覽器的當前選項卡打開超鏈接
target	_blank	在瀏覽器中開啓一個新的選線卡打開超鏈接

六.img(圖片標籤)

在HTML裏使用img標籤用來顯示一張圖片，通過修改 img 標籤的 src 屬性加載不同的圖片資源。由於img標籤也不用顯示文字，所以它也是一個單標籤。

<img src="test.png" alt="當圖片加載失敗時會顯示這段文字"/>

src 屬性用來指定圖片的路徑，可以使用絕對路徑和相對路徑，一般情況下我們會選擇使用相對路徑。
常見屬性

屬性名	取值	含義
src	url	img標籤加載的圖片URL地址
alt	文字	當圖片加載失敗時顯示的文字
title	centered 文字	全局屬性，當鼠標懸停到圖片上時顯示的文字
width	數字，單位像素px	用來指定圖片的寬度
height	數字，單位像素px	用來指定圖片的高度

七. HTML裏的列表

列表在HTML裏也是比較常見的一種表示方式，常見的列表有三種:

有序列表: ol標籤，全稱Ordered List
無序列表: ul標籤，全稱 Unordered List
定義列表: dl標籤，全稱Definition List
三種列表的使用方式大致相同，但是在細節上稍有區別

1.有序列表：ol

有序列表使用 ol 標籤來表示，裏面每一個列表項使用 li標籤(全稱list item，列表項)來表示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            color:red;
        }
    </style>
</head>
<body>
<ol>
    <li>起牀</li>
    <li>洗漱</li>
    <li>喫飯</li>
    <li>出門</li>
    <li>上班</li>
</ol>
</body>
</html>

ol標籤屬性介紹
type屬性，用來指定序號類型，可選值如下:

‘a’ 表示小寫字母編號；
‘A’ 表示大寫字母編號；
‘i’ 表示小寫羅馬數字編號；
‘I’ 表示大寫羅馬數字編號；
‘1’ 表示數字編號（默認值）

start屬性，這個屬性值是一個整數，用來指定序號的開始值。儘管列表條目的序號可能不是數字順序，但這個開始的順序總是使用數字表示。比如想要元素序號從字母 “C” 開始，使用

。

2.無序列表

無序列表使用ul標籤來表示，和有序列表一樣，無序列表裏的列表項同樣使用 li 標籤來表示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            color:red;
        }
    </style>
</head>
<body>
<ul>
    <li>啤酒</li>
    <li>咖啡</li>
    <li>橙汁</li>
    <li>茶</li>
</ul>
</body>
</html>

ul屬性的使用
ul同樣支持type屬性，用來指定無序列表前面的符號，可選值如下:

circle:顯示空心圓。
disc:顯示實心圓(默認值)
square:顯示實心的正方形

一般情況下，我們不會使用ul的type屬性來修改無序列表的編號樣式，而是選擇使用CSS來實現。

定義列表的使用
定義列表使用 dl 標籤來表示，用來自定義一個列表。它的使用稍微複雜一點，定義列表裏的每一個列表項使用dt表示，同時，每一個dt列表項一般都會再跟一個 dd 標籤對dt進行說明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            color:red;
        }
    </style>
</head>
<body>
<dl>
    <dt>CPU</dt>
    <dd>中央處理器作爲計算機系統的運算和控制核心，是信息處理、程序運行的最終執行單元</dd>
    <dt>內存</dt>
    <dd>內存是計算機中重要的部件之一，它是與CPU進行溝通的橋樑</dd>
    <dt>硬盤</dt>
    <dd>電腦硬盤是計算機最主要的存儲設備</dd>
</dl>
</body>
</html>

八.表格標籤

在HTML裏，使用

來顯示一個表格，其他與表格相關的標籤都需要作爲table標籤的子標籤。table標籤下的常見子標籤如下：

標籤用來表示表格的標題，一般會配合h標籤使用。
標籤直接放在 table 標籤下作爲table標籤的子標籤，表示一行數據。
標籤放在 tr 標籤下，作爲 tr標籤的子標籤，表示表頭。
標籤放在 tr 標籤下，作爲tr標籤的子標籤，表示單元格。
td 標籤可以設置 rowspan和colspan屬性，取值是一個整數，用來表示這個單元格佔多行或者多列。

HTML初識（標籤）

一.HTML文檔結構

二.標籤介紹

單標籤和雙標籤

標籤列表

三.註釋標籤

四.結構標籤

1.h系列標籤

2.p標籤

3. hr標籤

4.br標籤

5.div標籤

6. span標籤

五.a(超鏈接)

六.img(圖片標籤)

七. HTML裏的列表

1.有序列表：ol

2.無序列表

八.表格標籤

如何基於surging跨網關跨語言進行緩存降級

2024合集

程序員天天 CURD，怎麼才能成長，職業發展的思考(2)

移位操作搞定兩數之商

教你用Perl實現Smgp協議

如何通過前端表格控件在10分鐘內完成一張分組報表？

win11關閉自動檢測病毒刪文件

通用代碼生成器簡介

lightdb 單機模式下數據庫平移

千兆寬帶實際網速能到達多少？

項目上線以及Nginx的配置

Python快速排序的實現

HTML初識（標籤）

MySQL數據庫的權限管理

Linux管理虛擬環境

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結