html定义列表的使用(20)

2025-10-23 14:53:00

1、1.如图所示,我们新建一个记事本,并将记事本的名字改为“html定义列表的使

用(20).html”,并回车键确定,以使文件转化为浏览器可以打开的html网页

文件。

html定义列表的使用(20)

2、2.如图所示,我们在文件图标上鼠标右击,在弹出的下拉列表菜单中,我们依次

选择“打开方式(H)”,之后选择“Sublime Text”这个程序。

html定义列表的使用(20)

3、3.如图所示,我们写一个<!DOCTYPE html>标签用来声明这是一个html5的文档,

在写一个,<html>标签用来包含html文档的主主体部分。

html定义列表的使用(20)

4、4.如图所示,我们写一个<head>标签用来包含html文档的头部部分,

写上<title>标签用来包含页的标题,再写一个<meta>标签来设置文字的编码方

式为UTF-8,以次让浏览器更好的显示我们所编写的网页。

html定义列表的使用(20)

5、5.如图所示,我们写上html的主体用<body>标签包含,里面在写一个dl标签,来

定义一个定义列表。

html定义列表的使用(20)

6、6.如图所示,我们在定义列表里面写上dt标签用于写入定义的内容为“邓稼先”

,再写上dd标签,用于描述定义的内容为“伟大的科学家”,也就描述dt标签中

的内容。

html定义列表的使用(20)

7、7.如图所示,我们在定义列表里面写上dt标签用于写入定义的内容为“牛顿”,

再写上dd标签,用于描述定义的内容为“伟大的物理学家”,也就描述dt标签中

的内容。

html定义列表的使用(20)

8、8.如图所示,我们在定义列表里面写上dt标签用于写入定义的内容为“hui”,

再写上dd标签,用于描述定义的内容为“伟创造无限可能和more best people”

,也就描述dt标签中的内容。

html定义列表的使用(20)

9、9.如图所示,我们鼠标右击,在弹出的下拉列表菜单中,我们选择“在浏览器中

打开”这一项。

html定义列表的使用(20)

10、10.如图所示,我们看到其定义列表显示的定义内容在上面,而下面的描述内容

会缩进2个字符,看起来就是为上面的定义内容做解释的。

html定义列表的使用(20)

11、11.如图所示,这是本案例的源代码,以供大家参考哦!

<!-- 用<!DOCTYPE html>来声明这是一个html5的文档 -->

<!DOCTYPE html>

<!-- 用<html>标签来包含网页的主体 -->

<html>

<!-- 用head标签包含html的头部部分 -->

<head>

<!-- 用title标签来写入网页的标题 -->

<title>html定义列表的使用(20)</title>

<!-- 用meta标签来设置文档的编码格式,以便浏览器能够正

确解读网页 -->

<meta charset="utf-8">

<!-- 用style标签来包含网页中设置的样式,并声明其为css

类型 -->

<style type="text/css">

</style>

</head>

<!-- 用body标签包含html文档的主体部分 -->

<body>

<!-- dl标签用来定义列表,dt标签用来定义内容,dd标签用来写入描

述的内容 -->

<!-- 例子1 -->

<dl>

<dt>邓稼先</dt>

<dd>伟大的科学家</dd>

</dl>

<!-- 例子2 -->

<dl>

<!-- dt标签写入定义的内容 -->

<dt>牛顿</dt>

<!-- dd标签写入上面定义内容的描述 -->

<dd>伟大的物理学家</dd>

<dt>爱迪生</dt>

<!-- dd标签写入上面定义内容的描述 -->

<dd>伟大的发明学家</dd>

</dl>

<!-- 例子3 -->

<dl>

<dt>hui</dt>

<dd>创造无限可能和more best people</dd>

</dl>

</body>

</html>

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢