HTML5学习-列表标签

简介: HTML5学习-列表标签

列表标签


1,背景:如果说表格是用来显示数据的,那么列表就是用来布局的

2,特点:列表最大的特点就是整齐,整洁,有序,他作为布局会更加自由和方便

3,分类:无序列表,有序列表和自定义列表


      A,无序列表(掌握)
           1),<ul>标签标示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表使用<li>标签定义
           2),格式
           <ul>
               <li>列表项1</li>
               <li>列表项1</li>
               <li>列表项1</li>
                  ...
            <ul>


               3) 注意:
                        无序列表的各个列表之间没有顺序级别之分,是并列的
                        <ul></ul>里面只能放<li></li> ,直接放在<ul></ul>标签中输入其他标签或文字是不被允许的<li></li>里面可以容纳所有的元素
                        无序列表会带有自己的样式属性,但在实际使用时,我们会使用CSS来设置
          B,有序列表(理解)
                     1),有序列表即为有排序顺序的列表,其中各个列表会按照一定的顺序排列
                     2), 在HTML标签中,<ol>标签用于定义有序列表,列表顺序以数字来显示,并且<li>标签来定义列表项
                     3),格式:
                             <ol>
                                    <li>列表1</li>
                                    <li>列表1</li>
                                    <li>列表1</li>
                              </ol>
                     4), 注意事项:
                                <ul></ul>里面只能放<li></li> ,直接放在<ul></ul>标签中输入其他标签或文字是不被允许的
                                <li></li>里面可以容纳所有的元素
                                无序列表会带有自己的样式属性,但在实际使用时,我们会使用CSS来设置
            C,自定义列表
                       1),使用背景:常用于对术语或名词进行解释和描述,定义列表项前没有任何符号
                       2),语法格式:
                                      <dl>
                                                 <dt>名词1</dt>
                                                 <dd>名词1解释1</dd>
                                                 <dd>名词1解释2</dd>
                                      </dl>
                         3),注意:
                                       <dl></dl>里面只能包含<dt>和<dd>
                                       <dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>.
                                       <dt>和<dd>是并列关系
                                       在HTML标签中,<dl>标签用于定义描述列表(或定义列表),该列表会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。
                         4),实例:
                                        <dl> 
                                               <dt>关注我们</dt>
                                               <dd>方式一</dd>        
                                               <dd>方式二</dd>        
                                               <dd>方式三</dd>       
                                                <dt>了解更多</dt>        
                                                <dd>方式一</dd>        
                                                <dd>方式二</dd>        
                                                <dd>方式三</dd>    
                                         </dl>
相关文章
|
6天前
杨老师课堂之网页制作HTML的学习入门-含有案例1
杨老师课堂之网页制作HTML的学习入门-含有案例
13 3
|
12天前
|
存储 JavaScript 前端开发
HTML标签data-属性的作用
HTML标签data-属性的作用
|
11天前
|
移动开发 HTML5 前端开发
【网页搭建基石】:揭秘HTML标签的魔法世界
【网页搭建基石】:揭秘HTML标签的魔法世界
|
1天前
|
移动开发 前端开发 搜索推荐
HTML5飞跃指南:基础标签元素,网页设计的第一步
HTML5飞跃指南:基础标签元素,网页设计的第一步
|
1天前
|
前端开发
常用 HTML 标签元素(表格、表单)
常用 HTML 标签元素(表格、表单)
|
6天前
|
数据安全/隐私保护
杨老师课堂之网页制作HTML的学习入门-含有案例2
杨老师课堂之网页制作HTML的学习入门-含有案例
4 0
|
8天前
|
JavaScript 前端开发 定位技术
html中a标签的多用性
html中a标签的多用性
|
8天前
|
前端开发 JavaScript
HTML的a标签如何做返回顶部的功能
HTML的a标签如何做返回顶部的功能
15 0
|
8天前
|
移动开发 定位技术 HTML5
HTML5的新语义化标签
HTML5的新语义化标签
|
13天前
|
Python
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)