标签之美九——列表

标签之美——列表

列表是网页排序中时常会用到的一个元素。

一、无序列表

1、无序列表的标签

无序列表使用<ul></ul>来定义标签的开始和结束。使用<li></li>来设置标签项，示例如下：

<body>

<ul>

<li>title1</li><li>title2</li><li>title3</li>

</ul>

</body>

效果如下：

2、无序列表标签的样式

标签的type属性可以设置其样式：

实心圆样式：disc

这个样式就是默认的样式，效果如上图

空心圆样式：circle

示例如下：

<body>

<ul type="circle">

<li>title1</li><li>title2</li><li>title3</li>

</ul>

</body>

效果如下：

方块样式：square

效果如下：

二、有序列表

1、有序列表的标签

有序列表的开始和结束使用<ol></ol>来定义，同样使用<li></li>来定义列表项，示例如下：

<body>

<ol type="square">

<li>title1</li><li>title2</li><li>title3</li>

</ol>

</body>

效果如下：

2、有序列表的样式

数字标号的样式：type=1

这个样式为默认的样式，效果如上。

大写字母的标签：type=A

效果如下：

小写字母样式：type=a

大写罗马数字样式：type=I

小写罗马数字样式：type=i

三、列表的嵌套

列表可以进行嵌套，形式如下：

<body>

<ol type="i">

<li>title1</li>

<ul type="disc">

<li>subTitle1</li><li>subTitle2</li>

</ul>

<li>title2</li><li>title3</li>

</ol>

</body>

效果如下：

时间： 2024-11-08 20:07:57

标签之美九——列表的相关文章

标签之美三——超链接的嵌入

标签之美--超链接标签一.创建超链接通常的超链接有两种方式,一种是链接到另一个文件,另一种是链接到当前文件的某个位置.这两种方式都是通过<a></a>标签来创建,其中href属性用来指定链接的目标地址. 1.链接到当前页面指定位置被链接的地方需要使用<a>标签的name属性标记,示例如下: ? 1 2 3 4 <a href="#last">链接到本页最后</a> <br&g

标签之美五——网页表格的设计

标签之美--网页表格的使用通过表格,可以使网页排版更加清晰,形式更加简洁漂亮. 一.表格布局中三个重要的标签 1.<table></table>:表格的开始和结束标签,行列的布局都在<table>标签内. 2.<tr></tr>行标签的开始和结束 3.<tb></tb>列标签的开始和结束行标签在列标签的外层,不能单独使用,其中必须至少有一列.示例如下: ? 1 2 3 4 5 6 7 <body> <

标签之美八——网页框架

标签之美--网页框架的应用一.框架集<frameset> 框架集用来设置框架的属性,修饰框架的总体效果. 1.框架宽度 cols属性用来设置框架的宽度,示例如下: ? 1 2 3 4 5 6 7 8 <body> <frameset cols="30%,30%,30%,10%"> <frame src="1.html"> <frame src="2.html"> <frame s

标签之美二——文本标签

标签之美--HTML文本标签属性详解 1.使用标题标签 <h></h>是标题的开始和结束标签,html提供6级标题划分,示例如下: ? 1 2 3 <body> <h1>这是一级标题</h1><h2>这是二级标题</h><h6>这是六级标题</h6> </body> 2.使用字体标签 <font></font>用于定义字体,

标签之美四——为网页添加绚丽多彩的图像

标签之美--图像的使用一.设置网页背景图片 ? 1 2 <body background="1.jpg"> </body> 这里图片路径的写法和本地超链接的写法是一样的,可以参考上一篇博客中关于本地路径的地方:http://my.oschina.net/u/2340880/blog/412934. 注意:如果图片大小不能充满网页,图片将会被复制平铺. 二.图片标签<img>的应用 <img>是图片插入标签.其中图片路径的写法和超链接路径

标签之美十——用户交互元素

标签之美--用户交互元素任何一个网页都会提供用户交互的功能,包括账号密码的提交,留言板等用户信息的的获取. 一.用户交互表单的属性表单使用<form></form>来创建. 1.跳转链接属性表单的跳转是在提交数据后跳转到指定的URL,使用action属性,如下: ? 1 2 <form action="http://"> </form> 2.传递数据的方式表单跳转传递数据时可以设置一个传递方式,使用method可以设置方式为get

标签之美一——HTML基础元素

标签之美--HTML基础标签使用总结 HTML是一种标记语言,因此,标签便是HTML的核心,一些基础标签的用法总结如下: 1.<html></html> 任何HTML文件都会有这样一个标签,标记网页的开始和结束. 2.<head></head> 头部标签中可以包含许多网页的头信息. 3.<title></title> 这个标签包含在头部标签内,其内容就是网页显示的标题,比如: ? 1 2 3 4 5 <html> <

标签之美七——为网页添加音乐

标签之美--为网页添加音乐一.添加音乐为网页添加音乐可以使用<embed></embed>这个标签.其用法和插入图片类似. <embed>标签的几个属性设置如下: src:音频路径 autostart:可是设置为ture或者false,代表是否自动播放. loop:设置是否循环播放 hidden:是否隐藏播放界面二.插入背景音乐使用标签<bgsound/>插入背景音乐,其中插入路径的写法和插入图片类似.

标签之美六——滚动字幕的应用

标签之美--滚动字幕的应用在网页中,我们经常可以看到一些滚动出现的字幕,按钮等内容.滚动字幕的应用会使网页的内容更加生动紧凑. 1.滚动标签<marquee></marquee> 将滚动显示的文字放在这个标签内,就可以实现滚动字幕.这个标签有一个behavior属性,可以设置滚动方式: scroll:循环滚动,默认的滚动方式 slide:只滚动一次 alternate:左右来回滚动 2.设置字幕背景颜色 ? 1 2 3 <body> <marquee behav