有興趣的孩子可以戳——https://www.educoder.net
先簡單舉個栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自我簡介</title>
<meta name="description" content="XXX的自我簡介網站">
<meta name="keywords" content="自我簡介,關鍵詞一,關鍵詞二,關鍵詞三">
</head>
<body>
<h1 align="center">自我簡介</h1>
<h2>簡介</h2>
<p>在這裏簡單的描述一下你自己吧。</p>
<h2>三個與你最有關的詞</h2>
<p>這三個詞可以是一種形容，也可以是一種運動或者是一種獨特的愛好，等等。</p>
<ul>
<li>第一個詞</li>
<p>選擇第一個詞的原因</p>
<li>第二個詞</li>
<p>選擇第二個詞的原因</p>
<li>第三個詞</li>
<p>選擇第三個詞的原因</p>
</ul>
</body>
</html>
聲明文檔格式：<!DOCTYPE html>
聲明瞭該文檔是HTML 5的文檔。提示：請始終向 HTML 文檔添加 <!DOCTYPE> 聲明，這樣瀏覽器才能獲知文檔類型。
因爲在Web世界裏，有很多各式各樣的文檔類型，所以我們首先需要做的便是聲明該文檔是HTML，以便瀏覽器正確顯示網頁。
根元素：html元素
然後，<html>元素告知瀏覽器其本身是一個HTML文檔。
除去第一行外，其餘的頁面內容都應該包含在<html>元素中，所以它也被稱爲根元素。
頭元素：head元素
與屬性會給元素增添附加信息一樣，head元素能爲整個網頁增添更多信息。可以用在head中的標籤有<base>,<link>, <meta>, <script>, <style>, 以及 <title>。下面分別了下解它們。
網頁標題元素：title
title元素的內容即網頁標題，它是一個網頁必需的元素之一。<title>的內容一般作爲網頁標籤名，寫法如下：
<title>標題內容</title>
鏈接地址元素：base
在 HTML 中，<base> 標籤沒有結束標籤;<base> 標籤必須位於 head 元素內部。<base> 標籤爲頁面上的所有鏈接規定默認地址或默認目標。通常情況下，瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。使用 <base> 標籤可以改變這一點。瀏覽器隨後將不再使用當前文檔的 URL，而使用指定的基本 URL 來解析所有的相對 URL。這其中包括 <a>、<img>、<link>、<form> 標籤中的 URL。
<html>
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>
<body>
<img src="eg_smile.gif" /><br />
<p>請注意，我們已經爲圖像規定了一個相對地址。由於我們已經在 head 部分規定了一個基準 URL，瀏覽器將在如下地址尋找圖片：</p>
<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>
<br />
<p>請注意，鏈接會在新窗口中打開，即使鏈接中沒有 target="_blank" 屬性。這是因爲 base 元素的 target 屬性已經被設置爲 "_blank" 了。</p>
</body>
</html>
鏈接外部樣式表：link
<link> 標籤定義文檔與外部資源的關係，最常見的用途是鏈接樣式表。在html中沒有結束標籤。
<html>
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>
<body>
<h1>我通過外部樣式表進行格式化。</h1>
<p>我也一樣！</p>
</body>
</html>
運行結果如下：
定義客戶端腳本元素：script
<script type="text/javascript">
document.write("Hello World!")
</script>
<script> 標籤用於定義客戶端腳本，比如 JavaScript。script 元素既可以包含腳本語句，也可以通過 src 屬性指向外部腳本文件。必需的 type 屬性規定腳本的 MIME 類型。JavaScript 的常見應用時圖像操作、表單驗證以及動態內容更新。
註釋：假如此元素內部的代碼沒有位於某個函數中，那麼這些代碼會在頁面被加載時被立即執行。<frameset> 標籤之後的腳本會被忽略。
文檔定義樣式信息元素：style
<html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html>
運行結果如下：
<style> 標籤用於爲 HTML 文檔定義樣式信息。在 style 中，您可以規定在瀏覽器中如何呈現 HTML 文檔。type 屬性是必需的，定義 style 元素的內容。唯一可能的值是 "text/css"。style 元素位於 head 部分中。
元信息元素：meta
meta元素提供元數據信息，主要包括：
- 頁面編碼
- 網頁標題
- 網頁描述
- 網頁關鍵詞
這些信息，一方面可用於告知瀏覽器如何展示頁面，另一方面可以提供給搜索引擎檢索。
因爲搜索引擎會通過meta元素的name和content屬性來檢索頁面，所以當我們加入了合適的關鍵字和描述內容時，頁面就更容易被搜索引擎發現。
<meta name="description" content="XXX的自我簡介網站">
<meta name="keywords" content="自我簡介,關鍵詞一,關鍵詞二,關鍵詞三">
編碼格式：charset
定義瀏覽器解析網頁文檔時使用的編碼方式。通常，我們使用utf-8編碼以支持各國語言。
<meta charset="utf-8">
描述：description
描述信息使用一句話告知搜索引擎我們網頁的主要內容是什麼。
通常description的寫法如下：
<meta name="description" content="一句話描述網頁內容">
關鍵詞：keywords
同理，關鍵詞信息使用多個並行的關鍵詞告知搜索引擎我們網頁內容的關鍵詞信息。
通常keywords的寫法如下：
<meta name="keywords" content="關鍵詞一,關鍵詞二,關鍵詞三">
主體元素：body元素
<body>元素是一個文檔的主體，文檔內容都包含在<body>元素中，最終呈現在網頁上。