网页制作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大写英文字母 ABCI小写罗马数字i ii iii ivi大写罗马数字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）代码示例：   人力资源六大模块(以下内容摘自网址 boardmix /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）结果演示：