常用的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实现3D旋转书本效果
Mar 21 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 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抓即时股票信息
2006/10/09 PHP
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
关于Python如何避免循环导入问题详解
2017/09/14 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
python中的decimal类型转换实例详解
2019/06/26 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
Django 用户认证组件使用详解
2019/07/23 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
参观考察邀请函范文
2014/01/29 职场文书
暑期培训随笔感言
2014/03/10 职场文书
社区文化建设方案
2014/05/02 职场文书
2014年教师教学工作总结
2014/11/08 职场文书