讲给后台程序员看的前端系列教程(06)——HTML5标签(5)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lfdfhl/article/details/100547710

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

之前,我们已经学习了HTML常用标签、HTML文本标签、HTML语义标签、HTML结构标签;现在我们来继续学习HTML中常用的列表标签。

HTML列表标签

ul标签

可能猛地一下看到ul不知道它是干嘛的。可是,如果我告诉你它源自于英语短句unordered list,你是否就反应过来了呢?对的,它用于表示无序列表。请看如下示例:

<ul>
		<li>华为</li>
		<li>三星</li>
		<li>小米</li>
		<li>锤子</li>
</ul>

ol标签

看到ol,调皮的同学一下子就想到了office lady,办公室的白领丽人。嗯哼,不好意思,你想多了,此处的ol源自于英语短句ordered list,它用于表示有序列表。请看如下示例:

<ol>
	<li>状元</li>
	<li>榜眼</li>
	<li>探花</li>
</ol>

dl标签

dl标签表示自定义列表,它源于英语短句definition list。请看如下示例:

<dl>
	<dt>中国古典四大名著</dt>
	<dd>红楼梦</dd>
	<dd>三国演义</dd>
	<dd>西游记</dd>
	<dd>水浒传</dd>
	<dt>高尔基自传三部曲</dt>
	<dd>童年</dd>
	<dd>在人间</dd>
	<dd>我的大学</dd>
</dl>

源码和页面

在此,附上本节教程源码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表标签</title>
	</head>
	<body>
		<!-- ul标签用于无序列表 -->
		<ul>
			<li>华为</li>
			<li>三星</li>
			<li>小米</li>
			<li>锤子</li>
		</ul>

		<!-- ol标签用于有序列表 -->
		<ol>
			<li>状元</li>
			<li>榜眼</li>
			<li>探花</li>
		</ol>

		<!-- dl标签用于自定义列表-->
		<dl>
			<dt>中国古典四大名著</dt>
			<dd>红楼梦</dd>
			<dd>三国演义</dd>
			<dd>西游记</dd>
			<dd>水浒传</dd>
			<dt>高尔基自传三部曲</dt>
			<dd>童年</dd>
			<dd>在人间</dd>
			<dd>我的大学</dd>
		</dl>

	</body>
</html>

效果如下:
在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页