无序列表与有序列表

无序列表:

把W3School这个网站有关HTML 5的介绍,做成一个无序列表:

 代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>我的光荣与梦想</title>
 5     <Meta http-equiv="Content-Type" content = 
 6     "text/html;charset = utf-8"/>
 7 </head>
 8 <body>
 9 <h2>HTML 5</h2>
10 <ul>
11 <li><font size = "4">HTML 5是下一代的HTML。</font></li>
12 <li><font size = "4">HTML 5仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。</font></li>
13 <li><font size = "4">在 W3School 的 HTML 5 教程中,您将了解 HTML5 中的新特性。</font></li>
14 <li><font size = "4" color = "red"><u>现在就开始学习HTML 5!</u></font></li>
15 <!-- <u></u>表示给字体添加下划线 -->
16 </ul>
17 </body>
18 </html>

在以上代码中:做成无序列表的效果,需要用到标签<ul></ul>,然后在里面用<li></li>表示列表项。其余就很简单了。

效果

 除此之外,无序列表列表项前面的那个小点也是可以更改的,通过type属性来更改,来看代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>我的光荣与梦想</title>
 5     <Meta http-equiv="Content-Type" content = 
 6     "text/html;charset = utf-8"/>
 7 </head>
 8 <body>
 9 <h2>HTML 5</h2>
10 <ul type = "disc">
11 <li><font size = "4">HTML 5是下一代的HTML。</font></li>
12 <li><font size = "4">HTML 5仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。</font></li>
13 <li><font size = "4">在 W3School 的 HTML 5 教程中,您将了解 HTML5 中的新特性。</font></li>
14 <li><font size = "4" color = "red"><u>现在就开始学习HTML 5!</u></font></li>
15 </ul>
16 <hr/>
17 <!-- <u></u>表示给字体添加下划线 -->
18 <ul type = "circle">
19 <li><font size = "4">HTML 5是下一代的HTML。</font></li>
20 <li><font size = "4">HTML 5仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。</font></li>
21 <li><font size = "4">在 W3School 的 HTML 5 教程中,您将了解 HTML5 中的新特性。</font></li>
22 <li><font size = "4" color = "red"><u>现在就开始学习HTML 5!</u></font></li>
23 </ul>
24 <hr/>
25 <ul type = "square">
26 <li><font size = "4">HTML 5是下一代的HTML。</font></li>
27 <li><font size = "4">HTML 5仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。</font></li>
28 <li><font size = "4">在 W3School 的 HTML 5 教程中,您将了解 HTML5 中的新特性。</font></li>
29 <li><font size = "4" color = "red"><u>现在就开始学习HTML 5!</u></font></li>
30 </ul>
31 </body>
32 </html>

设置type="disc","circle","square"来改变,效果如下图:

 

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码