前端新手看過來，手把手帶你輕松上手html的實操

文本標記語言 (英語：Hypertext Markup Language，簡稱：HTML ) 是一種用來結構化 Web 網頁及其內容的標記語言。網頁內容可以是：一組段落、一個重點信息列表、也可以含有圖片和數據表。正如標題所示，本文將對 HTML 及其功能做一個基本介紹。

HTML 到底是什么？

HTML 不是一門編程語言，而是一種用于定義內容結構的標記語言。HTML 由一系列的元素（elements）組成，這些元素可以用來包圍不同部分的內容，使其以某種方式呈現或者工作。一對標簽（ tags）可以為一段文字或者一張圖片添加超鏈接，將文字設置為斜體，改變字號，等等。例如，鍵入下面一行內容：

學前端，關注艾編程

可以將這行文字封裝成一個段落（paragraph）元素來使其在單獨一行呈現：

<p>學前端，關注艾編程</p>

HTML 元素詳解

讓我們深入探索一下這個段落元素。

這個元素的主要部分有：

屬性應該包含：

在屬性與元素名稱（或上一個屬性，如果有超過一個屬性的話）之間的空格符。
屬性的名稱，并接上一個等號。
由引號所包圍的屬性值。

注：不包含 ASCII 空格（以及 " ' ``=<>` ）的簡單屬性值可以不使用引號，但是建議將所有屬性值用引號括起來，這樣的代碼一致性更佳，更易于閱讀。

嵌套元素

也可以將一個元素置于其他元素之中 —— 稱作嵌套。要表明貓咪非常暴躁，可以將 “艾編程” 用 <strong> 元素包圍，爆字將突出顯示：

<p>學編程，關注<strong>艾編程</strong>:)</p>

必須保證元素嵌套次序正確：本例首先使用 <p>標簽，然后是<strong>標簽，因此要先結束<strong>標簽，最后再結束</p>標簽。以下這個示例就是一個錯誤的示范，這樣是不對的：

<p>學編程，關注<strong>艾編程</p></strong>

元素必須正確地開始和結束，才能清楚地顯示出正確的嵌套層次。否則瀏覽器就得自己猜測，雖然它會竭盡全力，但很大程度不會給你期望的結果。所以一定要避免！

空元素

不包含任何內容的元素稱為空元素。比如 `` 元素：

<img src="images/icodingedulgo.png" alt="艾編程logo">

本元素包含兩個屬性，但是并沒有 </img> 結束標簽，元素里也沒有內容。這是因為圖像元素不需要通過內容來產生效果，它的作用是向其所在的位置嵌入一個圖像。

HTML 文檔詳解

以上介紹了一些基本的 HTML 元素，但孤木不成林。現在來看看單個元素如何彼此協同構成一個完整的 HTML 頁面。回顧文件處理小節中創建的 index.html 示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>入門學前端的博客，艾編程博客</title>
  </head>
  <body>
    <img src="images/icodingedulgo.png" alt="艾編程logo">
  </body>
</html>

這里有：

<!DOCTYPE html> — 文檔類型。混沌初分，HTML 尚在襁褓（大約是 1991/92 年）之時，DOCTYPE 用來鏈接一些 HTML 編寫守則，比如自動查錯之類。DOCTYPE 在當今作用有限，僅用于保證文檔正常讀取。現在知道這些就足夠了。
<html></html> — `` 元素。該元素包含整個頁面的內容，也稱作根元素。
<head></head> — `` 元素。該元素的內容對用戶不可見，其中包含例如面向搜索引擎的搜索關鍵字keywords、頁面描述、CSS 樣式表和字符編碼聲明等。
<meta charset="utf-8"> — 該元素指定文檔使用 UTF-8 字符編碼，UTF-8 包括絕大多數人類已知語言的字符。基本上 UTF-8 可以處理任何文本內容，還可以避免以后出現某些問題，沒有理由再選用其他編碼。
<title></title> — `` 元素。該元素設置頁面的標題，顯示在瀏覽器標簽頁上，也作為收藏網頁的描述文字。
<body></body> — `` 元素。該元素包含期望讓用戶在訪問頁面時看到的內容，包括文本、圖像、視頻、游戲、可播放的音軌或其他內容。

圖像

重溫一下 `` 元素：

<img src="images/icodingedulogo.png" alt="艾編程logo">

像之前所講，該元素通過包含圖像文件路徑的地址屬性 src，可在所在位置嵌入圖像。

該元素還包括一個替換文字屬性 alt，是圖像的描述內容，用于當圖像不能被用戶看見時顯示，不可見的原因可能是：

1、用戶有視覺障礙。視障用戶可以使用屏幕閱讀器來朗讀 alt 屬性的內容。

2、有些錯誤使圖像無法顯示。可以試著故意將 src 屬性里的路徑改錯。保存并刷新頁面就可以在圖像位置看到：

alt 屬性的關鍵字即“描述文本”。alt 文本應向用戶完整地傳遞圖像要表達的意思。用 "測試圖片" 來描述 Firefox 標志并不合適，修改成 "Firefox 標志：一只盤旋在地球上的火狐" 就好多了。

可以試著為圖像編寫一些更好的 alt 文本。

標記文本

本段包含了一些最常用的文本標記 HTML 元素。

標題（Heading）

標題元素可用于指定內容的標題和子標題。就像一本書的書名、每章的大標題、小標題，等。HTML 文檔也是一樣。HTML 包括六個級別的標題， <H1> (en-US)–<h6> (en-US) ，一般最多用到 3-4 級標題。

<h1>主標題</h1>
<h2>頂層標題</h2>
<h3>子標題</h3>
<h4>次子標題</h4>

可以嘗試在 `` 元素上面添加一個合適的標題。

注：可以發現 MDN 網站上第一級標題的主題是隱藏的。不要使用標題元素來加大、加粗字體，因為標題對于無障礙訪問和搜索引擎優化等問題非常有意義。要保持頁面結構清晰，標題整潔，不要發生標題級別跳躍。

段落（Paragraph）

如上文所講，<P> 元素是用來指定段落的。通常用于指定常規的文本內容：

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

試著添加一些文本（在設計網站的外觀小節）到一個或幾個段落中，并把它們放在你的 `` 元素下方。

列表（List）

Web 上的許多內容都是列表，HTML 有一些特別的列表元素。標記列表通常包括至少兩個元素。最常用的列表類型為：

1、無序列表（Unordered List）中項目的順序并不重要，就像購物列表。用一個 <ul> 元素包圍。

2、有序列表（Ordered List）中項目的順序很重要，就像烹調指南。用一個 <ol> 元素包圍。

列表的每個項目用一個列表項目（List Item）元素 <li> 包圍。

比如，要將下面的段落片段改成一個列表：

<p>艾編程是一個綜合性的web前端編程學習網站，
       包含了html、css、JavaScript等系列知識……</p>

可以這樣更改標記：

<p>Mozilla 艾編程是一個綜合性的web前端編程學習網站。包含了</p>

<ul>
  <li>html</li>
  <li>css</li>
  <li>JavaScript</li>
</ul>

<p>等系列知識……</p>

試著在示例頁面中添加一個有序列表和無序列表。

鏈接

鏈接非常重要 — 它們賦予 Web 網絡屬性。要植入一個鏈接，我們需要使用一個簡單的元素 — <a> — a 是 "anchor" （錨）的縮寫。要將一些文本添加到鏈接中，只需如下幾步：

選擇一些文本。比如 “艾編程前端”。
將文本包含在<a>元素內，就像這樣：
<a>艾編程前端</a>
為此<a>元素添加一個href屬性，就像這樣：
<a href="">艾編程前端</a>
把屬性的值設置為所需網址：
<a href="https://www.icodingedu.com/">艾編程前端</a>

如果網址開始部分省略了 https:// 或者 http://，可能會得到錯誤的結果。在完成一個鏈接后，可以試著點擊它來確保指向正確。

href 這個名字可能開始看起來有點令人費解，代表超文本引用（ hypertext reference）。

現在就為頁面添加一個鏈接吧。

小結

如果你一直跟著這篇文章里的指導做的話，你應該完成了一個像下面這樣的頁面：

代碼部分：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>艾編程前端</title>
  </head>
  <body>
    <h1>艾編程前端示例頁面</h1>
    <img src="https://www.icodingedu.com/files/system/2019/09-25/22132557f330499313.png" alt="艾編程logo整體以盾型為外輪廓設計，以代碼符號””為基礎圖形進行抽象畫變形，中間的“/”符號用首字母“i”替代，同時也是諧音“愛”，象征著美好">

    <p>艾編程是一個綜合性的web前端編程學習網站。包含了</p>

    <ul>
      <li>html</li>
      <li>css</li>
      <li>JavaScript </li>
    </ul>

    <p>等系列知識……</p>

    <p>為了讓您更好的學好前端編程，請參閱 <a href="https://www.icodingedu.com/">艾編程</a></p>
  </body>
</html>

你學到了嗎？如果有幫助記得關注收藏點贊哦！

一章 HTML5概述

1.1、什么是HTML

HTML（HyperText Markup Language，超文本標記語言）是用來描述網頁的一種語言，它不是一種編程語言，而是一種標記語言。

1.2、什么是HTML5

HTML5是構建Web內容的一種語言描述方式，HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式，被認為是互聯網的核心技術之一。HTML產生于1990年，1997年HTML4成為互聯網標準，并廣泛應用于互聯網應用的開發。

HTML5是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息，HTML5在從前HTML4.01的基礎上進行了一定的改進。

1.3、本文重要說明

由于HTML5只是在HTML的基礎上進行了新增或者廢棄一些標簽或者特性，本文默認均為HTML5語法，被廢棄的部分就不再提起，HTML一般用于描述網頁的結構，所以一些樣式和腳本方面的標簽和屬性以及關于JavaScript部分的特性也不再提及，重點在于梳理常用標簽體系。

1.4、瀏覽器的版本

現今瀏覽器的許多新功能都是從HTML5標準中發展而來的。目前常用的瀏覽器有IE、火狐、谷歌、Safari和Opera等等，通過對這些主流web瀏覽器的發展策略調查，發現它們都支持HTML5上采取了措施。

（1）IE瀏覽器

2010年3月16日，微軟MIX10技術大會上宣布其推出的IE9瀏覽器已經支持HTML5。同時還聲稱，隨后將會更多的支持HTML新標準和CSS3新特性。

（2）FireFox瀏覽器

2010年7月，Mozilla基金會發布了即將推出的Firefox4瀏覽器的第一個早期測試版，該版本中Firefox瀏覽器中進行了大幅改進，包括新的HTML5語法分析器，以及支持更多的HTML5語法分析器，以及支持更多的HTML5形式的控制等。從官方文檔來看，Firefox4對HTML5是完全級別的支持。目前，包括在線視頻，在線音頻在內的多種應用都已經在版本中實現。

（3）Google瀏覽器

2010年2月19日，谷歌Gears項目經理通過微博宣布，谷歌將放棄對Gears瀏覽器插件項目的支持，以重點開發HTML5項目。據費特表示，目前在谷歌看來，Gears應用用于HTML5的諸多創新非常相似，并且谷歌一直積極發展HTML5項目。因此只要谷歌不斷以加強網絡標準的應用功能為工作重點，那么為Gears增加新功能就無太大意義了。另外，Gears面臨的需求也在日益下降，這也是谷歌做出吊證的重要原因。

（4）Safari瀏覽器

2010年6月7日，蘋果在開發者發布會公布Safari5，這款瀏覽器支持10個以上的HTML5新技術，包括全屏幕播放、HTML5視頻、HTML5地理位置、HTML5切片元素、HTML5的可拖動屬性、HTML5的形式驗證、HTML5的Ruby、HTML5的Ajaxl.ishi和WebSocket字幕。

（5）Opera瀏覽器

2010年5月5日，Opera軟件公司首席技術官，號稱“CSS之父”的Hakon Wium Lie認為，HTML5和CSS3，將會是全球互聯網發展的未來趨勢，包括目前Opera在內的諸多瀏覽器廠商，紛紛研發HTML5的相關產品，web未來屬于HTML5。

綜上所述，目前這些瀏覽器紛紛朝著HTML5的方向邁進，HTML5的時代即將來臨。

1.5、選擇開發工具

●Notepad++

官方地址：點擊打開
是否免費：免費

●Visual Studio Code

官方地址：點擊打開
是否免費：免費

●HBuilderX

官方地址：點擊打開
是否免費：免費

●Dreamweaver

官方地址：點擊打開
是否免費：收費

●Sublime Text

官方地址：點擊打開
是否免費：收費

●Webstorm

官方地址：點擊打開
是否免費：收費

Webstorm為本文使用的工具，請自行購買激活，也可以使用以上的免費工具，安裝步驟都較為簡單，在此省略！

第二章 HTML5語法

2.1、基本結構

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

2.2、語法規范

HTML中不區分大小寫，但是我們一般都使用小寫
HTML中的注釋不能嵌套
HTML標簽必須結構完整，要么成對出現，要么自結束標簽
HTML標簽可以嵌套，但是不能交叉嵌套
HTML標簽中的屬性必須有值，且值必須加引號(雙引號單引號都可以)

2.3、標簽規范

單標簽：

<標簽名 [屬性名=屬性值,...]>

成對標簽：

<標簽名 [屬性名=屬性值,...]></標簽名>

第三章 HTML5標簽

3.1、標題標簽

<h1>這是一級標題</h1>

<h2>這是二級標題</h2>

<h3>這是三級標題</h3>

<h4>這是四級標題</h4>

<h5>這是五級標題</h5>

<h6>這是六級標題</h6>

3.2、段落標簽

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

3.3、鏈接標簽

使用示例：

常見屬性：

屬

3.4、圖像標簽

3.5、表格標簽

<tr>

</tr>

<tr>

</tr>

</table>

3.6、列表標簽

無序列表：

<ul>

</ul>

有序列表：

<ol>

</ol>

自定義列表：

<dl>

</dl>

3.7、分組標簽

3.8、語義標簽

常見標簽：

基本布局：

3.9、表單標簽

常見標簽：

案例演示：

1、form、input、label演示

<p>

</p>

<p>

</p>

</form>

2、textarea演示

</form>

3、fieldset、legend、select、optgroup、option演示

<legend>請選擇你的愛好：</legend>

</optgroup>

</optgroup>

</select>

</fieldset>

</form>

4、datalist演示

</datalist>

</form>

5、單選框演示

<label for="female">female</label>

</form>

6、復選框演示

</form>

3.10、框架標簽

3.11、音頻標簽

您的瀏覽器不支持 Audio 標簽。

</audio>

3.12、視頻標簽

您的瀏覽器不支持 Video 標簽。

</video>

3.13、其它標簽

水平線：<hr>

換行：<br>

<code>計算機代碼</code>

<pre>預格式化文本</pre>

<small>更小的文本</small>

<strong>重要的文本</strong>

<abbr>縮寫詞或者首字母縮略詞</abbr>

<blockquote>從另一個源引用的部分</blockquote>

<cite>工作的名稱</cite>

<del>刪除的文本</del>

<ins>插入的文本</ins>

3.14、頭部標簽

第四章 HTML5屬性

4.1、屬性概述

HTML標簽可以設置屬性，屬性總是以名稱/值對的形式出現，比如：name=“value”，它的主要作用是控制或修飾標簽。

4.2、通用屬性

第五章 HTML5事件

5.1、事件概述

HTML事件可以觸發瀏覽器中的行為，比方說當用戶點擊某個 HTML 元素時啟動一段 JavaScript。

5.2、窗口事件

由窗口觸發該事件 (同樣適用于 <body> 標簽)：

5.3、表單事件

表單事件在HTML表單中觸發 (適用于所有 HTML 元素，但該HTML元素需在form表單內)：

5.4、鍵盤事件

通過鍵盤觸發事件，類似用戶的行為：

5.5、鼠標事件

通過鼠標觸發事件，類似用戶的行為：

5.6、媒體事件

通過視頻（videos），圖像（images）或音頻（audio）觸發該事件，多應用于HTML媒體元素比如：<embed>，<object>，<img>，<audio>和<video>。

5.7、其它事件

課件資料?騰訊文檔

TML是超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

.HTML指的是超文本標記語言

.HTML不是編程語言，而是一種標記語言

.標記語言是一套標記標簽

.HTML使用標記標簽來描述網頁

.HTML文檔包含了HTML標簽和文本內容

.HTML文檔也叫做web頁面

HTML實例：

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
    <title> HTML教程實例</title>
  </head>
<body>
  <h1>我的第一個標題</h1>
<p>我的第一個段落</p>
  </body>
  </html>

注意：對于中文網頁需要使用<meta charset="udf-8">聲明編碼，否則出現亂碼。有些瀏覽器(如 360 瀏覽器)會設置 GBK 為默認編碼，則你需要設置為 <meta charset="gbk">。

實例解析：

<!DOCTYPE html>聲明為HTML5文檔

<html>元素是HTML頁面的根元素

<head>元素包含了文檔的元數據

<title>元素描述了文檔的標題

<body>元素包含了可見的頁面內容

<h1>元素定義一個大標題

<p>元素定義一個段落

在線咨詢

上一篇：“你喜歡哪個中國偉人？” 日本人：“曹操”
下一篇：“如何用JavaScript發送HTTP請求？”

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端新手看過來，手把手帶你輕松上手html的實操

HTML 到底是什么？

HTML 元素詳解

嵌套元素

空元素

HTML 文檔詳解

圖像

標記文本

標題（Heading）

段落（Paragraph）

列表（List）

鏈接

小結

一章 HTML5概述

1.1、什么是HTML

1.2、什么是HTML5

1.3、本文重要說明

1.4、瀏覽器的版本

1.5、選擇開發工具

第二章 HTML5語法

2.1、基本結構

2.2、語法規范

2.3、標簽規范

第三章 HTML5標簽

3.1、標題標簽

3.2、段落標簽

3.3、鏈接標簽

3.4、圖像標簽

3.5、表格標簽

3.6、列表標簽

3.7、分組標簽

3.8、語義標簽

3.9、表單標簽

3.10、框架標簽

3.11、音頻標簽

3.12、視頻標簽

3.13、其它標簽

3.14、頭部標簽

第四章 HTML5屬性

4.1、屬性概述

4.2、通用屬性

第五章 HTML5事件

5.1、事件概述

5.2、窗口事件

5.3、表單事件

5.4、鍵盤事件

5.5、鼠標事件

5.6、媒體事件

5.7、其它事件

您的項目需求