網(wǎng)站建設(shè)捌金手指花總二六網(wǎng)站搜索查詢
前言
HTML 是一切Web開(kāi)發(fā)的基礎(chǔ)，本文專門(mén)為小白整理，針對(duì)前端零基礎(chǔ)的朋友們，手把手教你學(xué)習(xí)HTML，讓你輕松邁入WEB開(kāi)發(fā)的行列。
首先，感謝 @橙子_ 在HTML學(xué)習(xí)以及本文編寫(xiě)過(guò)程中對(duì)我的幫助。
文章目錄
- 前言
- 一.HTML簡(jiǎn)介
- 1.什么是HTML？
- 2.HTML 標(biāo)簽
- 3.HTML 元素
- 4.HTML版本
- 5.Web 瀏覽器
- 6.HTML 網(wǎng)頁(yè)結(jié)構(gòu)
- 7.中文編碼
- 8.編寫(xiě)第一個(gè)網(wǎng)頁(yè)
- 二.HTML編輯器
- 三.HTML基礎(chǔ)
- 1.HTML 標(biāo)題
- 2.HTML 段落
- 3.HTML 鏈接
- 4.HTML 圖像
- 四.HTML元素
- 1.HTML 元素語(yǔ)法
- 2.嵌套的 HTML 元素
- 3.HTML 空元素
- 五.HTML屬性
一.HTML簡(jiǎn)介
萬(wàn)維網(wǎng)W3C標(biāo)準(zhǔn)中網(wǎng)頁(yè)分為結(jié)構(gòu)，表現(xiàn)和行為三部分，HTML用于描述頁(yè)面的結(jié)構(gòu)，CSS用于控制頁(yè)面中的元素樣式，JavaScript用于響應(yīng)用戶的操作。HTML，CSS和JavaScript組成了前端技術(shù)棧。
學(xué)習(xí)HTML就是學(xué)習(xí)標(biāo)簽的一個(gè)過(guò)程，難度指數(shù)低，重在反復(fù)練習(xí)，首先看看HTML文檔的基本結(jié)構(gòu)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前端教程</title>
</head>
<body><h1>標(biāo)題</h1>
<p>段落</p></body>
</html>
1.什么是HTML？
HTML的全稱為超文本標(biāo)記語(yǔ)言，是一種標(biāo)記語(yǔ)言。它包括一系列標(biāo)簽。通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。
- HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)
- HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容
- HTML文檔也叫做 web 頁(yè)面
2.HTML 標(biāo)簽
HTML標(biāo)記標(biāo)簽又稱為 標(biāo)簽。
- HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞
- HTML 標(biāo)簽通常是成對(duì)出現(xiàn)
- 標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽(開(kāi)放標(biāo)簽)，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽(閉合標(biāo)簽)
<標(biāo)簽>內(nèi)容</標(biāo)簽>
所有 HTML 文檔必須以 <!DOCTYPE> 聲明開(kāi)頭，該聲明并非一個(gè) HTML 標(biāo)簽，它是一條“信息”，告知瀏覽器期望的文檔類型。
3.HTML 元素
一個(gè) HTML 元素包含了開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽。例如：
<h1>一級(jí)標(biāo)題</h1>
4.HTML版本
下面是HTML的歷史版本：
| 版本 | 發(fā)布時(shí)間 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
5.Web 瀏覽器
要想學(xué)習(xí)Web前端，一定要先了解Web瀏覽器（如谷歌瀏覽器，Edge，Safari）。Web瀏覽器用于讀取HTML文件，并將其作為網(wǎng)頁(yè)顯示。瀏覽器并不是直接顯示HTML標(biāo)簽，而是負(fù)責(zé)網(wǎng)頁(yè)的渲染和呈現(xiàn)，標(biāo)簽決定了如何展現(xiàn)HTML頁(yè)面的內(nèi)容給用戶。例如：
6.HTML 網(wǎng)頁(yè)結(jié)構(gòu)
下面是HTML文檔的基本結(jié)構(gòu)，前面我們已經(jīng)做了示例代碼的展示：
7.中文編碼
在一些瀏覽器直接輸出中文會(huì)出現(xiàn)亂碼的情況，當(dāng)在瀏覽器輸出中文亂碼時(shí)，需要在頭部將字符聲明為 UTF-8 或 GBK。例如：
<meta charset="UTF-8">
8.編寫(xiě)第一個(gè)網(wǎng)頁(yè)
前面介紹了HTML文檔的一些基礎(chǔ)信息，以及Web瀏覽器初識(shí)，接下來(lái)編寫(xiě)我們學(xué)習(xí)前端的第一個(gè)網(wǎng)頁(yè)：
示例：使用記事本編寫(xiě)你的第一個(gè)網(wǎng)頁(yè)！
<html><head><title>這是我的第一個(gè)網(wǎng)頁(yè)</title>
</head><body><!--注釋：用記事本編寫(xiě)第一個(gè)網(wǎng)頁(yè)，在瀏覽器中顯示一首古詩(shī)！--><h1>望廬山瀑布</h1><h2><font color=red>唐</font> 李白</h2><p>日照香爐生紫煙，遙看瀑布掛前川。</p><p>飛流直下三千尺，疑是銀河落九天。</p>
</body></html>
新建一個(gè)文本文檔，命名為index.html。編寫(xiě)代碼，在默認(rèn)瀏覽器中運(yùn)行，查看顯示效果！
二.HTML編輯器
這里推薦使用VsCode來(lái)編輯HTML代碼！
vscode 是由微軟開(kāi)發(fā)的免費(fèi)開(kāi)源軟件，它具有以下優(yōu)勢(shì)：
- 輕量級(jí)編輯器
- 豐富的插件系統(tǒng)
- 代碼跟蹤功能
三.HTML基礎(chǔ)
1.HTML 標(biāo)題
HTML 標(biāo)題是通過(guò)<h1> - <h6> 標(biāo)簽來(lái)定義的，例如：
<h1>一級(jí)標(biāo)題</h1><h2>二級(jí)標(biāo)題</h2><h3>三級(jí)標(biāo)題</h3>
2.HTML 段落
HTML 段落是通過(guò)標(biāo)簽 <p> 來(lái)定義的，例如：
<p>段落1</p><p>段落2</p><p>段落3</p>
3.HTML 鏈接
HTML 鏈接是通過(guò)標(biāo)簽 <a> 來(lái)定義的，例如：
<a href="https://www.baidu.com">百度一下</a>
4.HTML 圖像
HTML 圖像是通過(guò)標(biāo)簽 <img> 來(lái)定義的，例如：
<img src="/images/baidu.png" width="258" height="39" />
四.HTML元素
1.HTML 元素語(yǔ)法
- HTML 元素以開(kāi)始標(biāo)簽起始，以結(jié)束標(biāo)簽終止
- 元素的內(nèi)容是開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容，某些 HTML 元素具有空內(nèi)容
- 空元素在開(kāi)始標(biāo)簽中進(jìn)行關(guān)閉（以開(kāi)始標(biāo)簽的結(jié)束而結(jié)束）
- 大多數(shù) HTML 元素可擁有屬性
2.嵌套的 HTML 元素
其實(shí)，大多數(shù) HTML 元素可以嵌套使用，即HTML 元素可以包含其他 HTML 元素。所以，HTML 文檔是由相互嵌套的 HTML 元素構(gòu)成的，例如：
<!DOCTYPE html>
<html><body>
<p>段落1...</p>
</body></html>
其中，對(duì)幾個(gè)重要的標(biāo)簽做一個(gè)描述：
- 這個(gè)
<p>元素定義了 HTML 文檔中的一個(gè)段落。這個(gè)元素?fù)碛幸粋€(gè)開(kāi)始標(biāo)簽<p>以及一個(gè)結(jié)束標(biāo)簽</p>。元素內(nèi)容是: 段落1…。 <body>元素定義了 HTML 文檔的主體。這個(gè)元素?fù)碛幸粋€(gè)開(kāi)始標(biāo)簽<body>以及一個(gè)結(jié)束標(biāo)簽</body>。元素內(nèi)容是另一個(gè) HTML 元素（p 元素）。<html>元素定義了整個(gè) HTML 文檔。這個(gè)元素?fù)碛幸粋€(gè)開(kāi)始標(biāo)簽<html>，以及一個(gè)結(jié)束標(biāo)簽</html>。元素內(nèi)容是另一個(gè) HTML 元素（body 元素）。
3.HTML 空元素
沒(méi)有內(nèi)容的 HTML 元素被稱為空元素?？赵厥窃陂_(kāi)始標(biāo)簽中關(guān)閉的，例如：
<p>段落1</p><br><p>段落2</p>
其中，<br> 就是沒(méi)有關(guān)閉標(biāo)簽的空元素（<br> 標(biāo)簽定義換行）。
在開(kāi)始標(biāo)簽中添加斜杠，比如 <br />，是關(guān)閉空元素的正確方法。
五.HTML屬性
屬性是 HTML 元素提供的附加信息，屬性值應(yīng)該始終被包括在引號(hào)內(nèi)，如果屬性值本身就含有雙引號(hào)，那么必須使用單引號(hào)包含屬性值。
- HTML 元素可以設(shè)置屬性，屬性可以在元素中添加附加信息
- 屬性一般描述于開(kāi)始標(biāo)簽
- 屬性總是以名稱/值對(duì)的形式出現(xiàn)，比如：name=“value”。
例如，HTML的鏈接標(biāo)簽中添加屬性：
<a href="http://www.baidu.com">百度一下</a>
HTML 鏈接由
<a>標(biāo)簽定義。鏈接的地址在 href 屬性中指定。
