- <!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>
- <b> （粗體）
<body> <b>這是一個段落 這是一個段落</b> <strong>這是一個段落 這是一個段落</strong> </body>
- <font> 標簽
- <font> 規定文本的字體、字體尺寸、字體顏色，
- size 屬性（可能的值：從 1 到 7 的數字，瀏覽器默認值是 3，）
- color 屬性，色值
<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>
- <br> 換行標簽
- <br> 來輸入空行
- <br> 標簽沒有結束標簽
<body> <b>這是一個段落 這是一個段落</b><br><br> <strong>這是一個段落 這是一個段落</strong> </body>
- <hr> 水平線標簽
- 創建水平線
- <hr> 標簽沒有結束標簽
<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>
- <a> 鏈接標簽
- target 屬性：新視窗打開鏈接
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/60281.html
標籤：Html/Css
下一篇：css3文字特效和瀏覽器兼容性