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

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

HTML 到底是什么？

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

學(xué)前端，關(guān)注艾編程

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

<p>學(xué)前端，關(guān)注艾編程</p>

HTML 元素詳解

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

這個元素的主要部分有：

屬性應(yīng)該包含：

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

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

嵌套元素

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

<p>學(xué)編程，關(guān)注<strong>艾編程</strong>:)</p>

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

<p>學(xué)編程，關(guān)注<strong>艾編程</p></strong>

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

空元素

不包含任何內(nèi)容的元素稱為空元素。比如 `` 元素：

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

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

HTML 文檔詳解

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

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

這里有：

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

圖像

重溫一下 `` 元素：

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

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

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

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

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

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

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

標(biāo)記文本

本段包含了一些最常用的文本標(biāo)記 HTML 元素。

標(biāo)題（Heading）

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

<h1>主標(biāo)題</h1>
<h2>頂層標(biāo)題</h2>
<h3>子標(biāo)題</h3>
<h4>次子標(biāo)題</h4>

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

注：可以發(fā)現(xiàn) MDN 網(wǎng)站上第一級標(biāo)題的主題是隱藏的。不要使用標(biāo)題元素來加大、加粗字體，因為標(biāo)題對于無障礙訪問和搜索引擎優(yōu)化等問題非常有意義。要保持頁面結(jié)構(gòu)清晰，標(biāo)題整潔，不要發(fā)生標(biāo)題級別跳躍。

段落（Paragraph）

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

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

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

列表（List）

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

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

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

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

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

<p>艾編程是一個綜合性的web前端編程學(xué)習(xí)網(wǎng)站，
       包含了html、css、JavaScript等系列知識……</p>

可以這樣更改標(biāo)記：

<p>Mozilla 艾編程是一個綜合性的web前端編程學(xué)習(xí)網(wǎng)站。包含了</p>

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

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

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

鏈接

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

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

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

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

現(xiàn)在就為頁面添加一個鏈接吧。

小結(jié)

如果你一直跟著這篇文章里的指導(dǎo)做的話，你應(yīng)該完成了一個像下面這樣的頁面：

代碼部分：

<!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整體以盾型為外輪廓設(shè)計，以代碼符號””為基礎(chǔ)圖形進(jìn)行抽象畫變形，中間的“/”符號用首字母“i”替代，同時也是諧音“愛”，象征著美好">

    <p>艾編程是一個綜合性的web前端編程學(xué)習(xí)網(wǎng)站。包含了</p>

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

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

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

你學(xué)到了嗎？如果有幫助記得關(guān)注收藏點贊哦！

一章 HTML5概述

1.1、什么是HTML

HTML（HyperText Markup Language，超文本標(biāo)記語言）是用來描述網(wǎng)頁的一種語言，它不是一種編程語言，而是一種標(biāo)記語言。

1.2、什么是HTML5

HTML5是構(gòu)建Web內(nèi)容的一種語言描述方式，HTML5是互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn)，是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語言方式，被認(rèn)為是互聯(lián)網(wǎng)的核心技術(shù)之一。HTML產(chǎn)生于1990年，1997年HTML4成為互聯(lián)網(wǎng)標(biāo)準(zhǔn)，并廣泛應(yīng)用于互聯(lián)網(wǎng)應(yīng)用的開發(fā)。

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

1.3、本文重要說明

由于HTML5只是在HTML的基礎(chǔ)上進(jìn)行了新增或者廢棄一些標(biāo)簽或者特性，本文默認(rèn)均為HTML5語法，被廢棄的部分就不再提起，HTML一般用于描述網(wǎng)頁的結(jié)構(gòu)，所以一些樣式和腳本方面的標(biāo)簽和屬性以及關(guān)于JavaScript部分的特性也不再提及，重點在于梳理常用標(biāo)簽體系。

1.4、瀏覽器的版本

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

（1）IE瀏覽器

2010年3月16日，微軟MIX10技術(shù)大會上宣布其推出的IE9瀏覽器已經(jīng)支持HTML5。同時還聲稱，隨后將會更多的支持HTML新標(biāo)準(zhǔn)和CSS3新特性。

（2）FireFox瀏覽器

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

（3）Google瀏覽器

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

（4）Safari瀏覽器

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

（5）Opera瀏覽器

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

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

1.5、選擇開發(fā)工具

●Notepad++

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

●Visual Studio Code

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

●HBuilderX

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

●Dreamweaver

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

●Sublime Text

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

●Webstorm

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

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

第二章 HTML5語法

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

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

2.2、語法規(guī)范

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

2.3、標(biāo)簽規(guī)范

單標(biāo)簽：

<標(biāo)簽名 [屬性名=屬性值,...]>

成對標(biāo)簽：

<標(biāo)簽名 [屬性名=屬性值,...]></標(biāo)簽名>

第三章 HTML5標(biāo)簽

3.1、標(biāo)題標(biāo)簽

<h1>這是一級標(biāo)題</h1>

<h2>這是二級標(biāo)題</h2>

<h3>這是三級標(biāo)題</h3>

<h4>這是四級標(biāo)題</h4>

<h5>這是五級標(biāo)題</h5>

<h6>這是六級標(biāo)題</h6>

3.2、段落標(biāo)簽

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

3.3、鏈接標(biāo)簽

使用示例：

常見屬性：

屬

3.4、圖像標(biāo)簽

3.5、表格標(biāo)簽

<tr>

</tr>

<tr>

</tr>

</table>

3.6、列表標(biāo)簽

無序列表：

<ul>

</ul>

有序列表：

<ol>

</ol>

自定義列表：

<dl>

</dl>

3.7、分組標(biāo)簽

3.8、語義標(biāo)簽

常見標(biāo)簽：

基本布局：

3.9、表單標(biāo)簽

常見標(biāo)簽：

案例演示：

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、復(fù)選框演示

</form>

3.10、框架標(biāo)簽

3.11、音頻標(biāo)簽

您的瀏覽器不支持 Audio 標(biāo)簽。

</audio>

3.12、視頻標(biāo)簽

您的瀏覽器不支持 Video 標(biāo)簽。

</video>

3.13、其它標(biāo)簽

水平線：<hr>

換行：<br>

<em>強(qiáng)調(diào)文本</em>

<pre>預(yù)格式化文本</pre>

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

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

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

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

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

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

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

3.14、頭部標(biāo)簽

第四章 HTML5屬性

4.1、屬性概述

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

4.2、通用屬性

第五章 HTML5事件

5.1、事件概述

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

5.2、窗口事件

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

5.3、表單事件

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

5.4、鍵盤事件

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

5.5、鼠標(biāo)事件

通過鼠標(biāo)觸發(fā)事件，類似用戶的行為：

5.6、媒體事件

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

5.7、其它事件

課件資料?騰訊文檔

TML是超文本標(biāo)記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。

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

.HTML指的是超文本標(biāo)記語言

.HTML不是編程語言，而是一種標(biāo)記語言

.標(biāo)記語言是一套標(biāo)記標(biāo)簽

.HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁

.HTML文檔包含了HTML標(biāo)簽和文本內(nèi)容

.HTML文檔也叫做web頁面

HTML實例：

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

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

實例解析：

<!DOCTYPE html>聲明為HTML5文檔

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

<head>元素包含了文檔的元數(shù)據(jù)

<title>元素描述了文檔的標(biāo)題

<body>元素包含了可見的頁面內(nèi)容

<h1>元素定義一個大標(biāo)題

<p>元素定義一個段落

在線咨詢

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

您的項目需求

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

整合營銷服務(wù)商

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

HTML 到底是什么？

HTML 元素詳解

嵌套元素

空元素

HTML 文檔詳解

圖像

標(biāo)記文本

標(biāo)題（Heading）

段落（Paragraph）

列表（List）

鏈接

小結(jié)

一章 HTML5概述

1.1、什么是HTML

1.2、什么是HTML5

1.3、本文重要說明

1.4、瀏覽器的版本

1.5、選擇開發(fā)工具

第二章 HTML5語法

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

2.2、語法規(guī)范

2.3、標(biāo)簽規(guī)范

第三章 HTML5標(biāo)簽

3.1、標(biāo)題標(biāo)簽

3.2、段落標(biāo)簽

3.3、鏈接標(biāo)簽

3.4、圖像標(biāo)簽

3.5、表格標(biāo)簽

3.6、列表標(biāo)簽

3.7、分組標(biāo)簽

3.8、語義標(biāo)簽

3.9、表單標(biāo)簽

3.10、框架標(biāo)簽

3.11、音頻標(biāo)簽

3.12、視頻標(biāo)簽

3.13、其它標(biāo)簽

3.14、頭部標(biāo)簽

第四章 HTML5屬性

4.1、屬性概述

4.2、通用屬性

第五章 HTML5事件

5.1、事件概述

5.2、窗口事件

5.3、表單事件

5.4、鍵盤事件

5.5、鼠標(biāo)事件

5.6、媒體事件

5.7、其它事件

您的項目需求