整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML的 <dd> 标签定义

带有项目和描述的描述列表:

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>


浏览器支持

所有主流浏览器都支持 <dd> 标签。


标签定义及使用说明

<dd> 标签被用来对一个描述列表中的项目/名字进行描述。

<dd> 标签与 <dl> (定义一个描述列表)和 <dt> (定义项目/名字)一起使用。

在 <dd> 标签内,您能放置段落、换行、图片、链接、列表等等。


HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中,<dd> 标签被用来描述一个定义列表中的条目。

在 HTML5 中,<dd> 标签被用来描述一个描述列表的项目/名字。


全局属性

<dd> 标签支持 HTML 的全局属性。


事件属性

<dd> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

果想开发一个网站,除了要精通后端开发语言(如:php)外,还要精通HTML代码。那么,什么是HTML呢?HTML是一种超文本标记语言,它包含有众多的标签,我们可以通过这些标签,把不同的internet资源(如:文字、图片、视频、音频、表单等等)整合在一个统一的文档中,这就形成了我们可以看得见的网页。那么,HTML都有哪些常用的标签呢?

一、文档类型声明。

html5文档类型声明:<!doctype html>

html4文档类型声明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主标签。

这个标签是html最外层的标签,所有其它的HTML标签都要放在这个标签的内部。

<html>

<head></head>

<body></body>

</html>

三、双标签和单标签。

在HTML标签中,有的标签是成双成对的,如:<html></html>(如下图);而有的标签是单个的,如:<hr>横线标签。

四、head头部标签。

head头部有以下几种常用标签:

meta:主要提供有关页面的元信息。

link:用来定义文档与外部资源的关系,最常用的是调用CSS样式文件。

title:页面标题的标签。

script:用来调用JS文件或JS代码。当然,script标签也可以在body主体中使用。

五、body主体标签。

1、块级标签。

块级标签的特性是:独自占有一行;标签的高与宽、边距可以修改;没有设置宽与高时,默认继承父标签。例如:


<div>div1</div>

<div>div2</div>

<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>


前端页面显示的效果如下图:

常用的块级标签有:div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、内联标签。

内联标签与块级标签不同,它不能独自占有一行,会与其它内联标签在同一样展示;内联标签的高与宽、上下边距是不能修改的,它里面的文字或图片有多高,它就是多高。例如如下代码:


<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>

<span>span1</span>

<span>span2</span>


CSS样式代码跟块级标签的例子是一样的,而显示的效果就不一样了,宽与高、上下边距没有效果。如下图:

常用的内联标签有:span、a、b、strong、i、em 。

3、内联块级标签。

内联块级标签,既有一些内联标签的特性,也有一些块级标签的特点:它不能独自占有一行,但是可以修改它的宽度和高度。例如下面这段代码:


<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>

<img src="w5.jpg" alt="">

<img src="w5.jpg" alt="">


CSS样式代码跟块级标签的那个例子仍然是一样的,图片的宽和高、上下边距修改成功,而2个图片不能独自占有一行,而是在同一行。如下图:

常用的内联块级标签有:img、input、textarea。

4、区域标签。

所谓区域标签,就是主要用来划分布局页面区域的。如:头部、主体内容、侧边栏、底部。这样划分的好处是:让页面布局更加清晰明了。

常用的区域标签有:header(头部)、footer(底部)、nav(导航)、aside(侧边栏)、section(主体)、article(独立内容)。

5、表单标签。

这个表单标签我们也是会经常用到的,如:登录网站的时候、提交数据的时候。如下图的评论表单:

​表单常用的标签有:form、input、select、option、textarea 。

以上就是我们开发网页时,会常用到的HTML标签。当然,HTML标签远不止这些,尤其是html5出来后,新增了许多的新标签。但是,有些标签在我们开发中很少用到,所以,这里就没有做相应的介绍。

您了解 HTML 和 Web 时,您可能会发现反复遇到一个通常未定义的特定单词。那个词是语义的。

你可能会读到诸如“我们去寻找语义元素”或“我们尽量做到语义化”之类的陈述,但永远无法清楚地了解语义这个词的含义。在本文中,我们将探索语义标记的世界,提出术语的有效定义,并将该概念应用于我们编写 HTML 标记的方式。

什么是语义标记?

根据 Dictionary.com 的说法,语义是指对单词或句子含义的正确解释。

从语义上使用一个词就是以一种与该词的含义正确对齐的方式使用它。当我们误用一个词时,我们并不是在语义上使用它。

许多 HTML 标签具有语义含义。也就是说,元素本身传达了一些关于包含在开始标签和结束标签之间的内容类型的信息。

例如,当浏览器遇到一个h1标题时,它会将该标记解释为表示该元素的内容h1构成了包含该元素的部分的最重要的标题。标签的语义含义h1是它用于标识特定网页或部分的最重要的标题。

启用语义标记的两种做法

如果我们要编写语义标记,必须采用两种不同的做法。

  1. 语义标记要求根据其预期目的使用 HTML 元素。
  2. 语义标记需要内容和表示的分离。

正确使用 HTML 元素

在编写语义标记时,我们使用 HTML 标签来告诉浏览器元素的内容。在语义标记中,标签不再只是让内容以人类可读的格式显示在网页上的一种方式。

标签本身成为一种告诉机器(无论是浏览器、计算机、智能手机还是其他智能设备)有关内容含义的方式。

要编写语义标记,我们必须正确使用 HTML 标签,以便我们的标记既是人类可读的,也是机器可读的。

分离内容和演示

过去,通常使用标记来定义样式和控制网页布局。

标题级别的选择不是基于层次结构,而是基于 Web 浏览器应用的样式,表格用于网页布局而不是组织表格数据,一些 HTML 标记(例如frameset)是为了明确定义网页而创建的布局等等。

当我们编写语义标记时,我们不能再根据视觉呈现来选择 HTML 元素。相反,我们根据语义含义选择 HTML 元素,然后使用CSS定义我们内容的视觉呈现。

在编写语义标记时,网页元素的表示与内容本身的标记完全分离和不同。

定义语义标记

考虑到这两种做法,我们可以这样定义语义标记:

语义标记是使用诸如 HTML 之类的标记语言通过正确选择标记元素来传达有关文档中每个元素的含义的信息,并保持标记和文档中包含的元素的视觉呈现之间的完全分离.

为什么语义标记很重要?

好的 CSS 可以使普通网站访问者看不到不好的标记。然而,再多的样式也不会让糟糕的标记对计算机化的访问者更有意义,例如搜索引擎网络爬虫、浏览器翻译工具或屏幕阅读器等辅助技术。

根据 Bruce Lawson的说法,HTML 元素的语义使用“增强了可访问性、可搜索性、国际化和互操作性”。换句话说,如果您希望所有访问者都可以访问您的网站、实现较高的搜索引擎排名、可供来自世界各地的访问者使用以及与其他 Web 服务有效交互,则必须编写语义标记。

编写语义标记是关于创建人类和计算机可读的 Web 内容。当人类和计算机都可以很好地阅读网络时,它就变得更易于访问,因为计算机能够更好地分析其内容、索引、交付它,并且开发人员能够更好地将不同的信息源结合到新的网络服务中.

我们如何编写语义标记?

我们通过正确选择和使用 HTML 标记以及通过选择传达有关标记所标记信息的某些标记来编写语义标记。

HTML 中有语义元素和非语义元素。非语义元素的示例是divspan。这些标签不会告诉计算机有关元素内容含义的任何信息。

虽然有用,并且在某些情况下可以很好地使用,但如果语义标签可用并且适合特定用途,请在使用非语义标签之前使用它。

许多语义标签来自谷歌和Opera等公司完成的网页标记分析。这些公司发现,许多网站使用idclass属性来暗示非语义元素内容的含义。

例如,他们发现了很多看起来像这样的 div:<div id="nav"><div id="header"><div id="footer">。此类发现有助于 W3C 识别和定位新的语义标签以包含在 HTML5 中,例如:nav和。我们可以将最常见和最重要的语义元素分为四类:header``footer``article``aside

  • 文档结构标签
  • 文本含义标签
  • 媒体类型标签
  • 相关标签

文件结构

过去,div元素是识别和分组网站部分的主要方式。然而,随着 HTML5 的发布,除了标签提供的分组属性之外,我们还有几个新标签可供使用,这些标签提供语义含义div

  • header用于网页标题的容器,通常包含网站徽标、标题元素和网站导航。
  • footer:用于网页页脚的容器,除了导航链接和返回网页顶部的链接外,通常还包含作者身份、联系方式和版权信息。
  • main:一个高级元素,用于包含单个网页独有的所有内容,并且不会在多个网页中重复。
  • nav:包含站点导航链接块的元素。该元素通常放置在页面headerfooter中,也可以在aside(侧边栏)元素中使用。
  • section:该section元素用于标记文档的各个部分,例如长篇文章的章节或主要部分。
  • aside:用于标识与页面上的主要内容相关但不属于文档主要流程的内容。例如,该什么是语义标记?

文本含义

在网络的早期,通常会看到这样的标记:

<style>
 .italics {     font-style: italic; }
</style> 
<p>Some paragraph content including one
   <span class="italics">italicized</span> word.
</p> 

今天我们(希望)不会梦想做这样的事情,因为span元素告诉浏览器和其他计算机访问者完全没有关于嵌套在开始和结束标记之间的文本的含义或目的。我们不会使用非语义标签,而是在应该以斜体显示的单词周围span添加标签。em通过使用em标签,使用屏幕阅读器或访问内容的其他计算机的访问者将了解应用标签以增加对已标记内容的强调。该em元素只是 HTML 标记如何为文本内容添加语义含义的一个示例。其他示例包括:

  • h1, h2, h3, h4, h5, 和h6: 标题元素标签用于标识应该作为标题出现的文本。最高级别或最重要的标题是按照重要性降序排列的标题h1级别。h2``h6
  • strong:带有标签的文本strong被赋予了额外的重要性,并且通常以粗体显示。
  • markmark标签用于突出在特定上下文中具有特定重要性的文本。例如,它可用于突出显示搜索结果页面中搜索词的每次出现。
  • cite:该cite元素用于标识部分内容源自的原始作品。
  • blockquoteand q: blockquoteand q(quote) 元素用于识别从另一个来源直接引用的文本。
  • time:该time元素可用于告诉浏览器、网络爬虫和其他智能设备,特定的内容位代表 24 小时制的时间或特定的日历日期。

我们的字体和 Web 排版教程提供了大量关于正确使用这些标签来为文本内容分配语义含义的详细信息。

媒体类型

HTML5 还包括三个标签,用于标识标签之间提供的媒体类型。这些标签有双重用途。首先,它们向浏览器发出信号,需要对特定技术资源(例如视频播放引擎)进行排队。其次,他们为内容赋予语义意义。

  • audio:用于向文档添加一个或多个音频内容源,并允许浏览器根据访问者的设备和浏览器选择最佳选项。
  • video:类似于audio元素,但用于将视频内容添加到标记文档。
  • picture:图片元素用于允许网络浏览器根据媒体查询的结果从可用选项中选择最佳图像。

您可以在我们的HTML5 媒体教程中了解有关嵌入audiovideo元素的更多信息。此外,我们关于在网络上使用图像的文章提供了有关何时使用该元素以及何时坚持使用该元素的更多信息。picture``img

相关标签

几个 HTML 元素用于表示多个元素之间的相关性。例如,使用有序列表 ( ol) 告诉浏览器列表中的项目彼此相关,需要以特定的顺序出现。用于表示多个元素之间相关性的其他元素包括:

  • ul: 无序列表用于表示列表中项目之间的关系,并表明它们不需要按特定顺序来理解。
  • figure:该figure元素用于将一段内容(例如图像、图表、图形或文本)和由figcaption标签标记的标题组合在一起。通过在标签之间嵌套标题和内容,figure可以识别嵌套元素之间的关系。我们的图片页面包含有关实施此有用标签的更多信息。
  • address:该属性用于将联系人信息与包含该address元素的父元素相关联。例如,当添加到 时article,该address元素提供文章作者的联系信息,当添加到网页时footeraddress标识网页所有者的联系信息。

结束的想法

如果您是 HTML 新手,请花时间学习如何在语义上使用所有这些不同的 HTML 标记。如果您不确定您使用的标签是否正确,请花几分钟时间进行一些研究。正如我们所见,使用正确的标签很重要。如果您已经使用 HTML 一段时间了,请花点时间了解新的 HTML5 元素以及如何正确使用它们。在过去的几年里,HTML 变得越来越复杂,继续使用div带有classid属性,但语义 HTML5 标记的可访问性和互操作性承诺足以接受这些新的语义元素。

那么你已经了解清楚语义标记了吗?