- <!DOCTYPE html> 聲明
- <!DOCTYPE html> 是 html5 標准網頁聲明，全稱為 Document Type HyperText Mark-up Language，意思為文檔種類為超文本標記性語言或超文本鏈接標示語言，現在是這個簡潔形式，支持 html5 標准的主流瀏覽器都認識這個聲明，表示網頁采用 html5，<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。
- doctype 聲明是不區分大小寫的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
- <meta charset="utf-8"> 中文編碼
- 目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字符聲明為 UTF-8 或 GBK。
- HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
- HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>
- HTML 標簽通常是成對出現的，比如 <b> 和 </b>
- 標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
- 開始和結束標簽也被稱為開放標簽和閉合標簽
- 不要忘記結束標簽，雖然沒有結束標簽頁面也能正常顯示
- <h> 標題標簽
- HTML 標題（Heading）是通過<h1> - <h6> 標簽來定義的
- <h1> 定義最大的標題， <h6> 定義最小的標題。
- <h1>這是一個標題</h1>
- 注意：
- 請確保將 HTML 標題標簽只用於標題。不要僅僅是為了生成粗體或大號的文本而使用標題。
- 搜索引擎使用標題為您的網頁的結構和內容編制索引。
- 因為用戶可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文檔結構是很重要的。
- 應該將 h1 用作主標題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My HTML</title>
</head>
<body>
<h1>This is h1 heading</h1>
<h2>This is h2 heading</h2>
<h3>This is h3 heading</h3>
<h4>This is h4 heading</h4>
<h5>This is h5 heading</h5>
<h6>This is h6 heading</h6>
</body>
</html>
- <p> 段落標簽
- HTML 段落是通過標簽 <p> 來定義的.
-   表示一個空格
<body>
<p >這是一個段落 這是一個段落</p>
</body>
- <em> 標簽（斜體）
- <em> 標簽告訴瀏覽器把其中的文本表示為強調的內容。對於所有瀏覽器來說，這意味着要把這段文字用斜體來顯示。
<body>
<em>這是一個段落 這是一個段落</em>
</body>
- <i> 標簽（斜體）
- <i> 標簽和基於內容的樣式標簽 <em> 類似。它告訴瀏覽器將包含其中的文本以斜體字顯示。
<body>
<i>這是一個段落 這是一個段落</i>
</body>
- <strong> 標簽（加粗）
- <strong> 標簽和 <em> 標簽一樣，用於強調文本，但它強調的程度更強一些。
- 如果常識告訴我們應該較少使用 <em> 標簽的話，那么 <strong> 標簽出現的次數應該更少。
<body>
<em>這是一個段落 這是一個段落</em>
<strong>這是一個段落 這是一個段落</strong>
</body>
<body>
<b>這是一個段落 這是一個段落</b>
<strong>這是一個段落 這是一個段落</strong>
</body>
<body>
<h1><font size="10" color="red">這是一個段落 這是一個段落<font></h1>
<p><font size="10" color="blueviolet">這是一個段落 這是一個段落<font></p>
<i><font size="10" color="#0000FF">這是一個段落 這是一個段落<font></i>
</body>
<body>
<b>這是一個段落 這是一個段落</b><br><br>
<strong>這是一個段落 這是一個段落</strong>
</body>
<body>
<b>這是一個段落 這是一個段落</b><hr>
<strong>這是一個段落 這是一個段落</strong>
</body>
- <img> 圖片標簽
- src 屬性：規定顯示圖像的 URL。
- alt 屬性：如果無法顯示圖像，瀏覽器將顯示替代文本
- title 屬性：定義鼠標移動到元素上顯示的文本
- width 屬性：設置圖像的寬度
- height 屬性：定義圖像的高度
- align 屬性：規定如何根據周圍的文本來排列圖像
- center 居中
- left 左對齊
- right 右對齊
- border 屬性：定義圖像周圍的邊框
<body>
<img src="../project01/images/banner/banner3.jpg" alt="banner" width="1000px" height="300px" align="right" border="2px"/>
</body>
-
- hspace 屬性：定義圖像左側和右側的空白
- vspace 屬性：定義圖像頂部和底部的空
<body>
<img src="../project01/images/banner/banner3.jpg" alt="banner" width="1000px" height="300px" align="right" hspace="200px"/>
<img src="../project01/images/banner/banner3.jpg" alt="banner" width="1000px" height="300px" align="right" vspace="20px"/>
</body>
<body>
<a href="https://www.baidu.com/">百度</a>
<a href="https://www.jd.com" target="_blank">京東</a><br>
<!-- 死鏈接 -->
<a href="#" target="_blank">天貓</a><br>
<!-- 帶圖片 -->
<a href="https://www.taobao.com"><img src="../project01/images/activity/img4.jpg"><br>淘寶</a>
</body>
- <ol> 有序列表標簽
- 列表項目使用數字進行標記。
- 有序列表始於 <ol> 標簽，結束於</ol> ；每個列表項始於 <li> 標簽，結束於</li>標簽
- type 屬性：規定在列表中使用的標記類型，默認值 = 1
- start 屬性：規定有序列表的起始值
- reversed 屬性：規定列表的順序為降序，默認為正序排列
<body>
<ol type="I">
<li>水果</li>
<ol type="A">
<li>蘋果</li>
<li>橘子</li>
<li>香蕉</li>
</ol>
<li>蔬菜</li>
<ol type="a" start="3" reversed="reversed">
<li>大白菜</li>
<li>空心菜</li>
<li>包心菜</li>
</ol>
</ol>
</body>
- <ul> 無序列表標簽
- 此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
- 有序列表始於 <ul> 標簽，結束於</ul> ；每個列表項始於 <li> 標簽，結束於</li>標簽。
- type 屬性：規定在列表中使用的標記類型
- disc 實心圓（默認）
- square 實心方正
- circle 空心圓
- none 取消前綴
<body>
<ul type="circle">
<li>水果</li>
<ul type="square">
<li>蘋果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>
<li>蔬菜</li>
<ul type="disc">
<li>大白菜</li>
<li>空心菜</li>
<li>包心菜</li>
</ul>
</ul>
</body>
- <dl> 自定義列表標簽
- 自定義列表不僅僅是一列項目，而是項目及其注釋的組合。
- 自定義列表以 <dl> 標簽開始，以</dl>結尾 ；每個自定義列表項以 <dt> 開始，以 </dt>結尾；每個自定義列表項的定義以 <dd> 開始，以 </dd> 結尾。
- 提示：列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
<body>
<dl>
<dt>水果</dt>
<dd>蘋果</dd>
<dd>橘子</dd>
<dd>香蕉</dd>
<dt>蔬菜</dt>
<dd>大白菜</dd>
<dd>空心菜</dd>
<dd>包心菜</dd>
</dl>
</body>
