`

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

    博客分类:
  • 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

分享到:
评论

相关推荐

    完全手册:JavaScript动态网页开发详解(1-8章pdf格式)

    第五章:DOM操作 文档对象模型(DOM)是HTML和XML文档的编程接口。这一章将介绍如何使用JavaScript来查找、修改和添加DOM元素,从而实现动态网页效果。 第六章:事件处理 事件是用户与网页交互的触发点,如点击按钮...

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

    第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中的求解...

    android应用开发详解第五章

    以下是对"Android应用开发详解第五章"中可能涉及的一些核心知识点的详细解析: 1. **用户界面(UI)设计**:Android应用的用户界面是吸引用户的关键。第五章可能详细介绍了Android的布局管理器,如LinearLayout、...

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

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

    vSphere 4 所有知识详解 配图文实验 共11章

    ### 第五章:网络虚拟化 - vSphere 4中的虚拟网络概念 - 虚拟交换机的配置与管理 - 网络I/O控制(NIOC)与安全设置 ### 第六章:存储虚拟化 - vSphere 4的存储架构 - 数据存储类型与选择 - VMFS文件系统的使用与...

    JSP应用开发详解(第二版)

    **第五章:EL(Expression Language)** - EL表达式的语法结构 - EL变量和作用域 - EL函数和自定义EL函数 - EL与JSTL的协同工作 **第六章:JSTL(JavaServer Pages Standard Tag Library)** - JSTL的组成与分类 - ...

    动力节点王鹤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空值详解

    实战 Windows Azure:微软云计算平台技术详解

    - 第3章至第7章:通过一个示例项目系统地介绍了Windows Azure的关键服务,如计算服务、存储服务、部署调试等。 - 第8章:探讨了Windows Azure平台的高级应用,包括如何更有效地使用平台提供的各项功能。 #### 七、...

    ZooKeeper-分布式过程协同技术详解 PDF 高清完整版

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

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

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

    北大青鸟S1JAVA第三章课后练习详解

    【北大青鸟S1JAVA第三章课后练习详解】 在北大青鸟的S1JAVA课程中,第三章是Java编程的基础部分,涵盖了重要的概念和技术,为学员打下坚实的编程基础。这一章的学习内容通常包括变量、数据类型、运算符、控制结构...

    快意编程 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应用与数据...

Global site tag (gtag.js) - Google Analytics