HTML前端:三种列表“无序列表 有序列表 自定义列表“ 定义

简介: HTML前端:三种列表“无序列表 有序列表 自定义列表“ 定义

列表在前端开发中特别常用 随处可见

例如CSDN的布局:

下面介绍 HTML 中的三种列表


无序列表(常用):

<ul>
    <li>CSDN</li>
    <li>生产队的驴</li>
    <li>这是无序列表</li>
</ul>

效果图:

顾名思义就是没有顺序的一个列表


有序列表

<ol>
    <li>CSDN</li>
    <li>生产队的驴</li>
    <li>这是有序列表</li>
    <li>每一行 都会有序号</li>
</ol>

效果图:

有序列表和无序的区别就是前面多了序号


自定义列表:

<dl>
<dt>13:27:18</dt>
<dd>重大消息!!</dd>
<dd>生产队的驴啊啊啊啊啊啊啊啊啊啊啊啊啊啊</dd>
<br/>
<dt>13:27:58</dt>
<dd>CSDN</dd>
<dd>生产队的驴</dd>

效果图:

相关文章
|
8天前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
43 6
HTML 速查列表4
本示例包含两个部分:表格和框架。表格部分展示了带有两个列标题和一行数据的简单表格;框架部分通过 `&lt;iframe&gt;` 标签嵌入了一个外部页面 `demo_iframe.htm`。
|
2月前
|
数据安全/隐私保护
HTML 速查列表5
表单示例包括文本输入、密码框、复选框、单选按钮、提交和重置按钮、隐藏输入、下拉菜单及多行文本区。实体表示特殊字符,如 &lt; (&lt;)、&gt; (&gt;) 和 &#169; (©)。
HTML 速查列表3
文档排版元素简介:包括图片、替换文本、样式/区块、块级和内联元素、无序列表、有序列表及定义列表等,帮助清晰组织和展示内容。
HTML 速查列表3
本示例展示了HTML中常用的元素:图片、样式与区块、块级与内联元素、以及三种列表(无序、有序和定义列表)的使用方法。通过这些基本标签,可以构建网页的基本结构。
HTML 速查列表2
文本格式化包括多种标签
|
3月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
205 2
|
3月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
58 0
|
3月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。

热门文章

最新文章