整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
通過之前三節的學習，我們基本了解了HTML標記語言的基本語法，也明確了一個基本原則，那就是網頁中所有的可視信息都是寫在<body></body>標簽之間的，在一文中，我們為第一個頁面添加了"標題"與"段落"標簽，實際上，未來我們要說到的圖片、音頻、視頻、表格以及區塊等元素也是放在<body></body>標簽之間的。
但是與<body></body>標簽并列的<head></head>標簽對于整個頁面有什么作用呢？
Head就是頭的意思，body是身體的意思。如果html頁面是個人的話，我們看到的都是他的外表，比如發型、衣服等，這些都是穿在body（身體）上的，而這個人的服飾風格卻與他的性格、教育程度、思維方式相關，這些是我們看不到的，是裝在這個人的head（頭）中的。因為腦袋中的觀念不同，因此有人喜歡漢服，有人喜歡唐裝。
一言以蔽之，<head>標簽的作用是把控HTML頁面的顯示形式。
在<head>標簽中添加<title></title>標簽為網頁指定顯示在瀏覽器小窗口上的名字。代碼示例如下：
<title>第一個網頁</title>
圖1
不要小看title標簽，搜索引擎非?？粗豻itle標簽中的文字信息，再進行關鍵字比對時，title中的文字占有較大權重。因此，認真選擇title內容對你的頁面是否能迅速被搜索引擎找到有著重要意義。關于搜索關鍵字我們會在下一節練習中再細致分析。
添加<link>標簽為HTML頁面引入圖標、JavaScript腳本、CSS樣式文件等。針對JavaScript腳本的引入，還有另外一個<script></script>標簽可用。導入CSS樣式文件也可以使用<style></style>標簽，這個在學完HTML之后才會接觸到，現在了解就可以。
通過以上學習我們知道了<head>標簽中通常添加<title></title>,<link>以及<script></script>,<style></style>等標簽。這些標簽控制著html文件的通用圖標引入、布局樣式引入、交互腳本引入等功能。
如果頁面都是給body穿上衣服，而穿什么樣的衣服，如何搭配等因素缺是由head里的內容決定。
在<head>標簽中還有一個非常重要的<meta>標簽（metadata：元數據，名字讀不懂沒關系，關鍵是怎么使用），這個標簽可以為整個頁面指定名稱、被搜索時的關鍵字以及非常重要的文檔字符編碼功能。
在指定文檔編碼時，經常使用"utf-8"編碼方式。
utf-8編碼方式賦予了html頁面顯示中文（或其他非英文文字）的能力。這對今天的互聯網世界來說是非常重要的功能。
utf-8這個重要的編碼方式就在<head>標簽中的<meta>標簽中指定的。寫法如下：
<head><meta charset="utf-8"><title>第一個網頁</title></head><meta>標簽不同于其他成對的標簽，它是個單身漢，只有這一個標簽，沒有帶有"/"符號的結尾標簽。原因有兩點；1.通常<meta>標簽中不需要添加內容。2.使用<meta>標簽只改變他的屬性即可。什么叫"屬性"呢？
大家看這行代碼：<meta charset="utf-8">
"charset"就叫做<meta>標簽中指定字符編碼方式的屬性。
在"charset"后面加"="號，這叫做指定屬性值。
大家注意，指定的這個值叫"utf-8"，切記！utf-8兩邊要加引號！
下面我們就目前可以看明白的<meta>屬性進行一下操作練習。
開始練習之前大家肯定有這樣一個問題（沒想到也沒關系），那就是在之前的案例中，那個簡單的網頁并沒有指定utf-8的字符編碼方式，為什么頁面的漢字照常顯示了？
這其實是瀏覽器本身在后臺為我們補齊了這段代碼。我使用的是聯想自帶的瀏覽器，使用火狐、Google瀏覽器的小伙伴們估計也可以正常顯示，如果使用低版本的ie瀏覽器，則無法正常顯示。因為低版本的ie瀏覽器不具備補齊這段代碼的功能。
關于meta標簽與utf-8的編碼方式先介紹到這里，下一節我們會在不同瀏覽器中測試添加utf-8或不添加utf-8的不同顯示效果，并講解meta標簽中keyword（關鍵字）的使用方法。
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
web 就是 world wide web 的縮寫，稱之為全球廣域網，俗稱 WWW。對于用戶來說它其實就是由多個網頁組成在一起而形成的一種服務（Web）.
我們可以將 web 理解為就是當前的一種互聯網。對于我們來說更多的就是網站服務。網站我們可以認是由多個網頁組合在一起而形成一種服務。
而 web 前端就是來負責一個網站當中前臺網頁里的內容。網頁是由前端工程師使用 HTML 語言編寫而成的一種文件，它里面會包含文字、圖片、超鏈接、音頻、視頻等等這些內容。
注：超文本標記語言（Hyper Text Markup Language , HTML）就是用來描述網頁內容的一種計算機語言。
HTML 超文本標記語言（Hyper Text Markup Language）就是用來描述網頁的一種計算機語言。
在互聯網最初的時候是沒有 HTML 的，我們只能通過網絡傳輸最簡單的文字內容。 隨著用戶的要求越來越多，同時也是我們的技術的不斷發展，就出了一種可以表達文字內容之外的語言 HTML1.0。后來又慢慢發展到了現在的 HTML5，也就是我們現在常說的 H5。
在測試過程中，我們有時候需要通過工具去查看對應的 HTML 代碼。在這里我們可以用瀏覽器自帶的開發者工具，打開這個工具的快捷鍵是 F12。
開發者工具是一個相當強大的工具。可以查看修改 HTML，還可以調試 js，可以修改 css，還可以查看網絡數據，并且還能進行性能測試。非常的全能。對于咱們 web 測試來說，是一個必須要掌握的工具。
要查看 HTML 源碼，我們只需要進入開發者工具的 elements 界面。 在這里可以對 web 頁面上的元素進行定位，并且查看整個 web 頁面的 HTML 源碼。
網頁是我們通過 HTML 語言來書寫。 用 HTML 語言去書寫網頁有一些結構是默認必須存在的， 這個結構我們就叫做網頁（HTML）骨架。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>標簽就是 HTML 語言的發明者人為定義好的一些"單詞"，不同的標簽代表了不同的功能。
標簽有兩種常見的形式：
todo：加入 demo（done）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>網頁標題</title>
</head>
<body>
<div>
<h1>我的第一個網頁</h1>
<p>網頁中的內容</p>
</div>
</body>
</html>todo：加入 demo(done)
HTML 標簽可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息。屬性總是以名稱/值對的形式出現，比如：name="value"。
屬性的基本格式為：<標簽名 屬性1="屬性值1" 屬性2="屬性值2"></標簽名>
每個標簽都可以擁有多個屬性。屬性必須寫在開始標簽中，位于標簽名的后面。屬性之間不區分順序。標簽名與屬性、屬性與屬性之間使用空格隔開。任何屬性都有默認值，省略該屬性表示使用默認值。
在 HTML 里，屬性也有很多中，比如首先有全局屬性，全局屬性是所有的標簽都可以使用的。然后還有事件屬性，事件大家可以理解為不同的操作。在不同的操作中，也有特殊的屬性可以定義。最后還有各個標簽的一些獨有的屬性。
比如常見的全局屬性有:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>網頁標題</title>
</head>
<body>
<div id="first" class="content">網頁中的內容</div>
</body>
</html>搜索微信公眾號：TestingStudio霍格沃茲的干貨都很硬核
這里是云端源想IT，幫你輕松學IT”
嗨~ 今天的你過得還好嗎？
誰見過風呢
勿論你和我
但當樹木俯首
風正經過
- 2024.03.05 -
在這個數字化的時代，我們每天都在與網頁打交道。你是否曾經好奇過，這些充滿魔力的網頁是如何誕生的呢？今天，我們就來揭開構成這些網頁的神秘面紗——HTML（超文本標記語言）。
網頁的基本組成
網頁是構成網站的基本元素，通常由圖片、鏈接、文字、聲音、視頻等元素組成，通常我們看見的網頁都是.htm和.html后綴結尾的文件，因為都稱為HTML文件。
什么是HTML
HTML 英文全稱是 Hyper Text Markup Language，中文譯為“超文本標記語言”，專門用來設計和編輯網頁。
使用 HTML 編寫的文件稱為“HTML 文檔”，一般后綴為.html（也可以使用.htm，不過比較少見）。HTML 文檔是一種純文本文件，您可以使用 Windows 記事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本編輯來打開或者創建。
每個網頁都是一個 HTML 文檔，使用瀏覽器訪問一個鏈接（URL），實際上就是下載、解析和顯示 HTML 文檔的過程。將眾多 HTML 文檔放在一個文件夾中，然后提供對外訪問權限，就構成了一個網站。
HTML的故事始于1989年，當時蒂姆·伯納斯-李在歐洲核子研究中心（CERN）提出了一個名為“萬維網”的概念。
為了實現這一概念，他發明了HTML，并隨后與羅伯特·卡里奧一起發明了HTTP協議。從那時起，HTML就成為了互聯網不可或缺的一部分。
上圖簡單羅列了HTML的發展歷史，大家可以簡單了解一下。
什么是標簽
HTML 標記通常被稱為 HTML 標簽 (HTML tag)。 HTML 標簽是由尖括號包圍的關鍵詞，比如<html/>。
<標簽>內容<標簽/>什么是元素
"HTML 標簽" 和 "HTML 元素" 通常都是描述同樣的意思。但是嚴格來講，一個HTML 元素包含了開始標簽與結束標簽，如下實例。
HTML 元素：
<p>這是一個段落</p>web瀏覽器
Web 瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取 HTML 文件，并將其作為網頁顯示。 瀏覽器并不是直接顯示的 HTML 標簽，但可以使用標簽來決定如何展現 HTML頁面的內容給用戶：
HTML 屬性
屬性是用來修飾元素的，屬性必須位于開始標簽里，一個元素的屬性可能不止一個，多個屬性之間用空格隔開，多個屬性之間不區分先后順序。
每個屬性都有值，屬性和屬性的值之間用等號鏈接，屬性的值包含在引號當中，屬性總是以名稱/值對的形式出現。
一個典型的HTML文檔由以下幾個基本元素構成：
這是文檔類型聲明，告訴瀏覽器這個文檔使用的是HTML5標準。
這是整個HTML文檔的根元素，其他所有元素都包含在這個標簽內。
這個部分包含了所有關于網頁的元信息，如標題、字符集聲明、引入的CSS樣式表和JavaScript文件等。
這個標簽定義了網頁的標題，它顯示在瀏覽器的標題欄或標簽頁上。
這個部分包含了網頁的所有內容，如文本、圖片、鏈接、表格、列表等。
HTML的結構示例
讓我們通過一個簡單的例子來具體了解HTML的結構：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一個HTML頁面</title>
</head>
<body>
<h1>歡迎來到我的網頁！</h1>
<p>這是一個簡單的段落。</p>
<a href="https://www.example.com">點擊這里訪問示例網站</a>
</body>
</html>在這個例子中，我們可以看到一個完整的HTML文檔結構，從<!DOCTYPE html>開始，到最后一個</html>結束。
想象一下，如果HTML是一棵樹，那么<html>就是樹干，<head>和<body>就像是樹的兩個主要分支。<head>中的標簽好比是樹葉，它們雖然不起眼，但卻至關重要，為樹木提供營養。而<body>中的標簽則像是樹枝和果實，它們構成了樹的主體，吸引人們的目光。
想要快速入門HTML嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！搜索【云端源想】前往學習哦！
HTML的特點主要包括簡易性、可擴展性、平臺無關性和通用性等。具體如下：
1、簡易性：
HTML是一種相對容易學習和使用的語言，它的版本升級通常采用超集方式，使得新版本能夠兼容舊版本的標簽和功能，這樣既保持了向后兼容性，又能夠靈活方便地引入新的功能。
2、可擴展性：
隨著互聯網的發展，HTML也在不斷增加新的元素和屬性來滿足新的需求，如支持多媒體內容的嵌入、更豐富的表單控件等。這種設計使得HTML能夠適應不斷變化的網絡環境。
3、平臺無關性：
HTML編寫的網頁可以在不同的操作系統和瀏覽器上顯示，這是因為HTML是一種與平臺無關的語言。這意味著無論用戶使用什么設備或瀏覽器，都能夠訪問和瀏覽HTML頁面。
4、通用性：
HTML是網絡的通用語言，它是一種簡單的標記語言，用于創建和結構化網頁內容。由于其廣泛的支持和普及，幾乎所有的設備和瀏覽器都能夠解析和顯示HTML內容。
5、支持多種媒體格式：
HTML不僅支持文本內容，還能夠嵌入圖片、音頻、視頻等多種媒體格式，這使得網頁可以提供豐富的用戶體驗。
6、標準化：
HTML遵循萬維網聯盟（W3C）制定的國際標準，這意味著網頁開發者可以根據這些標準來創建網頁，確保網頁的互操作性和可訪問性。
7、標簽豐富：
HTML提供了一系列的標簽，如標題、列表、鏈接、表格等，這些標簽使得開發者能夠創建出結構清晰、功能豐富的網頁。
綜上所述，HTML作為一種基礎的網頁開發語言，因其易學易用、跨平臺、多功能和高度標準化的特點，成為了構建現代網絡內容的核心工具。
HTML作為連接世界的紐帶，其重要性不言而喻。它是數字世界的基石，也是每個想要進入互聯網領域的人必須掌握的技能。無論你是夢想成為前端開發者，還是僅僅想要更好地理解這個由代碼構成的世界，學習HTML都是一個不錯的開始。
今天就先講到這里了，
更多前端開發基礎知識點擊文末閱讀原文查看哦！
記得關注【云端源想IT】一起學編程！
我們下期再見！
END
文案編輯|云端學長
文案配圖|云端學長
內容由：云端源想分享
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
