html5的新增标签

十一月 02, 2025

By Alice

html5的新增标签

HTML5新增结构标签

HTML5引入了多个语义化标签，用于更清晰地描述网页结构：

<header>：定义文档或节的页眉
<footer>：定义文档或节的页脚
<nav>：定义导航链接
<article>：定义独立的内容块
<section>：定义文档中的节
<aside>：定义页面内容之外的内容（如侧栏）

HTML5新增多媒体标签

为支持原生多媒体内容，新增以下标签：

<audio>：嵌入音频内容
<video>：嵌入视频内容
<source>：为多媒体元素定义多种媒体资源
<track>：为视频添加字幕或章节

<video controls width="250">
    <source src="video.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitles.vtt" srclang="en">
</video>

HTML5新增表单元素和属性

新增表单控件和输入类型：

<datalist>：定义输入控件的预定义选项
<output>：表示计算结果
<meter>：定义度量衡
<progress>：显示任务进度

新增输入类型：

email、url、number、range
date、time、datetime-local
search、color、tel

HTML5新增图形和嵌入标签

<canvas>：通过脚本绘制图形
<svg>：定义矢量图形容器
<embed>：定义外部应用程序容器
<figure>和<figcaption>：定义图像及标题

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 80, 80);
</script>

HTML5其他重要标签

<details>和<summary>：创建可展开/折叠的内容
<mark>：高亮显示文本
<time>：定义日期/时间
<main>：定义文档主要内容
<template>：定义可重复使用的HTML模板

这些新增标签提升了网页的语义化程度，减少了对div的依赖，并增强了原生多媒体支持能力。

本文是转载文章，点击查看原文。