常用的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 中的@keyframes介绍
Sep 02 HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 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函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
javascript 三种编解码方式
2010/02/01 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
JS实现div居中示例
2014/04/17 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
老生常谈python之鸭子类和多态
2017/06/13 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
python re模块常见用法例举
2021/03/01 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
应聘医学检验人员自荐信
2013/09/27 职场文书
公司承诺函范文
2015/01/21 职场文书
新闻通讯稿范文
2015/07/22 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android