HTML中的无序列表讲解(菜鸟)

什么是列表标签?

1.列表标签的作用:给一堆数据添加列表语义,也就是告诉搜素引擎告诉浏览器这一堆数据是一个整体。

2.HTML中列表标签的分类

  2.1无序列表(最多人用)(unordered list)

  2.2有序列表(最少人用)(ordered list)

  2.3定义列表(其次)(definition list)

3无序列表作用:

给一堆数据添加列表语义,并且这一堆数据所有的数据都没有先后之分

什么叫先后之分?

例如:排行榜

什么叫没有先后之分?

例如:中国的所有城市

4.无序列表格式:

<ul>
    <li>需要显示的条目内容</li>
</ul>

li其实是英文list item的缩写

list是列表的意思

item是条目的意思

所以结合起来就是列表条目的意思

例子:

<h2>中国的城市:</h2>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>武汉</li>
</ul>

5.注意点

  5.1一定要记住ul标签是用来给一堆数据添加列表语义的,而不是用来给他们添加小圆点的

  5.2ul标签和li标签是一个整体,是一个组合,所有一般情况下ul标签和li标签都是一起出现,不会单个出现,也就是说不会单独使用一个ul标签或者单独使用一个li标签,都是结合在一起使用的

  5.3由于ul标签和li标签是一个组合,所有ul标签中不推荐包含其他标签,也就是说以后你在ul标签中只会看到li标签

无序列表适用场景(举例):

1.新闻列表

2.商品列表

3.导航条

时间: 2024-10-09 17:13:52

HTML中的无序列表讲解(菜鸟)的相关文章

Python实践练习:在 Wiki 标记中添加无序列表

题目描述 项目:在 Wiki 标记中添加无序列表 在编辑一篇维基百科的文章时,你可以创建一个无序列表,即让每个列表项占据一行,并在前面放置一个星号.但是假设你有一个非常大的列表,希望添加前面的星号.你可以在每一行开始处输入这些星号,一行接一行.或者也可以用一小段Python 脚本,将这个任务自动化. bulletPointAdder.py 脚本将从剪贴板中取得文本,在每一行开始处加上星号和空格,然后将这段新的文本贴回到剪贴板.例如,如果我将下面的文本复制到剪贴板(取自于维基百科的文章"List

在 Wiki 标记中添加无序列表

项目:在 Wiki 标记中添加无序列表在编辑一篇维基百科的文章时,你可以创建一个无序列表,即让每个列表项占据一行,并在前面放置一个星号.但是假设你有一个非常大的列表,希望添加前面的星号.你可以在每一行开始处输入这些星号,一行接一行.或者也可以用一小段Python 脚本,将这个任务自动化.bulletPointAdder.py 脚本将从剪贴板中取得文本,在每一行开始处加上星号和空格,然后将这段新的文本贴回到剪贴板.例如,如果我将下面的文本复制到剪贴板(取自于维基百科的文章"List of List

Python 在 Wiki 标记中添加无序列表

Python编程快速上手实践项目题目,欢迎指证与优化!代码: #! python3 # bulletPointAdder.py - Adds Wikipedia bullet points to the start # of each line of text on the clipboard. import pyperclip text = pyperclip.paste() # 从剪贴板粘贴文本 lines = text.split('\n') # 使用 split()方法得到一个字符串的列

【html】无序列表、超链接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

无序列表li横向排列的间隙问题

今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙. 如: 将列表项li变成列表块后(即将li标签设置为,display:inline-block后),会变成这样,中间会有间隙. 即便是将外边距.内边距都设为0后,还是有间隙.在调试了很久,还是没法解决这个问题,最后我改变了一下li的位置,结果可以了.我是这样做的. 改变li的位置后,结果如下: 好,问题成功解决了.不知园友们还有没有其他的好办法,欢迎指教.

前端学习 -- Css -- 有序列表和无序列表

列表就相当于去超市购物时的那个购物清单, 在HTML也可以创建列表,在网页中一共有三种列表: 1.无序列表 2.有序列表 3.定义列表 无序列表 - 使用ul标签来创建一个无序列表 - 使用li在ul中创建一个一个的列表项, 一个li就是一个列表项 通过type属性可以修改无序列表的项目符号 可选值: disc,默认值,实心的圆点 square,实心的方块 circle,空心的圆 注意:默认的项目符号我们一般都不使用!! 如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置 ul和li

自学html-four(css初始化及html语义标签 -&gt; h标签 p标签 img标签 有序列表 无序列表 表格 超链接)

一.css初始化 现在我们来做一个简单的测试,测试步骤如下: 1.编写代码如下: 2.把改程序用不同的浏览器打开我们会发现同一份代码在不同的浏览器中的显示会有略微的差别: 360浏览器下显示效果图: 火狐浏览器下显示的效果图: 同一份代码在不同浏览器显示的效果存在差异的原因是:各浏览器对各元素的margin,border,font-size等的初始设置略有不同 解决方法:通过css强制让所有元素的属性值都一样 这里提供一段雅虎工程师css初始化代码,直接拷贝到css位置就可以了,body,div

06 html无序列表 、有序列表、 框架和综合练习

Html是解释执行的语言,本身不需要编译,直接对源代码进行执行. 浏览器是以源代码根据标记执行相应的功能. W3c制定html规范的标准机构 Html常用标记 无序列表ul--li <ul>的属性设定(常用):例如<ul type=”square”> 设定符号的款式:其值有三种,默认为type = ‘disc’ type="disc" 列项符号为实心圆点 type="circle" 列项符号为空心圆点 type="square&qu

html基础 无序列表ul li 项目符号的类型 type 小黑点disc 空心圆circle 实心方块sqaure

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut