HTML5+CSS3——第4章 HTML5列表标签

字号+ 编辑: Snake 修订: IT男在阿里 来源: 慕课网 2023-09-08 我要说两句(0)

本文给大家介绍一下HTML5列表标签,包括(ul)无序列表和(ol)有序列表

4-1 使用<ul><li>标签实现无序列表

在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表、图片列表,如下图所示。

 图片33.jpg

新闻列表

 图片34.jpg

图片列表

这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

语法:

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

举例:

<ul>
  <li>精彩少年</li>
  <li>美丽突然出现</li>
  <li>触动心灵的旋律</li>
</ul>

ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点,如下图所示:

 图片35.jpg

4-2 使用<ol><li>标签实现有序列表

如果想在网页中展示有前后顺序的信息列表,怎么办呢?

如,当当网上的书籍热卖排行榜,如下图所示。

这类信息展示就可以使用<ol>标签来制作有序列表来展示。

图片36.jpg 

语法:

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

举例:下面是一个热点课程下载排行榜:

<ol>
   <li>前端开发面试心法 </li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>

<ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始,如下图所示:

 图片37.jpg

阅完此文,您的感想如何?
  • 有用

    0

  • 没用

    0

  • 开心

    0

  • 愤怒

    0

  • 可怜

    0

1.如文章侵犯了您的版权,请发邮件通知本站,该文章将在24小时内删除;
2.本站标注原创的文章,转发时烦请注明来源;
3.交流群: PHP+JS聊天群

相关课文
  • 上传自定义文件的时候查如何填写上传表单中的access, mimeType等字段值

  • HTML5+CSS3——第6章 HTML5表单标签,与浏览者交互

  • HTML5+CSS3——第5章 HTML5图片、链接及表格标签

  • HTML5+CSS3——第3章 HTML5效果标签

我要说说
网上宾友点评