常用的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 相关文章推荐
总结30个CSS3选择器
Apr 13 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 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 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
php操作excel文件 基于phpexcel
2010/07/02 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
php源码的安装方法和实例
2019/09/26 PHP
JavaScript自执行闭包的小例子
2013/06/29 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python标准库os.path包、glob包使用实例
2014/11/25 Python
python机器学习之神经网络(二)
2017/12/20 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
python自动发送邮件脚本
2018/06/20 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
python实现文本界面网络聊天室
2018/12/12 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
python3的pip路径在哪
2020/06/23 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
服务质量承诺书
2014/03/27 职场文书
医学求职自荐信
2014/06/21 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
财政局个人年终总结
2015/03/03 职场文书
电工生产实习心得体会
2016/01/22 职场文书