• 售前

  • 售后

热门帖子
入门百科

不要在HTML中滥用div

[复制链接]
杨柳657 显示全部楼层 发表于 2021-8-16 11:47:21 |阅读模式 打印 上一主题 下一主题
目录


  • 概述
  • 什么是语义化

    • 标题元素
    • 按钮

  • 非语义化元素
  • 总结

概述

做前端开辟的同砚都知道,一个网页的根本组成部门是 HTML,JavaScript 和 CSS。开辟人员通常更关注 JavaScript 和 CSS ,实践着各种语言规范和设计模式。对于 HTML 的关注度则显着偏少,只要能做出设计师画的界面就万事大吉了,不怎么去关心 HTML 是不是规范公道。于是下面的情况到处可见:
       
  • 按钮用的是可点击的<div>而不是<button> 元素   
  • 标题用的是 <div>而不是标题元素 (<h1>,<h2> 等等)   
  • <input>相应的文本标签用的是<div> 而不是<label>   
  • 输入框也用绑定了键盘事件的<div>,而不是<input>
看到没?一招<div> 走天下!如许有没有标题?好像也没什么大标题,毕竟页面看起来符合设计,也能正常交互。但是你想过没有,如果<div>能办理统统,为什么还须要其余几十上百种标签呢?这就要说到 HTML 的语义化了。

什么是语义化

语义化就是说,HTML 元素具有相应的寄义。它用于描述元素的内容或者跟其他元素的关系。在 HTML 里,除了<div>和<span>,根本上都是语义化的元素。
标署名的表义水平也是不一样的,比如<section>比<article>对内容的描述就更暗昧。<section>也是语义化的,由于它表明内容应该从属于一个组。而<article>不但表示它的内容从属于一个组,还是一篇文章。
为了进一步阐明语义化的告急性,下面用标题和按钮元向来举例。

标题元素

<h1>是页面的标题,加上下方的<h2> 就形成了页面的层级布局。
  1. <!-- h1, 一级标题 -->
  2. <h1>当你的 HTML 里全是 div,那你就要小心了</h1>
  3. <!-- h2,二级标题 -->
  4. <h2>什么是语义化</h2>
  5. <!-- h3,三级标题-->
  6. <h3>标题元素</h3>
复制代码
在很多富文本编辑器中,利用符合的标题布局,可以自动生成内容目录。比如本文的目录布局就是如许:

可以看到,HTML 本身就传达了整篇文章的布局信息。相反,如果全部都用<div>,就变成如许了:
       
  • <div>: 当你的 HTML 里满是 div,那你就要小心了   
  • <div>: 什么是语义化   
  • <div>: 标题元素   
  • <div>: 按钮   
  • <div>: 非语义化元素   
  • <div>: 总结
由于<div>不附带任何寄义,因此它就是扁平的布局。只要利用正确的 HTML,DOM 就会变得清晰和布局化。

按钮

按钮的作用是提交表单或者改变某个元素的状态。从界说上看,按钮具备以下特性:
       
  • 可得到焦点   
  • 可通过敲击空格键或者回车键激活   
  • 可通过鼠标点击激活
当你用<div>绑定点击事件来模拟按钮时,你就没办法用上<button>自然自带的那些语义化的交互特性。你还须要手动实现这些功能:
       
  • focus 状态   
  • 键盘交互   
  • 鼠标交互
不止云云,当屏幕阅读器遇到<button>提交</button>这个元素,它会辨认出语义,告诉用户这是个提交按钮。如果只是个<div>,阅读器就不会认为它是个按钮。
当我们利用语义化的 HTML 元素后,就给内容赋予了寄义,内容也就有了生命。

非语义化元素

前面提到过,<div>和<span>黑白语义化元素。<div>没有给内容附加任何寄义,它只是个<div>。固然,这么说也不完全准确,由于<div>和<span>之间还是有一点点区别的:
       
  • <div>是块级元素   
  • <span>是行内元素,应该放在其他元素内里,比如<p><span>I</span>nline elements</p>
如果实在找不到对应的 HTML 元向来表示内容,那就可以用<div>或者<span>。既然设计了<div>和<span>,自然有它们的用武之地。毕竟,并不是每一个 HTML 元素都须要额外的语义。
总体原则是,只管优先利用对应的语义化元素表示内容。退而求其次,利用寄义没那么明白的标签。最后才考虑用<div>和<span>。

总结

虽然利用语义化的 HTML 元素并不会给你的项目带来显着的收益,但我还是发起你这么做。至少,语义化的 HTML 页面能带来更好的 SEO 排名、对屏幕阅读器更友好、代码可读性更高。如果你是个有寻求的 Coder,信赖你会认同我的见解。
以上就是不要在HTML中滥用div的详细内容,更多关于不要在HTML中滥用div的资料请关注草根技能分享别的相干文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作