常用的HTML5列表标签

所属分类: 网页制作 / html5 阅读数: 1963
收藏 0 赞 0 分享

 一、列表标签作用

作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体

二、列表标签分类:

1、无序列表unorderd list:给一堆数据添加列表语义,并且一堆数据中所有的数据都没有先后之分

格式:

<ul>
    <li>需要显示的条目内容</li>
</ul>

注意:ul标签是给列表内容添加语义的不是添加小圆点的;ul标签和li标签是一个整体,一起出现;ul标签中不推荐包含其它标签,可以在li标签中添加其它标签

如何快速编写ul格式:ul>li*3 按tab键 生成一对ul标签,3对li标签

应用场景为新闻/商品列表/导航条

2、有序列表orderd list:

<ol>
       <li>xxx<li>
  </ol>

3、定义列表definition list:

<dl>
    <dt></dt>
    <dd></dd>
</dl>

dt: definition title定义标题

dd: definition description定义标题的描述

应用场景:网站底部的描述信息;图文混排

注意点:dl和dt、dd是一个整体,一起出现,dl中建议只放dt、dd;一个dt可以没有对应的dd,也可以有多个dd,建议一个dt对应一个dd;需要丰富界面时,可以在dt和dd标签中添加其它标签

以上所述是小编给大家介绍的HTML5列表标签,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

更多精彩内容其他人还在看

HTML5、Select下拉框右边加图标的实现代码(增进用户体验)

这篇文章主要介绍了HTML5、Select下拉框右边加图标的实现代码,深度美化页面增进用户体验效果,需要的朋友可以参考下
收藏 0 赞 0 分享

html5实现图片转圈的动画效果——让页面动起来

这篇文章主要介绍了html5实现图片转圈的动画效果——让页面动起来的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

html5清空画布方法(三种)

本篇文章主要介绍了html5清空画布方法(三种),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

HTML5 文件域+FileReader 分段读取文件并上传到服务器

这篇文章主要介绍了HTML5 文件域+FileReader 分段读取文件并上传到服务器,需要的朋友可以参考下
收藏 0 赞 0 分享

基于HTML5的WebGL实现json和echarts图表展现在同一个界面

这篇文章主要介绍了基于HTML5的WebGL实现json和echarts图表展现在同一个界面的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

解决HTML5手机端页面缩放的问题

这篇文章主要介绍了解决HTML5手机端页面缩放的问题的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5新特性之语义化标签

HTML5 只有一个简单的文档类型:<!DOCTYPE html>,表示浏览器会按照标准模式解析。今天小编给大家带来了HTML5新特性之语义化标签,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于HTML5 Canvas的3D动态Chart图表的示例

这篇文章主要介绍了基于HTML5 Canvas的3D动态Chart图表的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

HTML5添加禁止缩放功能

本文通过一段代码给大家介绍了HTML5添加禁止缩放功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

如何避免常见的6种HTML5错误用法

本文是小编给大家收藏整理的关于常见的6种HTML5错误用法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多