社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 web前端 H5教程 html5新增标签有哪些？html5新增的标签应用

html5新增标签有哪些？html5新增的标签应用

不言
不言
Aug 08, 2018 am 10:26 AM

html5是超文本标记语言（HTML）的第五次修改，所以在html5中新增了一些新的标签，那么，html5中新增标签是什么？下文将给大家介绍的就是html5比html新添加的标签。

1、HTML5新增的标签

Header - 可表示介绍内容的容器，或者一组导航链接。

Nav - 标签的内容主要用于导航。

Article - 标识页面中的主体内容。以博客为例，每个帖子都是一个重要内容，可采用 Article 标识每一个帖子。

Section - 用于标记页面上的重要的部分。该标记类似于将文档分为多个章节。

Aside - 表示和页面主要内容有关，但不是页面的一部分，经常表示一个相关链接。

Footer - 和 Header 相对，表示文档或者章节的页脚，比如版权信息放在此标记中。

传统 div方式布局

<body>
    <!-- 页头 -->
    <div class=&#39;header&#39;></header> 
    <!-- 导航 -->
    <div class=&#39;nav&#39;></div>
    <!-- 主体内容 -->
    <div class=&#39;main&#39;>
        <!-- 文章 -->
        <div class=&#39;article&#39;>
            <!-- 节 -->
            <div class=&#39;section&#39;></div>
        </div>
        <!-- 边栏 -->
        <div class=&#39;sidebar&#39;></div>
    </div>
    <!-- 页脚 -->
    <div class=&#39;footer&#39;></div></body>
登录后复制

使用 HTML5新增的标签实现布局

<body>
    <header></header>
    <nav></nav>
    <div>
        <article>
            <section></section>
        </article>
        <aside></aside>
    </div>
    <footer></footer></body>
登录后复制

2、表单的增强应用

在 HTML 4 中，提供了一些简单的表单元素应对基本输入。对于特定类型的输入，比如日期时间的输入，交互体验无法满足需求。因此，为了得到更好的效果，只能使用 javascript 编写组件实现。在 HTML 5 中得到了完善，增加了新的表单元素来提供更多的输入类型。

（1）Input 的 Type 属性扩充

search - 呈现一个搜索框。

tel - 输入电话号码，可以采用 pattern 和 maxlength 来限定输入合适

<input type=&#39;tel&#39; name=&#39;tel&#39; value="" placeholder="请输入手机号码" pattern=&#39;1[3-8][0-9]{9}&#39; title=&#39;请输入11位手机号&#39;>
登录后复制

url - 输入 URL 地址。

email - 输入电子邮箱地址。

date - 输入日期。

color - 输入颜色。

number - 输入数字。

range - 滑块输入

（2）Input 通过属性进行表单验证

required - 标记当前元素为必填。

pattern - 采用正则表达式验证表单输入。

（3）Input 元素的其他有用属性

autofocus - 当页面加载时，自动聚焦到当前的 input 元素。

form - 将 input 元素和特定的 Form 表单关联。

placeholder - 输入占位符，提示用户输入。

（4）HTML 5 新元素 和 特殊属性 contenteditable

progress - 元素表示进度条。

<progress value=&#39;30&#39; max=&#39;100&#39;></progress>
登录后复制

meter - 元素表示标尺。最大值 max 默认为 1。

<meter value="3" min="0" max="10">3/10</meter><meter value="0.6">60%</meter>
登录后复制

HTML 5 特殊属性 contenteditable，通过该属性，可以让一个普通元素可编辑。

<p contenteditable="true">这里的内容式可编辑的</p>
登录后复制

3、使用音频和视频

（1）audio（音频标签）

<audio controls>
    <source src="vincent.mp3" />
    <source src="vincent.ogg" />
    您的浏览器不支持 audio 标签</audio>
登录后复制

audio 控制元素行为的属性如下

controls - 该属性控制，是否显示标准的音频空间。

autoplay - 是否自动播放。默认 false。

loop - 是否循环播放。默认 false。

preload - 预先加载的方式。有三种情况：none 表示不预加载；metadata 只加载音频的元数据；auto 表示预加载整个音频。默认 auto。

volum - 音量，值在 0 - 1 之间

播放和暂停音频的方法

var audio = document.getElementById(&#39;audio&#39;)
audio.play() // 播放audio.pause() // 暂停
登录后复制

（2）video （视频标签）

currentTime 控制开始播放的时间

<video width="400" height="300" controls currentTime=&#39;5&#39;>

    <source src="dizzy.mp4#t=5" type="video/mp4" />  <!-- 从 5s 开始 -->
    <source src="dizzy.ogv#t=5,10" type="video/ogg" /> <!-- 从 5s 到 10s -->
    <source src="dizzy.webm#t=,15" type="video/webm"> <!-- 到 15s 结束 -->
    <p>您的浏览器不支持 HTML 5 视频</p></video>
登录后复制

相关文章推荐：

html5基础标签(html5视频标签 html5新标签用法)_html5教程技巧

HTML5新增元素、标签总结

HTML5新增标签和属性简介

以上是html5新增标签有哪些？html5新增的标签应用的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

如何修复KB5055612无法在Windows 10中安装？
4 周前 By DDD
<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：种植花园 - 完整的突变指南
3 周前 By DDD
北端：融合系统，解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程
1675
14
CakePHP 教程
1429
52
Laravel 教程
1333
25
PHP教程
1278
29
C# 教程
1257
24
显示更多
Related knowledge
H5代码：Web开发人员的最佳实践 H5代码：Web开发人员的最佳实践 Apr 16, 2025 am 12:14 AM

H5代码的最佳实践包括：1.使用正确的DOCTYPE声明和字符编码；2.采用语义化标签；3.减少HTTP请求；4.使用异步加载；5.优化图像。这些实践能提升网页的效率、可维护性和用户体验。

H5：网络标准和技术的发展 H5：网络标准和技术的发展 Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能，使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5：如何增强网络上的用户体验 H5：如何增强网络上的用户体验 Apr 19, 2025 am 12:08 AM

H5通过多媒体支持、离线存储和性能优化提升网页用户体验。1）多媒体支持：H5的和元素简化开发，提升用户体验。2）离线存储：WebStorage和IndexedDB允许离线使用，提升体验。3）性能优化：WebWorkers和元素优化性能，减少带宽消耗。

了解H5代码：HTML5的基本原理 了解H5代码：HTML5的基本原理 Apr 17, 2025 am 12:08 AM

HTML5是构建现代网页的关键技术，提供了许多新元素和功能。1.HTML5引入了语义化元素如、、等，增强了网页结构和SEO。2.支持多媒体元素和，无需插件即可嵌入媒体。3.表单增强了新输入类型和验证属性，简化了验证过程。4.提供了离线和本地存储功能，提升了网页性能和用户体验。

解构H5代码：标签，元素和属性 解构H5代码：标签，元素和属性 Apr 18, 2025 am 12:06 AM

HTML5代码由标签、元素和属性组成：1.标签定义内容类型，用尖括号包围，如。2.元素由开始标签、内容和结束标签组成，如内容。3.属性在开始标签中定义键值对，增强功能，如。这些是构建网页结构的基本单位。

H5代码的基础：密钥元素及其目的 H5代码的基础：密钥元素及其目的 Apr 23, 2025 am 12:09 AM

HTML5的关键元素包括、、、、、等，用于构建现代网页。1.定义头部内容，2.用于导航链接，3.表示独立文章内容，4.组织页面内容，5.展示侧边栏内容，6.定义页脚，这些元素增强了网页的结构和功能性。

H5和HTML5之间的连接：相似性和差异 H5和HTML5之间的连接：相似性和差异 Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一个版本，包含新元素和API；H5是基于HTML5的移动应用开发框架。HTML5通过浏览器解析和渲染代码，H5应用则需要容器运行并通过JavaScript与原生代码交互。

HTML5和H5：了解常见用法 HTML5和H5：了解常见用法 Apr 22, 2025 am 12:01 AM

HTML5和H5没有区别，H5是HTML5的简称。1.HTML5是HTML的第五个版本，增强了网页的多媒体和交互功能。2.H5常用于指代基于HTML5的移动网页或应用，适用于各种移动设备。

See all articles