紀錄工作經驗、相關知識,解決技術相關問題。

HTML

HTML 5 基本語法、語意標籤、元素總整理

HTML 目前版本

HTML5 是當前網頁開發的標準,提供了許多新元素和屬性來簡化開發並增強網頁功能。以下是 HTML5 語法的總整理,幫助您快速了解並應用這些新特性。

想了解 HTML 相關資訊,可以看看這兩篇:

基本語法

DOCTYPE

在 HTML5 中,DOCTYPE 宣告已被簡化,只需使用以下語法:

<!DOCTYPE html>

字符編碼

在 HTML5 中,設定字符編碼的語法也被簡化:

<meta charset="UTF-8">

HTML5 中的 <script><link> 標籤不再需要 type 屬性:

<script src="scriptfile.js"></script>
<link rel="stylesheet" href="stylefile.css">

新增的 HTML5 元素

HTML5 引入了許多新元素來提高網頁語義性和功能性。例如:

類型元素描述
文章和段落標記<article>, <section>, <nav>, <aside>, <header>, <footer>提高網頁的語義性
媒體元素<audio>, <video>, <source>, <track>用於音頻和視頻內容
圖形元素<canvas>, <svg>支持繪圖和圖形渲染
表單元素<datalist>, <output>, <progress>, <meter>提升表單的功能性
互動元素<details>, <summary>增加互動性元素
HTML5 – 新增網頁語義標籤

如果你想知道網頁製作最常使用的語意標籤有哪些,可以看看以下這篇

HTML5 語意標籤

全域屬性

HTML5 引入了多個全域屬性,這些屬性可以應用於所有 HTML 元素:

屬性描述
id元素的唯一標識符
class元素的類名
style內聯樣式
data-*自定義數據屬性
hidden隱藏元素​ (Tutorialspoint)​​ (Wikipedia)​
HTML5 – 新增全域屬性

表單改進

HTML5 為表單新增了多種類型的輸入控件和屬性:

輸入類型描述
email電子郵件地址
url網址
number數字
range範圍滑塊
date日期
datetime-local當地日期和時間
color顏色選擇器
required確保用戶填寫必填字段
placeholder提供提示文本​ (Wikipedia)​​ (MDN Web Docs)​
HTML5 – 表單相關

廢棄/替代的元素標籤

HTML5 移除了許多過時的元素,這些元素已被新的、更語義化的標籤所取代:

元素描述狀態替代標籤
<acronym>縮略詞廢棄<abbr>
<applet>Java applet廢棄<object>
<basefont>基本字體廢棄CSS
<big>大號字體廢棄CSS
<center>中心對齊廢棄CSS
<dir>目錄列表廢棄<ul>
<font>字體設置廢棄CSS
<frame>框架廢棄
<frameset>框架集廢棄
<noframes>不支持框架的內容廢棄
<strike>刪除線文本廢棄<s>
<tt>打字機文本廢棄CSS​
HTML5 – 棄用標籤整理 & 對應替代標籤

HTML5 標籤總整理表 (A-Z)

最後幫你整理出一份包含 HTML5 標籤的完整列表,按字母順序排列,每個標籤都附有簡短的說明和狀態,方便開發RD查閱。

這是一份包含 HTML5 標籤的完整列表,按字母順序排列,每個標籤都附有簡短的說明和狀態。

標籤說明狀態
<!– –>註解可用
<a>超連結、錨點可用
<abbr>縮寫可用
<address>聯絡信息標籤可用
<area>圖像映射區域標籤可用
<article>文章標籤,用於自包含的內容可用
<aside>側邊欄標籤,表示非主要內容可用
<audio>音頻內容標籤可用
<b>粗體字標籤可用
<base>指定網頁連結可用
<bdi>雙向隔離文本可用
<bdo>文字方向覆寫可用
<blockquote>塊引用可用
<body>網頁主體標籤可用
<br>換行標籤可用
<button>按鈕標籤可用
<canvas>畫布標籤,用於繪製圖形可用
<caption>表格標題可用
<cite>引用標籤可用
<code>程式碼標籤可用
<col>表格列標籤可用
<colgroup>表格列群組標籤可用
<data>錨數據可用
<datalist>預定義選項列表可用
<dd>定義描述標籤可用
<del>刪除文本標籤可用
<details>詳情標籤,用於可展開的詳細內容可用
<dfn>定義標籤可用
<dialog>對話框標籤可用
<div>分區或區段標籤可用
<dl>定義列表標籤可用
<dt>定義項目標籤可用
<em>強調標籤可用
<embed>嵌入外部內容標籤可用
<fieldset>表單字段集可用
<figcaption>圖例標題可用
<figure>圖例標籤可用
<footer>頁腳標籤可用
<form>表單標籤可用
<h1>標題 1可用
<h2>標題 2可用
<h3>標題 3可用
<h4>標題 4可用
<h5>標題 5可用
<h6>標題 6可用
<head>頁首標籤可用
<header>頁眉標籤可用
<hgroup>標題群組標籤可用
<hr>水平線標籤可用
<html>根元素標籤可用
<i>斜體字標籤可用
<iframe>嵌入框架可用
<img>圖像標籤可用
<input>輸入控件標籤可用
<ins>插入文本標籤可用
<kbd>鍵盤輸入標籤可用
<label>表單標籤可用
<legend>表單說明可用
<li>列表項標籤可用
<link>鏈接標籤可用
<main>主內容標籤可用
<map>圖像映射標籤可用
<mark>標記文本標籤可用
<menu>菜單列表標籤可用
<meta>元數據標籤可用
<meter>測量值標籤可用
<nav>導航鏈接標籤可用
<noscript>不支持腳本可用
<object>插入對象標籤可用
<ol>有序列表標籤可用
<optgroup>選項組標籤可用
<option>選項標籤可用
<output>輸出標籤可用
<p>段落標籤可用
<param>參數標籤可用
<picture>圖像元素可用
<pre>預格式化文本可用
<progress>進度條標籤可用
<q>短引用標籤可用
<rp>Ruby 避免標籤可用
<rt>Ruby 文本標籤可用
<ruby>Ruby 註釋標籤可用
<s>刪除線標籤可用
<samp>範例輸出標籤可用
<script>腳本標籤可用
<section>區段標籤可用
<select>選擇控件標籤可用
<small>小字標籤可用
<source>媒體資源標籤可用
<span>範圍標籤可用
<strong>強調標籤可用
<style>樣式標籤可用
<sub>下標標籤可用
<summary>詳情摘要可用
<sup>上標標籤可用
<table>表格標籤可用
<tbody>表格主體可用
<td>表格單元格可用
<template>模板標籤可用
<textarea>多行文本輸入可用
<tfoot>表格表尾可用
<th>表格頭部單元格可用
<thead>表格頭部可用
<time>時間標籤可用
<title>標題標籤可用
<tr>表格行可用
<track>媒體字幕標籤可用
<u>下劃線標籤可用
<ul>無序列表標籤可用
<var>變量標籤可用
<video>視頻標籤可用
<wbr>強制換行標籤可用
2024 HTML5 標籤總整理表

參考資料

發表迴響