首页 > 其他分享 >前端笔记-HTML 列表-20221021

前端笔记-HTML 列表-20221021

时间:2022-10-21 16:37:57浏览次数:89  
标签:香蕉 定义 梨子 20221021 列表 HTML 苹果 li

HTML 列表

1.定义列表

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

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

<dl>
        <dt>Coffee</dt>
        <dd>Black hot tea drink</dd>
        <dt>Milk</dt>
        <dd>white cold drink</dd>
</dl>

2.无序列表属性

dic:实心点

circle:空心点

square:方形

     <ul  type="square">
        <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>

 

3.有序列表属性

默认数组

"A”:大写A-Z

“a":小写a-z

"I":大写罗马子字母

“i":小写罗马字母

    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>梨子</li>
        <li>菠萝</li>
        <li>水蜜桃</li>
    </ol>
    < type="A">
        <li>苹果</li>
        <li>香蕉</li>
        <li>梨子</li>
        <li>菠萝</li>
        <li>水蜜桃</li>
    </ol>
    < type="a">
        <li>苹果</li>
        <li>香蕉</li>
        <li>梨子</li>
        <li>菠萝</li>
        <li>水蜜桃</li>
    </ol>
    < type="I">
        <li>苹果</li>
        <li>香蕉</li>
        <li>梨子</li>
        <li>菠萝</li>
        <li>水蜜桃</li>
    </ol>
    <ol type="i">
        <li>苹果</li>
        <li>香蕉</li>
        <li>梨子</li>
        <li>菠萝</li>
        <li>水蜜桃</li>
    </ol>

  

3.嵌套列表

ul,li中再嵌套ul,li

    <ul>
        <li>茶
            <ul>
                <li>绿茶</li>
                <li>红茶</li>
            </ul>
        </li>
        <li>水果
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
                <li>梨子</li>
            </ul>
        </li>
        <li>花
            <ul>
                <li>玫瑰</li>
                <li>百合</li>
                <li>康乃馨</li>
            </ul>
        </li>
    </ul>

4.嵌套列表2

ul,li中再嵌套ul,li,再嵌ul,li

      <ul>
        <li>茶
            <ul>
                <li>绿茶</li>
                <li>红茶</li>
            </ul>
        </li>
        <li>水果
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
                <li>梨子</li>
            </ul>
        </li>
        <li>花
            <ul>
                <li>玫瑰
                    <ul>
                        <li>幼苗</li>
                        <li>花苞</li>
                        <li>成品</li>
                    </ul>
                </li>
                <li>百合
                    <ul>
                        <li>一等品</li>
                        <li>二等品</li>
                        <li>三等品</li>
                    </ul>
                </li>
                <li>康乃馨</li>
            </ul>
        </li>
    </ul>

5.定义列表:dl,dt,dd

<dl>
        <dt>Coffee</dt>
        <dd>Black hot tea drink</dd>
        <dt>Milk</dt>
        <dd>white cold drink</dd>
</dl>

标签总结:

<ol> 定义有序列表。
<ul> 定义无序列表。
<li> 定义列表项。
<dl> 定义定义列表。
<dt> 定义定义项目。
<dd> 定义定义的描述。

 

标签:香蕉,定义,梨子,20221021,列表,HTML,苹果,li
From: https://www.cnblogs.com/zhangrong789/p/16813867.html

相关文章

  • HTML标签-列表标签和HTML标签-链接标签
    HTML标签-列表标签案例:旅游网站首页1.确定使用table来完成布局2.如果某一行只有一个单元格,则使用<tr><td></td></tr>3.如果某一行有多个单元格,则使用<tr>......
  • spark scala 安装 window20221021
    1、spark安装http://archive.apache.org/dist/spark/spark-2.2.0/spark-2.2.0-bin-hadoop2.7.tgz 环境变量:  创建SPARK_HOME:D:\spark-2.2.0-bin-hadoop2.7Path......
  • HTML表单标签
    *表单: *概念:用于采集用户输入的数据的。用于和服务器进行交互。 *form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围*属性:......
  • HTML 快速入门 标签学习
    语法1,html文档后缀名.html或者.htm2,标签分为1,围堵标签:有开始标签和结束标签。如<html></html>2,自闭和标签:开始标签和结束标签在......
  • HTML调用摄像头和/或麦克风
    API:getUserMedia函数调用摄像头和麦克风API简介HTML5的getUserMediaAPI为用户提供访问硬件设备媒体(摄像头、视频、音频、地理位置等)的接口,基于该接口,开发者可以在不依赖......
  • HTML
    1,概念:是最基础的网页开发语言*HyperTextMarkupLanguage 超文本标记语言超文本:超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文......
  • HTML标签综合案例分析与实现
    1.确定使用table来完成布局2.如果某一行只有一个单元格,则使用<tr><td></td></tr>3.如果某一行有多个单元格,则使用 <tr> <td> <table></tab......
  • 该字段看上去是个列表字典嵌套,怎么只取出name对应的内容呢?
    大家好,我是Python进阶者。一、前言前几天在Python最强王者交流群【WYM】问了一个Pandas处理的问题,提问截图如下:原始数据在csv文件中了。二、实现过程一开始以为简单......
  • HTML基本标签
    HTML基本标签1.文件开始标签用于表示该文件是以超文本标识语言(HTML)编写,该标签不带有任何属性2.头文件标签表示网页的头部标签,在中定义的元素,并不会放置网页中的任何......
  • HTML常用标签
    HTML常用标签<!DOCTYPEhtml><!--html文件开始--><htmllang="en"><!--head文件头--><head><metacharset="UTF-8"><title>这是第一个网页</title></hea......