常用的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 相关文章推荐
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 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自动识别字符集并完成转码详解
2013/08/02 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
批处理与python代码混合编程的方法
2016/05/19 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
python制作图片缩略图
2019/04/30 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
节能标语大全
2014/06/21 职场文书
纪律教育月活动总结
2014/08/26 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
考研复习计划
2015/01/19 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
在职证明格式样本
2015/06/15 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏
Windows server 2012搭建FTP服务器
2022/04/29 Servers