常用的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 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 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中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
Python采用raw_input读取输入值的方法
2014/08/18 Python
Python字典操作简明总结
2015/04/13 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
Python异常处理操作实例详解
2018/05/10 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
python 实现兔子生兔子示例
2019/11/21 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
C#笔试题
2015/07/14 面试题
《会变的花树叶》教学反思
2014/02/10 职场文书
公司保密承诺书
2014/03/27 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
文明演讲稿范文
2014/05/12 职场文书
历史学专业求职信
2014/06/19 职场文书
数学教研活动总结
2014/07/02 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
接收函格式
2015/01/30 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
导游词之西安大清真寺
2019/12/17 职场文书