HTML5 新增标签都有什么

大哥大

（1）布局标签（语义化标签）

• <header> : 头部标签
• <nav> :       导航标签
• <article> :   内容标签
• <section> : 定义文档某个区域
• <aside> :    侧边栏标签
• <footer> :   底部标签
  

图形结合记忆法：

（2）视频标签(video)

属性        描述        示例

autoplay        布尔属性，若存在则视频在加载完成后自动播放。        <video autoplay></video>

controls        布尔属性，若存在则显示视频控制控件（如播放按钮、进度条、音量控制等）。        <video controls></video>

loop        布尔属性，若存在则视频播放完毕后自动循环播放。        <video loop></video>

muted        布尔属性，若存在则视频默认静音。        <video muted></video>

poster        指定视频加载时显示的预览图片 URL，若未设置则显示视频第一帧。        <video poster="preview.jpg"></video>

preload        定义视频的预加载方式，可选值：

- auto：自动预加载视频

- metadata：仅加载视频元数据（如时长、尺寸）

- none：不预加载视频        <video preload="metadata"></video>

src        指定视频文件的 URL。        <video src="video.mp4"></video>

width        设置视频的宽度（像素值）。        <video width="800"></video>

height        设置视频的高度（像素值）。        <video height="450"></video>

playsinline        布尔属性（主要用于移动端），若存在则视频在浏览器内播放，不进入全屏模式（需配合浏览器兼容性设置）。        <video playsinline></video>

controlslist        自定义控制控件的显示 / 隐藏，可选值（用空格分隔）：

- nodownload：隐藏下载按钮

- nofullscreen：隐藏全屏按钮

- noremoteplayback：禁止远程播放        <video controlslist="nodownload nofullscreen"></video>

crossorigin        配置视频的跨域请求策略，可选值：

- anonymous：匿名跨域

- use-credentials：带凭证跨域        <video crossorigin="anonymous"></video>

mediagroup        将多个视频元素分组，用于同步控制（如多个视频同时播放 / 暂停）。        <video mediagr

（3）音频标签(audio)

属性        描述        示例

autoplay        布尔属性，若存在则音频在加载完成后自动播放。        <audio autoplay></audio>

controls        布尔属性，若存在则显示音频控制控件（如播放按钮、进度条、音量控制等）。        <audio controls></audio>

loop        布尔属性，若存在则音频播放完毕后自动循环播放。        <audio loop></audio>

muted        布尔属性，若存在则音频默认静音。        <audio muted></audio>

preload        定义音频的预加载方式，可选值：

- auto：自动预加载音频

- metadata：仅加载音频元数据（如时长、采样率）

- none：不预加载音频        <audio preload="metadata"></audio>

src        指定音频文件的 URL。        <audio src="music.mp3"></audio>

（4）图片标签（img）

src        指定图片文件的 URL，是标签的必需属性。        <img src="image.jpg">

alt        图片的替代文本，当图片无法加载或需要无障碍访问时显示。        <img alt="风景图片">

width        设置图片的宽度（像素值或百分比）。        <img width="800">

height        设置图片的高度（像素值或百分比），建议与width配合使用以避免图片变形。        <img height="450">

loading        定义图片的加载时机，可选值：

- eager：立即加载

- lazy：延迟加载（浏览器视口外的图片暂不加载）        <img loading="lazy">

srcset        提供多个不同分辨率的图片 URL，浏览器会根据设备屏幕尺寸自动选择最佳图片。        <img srcset="img-320.jpg 320w, img-640.jpg 640w">

sizes        配合srcset使用，定义不同屏幕尺寸下应加载的图片尺寸，格式为(媒体条件) 图片宽度, 默认宽度。        <img sizes="(max-width: 600px) 100vw, 600px">

crossorigin        配置图片的跨域请求策略，可选值：

- anonymous：匿名跨域

- use-credentials：带凭证跨域        <img crossorigin="anonymous">

decoding        定义图片的解码优先级，可选值：

- async：异步解码（不阻塞页面渲染）

- sync：同步解码

- auto：浏览器自动决定        <img decoding="async">

class/id        为图片添加 CSS 类名或唯一标识符，用于样式控制或 JavaScript 操作。        <img class="gallery-img" id="main-img">

usemap        关联图片映射（map标签），用于定义图片上的可点击区域。        <img usemap="#image-map">

ismap        布尔属性，若存在则图片为服务器端映射，点击图片会向服务器发送点击坐标。        <img ismap src="map.jpg">

（5）新的 API

音视频：audio 和 video 元素

绘图图形：canvas 元素

本地存储：localStorage，sessionStorage

多线程操作：Web Worker （Web Worker 是html5 新特性，允许我们在 js 主线程之外开辟新线程，并将一段 js 脚本运行其中，它赋予了开发者利用 js 操作多线程的能力 ）

语义化的优点如下：

在没有CSS样式情况下也能够让页面呈现出清晰的结构

有利于seo和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重

方便团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化

————————————————

原文链接：https://blog.csdn.net/m0_69257679/article/details/129794885

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！