当前位置: 首页 > news >正文

网页制作04-html,css,javascript初认识のhtml如何使用列表

 Html列表共有三种类型:

1.一种是无序列表,项目符号有几个符号组成;

2.一种是有序列表,项目符号由字母或数字进行排序;

3.一种是定义列表,它用作产生条件和描述的双重列表,可以对列表进行灵活定义

一、有序列表

1.有序列表ol

1)一般格式:

<ol>

<li>有序列表项</li>

<li>有序列表项</li>

<li>有序列表项</li>

……

</ol>

2)代码示例: 

<ol>
<li> Monday</li>
<li> Tuesday</li>
<li>Wednesday</li>
<li> Thursday</li>
<li> Friday</li>
<li> Saturday</li>
<li> Sunday</li>

</ol>

 3)结果演示:

 

2.有序列表的序号类型type

默认情况下,有序列表的序号是数字的如上述情况, Type属性可以改变序号的类型,包括大小写字母、阿拉伯数字和大小写罗马数字

有序列表的序号类型
type列表项目的序号类型
1数字123……
a小写英文字母abc……
A大写英文字母 ABC
I小写罗马数字i ii iii iv
i大写罗马数字I II III IV

 1)一般格式:

<ol type="I">

<li>有序列表项</li>

<li>有序列表项</li>

<li>有序列表项</li>

……

</ol>

2)代码示例: 

<ol type="I">
<li> Monday</li>
<li> Tuesday</li>
<li>Wednesday</li>
<li> Thursday</li>
<li> Friday</li>
<li> Saturday</li>
<li> Sunday</li>

</ol>

 3)结果演示:

3.有序列表的起始数值start

 1)一般格式:

<ol  start="列表项目的序号类型">

<li>有序列表项</li>

<li>有序列表项</li>

<li>有序列表项</li>

……

</ol>

2)代码示例:  

<ol start="2">
<li> Tuesday</li>
<li>Wednesday</li>
<li> Thursday</li>
<li> Friday</li>
<li> Saturday</li>
<li> Sunday</li>
<li> Monday</li>
</ol>

 3)结果演示:

 

二、无序列表

1、无序列表标记<ul>

1)一般格式:

<ul>

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

……

</ul>

2)代码示例:  

<ul>
<li> Monday</li>
<li> Tuesday</li>
<li>Wednesday</li>
<li> Thursday</li>
<li> Friday</li>
<li> Saturday</li>
<li> Sunday</li>
</ul>

3)结果演示:

2.无序列表的类型type

无序列表的序号类型
type列表项目的序号类型
disc
circle🔘
square🔳

1)一般格式:

<ul type="符号类型">

<li>有序列表项</li>

<li>有序列表项</li>

<li>有序列表项</li>

……

</ul>

2)代码示例:  

<ul>
	红绿灯
<li> 红色</li>
<li> 黄色</li>
<li>绿色</li>
</ul>

3)结果演示:

3.目录列表标<dir>

目录列表一般用来创建多列的目录列表,它在浏览器中的显示效果与无序列表相同

1)一般格式:

<dir>

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

……

</dir>

2)代码示例:

<dir >
	目录列表
<li> 内容一</li>
<li> 内容二</li>
<li>内容三</li>
</dir>

  

3)结果演示:

4.定义列表标记<dl>

定义列表有两部分组成:定义条件和定义描述:

定义列表: Definition list

<dt> Definition term

<dd> Definition description

1)一般格式:

<dl>

<dt>定义条件</dt>

<dd>定义描述</dd>

2)代码示例:  

人力资源六大模块(以下内容摘自网址https://boardmix.cn/article/6-parts-of-human-resource/,仅供本文章语法实例引用)
<dl>
	<dt>1. 人力资源规划</dt><dd>人力资源规划是指企业在战略层面上对人力资源进行合理的规划和管理,以满足企业发展和业务需求。它是将企业战略和人力资源管理有机结合起来的重要一环,是对企业未来人力资源需求的预测和规划,目的是合理配置人力资源,为企业发展提供持续的动力和支持。</dd>
	<dt>2. 招聘管理</dt><dd>招聘模块是人力资源管理的基础模块之一。它包括了企业制定招聘计划、确定招聘渠道、筛选应聘者、面试、录用和入职等一系列步骤。招聘模块的主要目的是吸引和选拔最适合企业的人才,为企业提供优秀的员工资源,以推动企业的发展。</dd>
	<dt>3. 培训与开发管理</dt><dd>培训模块是为员工提供必要的培训,以提高员工的工作技能和知识,使其能够更好地胜任工作。该模块包括确定员工的培训需求、制定培训计划、设计培训课程、实施培训和评估培训效果等。培训模块的目的是提高员工的工作质量、工作效率和工作满意度,从而增强企业的竞争力。</dd>
	<dt>4.薪酬福利管理</dt><dd>薪酬模块是指企业通过制定薪资计划、设计薪酬结构和薪酬管理政策等方式,为员工提供合理的薪资待遇。薪酬模块的主要目的是保持员工的工作积极性和士气,提高员工的工作效率和生产力,从而增加企业的经济效益。</dd>
	<dt>5. 绩效管理</dt><dd>绩效模块是指企业通过制定绩效目标、评估绩效、反馈和改进绩效等方式,对员工的工作表现进行监测和管理,为企业提供合理的人才评估和提拔机制。该模块的目的是帮助企业激发员工的工作热情和积极性,提高员工的工作质量和效率,促进员工的个人成长和企业的发展。</dd>
	<dt>6. 员工关系管理</dt><dd>员工关系模块是指企业管理和维护员工与企业之间的关系。该模块包括制定员工手册、管理员工投诉和纠纷、开展员工满意度调查等。员工关系模块的目的是加强员工与企业之间的沟通和联系,增强员工的归属感和忠诚度。</dd>
	</dl>

3)结果演示:

5.菜单列表标记<menu>

1)一般格式:

<menu >
<li> 列表项</li>
<li> 列表项</li>
<li>列表项</li>
……
</menu>

2)代码示例:  

<menu >
	菜单列表
<li> 中餐</li>
<li> 西餐</li>
<li>日本料理</li>
<li>法国料理</li>
<li>西班牙烤肉</li>
</menu>

3)结果演示:

http://www.dtcms.com/a/27181.html

相关文章:

  • 【LeetCode: LCR 126. 斐波那契数 + 动态规划】
  • 内核数据结构用法(2)list
  • 开源模型应用落地-qwen2-7b-instruct-LoRA微调模型合并-LLaMA-Factory-单机多卡-RTX 4090双卡(六)
  • halcon激光三角测量(二十三)inspect_3d_surface_intersections
  • Laravel从入门到上云
  • Deepseek整合SpringAI
  • JVM 类加载器深度解析(含实战案例)
  • MySQL 安装过程记录以及安装选项详解
  • 【C++八股】内存对⻬
  • UniApp 中 margin 和 padding 属性的使用详解
  • vue3项目上线配置 nginx代理
  • hive如何导出csv格式文件
  • Bootstrap CSS 概览
  • postgres源码学习之登录
  • Qt中利用httplib调用https接口
  • Android今日头条的屏幕适配方案
  • c++进阶———继承
  • I2C学习笔记-软件模拟I2C
  • 【分治法】线性时间选择问题
  • 力扣-二叉树-235 二叉搜索树的最近公共祖先
  • HarmonyOS全栈开发指南:从入门到精通,构建万物智联的未来生态(四)
  • C++(23):为类成员函数增加this参数
  • HTTP 和RESTful API 基础,答疑
  • 【JavaScript】实战案例-放大镜效果、图片切换
  • 【龙智】Confluence到期日提醒插件Data Center v1.8.0发布:Confluence 9兼容、表格提醒强化,Slack通知升级
  • 汽车免拆诊断案例 | 2013 款奔驰 S300L 车起步时车身明显抖动
  • SpringBoot高级-底层原理
  • Sponge VS Spring:新兴力量与行业标准的碰撞
  • 三、数据治理应用开发整体架构
  • 【部署优化篇四】《DeepSeek移动端优化:CoreML/TFLite实战对比》