HTML5 列表

HTML5 列表

列表的作用

列表是指将具有相似特征或者具有先后顺序的几行文字进行对齐排列。所有的列表都由列表类型和列表项组成。

列表分为有序列表和无需列表,列表项 <li> 用于显示具体的列表内容。

有序列表 <ol>

<ol> 元素编写有序列表,用于列出页面上有特定次序的一些项目。<ol> 元素中只能包含列表项元素 <li>。

<ol type="列表类型" start="起始编号">
    <li>...</li>
    <li>...</li>
    ...
</ol>

type 属性值:

1:数字(默认)

a:小写字母

A:大写字母

i:小写罗马数字

I:大写罗马数字

无序列表 <ul>

<ul> 元素表示无序列表,用于列出页面上没有特定次序的一些项目。并且 <ul> 元素中只能包含具体的列表项元素 <li>。

<ul type="列表类型">
    <li>...</li>
    <li>...</li>
    ...
</ul>

type 属性值:

disc:实心圆(默认)

circle:空心圆

square:实心矩形

列表嵌套

将列表元素嵌套使用,可以创建多层列表,常用于创建文档大纲、导航菜单等。

<ul>
    <li>
        Web 基础知识
        <ul>
            <li>Web的工作原理</li>
        </ul>
    </li>
    <li>
        HTML快速入门
        <ul>
            <li>基础语法</li>
        </ul>
    </li>
</ul>

定义列表 <dl>

定义列表往往用于要给出一类事物的定义的情形,如名词解释、字典等。

<dl> 标记定义一个定义列表。

<dt> 标记定义了定义列表中的一个术语。

<dd> 标记对定义列表中的术语提供定义。

<dl>
    <dt>计算机</dt>
    <dd>用来计算的仪器</dd>
    <dt>显示器</dt>
    <dd>以视觉方式显示信息的设备</dd>
</dl>
时间: 2024-10-10 23:56:47

HTML5 列表的相关文章

HTML5列表、块和布局

-----------------siwuxie095 HTML5 列表 标签 描述 <ol> 有序列表 <ul> 无序列表 <li> 列表项 <dl> 列表 <dt> 列表项 <dd> 描述 1.无序列表 标签:<ul>.<li> 属性:disc.circle.square 2.有序列表 标签:<ol>.<li> 属性:A.a.I.i.start 3.嵌套列表 标签:<ul>

HTML5 列表、表格、媒体元素

无序列表 <ul> <li>范冰冰演藏族女孩</li> <li>拍集体合影后自拍</li> <li>诗隆甜蜜出游</li> <li>一线城市楼市退烧</li> </ul> 特性 没有顺序,每个<li>标签独占一行(块元素) 默认<li>标签项前面有个实心小圆点  有序列表 <ol> <li>范冰冰演藏族女孩</li> <l

HTML5列表

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> </head> <body> <!--type=squ

HTML5列表、块、布局

一.列表 <ol>  无序列表  (每项前有.) <ul>  有序列表   (每项前有编号1,,2,3) <li>   列表项 1 <ul type="square"> 2 <li>苹果</li> 3 <li>橘子</li> 4 <li>香蕉</li> 5 </ul> 6 <ol type="i" start=10> 7 &

Html5列表元素

<ol> 有序列表: 属性:type(设置样式),reversed(倒序) <ul>无序列表 <li>表示列表中的项(在<ol>和<ul>中) 上面三者都是在<body>中的. 部分代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ti

HTML5列表标签和表格标签

一.列表 1.1 什么是列表标签? 作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一对数据是一个整体 无序列表---unordered-list(最多):新闻列表.导航.商品列表作用:给一堆数据添加列表语义里面所有数据没有优先之分只是列举出来可以列举图片文字视频 ```<ul><li></li></ul>```ul里面有属性 type="circle/square/disc"  清除前面符号 list-style:none:

Html5 基础----列表详述

html5列表 标签 列表分为:  有序列表/无序列表/自定义列表,用的最多的为无序列表和自定义列表 1.有序列表(order list) eg:把??大象放进冰箱里需要分几步 <ol> <li>把冰箱门打开</li> <li>把大象放进去</li> <li>把冰箱门关上</li> </ol> 运行结果: 1.把冰箱门打开 2.把大象放进去 3.把冰箱门关上             1.1有序列表的属性 typ

HTML5样式和列表、CSS链接的四种状态

一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel="stylesheet":外部样式表: 3.三种样式表插入方法: (1)外部样式表: 在<head></head>中写入: <link  rel="stylesheet"  type="text/css"  href=&q

二,细说 HTML5 之 HTML5 基础讲解 2

这是一个HTML5系列,主要是零基础的宝宝们快速认识与学习HTML5. HTML5 样式.链接和表格 1.HTML5 样式 标签 描述 <style> 定义样式定义 <link> 定义资源引用 <div> 定义文档中的节或区域(块级) <span> 定义文档中的行内的小块或区域 属性: 属性 描述 rel="stylesheet" 外部样式表 type="text/css" 引入文档的类型 margin 边距 三种样式