常用的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中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 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
我的论坛源代码(一)
2006/10/09 PHP
php下将XML转换为数组
2010/01/01 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
Python的lambda匿名函数的简单介绍
2013/04/25 Python
Python修改Excel数据的实例代码
2013/11/01 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
python之yield和Generator深入解析
2019/09/18 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
python类共享变量操作
2020/09/03 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
六十岁生日答谢词
2014/01/10 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
感谢信格式范文
2015/01/22 职场文书
酒桌上的开场白
2015/06/01 职场文书
立春观后感
2015/06/18 职场文书
企业宣传语大全
2015/07/13 职场文书
运动员入场前导词
2015/07/20 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android