HTML超文本标记语言(四)——列表

一、列表标签

标签 描述
<ol> 定义有序列表
<ul> 定义无序列表
<dl> 定义 自定义列表
<li> 定义列表项目
<dt> 定义 自定义项目
<dd> 定义 自定义项目的描述

二、无序列表<ul>

1、 无序列表是一个项目的列表,默认使用粗体圆点进行标记。无序列表始于<ul>标签,每个列表项目始于<li>。

 1 <html>
 2 <body>
 3 <h4>一个无序列表:</h4>
 4 <ul>
 5   <li>咖啡</li>
 6   <li>茶</li>
 7   <li>牛奶</li>
 8 </ul>
 9 </body>
10 </html>

无序列表

2、不同项目符号的无序列表——<ul type="">

 1 <html>
 2 <body>
 3 <h4>Disc项目符号列表:</h4>
 4 <ul type="Disc">
 5   <li>苹果</li>
 6   <li>香蕉</li>
 7   <li>柠檬</li>
 8   <li>桔子</li>
 9 </ul>
10 <h4>Circle项目符号列表:</h4>
11 <ul type="Circle">
12   <li>苹果</li>
13   <li>香蕉</li>
14   <li>柠檬</li>
15   <li>桔子</li>
16 </ul>
17 <h4>项目符号列表:</h4>
18 <ul type="Square">
19   <li>苹果</li>
20   <li>香蕉</li>
21   <li>柠檬</li>
22   <li>桔子</li>
23 </ul>
24 </body>
25 </html>

不同类型的无序列表

            

三、有序列表<ol>

1、有序列表是一列项目,列表项目默认使用数字进行标记。有序列表始于<ol>,每个列表项目始于<li>。

 1 <html>
 2 <body>
 3 <h4>这是一个无序列表:</h4>
 4 <ol>
 5   <li>咖啡</li>
 6   <li>牛奶</li>
 7   <li>茶</li>
 8 </ol>
 9 <ol start="50">
10   <li>咖啡</li>
11   <li>牛奶</li>
12   <li>茶</li>
13 </ol>
14 </body>
15 </html>

有序列表

2、不同项目符号的有序列表——<ol type="">

 1 <html>
 2 <body>
 3
 4 <h4>数字列表:</h4>
 5 <ol>
 6  <li>苹果</li>
 7  <li>香蕉</li>
 8  <li>柠檬</li>
 9  <li>桔子</li>
10 </ol>
11
12 <h4>字母列表:</h4>
13 <ol type="A">
14  <li>苹果</li>
15  <li>香蕉</li>
16  <li>柠檬</li>
17  <li>桔子</li>
18 </ol>
19
20 <h4>小写字母列表:</h4>
21 <ol type="a">
22  <li>苹果</li>
23  <li>香蕉</li>
24  <li>柠檬</li>
25  <li>桔子</li>
26 </ol>
27
28 <h4>罗马字母列表:</h4>
29 <ol type="I">
30  <li>苹果</li>
31  <li>香蕉</li>
32  <li>柠檬</li>
33  <li>桔子</li>
34 </ol>
35
36 <h4>小写罗马字母列表:</h4>
37 <ol type="i">
38  <li>苹果</li>
39  <li>香蕉</li>
40  <li>柠檬</li>
41  <li>桔子</li>
42 </ol>
43 </body>
44 </html>

不同类型的有序列表

        

四、定义列表

定义列表不仅仅是一列项目,而是项目及其注释的集合。自定义列表以<dl>开始,每个自定义列表项以<dt>开始,每个自定义列表项的定义以<dd>开始。

 1 <html>
 2 <body>
 3 <h2>一个定义列表:</h2>
 4 <dl>
 5   <dt>计算机</dt>
 6   <dd>用来计算的机器……</dd>
 7   <dt>显示器</dt>
 8   <dd>以视觉方式显示信息的装置……</dd>
 9 </dl>
10 </body>
11 </html>

定义列表

五、嵌套列表

 1 <html>
 2 <body>
 3 <h3>一个嵌套列表:</h3>
 4 <ul>
 5   <li>咖啡</li>
 6   <li>茶
 7     <ol>
 8       <li>红茶</li>
 9       <li>绿茶
10         <dl>
11           <dt>中国茶</dt>
12           <dd>好喝的茶</dd>
13           <dt>非洲茶</dt>
14           <dd>难喝的茶</dd>
15         </dl>
16       </li>
17     </ol>
18   </li>
19   <li>牛奶</li>
20 </ul>
21 </body>
22 </html>

嵌套列表

时间: 2024-08-24 03:03:07

HTML超文本标记语言(四)——列表的相关文章

html(HyperText Markup Language)--超文本标记语言

1.html的简介? * 什么是html? ** HyperText Markup Language:超文本标记语言,网页语言 ** 超文本:超出文本的范畴,使用html可以轻松实现这样操作: ** 标记:html所有的操作都是通过标记实现的,标记就是标签,<标签名称>: ** 网页语言. * 第一个html程序. - 创建java文件.java ** 先编译,然后再运行(jvm) - html后缀是 .html .htm ** 直接通过浏览器就可以运行 - 代码 ** 这是我的<fon

HTML(超文本标记语言)的内容和理解

由于上篇文章中提到WebMethod的Description 属性(propery)中可以使用超文本,因此就记录一篇关于超文本的文章以供参考,注意:Description=" HTML格式 "; 主要内容转自 https://deerchao.net/tutorials/html/html.htm 1.HTML是什么 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,它规定了自己的语法规则,用来表示比"文本"更丰富的意义,

HTML:Hyper Text Markup Language 超文本标记语言

1.HTML是什么? *Hyper Text Markup Language 超文本标记语言 *Hyper Text:超链接.把不同空间的资源,整合在一起,形成逻辑上的网状结构. *Markup Language 标签语言.该语言是由标签构成. *HTML文档=网页 *浏览器解析HTML 2.如何创建一个HTML文档 . *后缀名:.html .htm 都可以; *由作为文档的根元素,文档包含两部分.头部分和体部分 *body中的信息在浏览器正文中显示 *head中的信息不会在正文中显示. 3.

html5知识点:超文本标记语言编程

超文本标记语言,标准通用标记语言下的一个应用. "超文本"就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 超文本标记语言的结构包括"头"部分(英语:Head).和"主体"部分(英语:Body),其中"头"部提供关于网页的信息,"主体"部分提供网页的具体内容. 详细介绍 1.由来 万维网上的一个超媒体文档称之为一个页面(外语:page).作为一个组织或者个人在万维网上放置开始点的页面称为主页(外

超文本标记语言HTML

介绍html文档的基本结构,html常用标签的使用,理解html语言制作网页基本原理. html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打

html 超文本标记语言

1.html超文本标记语言 2.在html中存在着大量的标签,我们用html中存在的标签将要显示在网页的内容包含起来. 3.css 控制网页显示内容的效果. 4.html+css 只能是静态网页. 5.js+jquery动态的效果. 开始动手 1.首先在桌面上随便的建一个文件. 2.将创建的文件改成.html/或.htm

超文本标记语言

这是我第一次在博客园写东西,通过这两天的学习,初步了解了什么是html,之前浏览网站时也查看过网页的源代码,给人的印象就是杂乱无章,什么也看不懂,现在看起来不那么乱了,知道它也是有头有尾的,也是有相应的结构在里面,head表示它的头,body表示身体部分,当有了身体内容后就需要给它定义样布局的css,最后还需要用js来输入行为命令,才能成为一个完整的网页.当了解了这些东西之后才能更好地学习下去,接下来会更进一步的探索超文本标记语言.

HTML(超文本标记语言)

HTML作为超文本标记语言,相对其他语言来说比较简单,但功能还是很强大.通常用来网页制作等.当然还有其他用途,自己可以去百度了解. 以下为归纳的知识点,比较实用. 标记 类型 译名或意义 作 用 备注 文件标记         <html> ● 文件声明 让浏览器知道这是 html 文件   <head> ● 开头 提供文件整体资讯   <title> ● 标题 定义文件标题,将显示于浏览顶端   <body> ● 本文 设计文件格式及内文所在   排版标记

超文本标记语言--Html

高端大气上档次的网页,低调奢华有内涵的界面,都是由静态网页和一些动态效果,插入的视频,和flash等组成,不得不说,静态网页的制作,是学习网页的必经之路,可见静态网页在学习网页的前端是十分重要.静态网页主要是通过html制作.简单来说html是一种超文本标记语言,静态网页也是由,html的标记和标记中的属性,体现出来,打开你喜爱的网络浏览器,在浏览器的地址输入框内敲入相关网址,进入Active Server Pages的网点(你的计算机应该已连上了Internet).当在屏幕上显示了此网页后,从

Html就是超文本标记语言的简写,是最基础的网页语言

Html就是超文本标记语言的简写,是最基础的网页语言. Html是通过标签来定义的语言,代码都是由标签所组成. Html代码不用区分大小写. Html代码由<html>开始</html>结束.里面由头部分<head></head>和体部分<body></body>两部分组成. 头部分是给Html页面增加一些辅助或者属性信息,它里面的内容会最先加载. 体部分是真正存放页面数据的地方. 原文地址:https://www.cnblogs.c