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级嵌套,原则意义上说可以无限嵌套

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

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

相关文章
|
4月前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
120 49
|
4月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
98 5
HTML 速查列表4
本示例包含两个部分:表格和框架。表格部分展示了带有两个列标题和一行数据的简单表格;框架部分通过 `&lt;iframe&gt;` 标签嵌入了一个外部页面 `demo_iframe.htm`。
|
4月前
|
数据安全/隐私保护
HTML 速查列表5
表单示例包括文本输入、密码框、复选框、单选按钮、提交和重置按钮、隐藏输入、下拉菜单及多行文本区。实体表示特殊字符,如 &lt; (&lt;)、&gt; (&gt;) 和 &#169; (©)。
|
4月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
HTML 列表3
HTML 自定义列表 (&lt;dl&gt;) 用于描述术语或名称的定义。每个术语由 &lt;dt&gt; 标签表示,其定义或描述由 &lt;dd&gt; 标签表示。
HTML 速查列表3
文档排版元素简介:包括图片、替换文本、样式/区块、块级和内联元素、无序列表、有序列表及定义列表等,帮助清晰组织和展示内容。
HTML 速查列表3
本示例展示了HTML中常用的元素:图片、样式与区块、块级与内联元素、以及三种列表(无序、有序和定义列表)的使用方法。通过这些基本标签,可以构建网页的基本结构。
HTML 速查列表2
文本格式化包括多种标签
HTML 速查列表1
HTML速查列表包含基本文档结构、标题、文本、换行和水平线等常用标签,方便日常打印使用。例如:`&lt;html&gt;`, `&lt;head&gt;`, `&lt;title&gt;`, `&lt;body&gt;`, `&lt;h1&gt;`至`&lt;h6&gt;`,`&lt;p&gt;`,`&lt;br&gt;`和`&lt;hr&gt;`。