選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

什麼是 HTML?


HTML

HTML 代表 Hyper Text Markup Language(超文字標記語言)

HTML 是網頁的標準標記語言

HTML 元素是 HTML 頁面的構建塊

HTML 元素由<> 標籤表示


HTML 元素

HTML 元素由一個開始標籤和一個結束標籤以及它們之間的內容組成

<h1>這是一個標題</h1>
開始標籤 元素內容 結束標籤
<h1> 這是一個標題 </h1>
<p> 這是段落。 </p>

HTML 屬性

  • HTML 元素可以具有屬性
  • 屬性提供有關元素的額外資訊
  • 屬性以名稱/值對的形式出現,例如charset="utf-8"

一個簡單的 HTML 文件

<!DOCTYPE html>
<html lang="en">

<meta charset="utf-8">
<title>頁面標題</title>

<body>
   <h1>這是一個標題</h1>
   <p>這是一個段落。</p>
   <p>這是另一個段落。</p>
</body>

</html>

自己動手試一試 »

示例解釋

HTML 元素是 HTML 頁面的構建塊。

  • <!DOCTYPE html> 宣告將此文件定義為 HTML5
  • <html>元素是HTML頁面的根元素
  • lang 屬性定義了文件的語言
  • <meta> 元素包含關於文件的元資訊
  • charset 屬性定義了文件中使用的字元集
  • <title> 元素為文件指定一個標題
  • <body> 元素包含可見的頁面內容
  • <h1>元素定義一個大標題
  • <p>元素定義一個段落

HTML 文件

所有 HTML 文件都必須以文件型別宣告開始: <!DOCTYPE html>。

HTML 文件本身以 <html> 開始,以 </html> 結束。

HTML 文件的可視部分位於 <body> 和 </body> 之間。


HTML 文件結構

下面是一個 HTML 文件(一個 HTML 頁面)的視覺化表示

<html>
<head>
<title>頁面標題</title>
</head>
<body>
<h1>This is a heading</h1>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
</body>
</html>

注意:只有 <body> 部分內的內容(上面的白色區域)才會在瀏覽器中顯示。


HTML 標題

HTML 標題使用 <h1> 到 <h6> 標籤定義。

<h1> 定義最重要的標題。 <h6> 定義最不重要的標題:

示例

<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
自己動手試一試 »


HTML 段落

HTML 段落使用 <p> 標籤定義

示例

<p>這是一個段落。</p>
<p>這是另一個段落。</p>
自己動手試一試 »

HTML 連結

HTML 連結使用 <a> 標籤定義

示例

<a href="https://w3schools.tw">這是一個連結</a>
自己動手試一試 »

連結的地址在 href 屬性中指定。


HTML 影像

HTML 影像使用 <img> 標籤定義。

原始檔 (src)、替代文字 (alt)、寬度 (width) 和高度 (height) 作為屬性提供

示例

<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px;height:150px"
自己動手試一試 »

HTML 按鈕

HTML 按鈕使用 <button> 標籤定義

示例

<button>點選我</button>
自己動手試一試 »

HTML 列表

HTML 列表使用 <ul>(無序/專案符號列表)或 <ol>(有序/編號列表)標籤定義,後跟 <li> 標籤(列表項)

示例

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
自己動手試一試 »

HTML 表格

HTML 表格使用 <table> 標籤定義。

表格行使用 <tr> 標籤定義。

表格標題使用 <th> 標籤定義。(預設粗體居中)。

表格單元格(資料)使用 <td> 標籤定義。

示例

<table>
  <tr>
    <th>名字</th>
    <th>姓氏</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
自己動手 » 使用 CSS »

程式設計 HTML

每個 HTML 元素都可以有屬性

對於 Web 開發和程式設計,最重要的屬性是idclass。這些屬性通常用於處理基於程式的網頁操作。

Attribute 示例
id <table id="table01"
類別 <p class="normal">
樣式 <p style="font-size:16px">
data- <div data-id="500">
onclick <input onclick="myFunction()">
onmouseover <a onmouseover="this.setAttribute('style','color:red')">

完整的 HTML 教程

以上是對 HTML 的簡短描述。

如需完整的 HTML 教程,請訪問 W3Schools HTML 教程

如需完整的 HTML 標籤參考,請訪問 W3Schools 標籤參考


×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援