面向HTML初學者 -- 菜鳥教程HTML彙總(1)

阿新 • • 發佈：2019-02-08

只是做一個精要的整理，讀者也可開啟菜鳥教程網頁學習。同為初學者，該文僅進行一個HTML的初涉，錯誤之處歡迎指正。

第一篇內容主要涉及HTML簡介、HTML元素、HTML屬性、HTML4個簡單例項（標題、段落、連結、影象）和HTML文字格式化。

1 HTML簡介

1.1 什麼是HTML

HTML 是用來描述網頁的一種語言: 超文字標記語言: HyperText Markup Language
HTML 不是一種程式語言，而是一種標記語言。標記語言是一套標記標籤 (markup tag)。HTML使用標記標籤來描述網頁。
HTML文件包含了HTML標籤及文字內容，HTML文件也叫作web頁面

1.2 什麼是HTML標籤

HTML 標記標籤通常被稱為 HTML 標籤 (HTML tag)。

HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>。HTML 標籤通常是成對出現的，比如 <b> 和 </b>

<標籤> 內容 </標籤>

標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤，開始和結束標籤也被稱為開放標籤和閉合標籤

1.3 什麼是HTML元素

"HTML 標籤" 和 "HTML 元素" 通常都是描述同樣的意思。嚴格來說，一個HTML元素包含了開始標籤與結束標籤

<!--舉個例子-->
<p> this is a sentence. </p>

1.4 Web 瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用於讀取HTML檔案，並將其作為網頁顯示。

瀏覽器並不是直接顯示的HTML標籤，但可以使用標籤來決定如何展現HTML頁面的內容給使用者：

☆只有 <body> 內的內容才會在瀏覽器中顯示

1.5 HTML模板示例

HTML 模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<!--保證中文順利輸出-->

<title>文件標題</title>
</head>
<body>
	<h1>我的第一個HTML頁面</h1>
	<p>我的第一個段落。</p>
</body>
</html>
 
	<h1>我的第一個HTML頁面</h1>
	<p>我的第一個段落。</p>
</body>
</html>

<!DOCTYPE html> 宣告為 HTML5 文件 | 有助於瀏覽器中正確顯示網頁

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

<head> 元素包含了文件的元（meta）資料

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

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

☆ 同樣再次提醒直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字元宣告為 UTF-8

1.6 HTML編輯器

Notepad++ 和 Sublime Text 還可以配合 Emmet 外掛來提高編碼速度。

NOTES:

☆注意:HTML中不支援空格、回車、製表符，它們都會被解析成一個空白字元。

☆ 注意：對於中文網頁需要使用 <meta charset="utf-8"> 宣告編碼，否則會出現亂碼。有些瀏覽器(如 360 瀏覽器)會設定 GBK 為預設編碼，則你需要設定為 <meta charset="gbk">。

☆ 最好用"UTF-8" 的標準寫法，php 在 Windows 下邊英文不區分大小寫，所以也可以寫成 "utf-8"。也可以寫成 "UTF8"。在資料庫中只能使用"utf8"(MySQL) ，在MySQL的命令模式中只能使用"utf8"，也就是說在PHP程式中只能使用 "set names utf8(不加小橫槓)"，如果你加了"-"此行命令將不會生效，但是在 PHP 中 header 時卻要加上"-"，因為 IE 不認識的"utf8"。

--------------------------------------------------------------------------------------------------------------------------

2 用4個例項初步瞭解HTML基礎

2.1 HTML 標題

HTML 標題（Heading）是通過<h1> - <h6> 標籤來定義的.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>

</body>
</html>

2.2 HTML 標題

HTML段落是通過標籤 <p> 來定義的.

<p>這是一個段落。</p>
<p>這是另外一個段落。</p>

2.3 HTML 連結

HTML連結是通過標籤 <a> 來定義的. ☆提示:在 href 屬性中指定連結的地址。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML學習</title>
</head>
<body>

<a href="https://blog.csdn.net">這是一個連結使用了 href 屬性</a>

</body>
</html>

2.4 HTML影象

HTML 影象是通過標籤 <img> 來定義的. ☆：影象的名稱和尺寸是以屬性的形式提供的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML學習</title>
</head>
<body>

<img src="/.../xx.png" width="258" height="39" />

</body>
</html>

--------------------------------------------------------------------------------------------------------------------------

3 HTML元素

HTML文件由HTML元素定義

3.1 HTML元素語法

①HTML 元素以開始標籤起始，以結束標籤終止。元素的內容是開始標籤與結束標籤之間的內容

<p> this is a sentence. </p>

②某些 HTML 元素具有空內容（empty content），空元素在開始標籤中進行關閉（以開始標籤的結束而結束）

<script>  </script>

③大多數 HTML 元素可擁有屬性

④ HTML文件由巢狀的HTML元素構成

3.2 HTML元素例項

<!DOCTYPE html>
<html>

<body>
<p>這是第一個段落。</p>
</body>

</html>

解析：

該例項包含三個HTML元素 <html>...</html>, <body>...</body>, <p>...</p>

<p>元素：這個元素定義了HTML文件中的一個段落，擁有一個開始標籤和結束標籤，內容為這是一個段落。
<body>元素：定義了HTML文件的主題，元素內容為另一個HTML元素 <p>元素
<html>元素定義了這個HTML文件，其內容為<body>元素

NOTES:

☆ 不要忘記結束標籤，可能引起不可預料的結果或錯誤

☆ 使用小寫標籤（雖然對大小寫不敏感）

☆ 沒有內容的 HTML 元素被稱為空元素。空元素是在開始標籤中關閉的。<br> 就是沒有關閉標籤的空元素（<br> 標籤定義換行）。在開始標籤中新增斜槓，比如 <br />，是關閉空元素的正確方法。

--------------------------------------------------------------------------------------------------------------------------

4 HTML屬性

屬性是HTML元素提供的附加資訊。

HTML 元素可以設定屬性

屬性可以在元素中新增附加資訊

屬性一般描述於開始標籤。屬性值應該始終被包括在引號內。雙引號是最常用的，不過使用單引號也沒有問題。

屬性總是以名稱/值對的形式出現，比如：name="value"。

*在某些個別的情況下，比如屬性值本身就含有雙引號，那麼您必須使用單引號，例如：name='John "ShotGun" Nelson'

4.1 HTML屬性例項

HTML連結由<a>標籤定義。連結的地址在href屬性中指定。（注意開始標籤反括號的位置，屬性值應該始終被包括在引號內）

<a href="https://blog.csdn.net">這是一個連結</a>

☆：使用小寫屬性

4.2 屬性參考手冊

適用於大多數HTML元素的屬性

*class 屬性class=" " （引號裡面可以填入多個class屬性）。id 屬性只能單獨設定 id=" "（只能填寫一個，多個無效）

--------------------------------------------------------------------------------------------------------------------------

5.HTML標題

標題（Heading）是通過 <h1> - <h6> 標籤進行定義的. <h1> 定義最大的標題。 <h6> 定義最小的標題。瀏覽器會自動地在標題的前後新增空行（見前文2-四個例項中的標題例項）。

請確保將 HTML 標題標籤只用於標題。不要僅僅是為了生成粗體或大號的文字而使用標題。

搜尋引擎使用標題為您的網頁的結構和內容編制索引。

因為使用者可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文件結構是很重要的。

應該將 h1 用作主標題（最重要的），其後是 h2（次重要的），再其次是 h3，以此類推。

水平線

<hr> 標籤在 HTML 頁面中建立水平線，可用於分隔內容。

註釋

可以將註釋插入 HTML 程式碼中，這樣可以提高其可讀性。瀏覽器會忽略註釋，也不會顯示它們。

註釋寫法如下:

<!-- 這是一個註釋 -->

如何檢視原始碼

檢視網頁，單擊右鍵，然後選擇"檢視原始檔"（IE）或"檢視頁面原始碼"（Firefox）。會開啟一個包含頁面 HTML 程式碼的視窗。

--------------------------------------------------------------------------------------------------------------------------

6.HTML段落

段落是通過 <p> 標籤定義的。瀏覽器會自動地在段落的前後新增空行。（</p> 是塊級元素）

HTML 折行

如果您希望在不產生一個新段落的情況下進行換行（新行），請使用 <br /> 標籤：

☆輸出- 使用提醒

對於 HTML，您無法通過在 HTML 程式碼中新增額外的空格或換行來改變輸出的效果。（如有需要使用pre標籤）

當顯示頁面時，瀏覽器會移除原始碼中多餘的空格和空行。所有連續的空格或空行都會被算作一個空格（不是沒了還是有一個空格的）。

段落的行數依賴於瀏覽器視窗的大小。如果調節瀏覽器視窗的大小，將改變段落中的行數。

--------------------------------------------------------------------------------------------------------------------------

7.HTML文字格式化

HTML 使用標籤 <b>("bold") 與 <i>("italic") 對輸出的文字進行格式, 如：粗體 or 斜體

這些HTML標籤被稱為格式化標籤（請檢視下文完整標籤參考手冊）。

範例1--文字格式化 如何在一個 HTML 檔案中對文字進行格式化

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
</head> 
<body>

<b>來個加粗文字</b></br>
<i>來個斜體文字</i></br>
<code>電腦自動輸出</code></br>
這是 <sub> 下標</sub> 和 <sup> 上標</sup>

</body>
</html>

通常標籤 <strong> 替換加粗標籤 <b> 來使用, <em> 替換 <i>標籤使用。

關於 <b> 和 <strong>.顯示

上，這兩個標籤都可是加粗文字，

首先，這兩個並非完全相同。比如，如果使用網頁閱讀器閱讀網頁（盲人使用），strong 會重讀，b 則不會。
其次，從起源上來說，strong 是為了在未來建設語義網而誕生的。應該知道的是，html 是負責顯示的標記，不能表示語義。也就是說，瀏覽器知道這個標籤如何顯示，而不知道標籤所標記的內容應該是什麼含義。而 strong 在語義上走出了第一步。

範

例2--預格式文字如何使用 pre 標籤對空行和空格進行控制。

演示不同的"計算機輸出"標籤的顯示效果。

範例4--地址 此例演示如何在 HTML 檔案中寫地址。

範例6--文字方向 此例演示如何改變文字的方向。

此例演示如何實現長短不一的引用語。

具體標籤可看此處

--------------------------------------------------------------------------------------------------------------------------

超連結可以是一個字，或一組詞，也可以是一幅影象，您可以點選這些內容來跳轉到新的文件或當前文件中的某部分。

在標籤<a> 中使用了href屬性來描述連結的地址。

*注意：如果為這些超連結設定了 CSS 樣式，展示樣式會根據 CSS 的設定而顯示。

HTML 連結語法

連結的 HTML 程式碼很簡單。它類似這樣：href 屬性描述了連結的目標。.

*提示:"連結文字" 不必一定是文字。圖片或其他 HTML 元素都可以成為連結。

HTML 連結屬性

target屬性例項

使用 target 屬性，你可以定義被連結的文件在何處顯示。下面的這行會在新視窗開啟文件：

<a href="http://www.runoob.com/" target="_blank">訪問菜鳥教程!</a>

id屬性

id屬性可用於建立在一個HTML文件書籤標記。提示: 書籤是不以任何特殊的方式顯示，在HTML文件中是不顯示的，所以對於讀者來說是隱藏的。

更多例項請點選此標題 8.HTML文字連結--更多例項

面向HTML初學者 -- 菜鳥教程HTML彙總(1)

1 HTML簡介

1.1 什麼是HTML

1.2 什麼是HTML標籤

1.3 什麼是HTML元素

1.4 Web 瀏覽器

1.5 HTML模板示例

1.6 HTML編輯器

2 用4個例項初步瞭解HTML基礎

2.1 HTML 標題

2.2 HTML 標題

2.3 HTML 連結

HTML連結是通過標籤 <a> 來定義的. ☆提示:在 href 屬性中指定連結的地址。

2.4 HTML影象

3 HTML元素

3.1 HTML元素語法

3.2 HTML元素例項

4 HTML屬性

*在某些個別的情況下，比如屬性值本身就含有雙引號，那麼您必須使用單引號，例如：name='John "ShotGun" Nelson'

4.1 HTML屬性例項

4.2 屬性參考手冊

5.HTML標題

註釋

如何檢視原始碼

6.HTML段落

7.HTML文字格式化

HTML 連結語法

HTML 連結屬性

相關推薦