HTML 入門

在本文中，我們將介紹 HTML 的絕對基礎知識。為了幫助您入門，本文將定義元素、屬性以及您可能聽說過的所有其他重要術語。它還將解釋這些術語如何在 HTML 中如何適用。您將學習 HTML 元素的結構、典型 HTML 頁面的結構以及其他重要的基本語言功能。同時，您將有機會嘗試使用 HTML！

先決條件	已安裝基本軟體，以及對檔案操作的基本瞭解。
目標	對 HTML 有基本的瞭解，並練習編寫一些 HTML 元素。

什麼是 HTML？

HTML（超文字標記語言）是一種標記語言，它告訴網頁瀏覽器如何結構化您訪問的網頁。它可以像網頁開發者想要的那樣複雜或簡單。HTML 由一系列元素組成，您可以使用這些元素來包圍、包裹或標記內容的不同部分，使其以某種方式顯示或執行。包圍的標籤可以使內容成為指向另一個頁面的超連結、使文字斜體等等。例如，考慮以下文字行

My cat is very grumpy

如果我們想要讓文字獨立顯示，我們可以指定它是一個段落，方法是將其包圍在一個段落 (<p>) 元素中

html

<p>My cat is very grumpy</p>

注意：HTML 中的標籤不區分大小寫。這意味著它們可以寫成大寫或小寫。例如，一個<title> 標籤可以寫成 <title>、<TITLE>、<Title>、<TiTlE> 等等，它都會起作用。但是，為了保持一致性和可讀性，最好將所有標籤寫成小寫。

HTML 元素的結構

讓我們進一步探索上一節中的段落元素

A sample code snippet demonstrating the structure of an html element.<p> My cat is very grumpy </p>.

我們元素的結構是

開始標籤：它由元素名稱（在本例中為段落，使用 p 表示）組成，並用開始和結束尖括號包圍。開始標籤標記元素開始或開始生效的位置。在本例中，它出現在段落文字的開頭。
內容：這是元素的內容。在本例中，它是段落文字。
結束標籤：它與開始標籤相同，只是在元素名稱之前包含一個斜槓。它標記元素結束的位置。忘記包含結束標籤是常見的初學者錯誤，它會導致奇怪的結果。

元素是開始標籤，後跟內容，最後是結束標籤。

主動學習：建立您的第一個 HTML 元素

在“可編輯程式碼”區域中編輯下面的行，方法是將其用 <em> 和 </em> 標籤包圍。要開啟元素，請將開始標籤 <em> 放置在行的開頭。要關閉元素，請將結束標籤 </em> 放置在行的末尾。這樣做應該會使該行具有斜體文字格式！您會在輸出區域中看到您的更改即時更新。

如果您犯了錯誤，可以使用重置按鈕清除您的工作。如果您真的卡住了，請按下顯示解決方案按鈕檢視答案。

<h2>Live output</h2>
<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%">
  This is my text.
</textarea>

<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution = "<em>This is my text.</em>";
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

巢狀元素

元素可以放置在其他元素內部。這稱為巢狀。如果我們想說明我們的貓非常暴躁，我們可以將單詞非常包含在一個<strong> 元素中，這意味著該單詞將具有強(更強)的文字格式

html

<p>My cat is <strong>very</strong> grumpy.</p>

巢狀有正確和錯誤的方式。在上面的示例中，我們首先打開了p元素，然後打開了strong元素。為了正確巢狀，我們應該先關閉strong元素，然後再關閉p元素。

以下是巢狀的錯誤方式示例

html

<p>My cat is <strong>very grumpy.</p></strong>

標籤必須以一種它們彼此包含或排除的方式開啟和關閉。對於上面的示例中那種重疊，瀏覽器必須猜測你的意圖。這種猜測會導致意外的結果。

空元素

並非所有元素都遵循開啟標籤、內容和關閉標籤的模式。某些元素僅包含一個標籤，通常用於在文件中插入/嵌入某些內容。這些元素稱為空元素。例如，<img>元素將影像檔案嵌入到頁面中。

html

<img
  src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
  alt="Firefox icon" />

這將輸出以下內容

注意：在HTML中，沒有要求在空元素標籤的末尾新增/，例如：<img src="images/cat.jpg" alt="cat" />。但是，它也是有效的語法，當你想讓你的HTML符合XML規範時，你可以這樣做。

屬性

元素也可以有屬性。屬性看起來像這樣

paragraph tag with 'class="editor-note"' attribute emphasized

屬性包含有關元素的額外資訊，這些資訊不會出現在內容中。在本例中，class屬性是一個用於標識名稱，用於將元素與樣式資訊進行關聯。

屬性應該有

它與元素名稱之間有一個空格。(對於具有多個屬性的元素，屬性也應該用空格隔開。)
屬性名稱，後跟一個等號。
屬性值，用開始和結束引號括起來。

主動學習：向元素新增屬性

<img>元素可以接受許多屬性，包括

src: src屬性是必需屬性，它指定影像的位置。例如：src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"。
alt: alt屬性指定影像的文字描述。例如：alt="The Firefox icon"。
width: width屬性指定影像的寬度，單位為畫素。例如：width="300"。
height: height屬性指定影像的高度，單位為畫素。例如：height="300"。

在輸入區域中編輯下面的行，將其變成一個影像。

在網上找到你喜歡的影像，右鍵單擊它，然後按複製影像連結/地址。
回到下面的區域，新增src屬性並用步驟 1 中的連結填充它。
設定alt屬性。
新增width和height屬性。

你將在輸出區域中看到即時更改。

如果你犯了錯誤，你可以隨時使用重置按鈕將其重置。如果你真的卡住了，按顯示解決方案按鈕檢視答案。

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 100px;width: 95%">
&lt;img alt="I should be an image" &gt;
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  '<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" alt="Firefox icon" width="100" height="100" />';
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

布林屬性

有時你會看到沒有值的屬性。這是完全可以接受的。這些被稱為布林屬性。布林屬性只能有一個值，通常與屬性名稱相同。例如，考慮disabled屬性，你可以將其分配給表單輸入元素。(你用它來停用表單輸入元素，這樣使用者就無法輸入內容。停用的元素通常會呈現為灰顯。) 例如

html

<input type="text" disabled="disabled" />

作為簡寫，可以接受以下寫法

html

<!-- using the disabled attribute prevents the end user from entering text into the input box -->
<input type="text" disabled />

<!-- text input is allowed, as it doesn't contain the disabled attribute -->
<input type="text" />

作為參考，上面的示例還包括一個未停用的表單輸入元素。上面的示例中的HTML產生以下結果

省略屬性值周圍的引號

如果你檢視許多其他網站的程式碼，你可能會發現許多奇怪的標記樣式，包括沒有引號的屬性值。在某些情況下允許這樣做，但在其他情況下會導致標記出現問題。下面程式碼片段中的元素<a>稱為錨點。錨點將文字包含起來，並將它們變成連結。href屬性指定連結指向的網址。你可以這樣寫下面的基本版本，僅包含href屬性，

html

<a href=https://www.mozilla.org/>favorite website</a>

錨點還可以具有title屬性，它是指向頁面的描述。但是，一旦我們以與href屬性相同的方式新增title，就會出現問題

html

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>

如上所述，瀏覽器會錯誤地解釋標記，將title屬性誤認為三個屬性：一個值為The的title屬性，以及兩個布林屬性Mozilla和homepage。顯然，這不是我們想要的！它會導致錯誤或意外行為，正如你可以在下面的即時示例中看到的那樣。嘗試將滑鼠懸停在連結上以檢視標題文字！

始終包含屬性引號。它可以避免此類問題，並使程式碼更易讀。

單引號還是雙引號？

在本文中，你還會注意到屬性用雙引號括起來。但是，你可能在某些HTML程式碼中看到單引號。這只是一個風格問題。你可以隨意選擇你喜歡的哪一個。這兩行是等效的

html

<a href='https://www.example.com'>A link to my example.</a>

<a href="https://www.example.com">A link to my example.</a>

確保不要混合使用單引號和雙引號。下面的示例展示了一種會出錯的引號混合方式

html

<a href="https://www.example.com'>A link to my example.</a>

但是，如果你使用了一種型別的引號，你可以在屬性值內部包含另一種型別的引號

html

<a href="https://www.example.com" title="Isn't this fun?">
  A link to my example.
</a>

要在相同型別（單引號或雙引號）的其他引號內部使用引號，請使用字元引用。例如，這將失效

html

<a href="https://www.example.com" title="An "interesting" reference">A link to my example.</a>

相反，你需要這樣做

html

<a href="https://www.example.com" title="An &quot;interesting&quot; reference">A link to my example.</a>

HTML 文件的結構

單獨的HTML元素本身並沒有多大用處。接下來，讓我們來看看單個元素如何組合起來形成一個完整的HTML頁面。

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

這裡我們有

<!DOCTYPE html>: 文件型別。在HTML早期（1991-1992 年），文件型別旨在充當指向一組規則的連結，HTML頁面必須遵循這些規則才能被視為良好的HTML。文件型別以前看起來像這樣
html
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
最近，文件型別是一個歷史遺留問題，需要包含它才能使其他一切正常工作。<!DOCTYPE html>是最短的字元字串，它算作有效的文件型別。你只需要知道這一點！
<html></html>: <html>元素。此元素包含頁面上的所有內容。它有時被稱為根元素。
<head></head>: <head>元素。此元素充當要包含在HTML頁面上的所有內容的容器，這些內容不是頁面將向檢視者顯示的內容。這包括出現在搜尋結果中的關鍵字和頁面描述、用於設定內容樣式的CSS、字元集宣告等等。你將在本系列的下一篇文章中瞭解更多相關資訊。
<meta charset="utf-8">: <meta>元素。此元素表示無法用其他HTML元資料相關元素（如<base>、<link>、<script>、<style>或<title>）表示的元資料。charset屬性將文件的字元編碼指定為UTF-8，其中包括絕大多數人類書面語言的大多數字符。有了此設定，頁面現在可以處理它可能包含的任何文字內容。沒有理由不設定它，它可以幫助避免以後出現一些問題。
<title></title>: <title>元素。這設定頁面的標題，即頁面載入時出現在瀏覽器選項卡中的標題。頁面標題也用於描述頁面被新增書籤時的頁面。
<body></body>: <body>元素。它包含所有在頁面上顯示的內容，包括文字、影像、影片、遊戲、可播放的音訊軌道，以及其他任何內容。

主動學習：向HTML文件新增一些功能

如果你想在你本地計算機上嘗試編寫一些HTML，你可以

複製上面列出的HTML頁面示例。
在文字編輯器中建立一個新檔案。
將程式碼貼上到新文字檔案中。
將檔案儲存為index.html。

注意：你也可以在MDN 學習區域 GitHub 倉庫中找到這個基本的HTML模板。

你現在可以在網路瀏覽器中開啟此檔案，檢視渲染後的程式碼外觀。編輯程式碼並重新整理瀏覽器，檢視結果。最初，頁面看起來像這樣

A simple HTML page that says This is my page

在本練習中，你可以像之前描述的那樣在你本地計算機上編輯程式碼，或者你可以在下面的示例視窗中編輯程式碼（可編輯示例視窗僅表示<body>元素的內容，在本例中）。透過完成以下任務來提高你的技能

在<body>元素的開始標籤下方，新增文件的主標題。這應該用<h1>開始標籤和</h1>結束標籤括起來。
編輯段落內容，包含你感興趣的主題的文字。
用<strong>開始標籤和</strong>結束標籤括起來，使重要單詞以粗體突出顯示。
向你的段落新增一個連結，如文章前面所述。
向你的文件新增一個影像。將其放在段落下方，如文章前面所述。如果你設法連結到另一個影像（無論是本地計算機上的影像還是網路上的其他地方），你會獲得額外積分。

如果你犯了錯誤，你可以隨時使用重置按鈕將其重置。如果你真的卡住了，按顯示解決方案按鈕檢視答案。

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 100px;width: 95%">
  &lt;p&gt;This is my page&lt;/p&gt;
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h1 {
  color: blue;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

img {
  max-width: 100%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  '<h1>Some music</h1><p>I really enjoy <strong>playing the drums</strong>. One of my favorite drummers is Neal Peart, who plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>. My favorite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p> <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg" alt="Rush Moving Pictures album cover">';
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

HTML中的空格

在上面的示例中，你可能已經注意到程式碼中包含了很多空格。這是可選的。這兩個程式碼片段是等效的

html

<p id="noWhitespace">Dogs are silly.</p>

<p id="whitespace">Dogs
    are
        silly.</p>

無論你在HTML元素內容中使用多少空格（可能包含一個或多個空格字元，也可能包含換行符），HTML解析器在渲染程式碼時會將每個空格序列縮減為一個空格。那麼為什麼要使用這麼多的空格呢？答案是可讀性。

如果你將程式碼格式化得很好，那麼更容易理解程式碼中的內容。在我們的HTML中，我們對每個巢狀元素縮排兩個空格，比它所處的元素多兩個空格。你可以選擇格式化的樣式（例如，每級縮排多少個空格），但是你應該考慮格式化它。

讓我們看看瀏覽器如何渲染上面帶有空格和沒有空格的兩個段落

注意：從JavaScript訪問元素的innerHTML將保留所有空格。如果空格被瀏覽器修剪，這可能會返回意外的結果。

const noWhitespace = document.getElementById("noWhitespace").innerHTML;
console.log(noWhitespace);
// "Dogs are silly."

const whitespace = document.getElementById("whitespace").innerHTML;
console.log(whitespace);
// "Dogs
//    are
//        silly."

字元引用：在 HTML 中包含特殊字元

在HTML中，字元<、>、"、'和&是特殊字元。它們是HTML語法本身的一部分。那麼，如何在文字中包含這些特殊字元之一呢？例如，如果你想使用一個與符號或小於號，而不想將其解釋為程式碼。

你可以使用字元引用。這些是表示字元的特殊程式碼，用於這些確切的情況。每個字元引用都以一個與符號（&）開頭，並以分號（;）結尾。

文字字元	字元引用等效項
<	`<`
>	`>`
"	`"`
'	`'`
&	`&`

字元引用等效項很容易記住，因為它的文字可以看作小於號<，引號"，其他字元也是如此。要查詢有關實體引用的更多資訊，請參閱XML 和 HTML 字元實體引用列表（維基百科）。

在下面的示例中，有兩個段落

html

<p>In HTML, you define a paragraph using the <p> element.</p>

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

在下面的即時輸出中，你可以看到第一個段落出錯。瀏覽器將第二個<p>解釋為開始一個新段落。第二個段落看起來沒問題，因為它包含了帶有字元引用的尖括號。

注意：對於任何其他符號，你都不需要使用實體引用，因為只要你的HTML字元編碼設定為UTF-8，現代瀏覽器就可以很好地處理實際的符號。

HTML 註釋

HTML 有一種機制可以在程式碼中編寫註釋。瀏覽器會忽略註釋，有效地使註釋對使用者不可見。註釋的目的是允許你在程式碼中包含註釋，以解釋你的邏輯或程式碼。如果你在離開程式碼庫很長時間後再返回，並且不完全記得它，這非常有用。同樣，當不同的人進行更改和更新時，註釋也至關重要。

要編寫 HTML 註釋，請將其用特殊標記括起來。例如

html

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

如下所示，只有第一個段落顯示在即時輸出中。

總結

你已經完成了這篇文章！我們希望你喜歡你的HTML基礎之旅。

此時，你應該瞭解HTML的外觀以及它在基本層面的工作原理。你應該還能夠編寫一些元素和屬性。本模組的後續文章將更深入地介紹這裡介紹的一些主題，並介紹該語言的其他概念。

當你開始學習更多關於HTML的知識時，可以考慮學習CSS（層疊樣式表）的基礎知識。CSS是用於設定網頁樣式的語言，例如更改字型或顏色，或者更改頁面佈局。HTML和CSS協同工作良好，你很快就會發現這一點。

另請參閱

使用CSS將顏色應用於HTML元素