【零基础入门前端系列】—无序列表、有序列表、定义列表(四)

简介: 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

一、HTML无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

2345_image_file_copy_613.jpg

2345_image_file_copy_614.jpg

嵌套结构:

<ul>
        <li>北京
            <ul>
                <li>大兴
                    <ul>
                        <li>经海路</li>
                    </ul>
                </li>
                <li>海淀</li>
            </ul>
        </li>
        <li>河北</li>
        <li>湖南</li>
    </ul>

2345_image_file_copy_615.jpg

ul 和li的属性

  • type:设置项目符号的类型

取值:

  • disc:默认值,黑色实心圆
  • circle:空心圆
  • square:黑色实心矩形
  • none:不显示
   <ul type="square">
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
    </ul>

2345_image_file_copy_616.jpg

ol和li的属性

  • type:设置项目符号类型
  • 取值:1(默认值)、a、A、I
  • start:设置从第几个开始,取值为数字
  • reversed:倒序(当属性等于属性值的时候可以简写为一个属性)
 <ol type="I">
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
    </ol>

2345_image_file_copy_617.jpg

三、自定义列表

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

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

<dl>
        <dt>水果</dt>
        <dd>樱桃</dd>
        <dd>草莓</dd>
    </dl>
    <dl>
        <dt>奶茶店</dt>
        <dd>蜜雪冰城</dd>
        <dd>古茗</dd>
    </dl>

2345_image_file_copy_618.jpg

练习题

2345_image_file_copy_619.jpg

 <h3>绿叶学习网问卷调查</h3>
    <h4>你通过什么途径来到该学习网站的?</h4>
    <ol>
        <li>百度搜索</li>
        <li>360搜索</li>
        <li>其他</li>
    </ol>
    <h4>你觉得绿叶学习网页设计怎么样?</h4>
    <ol>
        <li>美观</li>
        <li>粗糙</li>
        <li>还行</li>
    </ol>
    <h4>绿叶学习网的HTML入门课程怎么样?</h4>
    <ul>
        <li>浅显易懂,重点突出</li>
        <li>内容丰富,技巧很多</li>
        <li>一句话,非常喜欢!</li>
    </ul>

2345_image_file_copy_620.jpg

 <ol>
        <li>发展历史</li>
        <li>管理团队
            <ul type="circle">
                <li>团队</li>
                <li>董事会</li>
            </ul>
        </li>
        <li>产品服务
            <ul type="circle">
                <li>门户网站</li>
                <li>在线游戏</li>
                <li>软件</li>
                <li>服务</li>
            </ul>
        </li>
        <li>企业文化
            <ul type="circle">
                <li>愿景</li>
                <li>价值观</li>
            </ul>
        </li>
        <li>社会责任</li>
        <li>涉查事件</li>
        <li>公司地址</li>
    </ol>

2345_image_file_copy_621.jpg

相关文章
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
|
9月前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
260 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
存储 开发框架 前端开发
在Vue&Element前端项目中,对于字典列表的显示处理
在Vue&Element前端项目中,对于字典列表的显示处理
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
284 20
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
249 16
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
322 11
|
前端开发
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
150 1
|
存储 运维 前端开发
中后台前端开发问题之定义编排对象如何解决
中后台前端开发问题之定义编排对象如何解决
90 0
|
前端开发 开发者
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。本文阐述 DefinePlugin 的原理、用法及案例,包括安装配置、具体示例(如动态加载资源、配置接口地址)和注意事项,帮助开发者更好地利用此插件优化项目。
427 0
|
存储 开发框架 前端开发
EAV模型(实体-属性-值)的设计和低代码的处理方案(3)-- 实体属性定义及前端列表展示和数据录入处理
EAV模型(实体-属性-值)的设计和低代码的处理方案(3)-- 实体属性定义及前端列表展示和数据录入处理

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 3
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 6
    实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    350
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    114
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    138
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    110
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    208
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    232
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    125
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    61
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    117
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    158