• 技术文章 >web前端 >H5教程

    常用的HTML5列表标签

    php中世界最好的语言php中世界最好的语言2018-03-26 16:38:11原创1784
    这次给大家带来常用的HTML5列表标签,使用用HTML5列表标签的注意事项有哪些,下面就是实战案例,一起来看一下。

    一、列表标签作用

    作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体

    二、列表标签分类:

    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标签中添加其它标签

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    H5文件异步上传

    indexeddb数据库的使用详解

    H5拖放API进行拖放排序

    以上就是常用的HTML5列表标签的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:HTML5 h5 标签
    上一篇:H5的本地存储之IndexedDB 下一篇:H5中History模式的使用详解
    Web大前端开发直播班

    相关文章推荐

    • 在今天,利用 HTML5 开发和发布大型跨平台网游,可行性如何?要解决哪些问题?• 2015-2016前端架构体系技术精简版• 避免常见的六种HTML5错误用法 (5-6)• Html5 Canvas初探学习笔记(3) -绘制样式和绘制文本 • 深入解析asp.net中mvc4自定义404页面(分享)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网