常用的HTML5列表标签


Posted in HTML / CSS onJune 20, 2017

 一、列表标签作用

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

二、列表标签分类:

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列表标签,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 #HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 #HTML / CSS
Html5实现文件异步上传功能
May 19 #HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 #HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 #HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 #HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 #HTML / CSS
You might like
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
Prototype Selector对象学习
2009/07/23 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
layui表格数据重载
2019/07/27 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
python读写ini配置文件方法实例分析
2015/06/30 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
高中班主任评语大全
2014/04/25 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
中学生自我评价范文
2015/03/03 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL