HTML5 元素語法知識點及案例代碼
一、HTML5 元素概述
HTML5 元素是構成網頁的基本單位，每個元素都有特定的語義和功能。HTML5 元素由開始標簽、內容和結束標簽組成，例如：
<p>這是一個段落。</p>
<p>是開始標簽這是一個段落。是內容</p>是結束標簽
二、HTML5 元素分類
HTML5 元素可以根據其功能和語義進行分類，主要分為以下幾類：
-
根元素:
<html>: 定義 HTML 文檔的根元素。
-
文檔元數據:
<head>: 定義文檔的頭部信息，例如標題、樣式表、腳本等。<title>: 定義文檔的標題。<meta>: 定義文檔的元數據，例如字符編碼、作者、描述等。<link>: 定義文檔與外部資源的關系，例如樣式表、圖標等。<style>: 定義文檔的內部樣式表。<script>: 定義文檔的腳本代碼。
-
內容分區:
<body>: 定義文檔的主體內容。<header>: 定義文檔或節的頁眉。<nav>: 定義導航鏈接。<main>: 定義文檔的主要內容。<section>: 定義文檔中的節。<article>: 定義獨立的文章內容。<aside>: 定義頁面內容之外的內容（如側邊欄）。<footer>: 定義文檔或節的頁腳。
-
文本內容:
<h1>-<h6>: 定義標題。<p>: 定義段落。<br>: 定義換行。<hr>: 定義水平線。<pre>: 定義預格式化文本。<blockquote>: 定義塊引用。<ol>: 定義有序列表。<ul>: 定義無序列表。<li>: 定義列表項。<dl>: 定義定義列表。<dt>: 定義定義術語。<dd>: 定義定義描述。
-
內聯語義:
<a>: 定義超鏈接。<strong>: 定義強調文本。<em>: 定義強調文本。<mark>: 定義標記文本。<small>: 定義小號文本。<sub>: 定義下標文本。<sup>: 定義上標文本。<code>: 定義代碼片段。<time>: 定義日期/時間。
-
圖像和多媒體:
<img>: 定義圖像。<audio>: 定義音頻內容。<video>: 定義視頻內容。<source>: 定義多媒體資源的來源。<track>: 定義多媒體資源的字幕。
-
表格:
<table>: 定義表格。<caption>: 定義表格標題。<thead>: 定義表格頭部。<tbody>: 定義表格主體。<tfoot>: 定義表格尾部。<tr>: 定義表格行。<th>: 定義表格頭單元格。<td>: 定義表格數據單元格。
-
表單:
<form>: 定義表單。<input>: 定義輸入控件。<label>: 定義輸入控件的標簽。<button>: 定義按鈕。<select>: 定義下拉列表。<option>: 定義下拉列表選項。<textarea>: 定義多行文本輸入框。
三、HTML5 元素案例代碼
<!DOCTYPE html>
<html><head><title>HTML5 元素案例</title><meta charset="UTF-8"><meta name="description" content="HTML5 元素案例代碼"><link rel="stylesheet" href="style.css"><style>body {font-family: Arial, sans-serif;}h1 {color: red;}</style><script>function sayHello() {alert("Hello, World!");}</script></head><body><header><h1>HTML5 元素案例</h1><nav><ul><li><a href="#">首頁</a></li><li><a href="#">關于</a></li><li><a href="#">聯系</a></li></ul></nav></header><main><section><h2>文本內容</h2><p>這是一個段落。</p><p>這是另一個段落。</p><blockquote><p>這是一個塊引用。</p></blockquote></section><section><h2>圖像和多媒體</h2><img src="image.jpg" alt="圖片"><audio controls><source src="audio.mp3" type="audio/mpeg">您的瀏覽器不支持 audio 標簽。</audio><video width="320" height="240" controls><source src="video.mp4" type="video/mp4">您的瀏覽器不支持 video 標簽。</video></section><section><h2>表格</h2><table><caption>表格標題</caption><thead><tr><th>姓名</th><th>年齡</th></tr></thead><tbody><tr><td>張三</td><td>20</td></tr><tr><td>李四</td><td>25</td></tr></tbody></table></section><section><h2>表單</h2><form action="/submit" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name" required><label for="email">郵箱：</label><input type="email" id="email" name="email" required><label for="age">年齡：</label><input type="number" id="age" name="age" min="1" max="120"><label for="birthday">生日：</label><input type="date" id="birthday" name="birthday"><label for="color">喜歡的顏色：</label><input type="color" id="color" name="color"><input type="submit" value="提交"></form></section></main><footer><p>版權所有 © 2023</p></footer><button onclick="sayHello()">點擊我</button></body>
</html>
四、代碼解析
-
文檔結構:
<!DOCTYPE html>聲明文檔類型為 HTML5。<html>元素是文檔的根元素。<head>元素包含文檔的元數據，例如標題、樣式表、腳本等。<body>元素包含文檔的主體內容。
-
文檔元數據:
<title>元素定義文檔的標題。<meta>元素定義文檔的字符編碼和描述。<link>元素鏈接外部樣式表。<style>元素定義內部樣式表。<script>元素定義腳本代碼。
-
內容分區:
<header>元素定義文檔的頁眉。<nav>元素定義導航鏈接。<main>元素定義文檔的主要內容。<section>元素定義文檔中的節。<footer>元素定義文檔的頁腳。
-
文本內容:
<h1>-<h6>元素定義標題。<p>元素定義段落。<blockquote>元素定義塊引用。
-
圖像和多媒體:
<img>元素定義圖像。<audio>元素定義音頻內容。<video>元素定義視頻內容。
-
表格:
<table>元素定義表格。<caption>元素定義表格標題。<thead>元素定義表格頭部。<tbody>元素定義表格主體。<tr>元素定義表格行。<th>元素定義表格頭單元格。<td>元素定義表格數據單元格。
-
表單:
<form>元素定義表單。<input>元素定義輸入控件。<label>元素定義輸入控件的標簽。<button>元素定義按鈕。
-
腳本:
<script>元素定義腳本代碼。onclick事件屬性定義按鈕點擊事件。
五、總結
HTML5 元素是構成網頁的基本單位，每個元素都有特定的語義和功能。通過學習 HTML5 元素的語法和用法，你可以創建結構清晰、語義明確的網頁。
