HTML列表标签

简介: HTML基础

<!DOCTYPEhtml>

<htmllang="en">


<head>

   <metacharset="UTF-8">

   <metahttp-equiv="X-UA-Compatible"content="IE=edge">

   <metaname="viewport"content="width=device-width, initial-scale=1.0">

   <title>Document</title>

</head>


<body>

   <!-- 前面学的表格标签是用来展示数据的 -->

   <!-- 那么列表标签是用来布局的 -->

   列表最大的特点就是整齐,整洁,有序,它作为布局会更加自由和方便 根据使用场景不同,列表可以分为3大类:无序列表,有序列表,自定义列表

   <imgsrc="liebiao.png">

   <!-- 2.2.1无序列表(重点) -->

   <!-- <ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签定义 -->

   <ul>

       <li>1.无序列表的各个列表项之间没有顺序级别之分,是并列的</li>

       <li>ul中只能嵌套li,直接俄在ul标签中输入其他标签或者文字的做法是不被允许的</li>

       <li>li与li之间相当于一个容器,可以容纳所有元素</li>

       <li>无序列表会带有自己的样式属性,但在实际使用时,我们会使用css来设置</li>

   </ul><br/>

   <!-- 2.2.2有序列表 -->

   <!-- 在HTML标签中,ol标签用于定义有序列表,列表排序以数字来显示,并且使用li标签来定义列表项 -->

   <ol>

       <li>w</li>

       <li>x</li>

       <li>h</li>

       注意事项和无序列表一致,复习看完后记得运行一下看看

   </ol>

   <!-- 2.2.3自定义列表 -->

   <!-- 在HTML标签中,dl标签用于定义描述列表,该标签和与dt(定义项目名字),dd(描述每一个项目/名字)一起使用 -->

   <dl>

       <dt>名词1</dt>

       <dd>名词1解释1</dd>

       <dd>名词1解释2</dd>

       1.dl里面只能包含dt和dd 2.dt和dd个数没有限制,经常是一个dt对应多个dd

   </dl>

</body>


</html>

相关文章
|
2月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
57 5
|
16天前
HTML 速查列表4
本示例包含两个部分:表格和框架。表格部分展示了带有两个列标题和一行数据的简单表格;框架部分通过 `&lt;iframe&gt;` 标签嵌入了一个外部页面 `demo_iframe.htm`。
|
16天前
|
数据安全/隐私保护
HTML 速查列表5
表单示例包括文本输入、密码框、复选框、单选按钮、提交和重置按钮、隐藏输入、下拉菜单及多行文本区。实体表示特殊字符,如 &lt; (&lt;)、&gt; (&gt;) 和 &#169; (©)。
|
24天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
26天前
HTML 列表3
HTML 自定义列表 (&lt;dl&gt;) 用于描述术语或名称的定义。每个术语由 &lt;dt&gt; 标签表示,其定义或描述由 &lt;dd&gt; 标签表示。
|
17天前
HTML 速查列表3
文档排版元素简介:包括图片、替换文本、样式/区块、块级和内联元素、无序列表、有序列表及定义列表等,帮助清晰组织和展示内容。
|
17天前
HTML 速查列表3
本示例展示了HTML中常用的元素:图片、样式与区块、块级与内联元素、以及三种列表(无序、有序和定义列表)的使用方法。通过这些基本标签,可以构建网页的基本结构。
|
17天前
HTML 速查列表2
文本格式化包括多种标签
|
17天前
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;`。
|
3月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
35 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)