如何使用HTML定义列表

在之前的文章中，我们介绍了无序列表和有序列表的使用方法。但是这两种列表只能按照顺序列出项目，并没有提供对每个项目进行描述的功能。而定义列表则可以在每个项目后面添加具体的描述，让列表更加丰富有用。

新建HTML文件

首先，我们需要新建一个HTML文件。将记事本的名字改为“html定义列表的使用（20）.html”，并将文件保存为HTML格式，以便浏览器可以正确打开。

打开文件

右击HTML文件图标，在弹出的下拉菜单中选择“打开方式（H）”，然后选择“Sublime Text”或者其他文本编辑器打开。

编写HTML代码

在文件中编写以下HTML代码：

lt;!DOCTYPE htmlgt;
lt;htmlgt;
lt;headgt;
  lt;titlegt;html定义列表的使用（20）lt;/titlegt;
  lt;meta charset"UTF-8"gt;
lt;/headgt;
lt;bodygt;
  lt;dlgt;
    lt;dtgt;邓稼先lt;/dtgt;
    lt;ddgt;伟大的科学家lt;/ddgt;
    lt;dtgt;牛顿lt;/dtgt;
    lt;ddgt;伟大的物理学家lt;/ddgt;
    lt;dtgt;huilt;/dtgt;
    lt;ddgt;创造无限可能和more best peoplelt;/ddgt;
  lt;/dlgt;
lt;/bodygt;
lt;/htmlgt;

保存并查看

保存文件后，右击HTML文件图标，选择“在浏览器中打开”选项。您将看到定义列表的内容在上方显示，而描述内容则会缩进2个字符，以与定义内容相区分。

源代码参考

以下是本案例的完整源代码：

lt;!DOCTYPE htmlgt;
lt;htmlgt;
lt;!-- 用lt;!DOCTYPE htmlgt;来声明这是一个HTML5文档 --gt;
lt;htmlgt;
lt;!-- 用lt;htmlgt;标签来包含网页的主体 --gt;
lt;headgt;
lt;!-- 用lt;headgt;标签包含HTML文档的头部部分 --gt;
lt;titlegt;html定义列表的使用（20）lt;/titlegt;
lt;!-- 用lt;titlegt;标签来写入网页的标题 --gt;
lt;meta charset"utf-8"gt;
lt;!-- 用lt;metagt;标签来设置文档的编码格式，以便浏览器能够正确解读网页 --gt;
lt;style type"text/css"gt;
lt;/stylegt;
lt;!-- 用lt;stylegt;标签来包含网页中设置的样式，并声明其为CSS类型 --gt;
lt;/headgt;
lt;!-- 用lt;bodygt;标签包含HTML文档的主体部分 --gt;
lt;bodygt;
lt;!-- lt;dlgt;标签用来定义列表，lt;dtgt;标签用来定义内容，lt;ddgt;标签用来写入描述的内容 --gt;
lt;!-- 例子1 --gt;
lt;dlgt;
lt;dtgt;邓稼先lt;/dtgt;
lt;ddgt;伟大的科学家lt;/ddgt;
lt;/dlgt;
lt;!-- 例子2 --gt;
lt;dlgt;
lt;!-- lt;dtgt;标签写入定义的内容 --gt;
lt;dtgt;牛顿lt;/dtgt;
lt;!-- lt;ddgt;标签写入上面定义内容的描述 --gt;
lt;ddgt;伟大的物理学家lt;/ddgt;
lt;dtgt;爱迪生lt;/dtgt;
lt;ddgt;伟大的发明学家lt;/ddgt;
lt;/dlgt;
lt;!-- 例子3 --gt;
lt;dlgt;
lt;dtgt;huilt;/dtgt;
lt;ddgt;创造无限可能和more best peoplelt;/ddgt;
lt;/dlgt;
lt;/bodygt;
lt;/htmlgt;

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。