常用的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将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 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
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
php获取参数的几种方法总结
2014/02/18 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
Python函数参数类型*、**的区别
2015/04/11 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
Python ORM编程基础示例
2020/02/02 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
初中作文评语大全
2014/04/23 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
七一表彰大会简报
2015/07/20 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
导游词之长城八达岭
2019/09/24 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
Hive导入csv文件示例
2022/06/25 数据库
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技