linkedu视频
平面设计
电脑入门
操作系统
办公应用
电脑硬件
动画设计
3D设计
网页设计
CAD设计
影音处理
数据库
程序设计
认证考试
信息管理
信息安全
网页制作
数据库
程序设计
操作系统
CMS教程
游戏攻略
脚本语言
平面设计
软件教程
网络安全
电脑知识
服务器
视频教程
html/xhtml
html5
CSS
XML/XSLT
Dreamweaver教程
Frontpage教程
心得技巧
bootstrap
vue
AngularJS
HBuilder教程
css3
浏览器兼容
div/css
网页编辑器
axure
您的位置:
首页
>
网页设计
>
html5
> 做导航栏为什么用ul>li,而不用dd dt dl?
做导航栏为什么用ul>li,而不用dd dt dl?
作者:匿名 字体:[
增加
减小
] 来源:互联网 时间:2018-12-03
本文主要包含等相关知识,匿名希望在学习及工作中可以帮助到您
回复内容:
@丁小倪 的说法有点偏激了。
元素是区块内容(sectioning content),也就是会最终影响文档大纲(outline)生成的元素。它仅仅反映其内容包含导航,但并没有表达其内容的形式。导航内容可以是一个链接的列表,也可以是一段自然文本中内嵌了导航链接。
按 W3C 对
元素的描述(
http://
dev.w3.org/html5/spec/t
he-nav-element.html#the-nav-element
)中给出的适用场景例子,我简化一下,用法可以是:
href=
"/home"
>
Home
href=
"/about"
>
About
href=
"/links"
>
Links
其实导航用ul>li本身就是个错误,根本不是列表项目,就是个链接而已。国内已经用泛滥了,好多新人也被误导,不要想那么复杂。
html5的
才是导航标签语义化上真正的实现,nav>a足矣。 比较赞同 @顾轶灵的说法。dl dt dd 是名值对,适用场景如:课程表、日程表等有值的列表。而导航本身就是一个包含多个链接的无序列表,是符合ul>li语义的。html5中
标签对于导航列表的语义化更准确,详见 @一丝html导航菜单为什么都用li+a标签,而不直接用a标签,或者用nav+a标签,html5中导航菜单该怎样写? 从语义化的角度考虑,dl(Definition Lists) 标签中的 dt 和 dd 是要成对出现的。Dt 是 Definition Term 即定义,dd 是 Definition Description 即解释,所以语义上并不符合「导航」。另外从页面结构考虑,成对出现的形式显然也不符合导航的常见形式。 先发个link
语义化你的HTML标签和属性
http://
bbs.blueidea.com/thread
-2658231-1-1.html
dl就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。
所以不适合做列表。另外用dl dt dd的话结构怎么办。 把dl当dd一样用?如果无需考虑代码的可维护性我觉得简单的导航就用p>a就合适了.
如果用html5简单的就直接nav>a了 导航栏里面的element都是无序的list item时应该用ul>li, 如果需要解释可以用dl>dt>dd(谁的导航栏又需要有解释呢?又不是生词表)。
同意大家说的直接nav>a。 ul li 就是无序列表,导航本身是可以用无序列表来表现的。dl dt dd,这种定义列表的方式,用在这里对于语义化标签不是很恰当。
您可能想查找下面的文章:
相关文章
2018-12-03
如何理解扎克伯格说「Facebook 最大错误是在 HTML5 上押注过大,在移动平台上浪费两年时间」?
2017-08-06
HTML5的Geolocation地理位置定位API使用教程
2018-12-03
用HTML5制作视频拼图的教程_html5教程技巧
2018-12-03
逼真的HTML5树叶飘落动画图文代码详解
2018-12-03
HTML5技术秀:你的3D立体旋转名字
2018-12-03
HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接
2018-12-03
怎样以简单易懂方式向普通人解释 HTML5 对 HTML 技术的改进?
2017-08-06
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2018-12-03
HTML5内联SVG教程以及与Canvas的区别
2018-12-03
html5 progress标签怎么用?progress标签的属性介绍
文章分类
html/xhtml
html5
CSS
XML/XSLT
Dreamweaver教程
Frontpage教程
心得技巧
bootstrap
vue
AngularJS
HBuilder教程
css3
浏览器兼容
div/css
网页编辑器
axure
最近更新的内容
关于HTML5和CSS3实现机器猫的代码
HTML5用于创建表单的输入小部件 数据绑定以及数据验证
前端面试问“你会HTML5吗”到底是什么个意思?
怎样用canvas来绘制彩色七巧板
移动端HTML5应用,用户真的有需求么?有的话需求场景是什么?
总结HTML5中新表单元素的使用方法及实例教程
HTML5 transform三维立方体实现360无死角三维旋转效果
实例讲解HTML5的meta标签的一些应用
HTML5 API浏览器支持情况检测的详情介绍
基于HTML5的齿轮动画特效