我为什么要用'li'而不是'div'？

作者：云聪京初瑞子_617 | 2023-08-30 16:52

如何解决《我为什么要用'li'而不是'div'？》经验，为你挑选了5个好方法。

我不确定为什么我需要使用ul-li vs在列出项目时简单地使用div.我可以使两者看起来完全一样,那么创建无序列表与排队div的功能优势在哪里？

1> Jeremy DeGro..：

对于语义正确性.HTML能够表达事物列表,它有助于Google机器人,屏幕阅读器以及不关心网站演示的各种用户更好地理解您的内容.

+1.对于视障人士来说,区分列表中的内容和不列出的内容可能会有所帮助.例如,如果您在配方中有成分列表,并且用户想要跳到说明或只是阅读列表,则需要一个列表.

@Arve.我的观点是尽管名称为"list",但仍然存在功能差异.Oteherwise我会遵循我不明白的规则.

2> Jörg W Mitta..：

我不知道为什么我需要使用ul-li vs在列出项目时简单地使用div.我可以让两者看起来完全一样

你的问题中有关键词:"看".您是否也可以使用盲文阅读器为盲人打字？对于使用文字转语音合成器的盲人,你能让它们听起来一样吗？您是否仍然可以使用自定义客户端CSS用户样式表让视障人士看起来一样？

这个词,"看起来",是一个非常危险的词 - 当你使用它与HTML相关时,所有的报警都应该在你脑海中消失.HTML是用于描述超媒体文档的语义结构的语言.语义结构不会有一个"看",它是一个抽象的概念.

即使你不关心所有这些语义hocuspocus并且你不关心盲人,考虑一下:Google,Yahoo,MSN和Co.没有眼睛,他们不"看"你的渲染CSS .

3> Rex M..：

通过使用语义正确的标记,您可以在文本中嵌入额外的信息.通过使用ul/li,您正在与消费应用程序通信,信息是一个列表,而不仅仅是"某事"(谁知道什么)是任意元素中的某些文本.

4> Benxamin..：

直接回答你的问题:功能优势是div本身意味着很少,而ul lis明确表示"这是一个un/ordered的项目列表."

术语"语义"指的是使用现有结构的固有含义来创建显式含义的方式.HTML由标签组成,这些标签本身就是某些事物.并且已经建立了规则/指南/方法来使用它们,以便您发布的HTML文档传达您想要它的含义.

如果您在文档中列出了某些内容,则添加有序列表(UL)或无序列表(OL).另一方面,页面分割(DIV)元素用于创建特定的和单独的内容.

该DIV元素"分".当您查看页面时,会有特定的部分,如内容正文,页脚,标题,导航,菜单,表单等.您可以使用div标签来创建这些分区.通常,页面部分与可视布局相对应,因此使用显式页面划分(DIV)来切割CSS中的布局是很自然的选择.这样div标签就变成了结构.

如果您滥用或过度使用div标签,它可能会产生意外的意义和代码膨胀.

混淆问题:谷歌使用h3和div来"划分"他们列出的搜索结果.ul> li> h3 + div

因此,当您关闭所有样式(在Firefox/WebDeveloper工具栏中的Shift + Cmd/Crtl + S)时,div应该消失,并自然堆叠.您的裸HTML仍然应该呈现一个具有清晰层次结构的漂亮页面:从上到下,最重要的内容,以及列出项目的项目符号和数字列表.并且最好在顶部附近添加一个链接(对于非可视用户),允许您跳到:主要内容,重要表单或主要标题(如目录).

最后,请记住您正在构建文档.没有所有的视觉效果,它应该仍然是一个有说服力的文件.

5> 小智..：

关于使用

或使用的讨论很多，

但没有一个评论提供了这些标签内部内容的可靠示例。我的感觉是，它并不是那么重要，因为我上次无法告诉您上次我实际上是在网上，印刷版的网站，报纸或杂志上阅读事物的“列表”时，

没有那么重要。
更通用。如果您列出蛋糕的配料，是的。如果您列出要徒步旅行的东西，是的。

但是，举例来说，一个用户表单列出了一些随机的东西，这些东西实际上不是列表，也不是一系列段落，也不是所有“标题”。有些东西是日期，有些是复选框，有些是文本。如果你问我，那就把它分散起来。如果一个盲人被标记了，就会被误导
- 并且他们听到“这里是……的清单”，而这只是杂乱无章的东西，而不是真正的清单。
推荐阅读
- 程序员
  Flexbox包装Safari中第一行的最后一列
  
  如何解决《Flexbox包装Safari中第一行的最后一列》经验，为你挑选了4个好方法。 ... [详细]
- 程序员
  如何找到具有相同值的三个连续行
  
  如何解决《如何找到具有相同值的三个连续行》经验，为你挑选了0个好方法。 ... [详细]
- 程序员
  Codeigniter php7错误
  
  如何解决《Codeigniterphp7错误》经验，为你挑选了1个好方法。 ... [详细]
- 程序员
  使用"if let"与逻辑"或"运算符
  
  如何解决《使用"iflet"与逻辑"或"运算符》经验，为你挑选了2个好方法。 ... [详细]
- 程序员
  如何对齐Kindle(KF8)的表格数据
  
  如何解决《如何对齐Kindle(KF8)的表格数据》经验，为你挑选了0个好方法。 ... [详细]
- 程序员
  Jframe setDefaultCloseOperation不起作用
  
  如何解决《JframesetDefaultCloseOperation不起作用》经验，为你挑选了1个好方法。 ... [详细]
- 程序员
  当字符串默认不可变时,如何描述可变字符串？
  
  如何解决《当字符串默认不可变时,如何描述可变字符串？》经验，为你挑选了1个好方法。 ... [详细]
- 程序员
  如何在Erlang中获取fread一个没有""的字符串
  
  如何解决《如何在Erlang中获取fread一个没有""的字符串》经验，为你挑选了1个好方法。 ... [详细]
- 程序员
  无法从其DataSource获取单元格
  
  如何解决《无法从其DataSource获取单元格》经验，为你挑选了3个好方法。 ... [详细]
- 程序员
  ImportError:在安装的应用程序中输入'registration'时无法导入名称RequestSite
  
  如何解决《ImportError:在安装的应用程序中输入'registration'时无法导入名称RequestSite》经验，为你挑选了2个好方法。 ... [详细]
- 程序员
  postgres数组字段上的ActiveAdmin过滤器
  
  如何解决《postgres数组字段上的ActiveAdmin过滤器》经验，为你挑选了0个好方法。 ... [详细]
- 程序员
  Symfony 2：如何覆盖另一个捆绑软件的存储库
  
  如何解决《Symfony2：如何覆盖另一个捆绑软件的存储库》经验，为你挑选了0个好方法。 ... [详细]
- 程序员
  react:从父组件调用子组件的方法
  
  如何解决《react:从父组件调用子组件的方法》经验，为你挑选了0个好方法。 ... [详细]
- 程序员
  Android Dagger 2和MVP注入一个注入的对象
  
  如何解决《AndroidDagger2和MVP注入一个注入的对象》经验，为你挑选了1个好方法。 ... [详细]
- 程序员
  Hostgator上的CHange php 5.4到5.5
  
  如何解决《Hostgator上的CHangephp5.4到5.5》经验，为你挑选了1个好方法。 ... [详细]
- 程序员
  将立方体贴图转换为Equirectangular全景图
  
  如何解决《将立方体贴图转换为Equirectangular全景图》经验，为你挑选了1个好方法。 ... [详细]
- 程序员
  在RxJava服务中管理事务性的正确方法是什么？
  
  如何解决《在RxJava服务中管理事务性的正确方法是什么？》经验，为你挑选了1个好方法。 ... [详细]
- 程序员
  确定与数组中的间隔匹配的值的最快方法
  
  如何解决《确定与数组中的间隔匹配的值的最快方法》经验，为你挑选了0个好方法。 ... [详细]
- 程序员
  phpexcel将qrcode插入excel并将其保存到客户端
  
  如何解决《phpexcel将qrcode插入excel并将其保存到客户端》经验，为你挑选了1个好方法。 ... [详细]
- 程序员
  ANTLR4中交替与测序的优先顺序
  
  如何解决《ANTLR4中交替与测序的优先顺序》经验，为你挑选了1个好方法。 ... [详细]
吐了个 "CAO" !

吐个槽吧,看都看了

会员登录 | 用户注册

云聪京初瑞子_617

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

RankList | 热门文章

DevBox开发工具箱 | 专业的在线开发工具网站