HTML5的新特性(语义化标签、多媒体标签、input表单和表单属性)

最新推荐文章于 2026-03-22 18:30:22 发布

原创

最新推荐文章于 2026-03-22 18:30:22 发布 · 1.6k 阅读

标签

#html5 #语义化标签 #多媒体标签 #input表单 #表单属性

收录于

本文介绍了HTML5中的新语义化标签如header、nav、article等及其在页面结构中的作用，同时详细讲解了video和audio标签的使用方法以及新增的input表单类型和表单属性，强调了这些对搜索引擎优化和用户体验的提升。

1. 新增的语义化标签(header、nav、article、section、aside、footer)

功能和<div>标签一样，在页面中可以使用多次。主要是针对搜索引擎的。常用标签如下

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

在网页布局中使用的位置如下所示
语义化标签

示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

    </style>
</head>
<body>

<header>我是头部标签</header>
<nav>我是导航栏标签</nav>

</body>
</html>

显示效果如下
语义化标签

2. 多媒体标签

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Bulut0907

关注关注

21
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

简述 HTML 的语义化标签是什么？

祈澈菇凉

11-07

1436

这些标签不仅仅用于样式和布局，更重要的是通过标签本身传达出内容的语义和结构，使得页面具有更好的可读性、可访问性和搜索引擎优化。通过使用这些语义化标签，我们可以更清晰地描述页面的结构和内容。HTML 的语义化标签是指用于描述内容结构和含义的标签。

参与评论您还未登录，请先登录后发表或查看评论

前端HTML学习笔记（全）

zzzhhhy的博客

03-11

1443

一、网页 **【网页】：网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 **【HTML】：超文本标记语言, 用来制作网页的一门语言，由标签组成的.，比如图片标签链接标签视频标签等… 所谓超文本，有 2 层含义： 1. 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。 2. 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

HTML5 常用标签

weixin_59246157的博客

04-20

3144

input>标签用于定义输入框，可以定义多种类型的输入框，如文本框、密码框、复选框等。<table>标签定义了一个表格，其中每行使用<tr>标签定义，每个单元格使用<td>标签定义。<details>标签用于定义一个可折叠的内容块，<summary>标签用于定义折叠内容块的摘要。<progress>标签用于显示进度条，<meter>标签用于显示某个量的大小。<datalist>标签用于定义一个选项列表，<option>标签用于定义选项。<ol>标签定义了一个有序列表，其中每个列表项使用<li>标签定义。

HTML5标签（网页编程）

ZangLing的博客

04-09

4463

一、常用标签二、表单标签三、表格标签四、音视频标签五、多媒体标签

HTML5标签全解析：前端必备指南

最新发布

m0_75178011的博客

03-22

383

HTML5是现代网页开发的基础标准，提供了丰富的语义化标签和功能。其文档结构包括根元素、头部和主体标签，新增了header、nav、main等语义化结构标签，优化了文本内容、链接、媒体、列表和表格的标记方式。HTML5特别强化了表单交互功能，新增了多种input类型和交互元素。最佳实践建议优先使用语义化标签、确保可访问性、采用响应式设计。作为前端开发的核心技术，HTML5通过清晰的文档结构和丰富的功能，显著提升了网页开发效率和用户体验，开发者应持续关注其规范演进。

HTML5语义化标签

Jiutwogod

03-14

3084

在HTML5中新增了许多的语义化标签，常用的有：header、section、article、aside、hgroup、figure、figcaption、nac、footer等等。。。 HTML5语义化标签在页面中能够呈现出很好的页面结构效果，比标签的表示更有含义，更方便开发、维护、阅读等等一系列有点。但在使用前我们需要经过一系列的学习，才能灵活的使用。 1、header标签：表示页面中一个内...

(完整版)HTML5常用标签大全

qq_60497930的博客

10-19

7561

(完整版)HTML5常用标签大全

HTML5基础——17、HTML5新特性

阿赵的博客

10-23

2174

学习了很久H5，其实都是在学习HTML的标签结构和CSS样式表。那么H5和普通的HTML有什么区别？

HTML5&CSS3新特性

weixin_52972575的博客

05-05

8852

一.HTML5新特性 HTML5新特性针对于以前的不足，增加了一些新的标签，新的表单，新的表单属性等。 1.新增语义化标签新增的带有语义化的标签二.CSS3新特性

HTML与HTML5知识点复习整理

weixin_67657460的博客

05-26

1756

HTML与HTML5知识点复习整理

HTML语义化标签：

weixin_70443954的博客

11-25

3099

HTML语义化标签

详细整理！！html5常用标签

m0_58680865的博客

09-30

4473

HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言，使用标签来描述网页。HTML文档也叫做web页面。HTML代码是由标签构成的，标签名放到“< >”中。大部分标签都是成对出现，例如：以 < body > 为开始标签，以 </ body > 为结束标签。少数标签只有开始标签的被称为“单标签”。HTML代码是由标签构成的，标签名放到“< >”中。

HTML5 新的语义化标签

一名全栈开发工程师

06-02

2258

CSS3 和 HTML5 引入了大量新特性，为前端开发提供了更多功能和更好的语义化支持。这本教程将详细介绍 CSS3 新语法和技巧，以及 HTML5 新的语义化标签元素，如等。希望通过本教程，读者能够掌握这些新特性的使用方法，提高前端开发水平。

HTML5概述 - 语义化标签

前端队长Daotin

11-20

7167

一、HTML5 简介1、什么是 HTML5HTML5 不是一门新的语言，而是我们之前学习的 HTML 的第五次重大修改版本。2、HTML 的发展历史•超文本标记语言（第一版，不叫 HTML 1.0）——在 1993 年 6 月作为互联网工程工作小组（IETF）工作草案发布（并非标准）；•HTML 2.0——1995 年 11 月作为 RFC 1866 发布，在 RFC 2854 于 2000 年 ...

常用HTML5语义化标签

Be111的博客

10-26

847

今天开通博客打算把之前学过的知识技术总结一下

Html5 什么是语义化标签？常见的语义化标签有哪些？

热门推荐

m0_51273200的博客

09-16

1万+

h5 语义化标签的推出很好的解决了满屏的 div 布局，语义化顾名思义就是能让人一眼就看出来每一个标签的作用和含义，使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让和搜索引擎都容易理解。一张图就可以清晰的展示语义化标签的作用，确实挺好，感觉像搭积木一样，一块一块的把整体搭建出来。以下是常见的语义化标签及其作用 <header> <nav> ...

HTML5的一些新标签

qq_52908359的博客

04-25

2007

1.HTML5的新的块标签： <nav></nav> 导航栏 <header></header> 头部 <footer></footer>底部 <aside></aside>旁边栏 <section></section>内容 <main></main>主要区域 <article></article>文章 <details

html5 常用标签的使用

baipenggui_bo

08-03

5513

什么是HTML? HTML 指的是超文本标记语言:HyperTextMarkupLanguage HTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签(markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML标签及文本内容 HTML文档也叫做web 页面 HTML语法骨架格式 <html> 根标签，页面中最大的标签 <head> 头部，head标签中必须要设置的标签是title ...

HTML5-语义化标签

hjg的专栏

07-10

2059

HTML5发布新增了多个语义化标签，所谓语义化标签的意思就是使用含有具体意义的词语作为标签。从网页的布局来说，一般会分成几个区域，如头部、地图、标题等等，在HTML5之前都是使用div、span添加不同的样式来区分。HTML5之后就对这块做了优化，使用了含有具体意义的词语来表示对应的布局模块。 语义化标签包括: 1.header 网页头部 2.nav 网页导航 3.footer 网页底部 4.

HTML5各种标签总结（HTML、head）

python全栈

01-10

2248

一、HTML标签定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </htm