整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
這里是云端源想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
文案編輯|云端學長
文案配圖|云端學長
內容由：云端源想分享
今主流的技術中，可以分為前端和后端兩個門類。
前端：簡單的理解就是和用戶打交道
后端：主要用于組織數據
而前端就Web開發方向來說， 分為三門語言， HTML、CSS、JavaScript
語言 | 作用 |
HTML | 描述頁面的結構，類似于動物的骨架 |
CSS | 渲染技術，使得頁面更好看，也可以一定程度的讓頁面動起來 |
JavaScript | 實現和后端的交互， 數據驗證、收發等功能 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
上面面的一段代碼既表示一段HTML的結構， 它表示生成了一個空白的HTML網頁
組成HTML的元素稱為標簽，標簽的結構分為兩種
下面這段HTML代碼包含的標簽解釋如下
<!DOCTYPE html> 是一種HTML5的規范寫法，在HTML發展過程中還有以下的幾種聲明方式
<!DOCTYPE html> html5規范， html的第一行必須為此值
<!--html4 嚴格版-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"<http://www.w3.org/TR/html4/strict.dtd>">
<!--html4 過渡版-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<http://www.w3.org/TR/html4/loose.dtd>">
<!--html4 框架版-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"<http://www.w3.org/TR/html4/frameset.dtd>">
關于html4的聲明類型，可以參考:
<https://www.w3.org/TR/html4/sgml/dtd.html>
<!--lang屬性表示使用英文，如果是中文，可以改成zh, 非嚴格屬性也可以不寫-->
<html lang="en">
</html>
<!--規定字符集使用UTF-8, UTF-8 涵蓋全球所有的國際和民族的文字和大量圖像, UTF-8 規定一個字符占3個字節-->
<meta charset="UTF-8">
HTML（Hyper Text Markup Language超文本標識語言）
HTML發展的5個階段
1.HTML1.0版本是因為當時有很多不同版本，有些人認為蒂姆·伯納斯·李的版本應該最初版，這個版本沒有IMG元素。
2.在IETF主持下，1995年11月在瑞士日內瓦舉行的第一次www會議上成立了一個HTML工作小組，它的主要任務是把HTML形式化成為一中SGML DTD，稱之為HTML Level2。
3.HTML3.0規范是有當時成立的W3C于1995年3月推出，提供了很多新的特性，例如表格，文字繞排，和復雜數學元素顯示，雖然它是設計用來兼容2.0版本的，但是實現這個標準的工作在當時過于復雜，在草案于1995年過期時，標準開發業因為缺乏瀏覽器支持而終止了。3.1版本從未被正式提出，而下一個被提出的版本是HTML3.2，去掉了大部分3.0中的新特性，但是加入了很多特定瀏覽器。
4.HTML4.0同樣也加入了很多特定瀏覽器的元素和屬性，但是同時也開始“清理”這個標準，把一些元素和屬性標記為過時的，建議不再使用它們。HTML的未來和CSS結合會很好。
5.HTML5目前仍為草案，并已經被W3C認可。
主體部分包含文本、圖像和鏈接。它包括在<BODY>...</BODY>標簽內
頭部部分包含標題和其他說明信息。包括在<HEAD>...</HEAD>標簽內
一個HTML文件是由一系列的元素和標簽組成的
HTML標簽的介紹
HTML的標簽分為單獨出現的標簽和成對出現的標簽兩種
說明：在每個HTML標簽，大、小寫混寫均可
例如<HTML>、<html>和<Html>,其結果都是一樣的。
HTML元素介紹
當用一組HTML標簽將一段文字包含在中間時，這段文字與包含文字的HTML標簽被稱之為一個元素
在所有HTML文件，最外層的元素是有<html>標簽建立的。在<html>標簽所建立的元素中，包含了練個主要的子元素，這兩個子元素是由<head>標簽與<body>標簽所建立的。<head>標簽所建立的元素內容為 文件標題，而<body>標簽所建立的元素內容為文件主體。
1.手工直接編寫
記事本等，存成.htm或.html格式
2.使用可視化HTML編輯器
Frontpage、Dreamweaver等
3.有web服務器（或稱http服務器）一方實時動態地生成。
演示用記事本創建網頁：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
