JavaWeb学习之路(19)–HTML之无序列表、有序列表

简介: 本文目录1. 列表的概念2. 无序列表3. 有序列表4. 小结

1. 列表的概念

一个元素其实就是一个,那么多个元素就可以组合为列表。既然叫列表,那么列表的元素一般是垂直排列的,所以才叫列表。


2. 无序列表

无序列表应用于列表的元素没有先后顺序的场景,例如我的爱好有:篮球、足球、乒乓球,这三者没啥先后顺序,则可以使用无序列表表示。


无序列表的标签为<ul>,列表中的每个元素标签为<li>,所以上面的例子代码为:


   <span>我的爱好:</span>

   <ul>

       <li>篮球</li>

       <li>足球</li>

       <li>乒乓球</li>

   </ul>


效果如下:



3. 有序列表

有序列表应用于元素有顺序的场景,例如学生成绩排行列表。


有序列表的标签为<ol>,列表中的每个元素标签还是<li>,所以上面的例子代码为:


 <span>成绩排行:</span>

   <ol>

       <li>张三</li>

       <li>李四</li>

       <li>赵五</li>

   </ol>


效果如下:


可见有序列表会自动为列表项添加序号。


4. 小结

看上面的例子中,无序列表和有序列表样式都不算好看,但是务必注意,HTML主要是为了表达内容。


后续在美观部分,我们学习CSS后,可以将列表做的更加好看。

相关文章
|
6月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
6月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
HTML 速查列表4
本示例包含两个部分:表格和框架。表格部分展示了带有两个列标题和一行数据的简单表格;框架部分通过 `&lt;iframe&gt;` 标签嵌入了一个外部页面 `demo_iframe.htm`。
|
数据安全/隐私保护
HTML 速查列表5
表单示例包括文本输入、密码框、复选框、单选按钮、提交和重置按钮、隐藏输入、下拉菜单及多行文本区。实体表示特殊字符,如 &lt; (&lt;)、&gt; (&gt;) 和 &#169; (©)。
HTML 列表3
HTML 自定义列表 (&lt;dl&gt;) 用于描述术语或名称的定义。每个术语由 &lt;dt&gt; 标签表示,其定义或描述由 &lt;dd&gt; 标签表示。
HTML 速查列表3
文档排版元素简介:包括图片、替换文本、样式/区块、块级和内联元素、无序列表、有序列表及定义列表等,帮助清晰组织和展示内容。
HTML 速查列表3
本示例展示了HTML中常用的元素:图片、样式与区块、块级与内联元素、以及三种列表(无序、有序和定义列表)的使用方法。通过这些基本标签,可以构建网页的基本结构。
HTML 速查列表2
文本格式化包括多种标签
HTML 速查列表1
HTML速查列表包含基本文档结构、标题、文本、换行和水平线等常用标签,方便日常打印使用。例如:`&lt;html&gt;`, `&lt;head&gt;`, `&lt;title&gt;`, `&lt;body&gt;`, `&lt;h1&gt;`至`&lt;h6&gt;`,`&lt;p&gt;`,`&lt;br&gt;`和`&lt;hr&gt;`。
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
274 2

热门文章

最新文章