返回首页
当前位置: 主页 > 编程语言 > HTML教程 >

Html教程-以列表的形式展示网站的内容

时间:2017-01-23 22:50来源:电脑教程学习网 www.etwiki.cn 编辑:admin

本篇我们学习如何以列表的形式来展示你网站上的内容。

Html提供三种类型的列表:无序、有序和定义列表。本篇我们只学习前两种,在后面的HTML中级教程中学习定义列表。

按照下面的代码创建一个新的网页:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>我的第一个网页</h1>
<h2>这个网页是什么:</h2>
<p>是用HTML组合起来的简单网页</p>
<h2>这个网页的目的是什么:</h2>
<ul>
<li>是学习HTML知识</li>
<li>是为了谋一份了的工作</li>
<li>是为能够做一个漂亮的网站</li>
</ul>
</body>
</html>


保存后在浏览器中查看,你会发现:
<li>是学习HTML知识</li>
<li>是为了谋一份了的工作</li>
<li>是为能够做一个漂亮的网站</li>

被浏览器以下列方式呈现了:
·是学习HTML知识
·是为了谋一份了的工作
·是为能够做一个漂亮的网站

就是在每句话的前面都有项目符号(比如方块)的列表,这个就是无序列表

如何实现有序列表呢?只要把上面代码中的ul改成ol就可以了,这时候,每句话前面的项目符号都会变成编号,字母,或都数字。

改写上面的代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>我的第一个网页</h1>
<h2>这个网页是什么:</h2>
<p>是用HTML组合起来的简单网页</p>
<h2>这个网页的目的是什么:</h2>
<ol>
<li>是学习HTML知识</li>
<li>是为了谋一份了的工作</li>
<li>是为能够做一个漂亮的网站</li>
</ol>
</body>
</html>


保存,你会在浏览器中发现列表前的方式变成数字了,如下:
1.是学习HTML知识
2.是为了谋一份了的工作
3.是为能够做一个漂亮的网站

前面有讲到,有序列表前面可以是数字,也可以是字母,默认情况下是数字,如果我们想以字母来编号的话,只要为ol添加type属性就可以了,如下:

<ol type="A">
  <li>是学习HTML知识</li>
  <li>是为了谋一份了的工作</li>
  <li>是为能够做一个漂亮的网站</li>
</ol>


 

大家按照上面的代码多多实践吧。

------分隔线----------------------------
标签(Tag):html HTML初级教程
------分隔线----------------------------
推荐内容
猜你感兴趣