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后,可以将列表做的更加好看。

相关文章
|
3月前
|
存储 数据安全/隐私保护
走进HTML学习二
走进HTML学习二
|
2月前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
48 0
|
1月前
HTML列表、表格和媒体元素
HTML列表、表格和媒体元素
11 0
|
1月前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
26 0
|
1月前
编程笔记 html5&css&js 015 HTML列表
编程笔记 html5&css&js 015 HTML列表
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
64 1
|
3月前
|
XML JavaScript 前端开发
走进HTML学习一
走进HTML学习一
|
3月前
|
移动开发 Python HTML5
Python办公自动化【发送普通邮件、发送HTML邮件、发送附件邮件-smtplib、批量发送邮件-smtplib、发送邮件-zmail】(八)-全面详解(学习总结---从入门到深化)
Python办公自动化【发送普通邮件、发送HTML邮件、发送附件邮件-smtplib、批量发送邮件-smtplib、发送邮件-zmail】(八)-全面详解(学习总结---从入门到深化)
47 0
|
3月前
|
JSON 定位技术 API
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)
33 0