UL标签定义一个列表
UL包括内标签：dt 和dd这二个标签
dt是定义列表中的项目；
dd是描述列表中的项目；
下面是一个案例：
1.先看效果：
2.代码实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UL学习</title>
</head>
<style>
body {
margin:0px;
padding:0px;
font-size:12px;
}
dl, dt, dd {
margin:0px;
padding:0px;
}
dl {
width:640px;
}
dt {
float:left;
width:150px;
font:bold 12px/30px "宋体";
text-align:center;
color:#009;
background-color:#eaeaea;
}
dd {
float:left;
width:130px;
height:90px;
margin:30px 10px 0px -150px;
padding:10px;
color:#F06;
background-color:#eee;
}
strong
{
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
}
</style>
<body>
<dl>
<dt>这是新学习的UL</dt>
<dd>通过了<strong>w3c</strong>对ul的定义和通过互联网上的资料收集对这个标签有了新的认识.....</dd>
<dt>这是新学习的UL</dt>
<dd>通过了<strong>w3c</strong>对ul的定义和通过互联网上的资料收集对这个标签有了新的认识.....</dd>
<dt>这是新学习的UL</dt>
<dd>通过了<strong>w3c</strong>对ul的定义和通过互联网上的资料收集对这个标签有了新的认识.....</dd>
<dt>这是新学习的UL</dt>
<dd>通过了<strong>w3c</strong>对ul的定义和通过互联网上的资料收集对这个标签有了新的认识.....</dd>
</dl>
</body>
</html>
个人觉得ul里出现的标签最好一个dt对应着一个dd ，根据标签的定义更符合主义化；
dd：是描述列表的是项目。描述可以包括<p/><strong/><em/><del/><img/>等语义化标签，这个些标签可以对描述做出有强调、有突出、有图片 ,具体使用方式是根据你的实现内容来合理使用语义化标签的。
格式如下：
<dl>
<dt>这是一件真丝围巾，真便宜啊，快来买吧！</dt>
<dd>
<p>她们都说带上它很感性</p>
<p><em>打折价：</em><strong>20元</strong><i>原价：</i><del>99999元</del></p>
</dd>
<dt>这是一件真丝围巾，真便宜啊，快来买吧！</dt>
<dd>
<p>她们都说带上它很感性</p>
<p><em>打折价：</em><strong>20元</strong><i>原价：</i><del>99999元</del></p>
</dd>
<dt>这是一件真丝围巾，真便宜啊，快来买吧！</dt>
<dd>
<p>她们都说带上它很感性</p>
<p><em>打折价：</em><strong>20元</strong><i>原价：</i><del>99999元</del></p>
</dd>
<dt>这是一件真丝围巾，真便宜啊，快来买吧！</dt>
<dd>
<p>她们都说带上它很感性</p>
<p><em>打折价：</em><strong>20元</strong><i>原价：</i><del>99999元</del></p>
</dd>
</dl>
也可以每一对的dt dd都单独放到一对dl里面。
如果能通过css控制的效果，个人觉得最好是都放到一个dl里面。这个更像一个列表中定义多个列表项目和它对应的描述列表项目。
这个只是个人对标签的理解，理解不够深刻，希望和大家一起分享，相互交流学习！
- 大小: 41.1 KB
分享到：
相关推荐
HTML标签和属性总结 HTML标签是构建Web页面的基础，了解HTML标签的属性和使用方法是非常重要的。本文将详细介绍HTML标签...本文总结了HTML标签的种类、属性和使用方法，希望能够帮助初学者更好地学习和理解HTML语言。
这个压缩包文件提供了一个对HTML基础知识的简明总结，特别适合初学者快速入门和复习。以下是对这些知识点的详细解析： 1. **HTML基本结构**：HTML文档通常由`<!DOCTYPE html>`声明开始，表明文档类型为HTML5。接着...
总结来说，"UL+LI模拟selcet标签"是一种使用HTML、CSS和JavaScript创建自定义下拉菜单的方法。这种方法提供了更大的设计自由度，同时也允许开发者更好地控制用户体验。在压缩包中的`texiao3167_1560680856`文件中，...
无序列表则使用`<ul>`标签。 注释在HTML中通过`<!--`和`-->`包围，用于提供关于代码的解释，但不会在浏览器中显示。 HTML的学习不仅涉及以上基础概念，还包括表格、图像、链接、表单、CSS样式、JavaScript交互等多...
列表（list）有两种类型：无序列表（unordered list）用`<ul>`和`<li>`，有序列表（ordered list）用`<ol>`和`<li>`。`<div>`和`<span>`是通用容器，用于组合其他元素或应用样式。 HTML5引入了许多新特性，如`...
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，它是网页开发的基础，允许开发者通过一系列的标签来组织和格式化网页内容。...希望这份总结能成为您HTML学习之旅的有益指南。
HTML还包括超链接标签：、音频标签：、无序列表<ul>、有序列表、自定义列表等。 表格的定义格式是：，其中可以包含表头信息：<th></th>、单元格：<td></td>等。表单的定义格式是：，其中可以包含输入框：、文本框...
### HTML常用基础学习总结 #### 一、HTML简介与历史 **HTML**(HyperText Mark-up Language，超文本标记语言)是构建网页文档的基础语言之一，它由一系列的标签组成，这些标签用来描述文本、图像、音频等内容的显示...
HTML（HyperText Markup Language）是用于创建网页...总结，HTML标签是构建网页的基础，理解和熟练运用各种标签能有效提升网站的质量和易用性。不断学习和实践，结合最新的HTML5规范，将使你成为一名出色的网站开发者。
在ACCP 6.0的HTML学习笔记中，我们可以看到对HTML基本结构和常用标签的总结。 首先，HTML文档由`<html>`标签开始，`</html>`标签结束，它们构成了整个HTML文档的大框架。在`<html>`标签内，`<head>`和`<body>`标签...
在HTML课程中，常见的实践项目可能包括创建静态网页、理解和使用表单元素（如`<form>`、`<input>`和`<button>`），以及了解如何创建链接（`<a>`标签）和列表（`<ul>`和`<ol>`）。此外，课程可能还会涉及响应式设计，...
### HTML学习总结 #### 1. HTML的基本语法与结构 HTML（HyperText Markup Language）是一种标准标记语言，用于创建网页并定义其结构。它通过一系列的标签来组织内容。 ##### 1.1 开始标记与结束标记 HTML文档...
以下是对HTML标签的详细总结： 1. **基本标签**： - `<html>`、`<head>` 和 `<body>` 是HTML文档的基本骨架。`<html>` 是整个文档的根元素，`<head>` 包含元信息如标题，而`<body>` 包含实际的网页内容。 2. **...
总结起来，HTML的列表、表格、表单以及字符实体和语义化标签都是构建网页结构和交互性内容的关键元素。熟练掌握这些标签的使用，将有助于创建更加高效、可读和易于维护的网页。通过实践和案例分析，开发者可以进一步...
### HTML学习记录总结 在本篇文章中，我们将深入探讨HTML及其相关知识点，这些知识点主要源自一份个人HTML学习记录。这份记录不仅涵盖了基本的HTML标签使用方法，还涉及了一些CSS样式和HTML5的新特性。 #### ...
在“第1天--(下午)HTML常用标签总结、HTML表单详解.rar”这个压缩包中，我们很显然会看到关于HTML常用标签的总结以及HTML表单的深入解析。下面将对这两个主题进行详细的阐述。 首先，HTML常用标签是构建网页的基本...
总结来说，HTML帮助文件是学习HTML的必备工具，它包含了HTML标签的全面介绍和实例，能帮助学习者快速掌握网页制作的基本技能。通过深入理解并实践HTML标签，你可以创建出富有吸引力和功能性的网页，开启你的Web开发...