HTML学习1:常用标签之列表标签

转载 2015年11月18日 14:37:01

HTML 列表标签支持有序、无序和定义列表。

       列表标签表格:


        一无序列表

        无序列表是一个项目的列表。无序列表项开始于 <ul> 标签,结束于</ul>标签。每个列表项开始于 <li>标签,结束于</li>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。在这里只是最基础的文字来演示。

  1. <html>  
  2.        <head>  
  3.        <title>列表标签演示</title>  
  4.        </head>  
  5.        <body>  
  6.        <h1>这是一个无序列表标签演示</h1>  
  7.        <ul>  
  8.            <li>苹果</li>  
  9.        <li>香蕉</li>  
  10.        <li>葡萄</li>  
  11.        <li>西瓜</li>  
  12.        <li>荔枝</li>  
  13.        </ul>  
  14.        </body>  
  15. </html>  
        浏览器结果显示为:


        二有序列表
        同样,有序列表也是一列项目,列表项目使用数字,字母等进行标记。有序列表开始于 <ol> 标签,结束于</ol>标签。每个列表项始于 <li> 标签,结束于</li>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

  1. <html>  
  2.        <head>  
  3.        <title>列表标签演示</title>  
  4.        </head>  
  5.        <body>  
  6.        <h1>这是一个有序列表标签演示</h1>  
  7.        <ol type="a"><!--利用标签的属性设置属性值,从a开自增长-->  
  8.            <li>苹果</li>  
  9.        <li>香蕉</li>  
  10.        <li>葡萄</li>  
  11.        <li>西瓜</li>  
  12.        <li>荔枝</li>  
  13.        </ol>  
  14.        </body>  
  15. </html>  
        浏览器结果显示为:


  1. <html>  
  2.        <head>  
  3.        <title>列表标签演示</title>  
  4.        </head>  
  5.        <body>  
  6.        <h1>这是一个有序列表标签演示</h1>  
  7.        <ol type="1"><!--利用标签的属性设置属性值,从1开始自增长-->  
  8.            <li>苹果</li>  
  9.        <li>香蕉</li>  
  10.        <li>葡萄</li>  
  11.        <li>西瓜</li>  
  12.        <li>荔枝</li>  
  13.        </ol>  
  14.        </body>  
  15. </html>  
        浏览器结果显示为:


        三定义列表
       自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始,结束于</dl>标签。每个自定义列表项以 <dt> 开始,结束于</dt>标签。每个自定义列表项的定义以 <dd> 开始,结束于</dd>标签。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

  1. <html>  
  2.        <head>  
  3.        <title>列表标签演示</title>  
  4.        </head>  
  5.        <body>  
  6.        <h1>这是一个定义列表标签演示</h1>  
  7.        <!--HTML注释:演示列表标签  
  8.        列表标签:dl  
  9.        上层项目:dt  
  10.        下层项目:dd:封装的内容是会被缩进的,有自动缩进的效果。  
  11.        -->  
  12.        <dl>  
  13.           <dt>游戏名称</dt>  
  14.           <dd>红色警戒</dd>  
  15.           <dd>三国无双</dd>  
  16.           <dd>反恐精英</dd>  
  17.           <dd>街头篮球</dd>  
  18.        </dl>  
  19.        </body>  
  20. </html>  
         浏览器结果显示为:

         对于列表标签,可以自己和自己嵌套,也可以和其他的列表标签嵌套。

       

HTML学习4:常用标签之列表标签

HTML 列表标签支持有序、无序和定义列表。        列表标签表格:         一无序列表         无序列表是一个项目的列表。无序列表项开始于 标签,结束于标签...
  • erlian1992
  • erlian1992
  • 2015-10-19 20:04:47
  • 2012

WEB前端-HTML-常用标签

各种符号要想在页面上显示各种符号,需要根据html的符号对照表来进行编写。 详细请点这里p&br&hrp 表示段落,默认段落上下会有行间距; br 是换行,自闭和标签; h...
  • qq_34409701
  • qq_34409701
  • 2016-08-12 01:05:01
  • 6866

HTML常用标签大全(前篇)

1. 2.
  • William0318
  • William0318
  • 2016-12-15 10:02:02
  • 711

前端学习之路html基础(01)——常用标签

HTML:是用来描述网页的一种语言 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言,而是一种标记语言 标记语言是一套标记标签 (ma...
  • weixin_36244867
  • weixin_36244867
  • 2017-02-20 14:21:08
  • 364

html标签大全,常用html标签

  • 2008年11月11日 10:50
  • 37KB
  • 下载

html5常用标签汇集

文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。 HTML之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。所谓超级链...
  • wuliowen
  • wuliowen
  • 2016-07-18 09:50:29
  • 3253

html常用标签及其属性用法

标签的子标签 标签:设置标题,设置完成后可以显示到IE窗口的标题上 标签:引入css文件 标签:引入javascript文件 body中常用标签: bgcolor指...
  • xiaoyu714543065
  • xiaoyu714543065
  • 2013-09-05 21:50:31
  • 3966

最常用的HTML标签 总结整理

body:在网页上要展示出来的页面内容一定要放在body标签中 p:如果想在网页上显示文章,这时就需要p标签了,把文章的段落放到p标签中。标签的默认样式,段前段后都会有空白,如果不喜欢这个空白,可以用...
  • fang323619
  • fang323619
  • 2016-07-14 08:41:06
  • 2986

HTML常用标签汇总速查

文档标题 可见文本... 基本标签(Basic Tags) 最大的标题 . . . . . . . . . . . . 最小的标题...
  • William0318
  • William0318
  • 2016-12-28 14:37:37
  • 332

html5 常用标签和属性

html5出现了很多让人兴奋的标签和属性,以前一些功能我们自己需要写组件或者去找组件,现在html5原生的就直接帮我们集成了,这当中就表单组件的一些常用功能。html5 input 组件 时间日期类型...
  • yingxiake
  • yingxiake
  • 2016-03-18 01:13:30
  • 1463
收藏助手
不良信息举报
您举报文章:HTML学习1:常用标签之列表标签
举报原因:
原因补充:

(最多只允许输入30个字)