抛弃 div 标签：改用这些 HTML 标签

于 2023-04-29 11:31:36 发布
阅读量396 收藏
点赞数
文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52010446/article/details/130439269
版权
本文探讨了过度依赖div标签的问题，并提出了一些更具语义性的HTML标签替代方案，如<section>、<article>、<sub>、<sup>和<small>，以改善网页内容的结构和可读性。
摘要由CSDN通过智能技术生成

Div标签是一种 HTML 元素，可用于将网页划分为多个部分，并可使用CSS设置样式。虽然div标签对于创建页面布局和分隔内容很有用，但不应过度或不必要地使用它们。通常最好为您要标记的内容使用最合适的HTMLdiv元素，而不是一直依赖标签。

所以在这里，在本文中，我选择了一些可以轻松替换 div 标签的替代方法。他们是：

部分
此标记定义文档中的一个部分，例如章节或附录。它通常用于对语义相关的内容进行分组。

This is a section

This is a paragraph within the section

文章 此标记定义独立的、自包含的内容，例如博客文章或新闻文章。

This is an article

This is a paragraph within the article

标头 此标记定义部分或页面的标题。它可以包含徽标、导航菜单或出现在页面顶部的其他元素。

This is the page title

页脚 此标记定义部分或页面的页脚。它可以包含版权信息、站点地图或出现在页面底部的其他元素。
最低0.47元/天 解锁文章
Q shen
关注
我的Android进阶之旅------>Android中编解码学习笔记
字节卷动
09-26 8864
编解码学习笔记（一）：基本概念 媒体业务是网络的主要业务之间。尤其移动互联网业务的兴起，在运营商和应用开发商中，媒体业务份量极重，其中媒体的编解码服务涉及需求分析、应用开发、释放license收费等等。最近因为项目的关系，需要理清媒体的codec，比较搞的是，在豆丁网上看运营商的规范 标准，同一运营商同样的业务在不同文档中不同的要求，而且有些要求就我看来应当是历史的延续，也就是现在已经很少采
前端常见vue面试题（必备）
最新发布
bb_xiaxia1998的博客
03-01 260
provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。vue2.x 中的组件是通过声明的方式传入一系列 option，和 TypeScript 的结合需要通过一些装饰器的方式来做，虽然能实现功能，但是比较麻烦。模板方面没有大的变更，只改了作用域插槽，2.x 的机制导致作用域插槽变了，父组件会重新渲染，而 3.0 把作用域插槽改成了函数的方式，这样只会影响子组件的重新渲染，提升了渲染的性能。
html可以代替div,告别div，可以代替div的几个标签
weixin_36071439的博客
06-10 1931
虽说html5中大多数功能性的元素如等还得不到当前主流浏览器的支持(主要就是指IE浏览器了)，但至少那些个与布局相关的元素同html5.js结合起来时我们是可以放心使用的，比如,,,,,,这几个最常用的元素。Article 和 Sectionarticle元素是文档中的独立部分，博客条目、文章或其它由文字构成的内容都应该使用这个标签。基本上，你可以很广泛的使用这个标签来构造页面的文字部分。sect...
HTML5替代div的元素
weixin_34162629的博客
11-15 101
section页面中的一个内容区块和 h1,h2等元素结合起来使用 article页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章 aside和article配合 header标签定义文档的页眉 hgroup标签用于对网页或区段（section）的标题进行组合 footer 页脚 nav导航链接 figure请使用 元素为元素组添加标题 本...
避免常见的HTML5错误用法
h淡了
07-16 618
不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的等价于——具体地说，就是直接用作替代品(用于样式)。在XHTML或者HTML4中，我们常看到这样的代码：                         My super duper page                 Header content          
html div能用什么替换,使用.html()替换
weixin_39774808的博客
06-15 466
我一直在寻找答案，没有任何关系。对不起，如果有另一个类似的问题。我试图将多个页面放在index.html页面上，因此我试图在菜单按钮上单击替换内容div中的文本。我曾尝试使用.replaceWith(); .empty()和append()(和.appendTo())，并发现以下工作，但只有一次。我对编码相当陌生，因此对Laymans术语的任何回应将不胜感激。 :)我的HTML：......Hom...
使用HTML5的语义化取代DIV标记
cuifuzong3007的博客
11-10 224
在过去设计师们经常会跟频繁运用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和Eric Meyer这样的思想革新者，聪明的设计师们慢慢的接受了相对更语义化的＜...
面试总结（1）---7.28
刘群智的博客
07-28 1607
Ajax关于readyState（状态值）和status（状态码）的研究 var getXmlHttpRequest = function () {     try{         //主流浏览器提供了XMLHttpRequest对象         return new XMLHttpRequest();     }catch(e){         //低版本的IE浏览器没有...
综合一
刘群智的博客
07-27 4056
自我介绍 左固定右自适应布局 这是一个很常见的布局，当然也可以实现右侧自适应，左侧自适应。比如常见的网页中，左侧导航栏是固定的，右侧的内容区要自适应浏览器的大小。 现在我们来看下HTML布局： &lt;div id="outer"&gt;   &lt;div id="sidebar" style="height:240px;"&gt;固定宽度区&lt;/div&gt;   &lt;d
用html5新布局元素代替div元素布局页面
热门推荐
yin_991的博客
10-27 1万+
用html5新布局元素代替div元素布局页面
CSS基础
qq_51220629的博客
05-18 431
input和文本框的优化、单行多行文字溢出省略号显示、margin负值运用、文字围绕浮动元素、css3属性选择器、伪类选择器、伪元素选择器使用
HTML可以不用div布局吗,如何在HTML和CSS中创建非矩形DIV？
weixin_35756373的博客
06-11 236
像这样的东西？http://jsfiddle.net/eW9kR/1/如果这不是你想要的,请告诉我,我会尽力帮助你.基本上,你首先创建一个包装器div.wrap来保存其他div.在那,你然后放置你的两个div.然后在包装器上设置宽度.div.wrap { width: 300px; }这确保了包含在其中的div将扩展到300 px,除非告知不要.我们在包含的div上设置了背景和边框.div.big...
09-常用标签之盒子标签 ＜div＞、＜span＞
qq_36352716的博客
01-19 1272
1、div标签 可以理解为大盒子，独自占一行 2、span标签 可以理解为小盒子，一行可以有多个span标签
几个最常用的用来代替Div的HTML5元素
寬真
04-11 804
几个最常用的用来代替Div的HTML5元素 虽说html5中大多数功能性的元素如等还得不到当前主流浏览器的支持（主要就是指IE浏览器了），但至少那些个与布局相关的元素同html5.js结合起来时我们是可以放心使用的，比如,,,,,,这几个最常用的元素。 Article 和 Section article元素是文档中的独立部分，博客条目、文章或其它由文字构成的内容都应该使用这个标签。基本上，你可以很...
div代替select
Carry_YI的博客
12-08 802
//CSS .menu_h,.menu_v,.menu_h li,.menu_v li { margin: 0; padding: 0; line-height: 21px; font-size: 12px; list-style-type: none; text-align:left; display: inline; } .menu_h a { display:
删除与替换DIV
笑青天的专栏
05-21 1792
 Element.remove(DIVID) Element.replace(DIVID,待替换内容);  Enter your name: Ajax.js Event.observe(window,
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Q shen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值