（使用菜鳥教程學習）
目錄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>
上面的代碼解釋——
★什麼是HTML?
HTML 是用來描述網頁的一種語言。超文本標記語言！
它不是一種編程語言。
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述網頁
HTML 文檔包含了HTML 標籤及文本內容
HTML文檔也叫做 web 頁面
HTML 標籤通常是成對出現的：
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤！
Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用於讀取HTML文件，並將其作爲網頁顯示。瀏覽器並不是直接顯示的HTML標籤，但可以使用標籤來決定如何展現HTML頁面的內容給用戶~
★<!DOCTYPE> 聲明
正確的聲明有助於瀏覽器中正確地顯示網頁。
doctype的拼寫，大小寫均可。
所有主流瀏覽器都支持該聲明。以下是完整網頁聲明——
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>
文檔內容......
</body>
</html>
目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字符聲明爲 UTF-8 或 GBK（如360瀏覽器）。
（使用 VS Code 工具來創建 HTML 文件！）
★HTML 標題（六級，h1~h6）
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>
結果——
★HTML 段落定義
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
瀏覽器會自動地在段落的前後添加空行。
★HTML 鏈接（通過那個a來定義）
<a href="https://www.runoob.com">這是一個鏈接</a>
（上面，在 href 屬性中指定鏈接的地址）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>
<a href="/index.html">本文本</a> 是一個指向本網站中的一個頁面的鏈接。
</p>
<p><a href="//www.microsoft.com/">本文本</a> 是一個指向萬維網上的頁面的鏈接。</p>
</body>
</html>
———— target 屬性————
使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<a href="https://www.runoob.com/" target="_blank">訪問菜鳥教程!</a>
<p>如果你將 target 屬性設置爲 "_blank", 鏈接將在新窗口打開。</p>
</body>
</html>
★HTML 圖像——img
參見——打開
注意： 圖像的名稱和尺寸是以屬性的形式提供的。
★HTML 空元素
沒有內容的 HTML 元素被稱爲空元素。空元素是在開始標籤中關閉的。
未來將強制使用小寫標籤屬性，所以別大寫~
★HTML 屬性
HTML 元素可以設置屬性
屬性可以在元素中添加附加信息
屬性一般描述於開始標籤
屬性總是以名稱/值對的形式出現，比如：name=“value”，例如鏈接的地址在 href 屬性中指定！
屬性值應該始終被包括在引號內。單雙引號都可。但在某些個別的情況下，比如屬性值本身就含有雙引號，那麼您必須使用單引號，例如：
name=‘John “ShotGun” Nelson’
查閱——HTML參考手冊
★水平線
hr 標籤在 HTML 頁面中創建水平線。e.g.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>hr 標籤定義水平線：</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
</body>
</html>
★HTML 註釋
寫法：
<!-- 這是一個註釋，註釋在瀏覽器中不會顯示 -->
開始括號之後（左邊的括號）需要緊跟一個歎號，結束括號之前（右邊的括號）不需要，合理地使用註釋可以對未來的代碼編輯工作產生幫助。
★如何查看源代碼？
你是否看過一些網頁然後驚歎它是如何實現的。如果您想找到其中的奧祕，只需要單擊右鍵，然後選擇"查看源文件"（IE）或"查看頁面源代碼"（Firefox）。
★HTML 折行
在不產生一個新段落的情況下進行換行（新行），請使用 br標籤：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>這個<br>段落<br>演示了分行的效果</p>
</body>
</html>
運行結果——
這個
段落
演示了分行的效果
★HTML 輸出 - 使用提醒
我們無法確定 HTML 被顯示的確切效果。屏幕的大小，以及對窗口的調整都可能導致不同的結果。對於 HTML，您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。
當顯示頁面時，瀏覽器會移除源代碼中多餘的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續的空行（換行）也被顯示爲一個空格。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>春曉</h1>
<p>
春眠不覺曉，
處處聞啼鳥。
夜來風雨聲，
花落知多少。
</p>
<p>注意，瀏覽器忽略了源代碼中的排版（省略了多餘的空格和換行）。</p>
</body>
</html>
★文本格式化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<!--use格式化標籤-->
<b>加粗文本</b><br><br>
<i>斜體文本</i><br><br>
<code>電腦自動輸出</code><br><br>
這是 <sub> 下標</sub> 和 <sup> 上標</sup>
</body>
</html>
運行結果：
★HTML頭部詳解（head）
- head元素包含了所有的頭部標籤元素。在head元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
- title
該標籤定義了不同文檔的標題（瀏覽器工具欄的標題），在HTML文檔中必須存在。標題也是當網頁添加到收藏夾時，顯示在收藏夾中的標題。還是顯示在搜索引擎結果頁面的標題。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>
文檔內容......
</body>
</html>
- base（頁面鏈接標籤的默認鏈接地址）
base標籤描述了基本的鏈接地址/鏈接目標，該標籤作爲HTML文檔中所有的鏈接標籤的默認鏈接！
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
- link元素
該標籤定義了文檔與外部資源之間的關係。通常用於鏈接到樣式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- style
標籤定義了HTML文檔的樣式文件引用地址.
在style元素中你也可以直接添加樣式來渲染 HTML 文檔:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
- meta（元數據）
meta標籤描述了一些基本的元數據。
meta 標籤提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。
META 元素通常用於指定網頁的描述，關鍵詞，文件的最後修改時間，作者，和其他元數據。
元數據可以使用於瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<meta name="description" content="免費在線教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob">
</head>
上述代碼塊定義了：關鍵詞、網頁描述內容、網頁作者！
- script
用於加載腳本文件，如： JavaScript。 - 總結表
![Alt]()
