常用的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 Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 HTML / CSS
css 边框添加四个角的实现代码
Oct 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
简单的页面缓冲技术
2006/10/09 PHP
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
php中JSON的使用方法
2015/04/30 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
python调用百度REST API实现语音识别
2018/08/30 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
详解python中各种文件打开模式
2020/01/19 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
培训主管的岗位职责
2013/11/23 职场文书
暑期实习鉴定
2013/12/16 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
Python Matplotlib绘制动画的代码详解
2022/05/30 Python