告别div,可以代替div的几个标签

简介: 几个最常用的用来代替DIV的HTML5元素 虽说html5中大多数功能性的元素如等还得不到当前主流浏览器的支持(主要就是指IE浏览器了),但至少那些个与布局相关的元素同html5.js结合起来时我们是可以放心使用的,比如,,,,,,这几个最常用的元素。

几个最常用的用来代替DIV的HTML5元素

虽说html5中大多数功能性的元素如<video><canvas><audio>等还得不到当前主流浏览器的支持(主要就是指IE浏览器了),但至少那些个与布局相关的元素同html5.js结合起来时我们是可以放心使用的,比如<header>,<footer>,<nav>,<section>,<article>,<aside>,<figure>这几个最常用的元素。

Article 和 Section

article元素是文档中的独立部分,博客条目、文章或其它由文字构成的内容都应该使用这个标签。基本上,你可以很广泛的使用这个标签来构造页面的文字部分。

section元素是最容易让人误解的元素,因为人们认为它就是用来代替div元素的,但事实并非如此。实际上,section元素与article元素的关系非常紧密,比如一篇文章中的章节可以用section标签来区分。总的来说,这个标签主要用来把页面的内容部分划分成有内在关系的几个区域。

Header 和 Footer

这两个元素自不用说了,分别代表页面的头部和底部。但话说回来,这两个元素代表的不仅仅就只是传统意义上我们所讲的页面头部和底部,事实上,它们可以被更加灵活的在页面各个部分进行应用。

Nav

nav元素主要是指页面的导航菜单部分,里面可包含能链接到页面其他部分的超链接。总之记住在页面的导航区域使用该标签就对了。

 

Figure 和 Figcaption

跟据w3c的说法,这两个元素是用来表示在主文档流之外但又跟文档内容息息相关的那些个部分,其实主要就是指图表、图像、数据引用等这些个能更好的体现文档内容的东西,而且删掉也不会影响主文档内容。Figcaption是指这些多媒体元素的标题。

Aside

aside元素是指脱离主文档主题之外或以主文档内容关系不大的那些区域,典型的应用就是页面的侧边栏之类的啦。

之后在构造页面的时候就多想想吧,看看哪些div是能用上面那些标签来代替的。如果确实是找不到对号入座的元素,那就还是用div吧,因为div在HTML5中并没有被废除,只是作用减弱了而已。对了,在不支持html5标签的浏览器中千万别忘加上html5.js哦!

目录
相关文章
|
存储 SQL 关系型数据库
创建并配置RDS实例
在阿里云上创建RDS实例涉及登录控制台、进入RDS管理页面、创建实例、选择数据库引擎和版本、配置实例规格与存储、设定网络与安全组、设置实例信息、确认订单并支付,最后初始化数据库。操作步骤可能因界面更新或数据库引擎不同略有差异。
584 1
|
10月前
|
JavaScript 前端开发 API
浏览器节能机制导致Websocket断连的坑
浏览器的节能机制虽然有助于节省系统资源和延长电池寿命,但也可能导致WebSocket连接的不稳定性。通过保持活跃连接、实现自动重连机制和利用 `Page Visibility API`检测页面状态,开发者可以有效应对这些挑战,确保WebSocket连接的稳定性和可靠性。这些措施在实际项目中的应用,可以显著提升WebSocket通信的稳定性,提供更好的用户体验。
565 13
|
存储 缓存 前端开发
前端快照实现方案详解
前端快照实现方案详解
959 1
|
SQL Oracle 关系型数据库
各种JOIN的区别
各种JOIN的区别
607 2
|
机器学习/深度学习 人工智能 算法
AI在医疗:深度学习在医学影像诊断中的最新进展
【10月更文挑战第27天】本文探讨了深度学习技术在医学影像诊断中的最新进展,特别是在卷积神经网络(CNN)的应用。文章介绍了深度学习在识别肿瘤、病变等方面的优势,并提供了一个简单的Python代码示例,展示如何准备医学影像数据集。同时强调了数据隐私和伦理的重要性,展望了AI在医疗领域的未来前景。
506 2
|
SQL 关系型数据库 MySQL
MYSQL根据查询结果删除sql 去除重复id 新增对比前一条与后一条数据 去重3种方法​ 窗口函数
MYSQL根据查询结果删除sql 去除重复id 新增对比前一条与后一条数据 去重3种方法​ 窗口函数
322 0
|
存储 JSON 安全
深入理解与实践:Token的使用及其在Web应用安全中的重要性
【7月更文挑战第3天】在现代Web应用程序中,Token作为一种关键的安全机制,扮演着维护用户会话安全、验证用户身份的重要角色。本文将深入探讨Token的基本概念、类型、工作原理,并通过实际代码示例展示如何在Web应用中实现Token的生成、验证及应用,以确保数据传输的安全性和用户认证的有效性。
3696 2
|
Android开发
Android 中选项菜单(Option menu)的用法
Android 中选项菜单(Option menu)的用法
410 0
IDEA常用快捷键
本文为IDEA用户,特别是Java新手总结了一系列实用快捷键,包括快速生成main方法(psvm)、输出语句(sout)、删除行(Ctrl + X/Y)等,以及代码搜索、调试模式启动等高级功能,并提供了自定义快捷键的方法及示例图片,助你提升开发效率。