Web前端速成(Html+Css+JavaScript+jQuery)-9.无序列表

乐地课堂

已于 2023-06-11 00:56:48 修改

阅读量108

点赞数

分类专栏：前端开发文章标签： html css javascript 前端 jquery

于 2023-05-06 01:10:02 首次发布

本文链接：https://blog.csdn.net/dhldhl/article/details/130518330

版权

前端开发专栏收录该内容

25 篇文章 1 订阅

订阅专栏

内容摘要：
- 介绍无序列表标签ul，li

9.无序列表

知识点：

无序列表：项目使用粗体圆点（典型的小黑圆圈）进行标记
无序列表始于<ul> 标签。每个列表项始于 <li> 标签
<ul>与<li>组合使用
<ul>可以通过style或者CSS设置list-style-type属性值，实现不同的展现形式
- list-style-type属性值有disc，circle，square
<ul>支持全局属性,HTML 事件属性
<ul>与<ul>可以嵌套展示
<ul>与<ol>可以嵌套展示
<li>列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

标签	描述
<ul>	定义无序列表
<li>	定义列表项

运用例子：

备注：请亲自动手模仿着输入代码，在反复练习中熟悉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 无序列表</title>
</head>
<body>    
<h4>armenian无序列表：</h4>
<ul style="list-style-type:armenian">
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
 <li>four</li>
 <li>five</li>
</ul>  

<h4>cjk-ideographic无序列表：</h4>
<ul style="list-style-type:cjk-ideographic">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>four</li>
    <li>five</li>
</ul>  

<h4>decimal无序列表：</h4>
<ul style="list-style-type:decimal">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>four</li>
    <li>five</li>
</ul>

<h4>ul与ul嵌套：</h4>
<ul>
  <li>一级目录</li>
  <li>一级目录
    <ul>
      <li>二级目录</li>
      <li>二级目录</li>
    </ul>
  </li>
  <li>一级目录</li>
</ul>

<h4>ul与ul嵌套：</h4>
<ul>
  <li>一级目录</li>
  <li>一级目录
    <ul>
      <li>二级目录</li>
      <li>二级目录
        <ul>
          <li>三级目录</li>
          <li>三级目录</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>一级目录</li>
</ul>

<h4>ul与 ol嵌套</h4>
    <ul>
        <li>一级目录</li>
        <li>一级目录
            <ol>
	            <li>二级目录</li>
	            <li>二级目录</li>
            </ol>
        </li>
        <li>一级目录</li>
    </ul>	  
</body>
</html>