HTML頁面中head標(biāo)簽有啥用？-零基礎(chǔ)自學(xué)網(wǎng)頁制作

ead標(biāo)簽概述

通過之前三節(jié)的學(xué)習(xí)，我們基本了解了HTML標(biāo)記語言的基本語法，也明確了一個基本原則，那就是網(wǎng)頁中所有的可視信息都是寫在<body></body>標(biāo)簽之間的，在一文中，我們?yōu)榈谝粋€頁面添加了"標(biāo)題"與"段落"標(biāo)簽，實際上，未來我們要說到的圖片、音頻、視頻、表格以及區(qū)塊等元素也是放在<body></body>標(biāo)簽之間的。

但是與<body></body>標(biāo)簽并列的<head></head>標(biāo)簽對于整個頁面有什么作用呢？

Head就是頭的意思，body是身體的意思。如果html頁面是個人的話，我們看到的都是他的外表，比如發(fā)型、衣服等，這些都是穿在body（身體）上的，而這個人的服飾風(fēng)格卻與他的性格、教育程度、思維方式相關(guān)，這些是我們看不到的，是裝在這個人的head（頭）中的。因為腦袋中的觀念不同，因此有人喜歡漢服，有人喜歡唐裝。

一言以蔽之，<head>標(biāo)簽的作用是把控HTML頁面的顯示形式。

在<head>標(biāo)簽中添加<title></title>標(biāo)簽為網(wǎng)頁指定顯示在瀏覽器小窗口上的名字。代碼示例如下：

圖1

不要小看title標(biāo)簽，搜索引擎非常看重title標(biāo)簽中的文字信息，再進行關(guān)鍵字比對時，title中的文字占有較大權(quán)重。因此，認(rèn)真選擇title內(nèi)容對你的頁面是否能迅速被搜索引擎找到有著重要意義。關(guān)于搜索關(guān)鍵字我們會在下一節(jié)練習(xí)中再細致分析。

添加<link>標(biāo)簽為HTML頁面引入圖標(biāo)、JavaScript腳本、CSS樣式文件等。針對JavaScript腳本的引入，還有另外一個<script></script>標(biāo)簽可用。導(dǎo)入CSS樣式文件也可以使用<style></style>標(biāo)簽，這個在學(xué)完HTML之后才會接觸到，現(xiàn)在了解就可以。

通過以上學(xué)習(xí)我們知道了<head>標(biāo)簽中通常添加<title></title>,<link>以及<script></script>,<style></style>等標(biāo)簽。這些標(biāo)簽控制著html文件的通用圖標(biāo)引入、布局樣式引入、交互腳本引入等功能。

如果頁面都是給body穿上衣服，而穿什么樣的衣服，如何搭配等因素缺是由head里的內(nèi)容決定。

utf-8是啥？

在<head>標(biāo)簽中還有一個非常重要的<meta>標(biāo)簽（metadata：元數(shù)據(jù)，名字讀不懂沒關(guān)系，關(guān)鍵是怎么使用），這個標(biāo)簽可以為整個頁面指定名稱、被搜索時的關(guān)鍵字以及非常重要的文檔字符編碼功能。

在指定文檔編碼時，經(jīng)常使用"utf-8"編碼方式。

utf-8編碼方式賦予了html頁面顯示中文（或其他非英文文字）的能力。這對今天的互聯(lián)網(wǎng)世界來說是非常重要的功能。

utf-8這個重要的編碼方式就在<head>標(biāo)簽中的<meta>標(biāo)簽中指定的。寫法如下：

<head><meta charset="utf-8"><title>第一個網(wǎng)頁</title></head>

大家看這行代碼：<meta charset="utf-8">

"charset"就叫做<meta>標(biāo)簽中指定字符編碼方式的屬性。

在"charset"后面加"="號，這叫做指定屬性值。

大家注意，指定的這個值叫"utf-8"，切記！utf-8兩邊要加引號！

下面我們就目前可以看明白的<meta>屬性進行一下操作練習(xí)。

開始練習(xí)之前大家肯定有這樣一個問題（沒想到也沒關(guān)系），那就是在之前的案例中，那個簡單的網(wǎng)頁并沒有指定utf-8的字符編碼方式，為什么頁面的漢字照常顯示了？

這其實是瀏覽器本身在后臺為我們補齊了這段代碼。我使用的是聯(lián)想自帶的瀏覽器，使用火狐、Google瀏覽器的小伙伴們估計也可以正常顯示，如果使用低版本的ie瀏覽器，則無法正常顯示。因為低版本的ie瀏覽器不具備補齊這段代碼的功能。

關(guān)于meta標(biāo)簽與utf-8的編碼方式先介紹到這里，下一節(jié)我們會在不同瀏覽器中測試添加utf-8或不添加utf-8的不同顯示效果，并講解meta標(biāo)簽中keyword（關(guān)鍵字）的使用方法。

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

么是 web

web 就是 world wide web 的縮寫，稱之為全球廣域網(wǎng)，俗稱 WWW。對于用戶來說它其實就是由多個網(wǎng)頁組成在一起而形成的一種服務(wù)（Web）.

我們可以將 web 理解為就是當(dāng)前的一種互聯(lián)網(wǎng)。對于我們來說更多的就是網(wǎng)站服務(wù)。網(wǎng)站我們可以認(rèn)是由多個網(wǎng)頁組合在一起而形成一種服務(wù)。

而 web 前端就是來負責(zé)一個網(wǎng)站當(dāng)中前臺網(wǎng)頁里的內(nèi)容。網(wǎng)頁是由前端工程師使用 HTML 語言編寫而成的一種文件，它里面會包含文字、圖片、超鏈接、音頻、視頻等等這些內(nèi)容。

注：超文本標(biāo)記語言（Hyper Text Markup Language , HTML）就是用來描述網(wǎng)頁內(nèi)容的一種計算機語言。

什么是 HTML

HTML 超文本標(biāo)記語言（Hyper Text Markup Language）就是用來描述網(wǎng)頁的一種計算機語言。

HTML 發(fā)展

在互聯(lián)網(wǎng)最初的時候是沒有 HTML 的，我們只能通過網(wǎng)絡(luò)傳輸最簡單的文字內(nèi)容。隨著用戶的要求越來越多，同時也是我們的技術(shù)的不斷發(fā)展，就出了一種可以表達文字內(nèi)容之外的語言 HTML1.0。后來又慢慢發(fā)展到了現(xiàn)在的 HTML5，也就是我們現(xiàn)在常說的 H5。

HTML 查看工具

在測試過程中，我們有時候需要通過工具去查看對應(yīng)的 HTML 代碼。在這里我們可以用瀏覽器自帶的開發(fā)者工具，打開這個工具的快捷鍵是 F12。

開發(fā)者工具是一個相當(dāng)強大的工具。可以查看修改 HTML，還可以調(diào)試 js，可以修改 css，還可以查看網(wǎng)絡(luò)數(shù)據(jù)，并且還能進行性能測試。非常的全能。對于咱們 web 測試來說，是一個必須要掌握的工具。

要查看 HTML 源碼，我們只需要進入開發(fā)者工具的 elements 界面。在這里可以對 web 頁面上的元素進行定位，并且查看整個 web 頁面的 HTML 源碼。

HTML 基本結(jié)構(gòu)

基本結(jié)構(gòu)

網(wǎng)頁是我們通過 HTML 語言來書寫。用 HTML 語言去書寫網(wǎng)頁有一些結(jié)構(gòu)是默認(rèn)必須存在的，這個結(jié)構(gòu)我們就叫做網(wǎng)頁（HTML）骨架。

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

</body>
</html>

HTML 基本標(biāo)簽

標(biāo)簽

標(biāo)簽就是 HTML 語言的發(fā)明者人為定義好的一些"單詞"，不同的標(biāo)簽代表了不同的功能。

標(biāo)簽有兩種常見的形式：

雙標(biāo)簽：<標(biāo)簽名稱></標(biāo)簽名稱>
單標(biāo)簽：<標(biāo)簽名 />

常見標(biāo)簽

todo：加入 demo（done）

<!DOCTYPE html>：向瀏覽器聲明當(dāng)前的文檔是 HTML 類型
<html> 與 </html> 之間的文本描述網(wǎng)頁，<html>是網(wǎng)頁當(dāng)中最大的一個標(biāo)簽，稱之為根標(biāo)簽
<head> 與 </head> 描述網(wǎng)頁頭部，里面的內(nèi)容是寫給瀏覽器看的
<meta charset="UTF-8"> 表示在設(shè)置當(dāng)前網(wǎng)頁的顯示編碼
<title> 與 </title> 之間文本為網(wǎng)頁的標(biāo)題，里面的內(nèi)容會在瀏覽器的標(biāo)簽頁上顯示
<body> 與 </body> 之間的文本是網(wǎng)頁主體，里面的內(nèi)容會顯示在瀏覽器的空白區(qū)域內(nèi)
<div> 與 </div> 之間定義網(wǎng)頁中的一個分隔區(qū)塊或者一個區(qū)域部分
<h1> 與 </h1> 之間的文本被顯示為標(biāo)題
<p> 與 </p> 之間的文本被顯示為段落

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>網(wǎng)頁標(biāo)題</title>
  </head>
  <body>
    <div>
      <h1>我的第一個網(wǎng)頁</h1>
      <p>網(wǎng)頁中的內(nèi)容</p>
    </div>
  </body>
</html>

標(biāo)簽的屬性

todo：加入 demo(done)

HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。屬性總是以名稱/值對的形式出現(xiàn)，比如：name="value"。

屬性的基本格式為：<標(biāo)簽名屬性1="屬性值1" 屬性2="屬性值2"></標(biāo)簽名>

每個標(biāo)簽都可以擁有多個屬性。屬性必須寫在開始標(biāo)簽中，位于標(biāo)簽名的后面。屬性之間不區(qū)分順序。標(biāo)簽名與屬性、屬性與屬性之間使用空格隔開。任何屬性都有默認(rèn)值，省略該屬性表示使用默認(rèn)值。

在 HTML 里，屬性也有很多中，比如首先有全局屬性，全局屬性是所有的標(biāo)簽都可以使用的。然后還有事件屬性，事件大家可以理解為不同的操作。在不同的操作中，也有特殊的屬性可以定義。最后還有各個標(biāo)簽的一些獨有的屬性。

比如常見的全局屬性有:

class：規(guī)定元素的類名
id：規(guī)定元素的唯一 id

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>網(wǎng)頁標(biāo)題</title>
  </head>
  <body>
    <div id="first" class="content">網(wǎng)頁中的內(nèi)容</div>
  </body>
</html>

搜索微信公眾號：TestingStudio霍格沃茲的干貨都很硬核

這里是云端源想IT，幫你輕松學(xué)IT”

嗨~ 今天的你過得還好嗎？

誰見過風(fēng)呢

勿論你和我

但當(dāng)樹木俯首

風(fēng)正經(jīng)過

- 2024.03.05 -

在這個數(shù)字化的時代，我們每天都在與網(wǎng)頁打交道。你是否曾經(jīng)好奇過，這些充滿魔力的網(wǎng)頁是如何誕生的呢？今天，我們就來揭開構(gòu)成這些網(wǎng)頁的神秘面紗——HTML（超文本標(biāo)記語言）。

一、什么是HTML

網(wǎng)頁的基本組成

網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，通常由圖片、鏈接、文字、聲音、視頻等元素組成，通常我們看見的網(wǎng)頁都是.htm和.html后綴結(jié)尾的文件，因為都稱為HTML文件。

什么是HTML

HTML 英文全稱是 Hyper Text Markup Language，中文譯為“超文本標(biāo)記語言”，專門用來設(shè)計和編輯網(wǎng)頁。

使用 HTML 編寫的文件稱為“HTML 文檔”，一般后綴為.html（也可以使用.htm，不過比較少見）。HTML 文檔是一種純文本文件，您可以使用 Windows 記事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本編輯來打開或者創(chuàng)建。

每個網(wǎng)頁都是一個 HTML 文檔，使用瀏覽器訪問一個鏈接（URL），實際上就是下載、解析和顯示 HTML 文檔的過程。將眾多 HTML 文檔放在一個文件夾中，然后提供對外訪問權(quán)限，就構(gòu)成了一個網(wǎng)站。

二、HTML的歷史

HTML的故事始于1989年，當(dāng)時蒂姆·伯納斯-李在歐洲核子研究中心（CERN）提出了一個名為“萬維網(wǎng)”的概念。

為了實現(xiàn)這一概念，他發(fā)明了HTML，并隨后與羅伯特·卡里奧一起發(fā)明了HTTP協(xié)議。從那時起，HTML就成為了互聯(lián)網(wǎng)不可或缺的一部分。

上圖簡單羅列了HTML的發(fā)展歷史，大家可以簡單了解一下。

三、HTML相關(guān)概念

什么是標(biāo)簽

HTML 標(biāo)記通常被稱為 HTML 標(biāo)簽 (HTML tag)。 HTML 標(biāo)簽是由尖括號包圍的關(guān)鍵詞，比如<html/>。

封閉類型標(biāo)記（也叫雙標(biāo)記），必須成對出現(xiàn),如<p></p> 。

標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽，第二個標(biāo)簽是結(jié)束標(biāo)簽，開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽。

非封閉類型標(biāo)記，也叫作空標(biāo)記，或者單標(biāo)記，如<br/>

<標(biāo)簽>內(nèi)容<標(biāo)簽/>

什么是元素

"HTML 標(biāo)簽" 和 "HTML 元素" 通常都是描述同樣的意思。但是嚴(yán)格來講，一個HTML 元素包含了開始標(biāo)簽與結(jié)束標(biāo)簽，如下實例。

HTML 元素：

<p>這是一個段落</p>

web瀏覽器

Web 瀏覽器（如谷歌瀏覽器，Internet Explorer，F(xiàn)irefox，Safari）是用于讀取 HTML 文件，并將其作為網(wǎng)頁顯示。瀏覽器并不是直接顯示的 HTML 標(biāo)簽，但可以使用標(biāo)簽來決定如何展現(xiàn) HTML頁面的內(nèi)容給用戶：

HTML 屬性

屬性是用來修飾元素的，屬性必須位于開始標(biāo)簽里，一個元素的屬性可能不止一個，多個屬性之間用空格隔開，多個屬性之間不區(qū)分先后順序。

每個屬性都有值，屬性和屬性的值之間用等號鏈接，屬性的值包含在引號當(dāng)中，屬性總是以名稱/值對的形式出現(xiàn)。

四、HTML的基本結(jié)構(gòu)

一個典型的HTML文檔由以下幾個基本元素構(gòu)成：

<!DOCTYPE html>

這是文檔類型聲明，告訴瀏覽器這個文檔使用的是HTML5標(biāo)準(zhǔn)。

<html>

這是整個HTML文檔的根元素，其他所有元素都包含在這個標(biāo)簽內(nèi)。

<head>

這個部分包含了所有關(guān)于網(wǎng)頁的元信息，如標(biāo)題、字符集聲明、引入的CSS樣式表和JavaScript文件等。

<title>

這個標(biāo)簽定義了網(wǎng)頁的標(biāo)題，它顯示在瀏覽器的標(biāo)題欄或標(biāo)簽頁上。

<body>

這個部分包含了網(wǎng)頁的所有內(nèi)容，如文本、圖片、鏈接、表格、列表等。

HTML的結(jié)構(gòu)示例

讓我們通過一個簡單的例子來具體了解HTML的結(jié)構(gòu)：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一個HTML頁面</title>
</head>
<body>
<h1>歡迎來到我的網(wǎng)頁！</h1>
<p>這是一個簡單的段落。</p>
<a href="https://www.example.com">點擊這里訪問示例網(wǎng)站</a>
</body>
</html>

在這個例子中，我們可以看到一個完整的HTML文檔結(jié)構(gòu)，從<!DOCTYPE html>開始，到最后一個</html>結(jié)束。

想象一下，如果HTML是一棵樹，那么<html>就是樹干，<head>和<body>就像是樹的兩個主要分支。<head>中的標(biāo)簽好比是樹葉，它們雖然不起眼，但卻至關(guān)重要，為樹木提供營養(yǎng)。而<body>中的標(biāo)簽則像是樹枝和果實，它們構(gòu)成了樹的主體，吸引人們的目光。

想要快速入門HTML嗎？推薦一個前端開發(fā)基礎(chǔ)課程，這個老師講的特別好，零基礎(chǔ)學(xué)習(xí)無壓力，知識點結(jié)合代碼，邊學(xué)邊練，可以免費試看試學(xué)，還有各種輔助工具和資料，非常適合新手！搜索【云端源想】前往學(xué)習(xí)哦！

五、HTML的特點

HTML的特點主要包括簡易性、可擴展性、平臺無關(guān)性和通用性等。具體如下：

1、簡易性：

HTML是一種相對容易學(xué)習(xí)和使用的語言，它的版本升級通常采用超集方式，使得新版本能夠兼容舊版本的標(biāo)簽和功能，這樣既保持了向后兼容性，又能夠靈活方便地引入新的功能。

2、可擴展性：

隨著互聯(lián)網(wǎng)的發(fā)展，HTML也在不斷增加新的元素和屬性來滿足新的需求，如支持多媒體內(nèi)容的嵌入、更豐富的表單控件等。這種設(shè)計使得HTML能夠適應(yīng)不斷變化的網(wǎng)絡(luò)環(huán)境。

3、平臺無關(guān)性：

HTML編寫的網(wǎng)頁可以在不同的操作系統(tǒng)和瀏覽器上顯示，這是因為HTML是一種與平臺無關(guān)的語言。這意味著無論用戶使用什么設(shè)備或瀏覽器，都能夠訪問和瀏覽HTML頁面。

4、通用性：

HTML是網(wǎng)絡(luò)的通用語言，它是一種簡單的標(biāo)記語言，用于創(chuàng)建和結(jié)構(gòu)化網(wǎng)頁內(nèi)容。由于其廣泛的支持和普及，幾乎所有的設(shè)備和瀏覽器都能夠解析和顯示HTML內(nèi)容。

5、支持多種媒體格式：

HTML不僅支持文本內(nèi)容，還能夠嵌入圖片、音頻、視頻等多種媒體格式，這使得網(wǎng)頁可以提供豐富的用戶體驗。

6、標(biāo)準(zhǔn)化：

HTML遵循萬維網(wǎng)聯(lián)盟（W3C）制定的國際標(biāo)準(zhǔn)，這意味著網(wǎng)頁開發(fā)者可以根據(jù)這些標(biāo)準(zhǔn)來創(chuàng)建網(wǎng)頁，確保網(wǎng)頁的互操作性和可訪問性。

7、標(biāo)簽豐富：

HTML提供了一系列的標(biāo)簽，如標(biāo)題、列表、鏈接、表格等，這些標(biāo)簽使得開發(fā)者能夠創(chuàng)建出結(jié)構(gòu)清晰、功能豐富的網(wǎng)頁。

綜上所述，HTML作為一種基礎(chǔ)的網(wǎng)頁開發(fā)語言，因其易學(xué)易用、跨平臺、多功能和高度標(biāo)準(zhǔn)化的特點，成為了構(gòu)建現(xiàn)代網(wǎng)絡(luò)內(nèi)容的核心工具。

HTML作為連接世界的紐帶，其重要性不言而喻。它是數(shù)字世界的基石，也是每個想要進入互聯(lián)網(wǎng)領(lǐng)域的人必須掌握的技能。無論你是夢想成為前端開發(fā)者，還是僅僅想要更好地理解這個由代碼構(gòu)成的世界，學(xué)習(xí)HTML都是一個不錯的開始。

今天就先講到這里了，

更多前端開發(fā)基礎(chǔ)知識點擊文末閱讀原文查看哦！

記得關(guān)注【云端源想IT】一起學(xué)編程！

我們下期再見！

END

文案編輯|云端學(xué)長

文案配圖|云端學(xué)長

內(nèi)容由：云端源想分享

在線咨詢

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商