Web前端技术开发学习笔记(HTML标记语言篇)——第5章 列表标记

最新推荐文章于 2022-07-23 12:15:00 发布
最新推荐文章于 2022-07-23 12:15:00 发布
阅读量1.3k 收藏 4
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chanciecarney/article/details/115419330
版权

第5章 列表标记

5.1 有序列表

以数字或字母等可以表示顺序的符号为项目前导符来排列列表项的列表，称为有序列表。
创建有序列表的基本语法如下：

<ol>
  <li>列表项一</li>
  <li>列表项二</li>
  ...
</ol>

语法说明
首先使用< ol>标记声明有序列表，然后在< ol>标记对之间使用< li>标记创建列表项，每个列表项使用一个< li>标记对。

eg.


<!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-Type” content=“text/html; charset=Utf-8 />
     <title>创建有序列表</title>
    </head>
    
    <body>
    <center>
        <h3>图像设计软件</h3>
    </center>
        <ol>
          <li>Photoshop</li>
          <li>Illustrator</li>
          <li>CorelDraw</li>
        </ol>
    
    </body>
</html>

在这里插入图片描述

5.1.1 有序列表的前导符设置

默认情况下，有序列表是以阿拉伯数字作为列表项的前导符。在有序列表中，除了可以使用阿拉伯数字外，还可以使用大写或小写的英文字母，以及大写或小写的罗马数字。使用属性type可以修改有序列表的前导符。
基本语法

<ol type=“前导符”>

语法说明
按列表项的排序序号的不同，前导符可分别取1、A、a、I、i这几种值，各个值的含义如下表：

属性值说明
1前导符为数字1、2、3…
a前导符为小写字母a、b、c…
A前导符为大写字母A、B、C…
i前导符为小写罗马数字i、ii、iii…
I前导符为大写罗马数字I、II、III…

5.1.2 有序列表的前导符起始编号设置

默认情况下，有序列表的前导符是从排序符号的第一位开始排序，如果希望从排序符号的中间某个位置开始排序列表项，则需要使用属性start进行设置。
基本语法

<ol start=“起始编号位序”>

语法说明
”起始编号位序”表示列表项的开始编号所处的位置序号，如编号“c”的位序是“3”。在默认情况下，有序列表的起始编号位序是“1”。

eg.设置有序列表的前导符和起始编号


<!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-Type” content=“text/html; charset=Utf-8 />
     <title>设置有序列表前导符和起始编号</title>
    </head>
    
    <body>
        <h3>图像设计软件</h3>
        <ol start="2">
           <li>Photoshop</li>
           <li>Illustrator</li>
           <li>CorelDraw</li>
        </ol>
        <hr>
        <h3>图像设计软件</h3>
        <ol type="a" start="3">
           <li>Photoshop</li>
           <li>Illustrator</li>
           <li>CorelDraw</li>
        </ol>
        <hr>
        <h3>图像设计软件</h3>
        <ol type="i" start="3">
            <li>Photoshop</li>
            <li>Illusrtator</li>
            <li>CorelDraw</li>
        </ol>
    </body>
</html>

在这里插入图片描述

5.2 无序列表

项目列表的列表项前导符使用无次序含义的符号来排列列表项，默认的前导符是实心圆点。
基本语法

<ul>
  <li>列表项一</li>
  <li>列表项二</li>
  ...
</ul>

语法说明
首先使用< ul>标记声明项目列表，然后在< ul>标记对之间使用< li>标记创建列表项，每个列表使用一个< li>标记对。

eg.创建项目列表


<!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-Type” content=“text/html; charset=Utf-8 />
     <title>创建项目列表</title>
    </head>
    
    <body>
    <center>
        <h3>图像设计软件</h3>
    </center>
        <ul>
          <li>Photoshop</li>
          <li>Illustrator</li>
          <li>CorelDraw</li>
        </ul>
    
    </body>
</html>

在这里插入图片描述

5.2.2 项目列表的前导符设置

默认情况下，项目列表是以实心圆点作为列表项的前导符，除了可以使用实心圆点外，还可以使用空心圆点和实心小方块等符号。使用属性type可以修改项目列表的前导符。属性type的取值如下表：

属性值说明
disc前导符为实心圆点
circle前导符为空心圆点
square前导符为实心小方块

eg.设置项目列表前导符


<!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-Type” content=“text/html; charset=Utf-8 />
     <title>设置项目列表前导符</title>
    </head>
    
    <body>
        <h3>图像设计软件</h3>
        <ul>
           <li>Photoshop</li>
           <li>Illustrator</li>
           <li>CorelDraw</li>
        </ul>
        <hr>
        <h3>图像设计软件</h3>
        <ul type="circle" >
           <li>Photoshop</li>
           <li>Illustrator</li>
           <li>CorelDraw</li>
        </ul>
        <hr>
        <h3>图像设计软件</h3>
        <ul type="square">
            <li>Photoshop</li>
            <li>Illusrtator</li>
            <li>CorelDraw</li>
        </ul>
    </body>
</html>

在这里插入图片描述

5.2.3 定义列表

定义列表用于对名词的解释，是一种具有两个层次的列表，其中名词为第一层次，解释为第二层次。定义列表的列表项前没有任何前导符，解释相对于名词有一定位置缩进。
基本语法

<dl>
 <dt>名词一<dt>
   <dd>解释1</dd>
   <dd>解释2</dd>
   ...
 <dt>名词二<dt>
   <dd>解释一</dd>
   ...
 ...
 </dl>

语法说明
首先使用< dl>标记声明定义列表，然后在< dl>标记对中使用< dt>定义需要解释的名词，接着使用< dd>解释名词。一个名词可以有多条解释，每条解释使用一个< dd>标记对。

eg.创建定义列表


<!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-Type” content=“text/html; charset=Utf-8 />
     <title>创建定义列表</title>
    </head>
    
    <body>
        <dl>
           <dt>Photoshop</dt>
                  <dd>Adobe公司出品</dd>
                  <dd>图像处理软件</dd>
           <dt>Illustrator</dt>
                  <dd>Adobe公司出品</dd>
                  <dd>矢量绘图软件</dd>
        </dl>
    </body>
</html>

在这里插入图片描述

5.3 嵌套列表

嵌套列表是指在一个列表项的定义中嵌套了另一个列表的定义。


<!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-Type” content=“text/html; charset=Utf-8 />
     <title>设置项目列表前导符</title>
    </head>
    
    <body>
    <ul>
        <li><u>图像设计软件</u>
        <ol>
           <li>Photoshop</li>
           <li>Illustrator</li>
           <li>CorelDraw</li>
        </ol>
        </li>
        <li><u>图像设计软件</u>
        <ul type="circle" >
           <li>Photoshop</li>
           <li>Illustrator</li>
           <li>CorelDraw</li>
        </ul>
        </li>
    </ul>
    </body>
</html>

在这里插入图片描述

陈Nicole
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Web——网页列表（实验6）
小美灵儿的博客
10-04 1490
列表代码编写 一、题目 编写代码实现“第四届中国大学出版社图书奖公示”页面，如下图所示。 （1）页面标题为：“第四届中国大学出版社图书奖公示”； （2）页面内容：2号标题标记显示“第四届中国大学出版社图书奖公示”，页面背景色为“#ccffcc”，按图效果完成页面设计。 （3）为列表项设置超链接（链接地址自由设置）【自加要求】 二、题目分析 1、列表类型有3种：无序列表、有序列表、定义列表；还有一种特殊的列表是嵌套列表。嵌套列表一般是将无序列表和有序列表进行嵌套。 无序列表： （1）使用ul标记（双标记）。在
列表标记
all_sunshine
10-19 408
下面使用标记创建一个网站导航列表，代码如下： ` 和你在一起 白色百合花 似水年华 花蕊 美酒文学社 水木清华论坛 香水品牌喜欢的香水产地:
《HTML+CSS+JavaScript》之第5章 列表
yxqq378287007的博客
07-04 83
html 列表
Web前端开发技术-HTML5基础-标签总结（一）
SUZEHUI9636的博客
03-14 1491
1.HTML文档基本结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
web前端开发笔记整理（一）
01-08
文章目录一.HTML常用标签类二.CSS常用样式 一.HTML常用标签类 1. 告诉搜索引擎爬虫我们的网站关于什么内容 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 在 ...
Web开发基础学习笔记整理（1）
01-08
《Web开发基础》 HTML技术 CSS技术 JavaScript技术 Java知识的体系 1）JavaSE平台：Java平台的标准版 Client/Server桌面级架构的程序 Java基础+Java高级 2）JavaEE平台：Java平台的企业版 Browser/Server互联网架构...
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
最新发布
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
Web前端学习笔记——HTML基础.docx
11-22
本文主要介绍了 Web 前端学习笔记——HTML 基础相关知识点，涵盖了浏览器内核、Web 标准、HTML 语言等方面。 一、浏览器内核 浏览器内核是指浏览器核心引擎，负责解析和渲染网页。常见的浏览器内核有 Trident（IE ...
HTML标签用法（三）列表标记
11-05 854
列表标记 代码： 列表标记 三餐： 早饭 中饭 晚饭 三餐： 早饭 中饭 晚饭 三餐： 早饭 中饭 晚饭 效果图
前端基础 HTML 第五章 使用列表 ----暑假学习第三天
树叶子的博客
07-07 1092
第五章 使用列表5.1 认识列表标签        HTML列表共有3种类型，无序列表，项目符号由几个符号构成；有序列表，项目符号由字母或者数字进行排序；定义列表，产生条件和描述的双重列表，可以对列表进行更为灵活的定义。5.2 有序列表ol        有序列表在列表中将每个元素按数字或字母顺序标号。有序列表以&lt;ol&gt;&lt;/ol&gt;开始结束，每个列表元素用&lt;li&gt;...
【列表标签】
Hey_Coder
05-28 2257
列表标签列表标签 标签ul标签的 可选的属性 标签的 compact 属性 标签的 type 属性ul标签 的type属性 的属性值 标签ol标签 的属性 reversed 属性 标签的 start 属性 标签的 type 属性ol标签 type属性 的属性值 标签 标签的 type 属性 标签的 value 属性 标签 标签 标签 标签 标签menu 标签 的 html5 新属性 label 属...
列表标签
我的辣条姓双的博客
06-25 701
无序列表 ul <ul> <li></li> <li></li> <li></li> </ul> ul列表下，只能放li标签。 li标签下，可以放其他标签。 有序列表 ol <ol> <li></li> <li></li> <li&gt...
列表标签的介绍
weixin_54021642的博客
04-21 678
列表标签的介绍
十三、列表标签
qq_62865634的博客
07-23 271
本文仅仅简单介绍了有序列表、无序列表、自定义列表。
第一次web作业（常用标记+项目列表+表格）
书生小兰的专栏
05-14 2306
web训练的一些小技巧，跟小伙伴们分享一下，谢谢大家的支持！
Web 实验一 HTML列表、表格的应用 4月21日
Yutouxn0的博客
05-17 510
实验一、HTML列表、表格的应用 【实验目的】 1．掌握锚点链接相关标记的使用； 2．掌握浮动框架的使用。 3．掌握表格的使用。 【实验重点及难点】 掌握浮动框架和表格的使用。 【实验内容】 1.制作下图所示的列表页面。 <!DOCTYPE html> <html> <head> <title>列表嵌套</title> </head> <body> 中国 <ol> <li&g.
HTML基础二
mikeyPlisetsky的博客
10-30 410
（以下内容要包含在body里） 1、预排版标记<pre></pre>,保留输入时的格式。怎么进去的，就怎么出来。（笑） <pre> 快乐风男：温蒂，魈，万叶。 璃玥三霸：钟离 ，魈，甘雨。 出门不带钱系列：钟离，雷神。 烹饪二倍系列：香菱，芭芭拉，迪奥娜。 </pre> 2、列表标记（嵌套<li></li>使用） （1）无序列表<u...
Web前端开发：HTML5+CSS3+JavaScript
09-29
本文将对Web前端开发的内容进行详细的说明和总结，包括HTML5、CSS3和JavaScript的学习笔记。 1. Web 1.1 浏览器 1.2 Web标准 1.3 HTML - HTML语法规范 1.4 HTML基本结构标签 1.5 网页开发工具：VS Code - 史...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值