常用的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 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
萌新的HTML5 入门指南
Nov 06 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
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
Python中的高级函数map/reduce使用实例
2015/04/13 Python
Python松散正则表达式用法分析
2016/04/29 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
培训心得体会
2013/12/29 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
安全标准化汇报材料
2014/02/03 职场文书
绿色学校实施方案
2014/03/31 职场文书
大型演出策划方案
2014/05/28 职场文书
IT工程师岗位职责
2014/07/04 职场文书