HTML知识积累及实践(三) - 列表标签

简介: HTML知识积累及实践(三) - 列表标签

html - 列表标签

一、无序列表

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

无序列表始于 <ul> 标签;

每个列表项始于 <li> (列表项内部可以使用段落、换行符、图片、链接以及其他列表等)。

具体事例:

<ul>

    <li>列表项1</li>

    <li>列表项2</li>

</ul>

页面的导航、分类等就是用ul li做的,不用表格

<body>
<h1>html - 无序列表</h1>
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>
</body>

效果如下:

2018122814580746.png

二、有序列表

有序列表  以数字标记 其他性质与无序列表基本一致

形式

<ol>

   <li></li>

   <li></li>

</ol>

<body>
<h1>html - 列表标签</h1>
<h2>无序列表</h2>
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>
<h2>有序列表</h2>
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>
</body>

效果如下:

2018122814580746.png

三、定义列表

html标签 定义列表

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

自定义列表以 <dl> 标签开始;

每个自定义列表项以 <dt> 开始;

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

(定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等)

<dl>

   <dt>自定列表项1</dt>

   <dd>列表项的定义1</dd>

   <dt>自定列表项2</dt>

   <dd>列表项的定义2</dd>

</dl>

<body>
<h1>html - 列表标签</h1>
<h2>无序列表</h2>
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>
<h2>有序列表</h2>
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>
<h2>定义列表</h2>
<dl>
  <dt>定义列表项1</dt>
  <dd>列表项1定义</dd>
  <dt>定义列表项2</dt>
  <dd>列表项2定义</dd>
</dl>
</body>

效果如下:

2018122814580746.png

四、列表标签的应用

1.无序列表的type

type主要控制无序列表列表项前方的小提示符

<ul>

   <li>我是一个无序列表项</li>

   <li>我是一个无序列表项</li>

   <li>我是一个无序列表项</li>

</ul>

<ul type="disc">   默认值

   <li>我是一个无序列表项</li>

   <li>我是一个无序列表项</li>

   <li>我是一个无序列表项</li>

</ul>

<ul type="circle">   空心圆点

   <li>我是一个无序列表项</li>

   <li>我是一个无序列表项</li>

   <li>我是一个无序列表项</li>

</ul>

<ul type="square">   实心方块

   <li>我是一个无序列表项</li>

   <li>我是一个无序列表项</li>

   <li>我是一个无序列表项</li>

</ul>

整体效果如下:

2018122814580746.png

2.有序列表type

有序列表type也是改变前面的提示符

不同类型的有序列表: type=“默认数字/大写字母A/小写字母a/大写罗马字母I/小写罗马字母i” 列表 ;

ABC可用于英语选择题的制作等处

<ol>  默认数字

   <li>我是一个列表项</li>

   <li>我是一个列表项</li>

   <li>我是一个列表项</li>

</ol>

<ol type="A">  大写字母

   <li>我是一个列表项</li>

   <li>我是一个列表项</li>

   <li>我是一个列表项</li>

</ol>

<ol type=a">  小写字母abc

   <li>我是一个列表项</li>

   <li>我是一个列表项</li>

   <li>我是一个列表项</li>

</ol>

<ol type="I">  罗马字母

   <li>我是一个列表项</li>

   <li>我是一个列表项</li>

   <li>我是一个列表项</li>

</ol>

<ol type="i">  小写罗马字母

   <li>我是一个列表项</li>

   <li>我是一个列表项</li>

   <li>我是一个列表项</li>

</ol>

效果如下:

2018122814580746.png

嵌套列表

<ul>
  <li>我是一个列表项</li>
  <li>
    <ul>
      <li>我是一个小列表项</li>
    </ul>
  </li> 
  <li>我是一个列表项</li>
</ul>

效果如下:

2018122814580746.png

不仅可以2级嵌套,原则意义上说可以无限嵌套

有序列表和无序列表也可以穿插嵌套,但用无妨

自定义列表一般是用来做多行导航

相关文章
|
2月前
|
XML 前端开发 C#
C#编程实践:解析HTML文档并执行元素匹配
通过上述步骤,可以在C#中有效地解析HTML文档并执行元素匹配。HtmlAgilityPack提供了一个强大而灵活的工具集,可以处理各种HTML解析任务。
189 19
|
1月前
|
缓存 边缘计算 运维
基于 Cloudflare Workers 构建高性能知识库镜像服务:反向代理与 HTML 动态重写实践
基于Cloudflare Workers构建的边缘计算镜像服务,通过反向代理、HTML动态重写与智能缓存,优化维基百科等知识平台的访问性能。支持路径映射、安全头清理与容错回退,实现免运维、低延迟、高可用的Web加速方案,适用于教育、科研等合规场景。
458 8
|
6月前
|
缓存 JavaScript 前端开发
Vue 项目中动态添加 HTML 元素的方法与实践
本文探讨了 Vue 中动态添加 HTML 元素的多种技术方案,包括条件渲染(v-if/v-show)、动态组件(component :is)、手动挂载($mount)及 Vuex 状态管理等方法。通过实例分析,如动态表单生成器与全局模态框服务,展示了这些方案在实际开发中的应用。同时提供了性能优化建议和注意事项,帮助开发者根据需求选择最佳方式,在保持 Vue 响应式特性的同时实现灵活交互。附带代码示例,便于理解和实践。
185 2
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
400 49
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
338 5
HTML 速查列表4
本示例包含两个部分:表格和框架。表格部分展示了带有两个列标题和一行数据的简单表格;框架部分通过 `&lt;iframe&gt;` 标签嵌入了一个外部页面 `demo_iframe.htm`。
|
数据安全/隐私保护
HTML 速查列表5
表单示例包括文本输入、密码框、复选框、单选按钮、提交和重置按钮、隐藏输入、下拉菜单及多行文本区。实体表示特殊字符,如 &lt; (&lt;)、&gt; (&gt;) 和 &#169; (©)。
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
HTML 列表3
HTML 自定义列表 (&lt;dl&gt;) 用于描述术语或名称的定义。每个术语由 &lt;dt&gt; 标签表示,其定义或描述由 &lt;dd&gt; 标签表示。
HTML 速查列表3
文档排版元素简介:包括图片、替换文本、样式/区块、块级和内联元素、无序列表、有序列表及定义列表等,帮助清晰组织和展示内容。