零基础学习HTML(11)——ul标签、ol标签、dl标签

最新推荐文章于 2024-01-06 16:22:04 发布

Dragon水魅

最新推荐文章于 2024-01-06 16:22:04 发布

阅读量979

点赞数

分类专栏：零基础学习Web开发文章标签： web开发 html

本文链接：https://blog.csdn.net/qq_43650934/article/details/108018687

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

文章目录

- - 官方资料
  - 学习正文

注：学习笔记基于小甲鱼学习视频，官方论坛： https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

ul标签：https://man.ilovefishc.com/pageHTML5/ul.html
ol标签：https://man.ilovefishc.com/pageHTML5/ol.html
dl标签：https://man.ilovefishc.com/pageHTML5/dl.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十三节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
</head>
<body>
	<!--ul标签用于定义无序列表，li标签用于定义列表中的项目-->
	<ul>
		<li>Coffee</li>
		<li>Tea</li>
		<li>Me</li>
	</ul>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十三节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
</head>
<body>
	<!--ol标签用于定义有序列表，li标签用于定义列表中的项目-->
	<ol>
		<li>Coffee</li>
		<li>Tea</li>
		<li>Me</li>
	</ol>
</html>

在这里插入图片描述
使用CSS的 list-style-type 定制列表图标：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十三节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
	<!--方的，圆的，空心的，没有的-->
	<style>
		ul.a {list-style-type: square;}
		ul.b {list-style-type: disc;}
		ul.c {list-style-type: circle;}
		ul.d {list-style-type: none;}
	</style>
</head>
<body>
	<!--ol标签用于定义有序列表，li标签用于定义列表中的项目-->
	<ul class="a">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Me</li>
	</ul>
	
	<ul class="b">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Me</li>
	</ul>
	
	<ul class="c">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Me</li>
	</ul>
	
	<ul class="d">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Me</li>
	</ul>
</html>

在这里插入图片描述
使用CSS的 list-style-image 定制列表图标：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十三节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
	<style>
		ul {
			list-style-image: url("turtle.png");
		}
	</style>
</head>
<body>
	<ul>
		<li>HTML5 & CSS3</li>
		<li>JavaScript</li>
		<li>JQuery</li>
	</ul>
</html>

在这里插入图片描述
列表嵌套：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十三节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
</head>
<body>
    截止至今，小甲鱼的课程有这些：
    <ol>
        <li><del>《零基础入门学习C语言》</del></li>
        <li>《零基础入门学习汇编语言》</li>
        <li>《C++快速入门》</li>
        <li>《零基础入门学习DELPHI》</li>
        <li>《数据结构和算法》</li>
        <li>《WIN32汇编语言程序设计》</li>
        <li>《解密系列》
            <ul>
                <li>基础篇</li>
                <li>调试篇</li>
                <li>系统篇</li>
                <li>脱壳篇</li>
                <li>工具篇</li>
                <li>密码学</li>
            </ul>
        </li>
        <li>《Windows程序设计》（SDK）</li>
        <li>《零基础入门学习Python》</li>
        <li>《极客Python》
            <ul>
                <li>Git使用教程</li>
                <li>效率革命</li>
            </ul>
        </li>
        <li>《带你学C带你飞》
            <ul>
                <li>VIM快速入门</li>
                <li>C语言语法基础</li>
            </ul>
        </li>
        <li>《零基础入门学习Web开发》（HTML5&CSS3）</li>
        <li>《零基础入门学习Scratch》</li>
    </ol>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十三节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
</head>
<body>
	<!--dl标签定义列表，dt标签定义术语，dd标签定义描述-->
	<!--单条术语与描述-->
    <dl>
		<dt>fishc.com.cn</dt>
		<dd>一个神奇的论坛。</dd>
	</dl>
	
	<!--多条术语，单条描述-->
	<dl>
		<dt>fishc.com.cn</dt>
		<dt>bbs.fishc.com</dt>
		<dd>一个神奇的论坛。</dd>
	</dl>
	
	<!--单条术语，多条描述-->
	<dl>
		<dt>fishc.com.cn</dt>
		<dd>一个神奇的论坛。</dd>
		<dd>编程，从入门到入土。</dd>
	</dl>
	
	<!--多条术语，多条描述-->
	<dl>
		<dt>fishc.com.cn</dt>
		<dd>一个神奇的论坛。</dd>
		<dd>编程，从入门到入土。</dd>
		<dt>ilovefishc.com</dt>
		<dd>鱼C工作室的新主页。</dd>
	</dl>
</html>

在这里插入图片描述

Dragon水魅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
零基础学习HTML(11)——ul标签、ol标签、dl标签

文章目录官方资料学习正文注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php官方资料鱼C课程案例库：https://ilovefishc.com/html5/html5速查手册：https://man.ilovefishc.com/html5/css速查手册：https://man.ilovefishc.com/css3/学习正文ul标签：https://man.ilovefishc.com/pageHTML5/ul.htmlol标签：htt
复制链接

扫一扫

专栏目录