HTML 的常用標籤

kari發表於2019-03-17
HTML

HTML 標籤

什麼是 HTML 標籤

  • HTML 文件和 HTML 元素是通過 HTML 標籤進行標記的
  • HTML 標籤由開始標籤和結束標籤組成
  • 開始標籤是被括號包圍的元素名
  • 結束標籤是被括號包圍的斜槓和元素名
  • 某些 HTML 元素沒有結束標籤，比如 <br>

註釋：開始標籤的英文翻譯是 start tag 或 opening tag，結束標籤的英文翻譯是 end tag 或 closing tag。

HTML 元素例項：

      <p>     Hello world     </p>
    開始標籤      內容        結束標籤
複製程式碼

HTML 文件例項：

<!DOCTYPE html>
<html>
<head>
  <title>HTML</title>
</head>
<body>
  <p>Hello world!</p><br>
  <p>I am kari!</p>
</body>
</html>
複製程式碼

基本的 HTML 標籤

HTML 標題

HTML 標題（Heading）是通過 <h1> - <h6> 等標籤進行定義的。
HTML 標題例項：

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
複製程式碼

HTML 段落

HTML 段落是通過 <p> 標籤進行定義的。
HTML 段落例項：

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
複製程式碼

HTML 連結

HTML 連結是通過 <a> 標籤進行定義的。
HTML 連結例項：

<a href="http://www.baidu.com">This is a link</a>
複製程式碼

HTML 影象

HTML 影象是通過 <img> 標籤進行定義的。
HTML 影象例項：

<img src="kari.jpg" width="200" height="200">
複製程式碼

常用的 HTML 標籤

HTML 巢狀頁面

HTML 巢狀頁面是通過 <iframe> 標籤進行實現的。
HTML 巢狀頁面例項：

<iframe src="https://www.baidu.com" name="xxx"></iframe>`
複製程式碼

HTML 跳轉頁面

  • （HTTP GET 請求）
    HTML 跳轉頁面是通過 <a> 標籤進行實現的。
    HTML 跳轉頁面（HTTP GET 請求）例項：
<a src="https://www.baidu.com" name="xxx"></a>`
複製程式碼

屬性見 MDN：developer.mozilla.org/zh-CN/docs/…

  • （HTTP POST 請求）
    HTML 跳轉頁面是通過 <form> 標籤進行實現的。
    HTML 跳轉頁面（HTTP POST 請求）例項：
<form src="https://www.baidu.com" name="xxx"></form>
複製程式碼

屬性見 MDN：developer.mozilla.org/zh-CN/docs/…

HTML 展示資料

HTML 展示資料是通過 <table> 標籤進行實現的（HTTP POST 請求）
HTML 展示資料例項： 屬性見：developer.mozilla.org/zh-CN/docs/…

<table>
  <tr>
    <td>Kari</td>
    <td>Jack</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Bob</td>
  </tr>
</table>
複製程式碼

相關文章