`

第五章:三种列表知识详解

    博客分类:
  • html
阅读更多

一、ul无序列表定义

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

         <ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

二、无序列表项目符号

type="disc"    实心圆

type="circle"   空心圆

type="square"    方块符

三、无序列表的嵌套        (li 放内容,标签 ,图片,链接)

<ul>

  <li>咖啡</li>

  <li>茶

    <ul>

    <li>红茶</li>

    <li>绿茶</li>

    </ul>

  </li>

 

</ul>

 

一、ol有序列表定义

有序列表也是一列项目,列表项目使用数字进行标记。

         有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

二、有序列表项目符号     <ol type="A"></ol>

type="A"    A B C...序列号

type="a"     a b c ...序列号

type="I"       I  II III...序列号

三、有序列表的嵌套

<ol>

  <li>咖啡</li>

  <li>茶

    <ul>

    <li>红茶</li>

    <li>绿茶</li>

    </ul>

  </li>

 

</ol>

 

一、dl定义列有的含义

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

 

结构:

 

<dl>

   <dt>苹果手机</dt>

   <dd>这是一种用来装逼的通讯工具... ...</dd>

   <dt>58同城</dt>

   <dd>这是一个神奇的网站 ... ...</dd>

 

</dl>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
	<head>
	<!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8 国际编码-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!--当前页面的三要素-->
		<title>标题</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="描述">
		<!-- css js -->
		<style type="text/css">
			*{margin:0px;padding:0px;}
			ul.news li{height:30px; width:200px; line-height:30px; color:#666;font-size:12px; 
			border-bottom:1px solid #555;}
		</style>
	</head>

	<body>
		<!--无序列表:是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记
		无序列表始于<ul>标签。每个列表项始于<li>-->
		<ul>
			<li type="circle">列表项一</li>
			<li type="square">列表项二</li>
			<li>列表项三</li>
		</ul>
		
		<ul>
			<li>茶
				<ul>
					<li>红茶</li>
					<li>绿茶</li>
					<li>列表项三</li>
				</ul>
			</li>
		</ul>

		<!--ol有序列表 type="A"    A B C...序列号 
			type="a"     a b c ...序列号
			type="I"     I  II III...序列号-->
		<ol type="a">
			<li>列表项一</li>
			<li>列表项二</li>
			<li>列表项三</li>
		</ol>

		<ol>
			<li>茶
				<ul>
					<li>红茶</li>
					<li>绿茶</li>
					<li>列表项三</li>
				</ul>
			</li>
		</ol>

		<!--dl 自定义列表 自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始-->
		<dl>
			<dt>苹果手机</dt>
			<dd>一种装逼的通讯工具</dd> <!--默认自动比dt缩进两个字符,用于对dt内容的解释说明-->
		</dl>
		
		<!--ul案例-->
		<ul class="news">
			<li>大众自造磁悬球形车</li>
			<li>传林心如领证</li>
			<li>穆加贝当众跌倒</li>
			<li>空难现场比剪刀手</li>
		<ul>

		<!--dl定义标签-->
		<dl>
			<dt><img src="1.jpg"/></dt>
			<dd>这是一个美女。。。</dd>
		</dl>
	</body>
</html>

 JAVA技术交流群 532101200

分享到:
评论

相关推荐

    电工与电子技术知识点及答案详解

    第 5 章:基本放大电路-复习要点 第 6 章集成运算放大器-复习要点 第 7 章:直流稳压电源-复习要点 第 8 章组合逻辑电路-复习要点 第 9 章时序逻辑电路-复习要点 第 11 章:三相异步电动机-复习要点

    软件设计师考试同步辅导 考点串讲、真题详解与强化训练

    第5章 网络基础知识 第6章 多媒体基础知识 第7章 数据库技术 第8章 数据结构 第9章 算法设计和分析 第10章 面向对象技术 第11章 标准化和软件知识产权基础知识 第12章 计算机专业英语 第13章 考前模拟卷

    Jsp基础与案例开发详解随书源码13-17章

    第5章:JSP应用,这是JSP开发中最基础的部分,是读者必须掌握的部分。 第6章:EL表达式的使用,这是提高JSP编码质量的部分,建议读者掌握。 第7章:自定义标签的使用,这是优化JSP学习中较难于理解的部分,建议读者...

    JSP基础与案例开发详解随书源码2-10章

    第5章:JSP应用,这是JSP开发中最基础的部分,是读者必须掌握的部分。 第6章:EL表达式的使用,这是提高JSP编码质量的部分,建议读者掌握。 第7章:自定义标签的使用,这是优化JSP学习中较难于理解的部分,建议读者...

    Jsp基础与案例开发详解随书源码11-12章

    第5章:JSP应用,这是JSP开发中最基础的部分,是读者必须掌握的部分。 第6章:EL表达式的使用,这是提高JSP编码质量的部分,建议读者掌握。 第7章:自定义标签的使用,这是优化JSP学习中较难于理解的部分,建议读者...

    Java基础详解(入门级)

    第五章:多线程技术 89-122 第六章:常用类 API 122-139 第七章:集合框架(容器)+其他类对象使用 139-199 第八章:IO 流 199-280 第九章:GUI 编程 280-284 第十章:网络编程 284-309 第十一章:反射机制 ...

    2006 王文波 数学建模及其基础知识详解

    第五章 初等数学模型在Matlab中的求解方法 第六章 微积分方法模型在Matlab中的求解方法 第七章 微分方程模型在Matlab中的实现方法 第八章 概率统计模型在Matlab中的求解方法 第九章 代数模型在Matlab中的求解...

    PostgreSQL 10 基础课程第五章 高级知识左右外连接详解

    PostgreSQL 10 基础课程第五章 高级知识左右外连接详解

    动力节点王鹤SpringBoot3教程资料代码分享

    本视频以实际项目需求入手,结合新特性@HttpExchange声明式客户端、RFC7807、ProblemDetail、预编译AOT...第五章:说说web服务 第六章:远程访问HttpExchange 第七章:视图技术 第八章:项目实战 第九章:AOT与GraalVM

    动力节点王鹤老师Spring Boot3教程资料分享

    本视频以实际项目需求入手,结合新特性@HttpExchange声明式客户端、RFC7807、ProblemDetail、预编译AOT...第五章:说说web服务 第六章:远程访问HttpExchange 第七章:视图技术 第八章:项目实战 第九章:AOT与GraalVM

    PostgreSQL 10 基础课程第五章 高级知识交叉连接详解

    PostgreSQL 10 基础课程第五章 高级知识交叉连接详解

    PostgreSQL 10 基础课程第五章 高级知识Null空值详解

    PostgreSQL 10 基础课程第五章 高级知识Null空值详解

    ZooKeeper-分布式过程协同技术详解.pdf

    第5章介绍如何在系统或网络故障时恢复应用。第6章介绍需要注意来避免故障的一些繁杂却很重要的场景。第7章介绍C语言版的API接口,也可以作为非Java语言实现的ZooKeeperAPI的基础,对非Java语言的开发人员非常有帮助...

    JSP基础与案例开发详解配书源码(全部)

    第5章:JSP应用,这是JSP开发中最基础的部分,是读者必须掌握的部分。 第6章:EL表达式的使用,这是提高JSP编码质量的部分,建议读者掌握。 第7章:自定义标签的使用,这是优化JSP学习中较难于理解的部分,建议...

    快意编程 EXT JS Web开发技术详解.pdf

    第5章 Ext JS开发模式 86 第6章 Ext JS布局 102 第7章 表单组件 125 第8章 表格组件 148 第9章 表格组件的扩充 170 第10章 树形组件 186 第11章 窗口组件 204 第12章 工具栏与菜单栏组件 219 第13章 AJAX应用与数据...

    ZooKeeper:分布式过程协同技术详解

    第5章介绍如何在系统或网络故障时恢复应用。第6章介绍需要注意来避免故障的一些繁杂却很重要的场景。第7章介绍C语言版的API接口,也可以作为非Java语言实现的ZooKeeperAPI的基础,对非Java语言的开发人员非常有帮助...

    [课程讲义]计算机网络第三章数据链路层详解.pptx

    5 [课程讲义]计算机网络第三章数据链路层详解全文共110页,当前为第5页。 案例引入 如何解决? 将传输的比特数据流分解成帧,对发生错误的帧进行重传或纠错 引入一种差错控制的机制,让接收方在收到数据后向发送方...

    java +web开发应用详解

    第4篇为综合实例篇,包括23-27章,介绍了网络硬盘、数字魔法之读心术、博客系统、电子相册等5个案例,通过这些案例,读者可以将《独门架构:Java Web开发应用详解》所介绍的知识融会贯通,达到更好的学习效果。...

    windows7操作系统知识详解.pptx

    第2章 Windows7操作系统 windows7操作系统知识详解全文共36页,当前为第2页。 第2章 Windows7操作系统 知识要点 1.认识Windows7操作系统; 2.学会启动和退出Windows7 ; 3.了解Windows7的桌面组成和运行应用程序...

    Linux PowerPC详解:核心篇

    《Linux PowerPC详解:核心篇》分8章,第1章讲述Linux PowerPC的组成;第2~4章讲述了有关PowerPC处理器的基础知识,包括指令集、寄存器、内存体系结构等;第5~8章讲述Linux系统在PowerPC处理器中的运行,包括进程...

Global site tag (gtag.js) - Google Analytics