網頁組成的構架：
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<p><b>定義粗體文本</b></p>
<p><em>定義着重文字</em></p>
<p><i>定義斜體字</i></p>
<p><small>定義小號字</small></p>
<p><strong>定義重要的文本</strong></p>
<p>定義<sub>下標字</sub></p>
<p>定義<sup>上標字</sup></p>
<p><ins>定義插入字</ins></p>
<p><del>定義刪除字</del></p>
</body>
</html>
效果圖：
運行顯示結果如下圖所示：
HTML 標題
HTML標題（Heading）是通過 <h1> - <h6> 標籤進行定義的。
根據重要性排列，<h1>定義最大的標題，<h6> 定義最小的標題。
HTML 水平線
<hr> 標籤在 HTML 頁面中創建水平線。
<hr> 元素可用於分隔 HTML 頁面中的內容。
HTML 屬性
- HTML 元素可以設置屬性
- 屬性可以在元素中添加附加信息
- 屬性一般描述於開始標籤
- 屬性總是以名稱/值對的形式出現，比如：name="value"。
-
<p align="center"> 此文本居中對齊 </p>
class 屬性
class 屬性爲 HTML 元素定義一個或多個類名。
class 屬性通常用於指向樣式表的類。
例子：
<p class="intro">這是一個段落。</p>
id 屬性
id 屬性定義 HTML 元素的唯一的 id。
id 在 HTML 文檔中必須是唯一的。
例子：
<h1 id="header">W3Cschool 在線教程</h1>
align 屬性
align 屬性規定文本的對齊方式。
<html>
<head>
<meta charset="utf-8">
<title>HTML 屬性</title>
</head>
<body>
<p align="center">這是一些文本。</p>
<hr width="50%" align="left" />
</body>
</html>
<img> 標籤
<img> 是空標籤，它只包含屬性，並且沒有閉合標籤。
要在頁面上顯示圖像，你需要使用源屬性（src）。源屬性的值是圖像的 URL 地址。
定義圖像的語法是：
<img src="url" />
圖像位置
URL 指存儲圖像的位置，你需要爲位於引號之間的 src 屬性放置圖像位置。
例如， 如果名爲 "logo.png" 的圖像位於 www.w3cschool.cn 的 images 目錄中，那麼其 URL 爲 https://www.w3cschool.cn/images/logo.png。
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="logo.png" alt="" />
</body>
</html>
如果圖像無法顯示，則 alt 屬性用來爲圖像定義一串預備的可替換的文本。alt 屬性是必需的。
設置圖像的高度與寬度
height（高度） 與 width（寬度）屬性用於設置圖像的高度與寬度。
該屬性值可以以 像素 或 百分比 形式指定，默認單位爲像素。
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="logo.png" height="100px" width="100px" alt="" />
<!-- 或者 -->
<img src="logo.png" height="80%" width="80%" alt="" />
</body>
</html>
圖像邊框
<img> 標籤的 border 屬性規定圖像周圍的邊框的寬度。
註釋：默認情況下，圖像是沒有邊框的。
使用 border 屬性和一個用像素表示的寬度值就可以去掉 (border="0") 或加寬圖像的邊框。
實例：
帶有 2 像素粗邊框的圖像：
<img src="logo.png" height="100px" width="100px" border="2" alt="" />
<a> 標籤
HTML使用標籤 <a> 來設置超文本鏈接。
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，你可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
在標籤 <a> 中使用href屬性來描述鏈接的目標地址。
鏈接的 HTML 代碼很簡單。它類似這樣：
<a href="url">鏈接文本</a>
target 屬性
使用 target 屬性，你可以規定在何處打開鏈接文檔。
給屬性賦予 _blank 值將使鏈接在新窗口或新選項卡中打開。
下面的鏈接會在新窗口打開文檔：
<a href="https://www.w3cschool.cn" target="_blank">訪問W3Cschool</a>
HTML 無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表使用 <ul> 標籤，與 <li> 標籤一起使用。
下面是一個無序列表的例子：
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
瀏覽器顯示結果如下：
- 咖啡
- 茶
- 牛奶
HTML 有序列表
有序列表也是一列項目，列表項目使用數字進行標記。
有序列表始於 <ol> 標籤，每個列表項始於 <li> 標籤。
下面是個有序列表的例子：
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
瀏覽器中顯示結果如下：
- 咖啡
- 茶
- 牛奶