[HTML]全面说明如何使用div标签及其含义和作用!

“ div标签很难理解,因为用法尚未确定。”
“什么时候使用div标签?”

你有这个问题吗?相反,因为它是可以用于任何事物的“ div标签”,所以您将不知道如何使用它。即使所有标签都是“ div标签”,它也会按预期显示。但是,还有其他标签,它们也可以发挥作用。使所有内容都成为“ div标签”不是应该的。因此,在这里,我们将向初学者说明如何使用“ div标签”,尤其是与其他标签的用法区别。本文不适用于高级用户,因此经验丰富的用户可以跳过本文。

什么是div标签?

在HTML编码中,通常根据页面组成的目的使用不同的标签。换句话说,根据目的可以使用一些标签,通过使用它们,搜索引擎可以轻松地理解所写内容。相反,对于搜索引擎而言,无目的地创建标签或替换“ div标签”而不使用应使用的标签是非常繁重的工作。

换句话说,让我们首先了解适合您目的的标签。

主要标签

这是HTML5中经常使用的标签示例。在HTML中,布局是根据页面的目的完成的,因此搜索引擎可以轻松地了解页面的目的。以下标签的作用是清楚地告诉搜索引擎在其中写了什么。

标签类型 描述
h标签 创建标题的标签。 h1-h6有6种类型,具体取决于重要性程度。
p标签 形成一个段落。用作句子组合时使用。
ul标签/ ol标签/ li标签 形成清单。 li不是编号列表,ol是编号列表。
一个标签 形成指向同一页面或另一页面的链接。
img标签 显示图像。
表单标签/输入标签 形成输入表格。
表标签/ tr / td标签 形成表格的表格(行和列)。
文章标签 用于独立物品(文本)。
块引用标签 添加注释时使用。
强标签/ em标签 在您要在文本中强调的地方使用它。

当上述标签无法使用时,会有一个“ div标签”。当您开始学习时,往往会在不知道使用哪个标签的情况下经常使用“ div标签”,但是快速浏览“ html5的主要标签”是个好主意。现在让我们开始解释“ div标签”。

定义

“ div标签”是没有特殊含义的标签。换句话说,它是一个标记,“目的尚未确定,因此您可以根据创建者的意愿对其进行命名”。无色标签并不能告诉搜索引擎明确的目的,但是页面的设计绝对需要这种自由度。

目的

如果继续进行生产,很难仅使用固定标签来创建站点,因此为了使页面结构易于理解,最好将现有标签放在一起并创建一个由几个块组成的组。很容易理解。

“ div标签”允许您自由组合元素并将其识别为块。但是要小心创建不必要的块。给它起一个描述性的名称,并力求将各个元素的数量减至最少。理想的是任何人都可以看到的“组织”。

特征

与“内联元素”相对,“ div标签”被称为块元素。该块元素具有以下特征:元素将自动插入并且元素向下连接。另外,“ div标记”几乎总是被赋予一个名称(属性),例如“ class”或“ id”。其他标签也被附加,但是在大多数情况下,几乎总是与“ div标签”附加。

如何使用div

当您要将元素分组在一起并给出单独的说明时,将使用“ div标签”。换句话说,就设计而言,当您要对“ sample_1”和“ sample_2”给出不同的说明时,请在“ class attribute / id attribute”中给出唯一的名称,并在那里单独给出说明。指令在另一个名为“ CSS”的文件中给出。

元素以及父元素和子元素的分组

通常,当试图实现具有复杂结构的布局时,“ div标签”可能会多次被“ div标签”包围。这称为元素分组。但是,不要盲目地分组它们,而要有目的地分组它们。分组元素是当您要向组提供一些设计说明时。即使您创建的新组没有明确的说明,或者即使您可以使用现有的“ div标签”给出说明,该代码也将被浪费,并且第三方将很难看到。

对组进行分组时,较高级别的元素称为父元素,而较低级别的元素称为子元素。然后,对父元素的指令将继承到子元素,但是如果将指令独立地给予子元素,则该指令具有优先权。

您可以将块元素包含在“ div标签”中,如下所示。您可以多次将“ div标签”与“ div标签”括起来,但是不能将块元素“ div标签”放在“内嵌元素”内,例如“ span标签”。

主块元素和内联元素

如上所述,块元素自动具有换行符,并且块从上到下连接,但是内联元素不具有换行符,并且其特征是并排。

元素类型 标签
块元素 div标签
h标签
p标签
ul(ol)/ li标签
表标签
内联元素 一个标签
跨度标签
img标签
强标签

“ div标签”和“ span标签”之间的区别

通常会提到“ div标签”和“ span标签”之间的区别,但是如果您了解上面的block元素和inline元素之间的区别,就可以了。 “ span标签”用于将图标和字母分组为小块并装饰字母,而不是将元素分组为大组。

div类和div id之间的区别

当处理“ div标签”时,您将有机会看到带有“ class”或“ id”的代码(或同时带有两者的代码)。对于何时使用“ class”和“ id”,初学者往往会感到困惑。首先,在使用“类”时,请记住以下几点:

  • 相同的类名称可以在多个地方使用。在这种情况下,css指令会在多个地方应用。假设在多个地方使用相同的设计。
  • 可能有多个类名。也就是说,“ class =”aaa bbb ccc”」という書き方は可能。

另一方面,“ id”必须是“唯一的”。在其他任何地方都找不到相同的名称。如果您进一步学习javascript(jquery)等,您会觉得在更多情况下,您可以使用“ id”给出说明,但首先,“页面中的一个id(这意味着只有一个相同的名称。可以将id换成另一个名称)“。

命名规则

可以自由给出“类名”和“ id名”,但是有一些命名约定。

  • 使用半角字母数字字符(不要使用日语)。
  • 以字母开头,而不是数字。
  • 可以使用“-(连字符)”和“ _(下划线)”,但不使用其他符号。

CSS中描述的差异

“ class”和“ id”的CSS表示法也有所不同。在CSS中,“类”由“。”表示,而“ id”由“#”表示。例如,有以下HTML。

<div class="tag">
 
</div>
<div id="wrap">

</div>

另一方面,CSS编写如下。

.tag{

}

#wrap{
	
}

概要

“ div”标签易于使用,因此请注意不要无限期地使用它。以下是此“ div标签”的摘要。

  • “ div标签”是没有特殊含义的标签,可以相对自由地使用,但是如果有目的标签,则优先使用它。
  • “ div标签”是一个块元素,形成一个包含多个元素的组。给小组一个明确的设计目的,避免不必要地分组元素。
  • “ div标签”是一个块元素。您不能使用内联元素来封闭块元素。
  • 您可以将“ class”,“ id”或两者都分配给“ div标签”。 “类”可以有多个相同的名称,但是“ id”只有一个名称。
  • CSS表示法对于“ class”和“ id”是不同的。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。