您现在的位置是:首页 > Javascript
当前栏目
HTML5新增标签
2023-03-20 14:41:14 时间
html5是最新的html标准,拥有新的语义、图形以及多媒体元素,简化web应用程序,专为丰富的web内容而设计的,简称“H5”。简单来说就是增加了一些更直观的标签,H5相比html4.0精简了很多。
HTML新增标签
1. 结构标签:主要用来对页面结构进行划分,页面结构划分为顶部、导航、内容(页眉、区块)、页脚等。
- header:一般网页头部信息/标题。
- nav:导航条部分内容。
- section:独立内容区块,一般内容区。
- article:特殊独立区块,表示页眉中核心内容。
- aside:标签内容之外,与标签内容相关的辅助信息。
- figure:独立单元,如有图文混合模块。
- hgroup:头部信息/标题相关信息。
- footer:底部信息。
代码示例:
<header>
顶部信息
</header>
<nav>
导航信息
</nav>
<div>
<section>
<hgroup>标题相关</hgroup>
<article>图文混合内容</article>
<footer>底部信息</footer>
</section>
<aside>
侧边栏
</aside>
</div>
<footer>
底部
</footer>
代码运行结果如下:
2. 表单标签
表单中元素input还记得吗?H5新增表单标签主要针对input的type属性值,具体属性值描述如下:
- search:搜索框。应用非常广泛,与text的区别是有值的时候会有清空按钮。
- email:邮箱地址,自动校验。
- url:http地址,自动校验。
- number:必须输入数值,通过min、max属性可以设置最小最大值。
- range:必须输入一定范围内的数值。
- color:颜色选择器。
- 日期选择器:date:选取年月日。month:选取年月。week:选择周和年。time:选取时间。datetime:选取时间、年月日。示例:<input type="number" min="0" max="3">
3. 媒体标签
- video:视频
- audio:音频
- embed:嵌入内容,包括各种媒体,flash,图片等。
4. 其他功能标签
- progress:进度条。<progress max="100" min="1" value="20"></progress>
- datalist:文本域下拉提示。
- detail:展开菜单。
- mark:标注。
- time:数据标签,给搜索引擎使用,主要日期标签。
- canvas:使用js进行图像绘制。
- ruby:对某些内容进行注释。
- command:按钮。
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件