HTML中的几个基本概念------标签、元素、属性

程序员文章站 2024-03-20 09:24:22

...

刚开始接触到这些概念，可能会有些混淆，下面将这些概念以及这些概念之间的关系整理一下。。

HTML文档由元素构成，元素由开始标签、结束标签、属性及元素的内容4部分组成。

一：标签

标签用来标记内容块，也用来标明元素内容的意义（及语义），标签使用尖括号包围，如<html>和</html>，这两个标签表示一个HTML文档。

标签有两种形式：成对出现的标签和单独出现的标签，无论哪种标签，标签中不能包含空格，如下面所示都是错的。

1、成对出现的标签

成对出现的标签包括开始标签和结束标签，<开始标签>内容</结束标签>

所谓开始标签，及标志一段内容的开始，例如：

<html>表示HTML文档开始了；到</html>结束，从而形成一个HTML文档。

<head>和</head>标签描述HTML文档的相关信息，之间的内容不会在浏览器窗口上显示出来。

<body>和</body>标签包含所有要在浏览器窗口上显示的内容，也就是HTML文件的主体部分。

所谓结束标签，是指和开始标签相对的标签。结束标签比开始标签多一个斜杠"/"。

2、单独出现的标签

虽然并不是所有的开始标签都必须有结束标签对应，但是建议开始标签最好有一个相对应的结束标签关闭，使得网页易于阅读和修改。

但是如果在开始标签和结束标签之间没有内容，就不必这样做，如换行标签就可以写成<br>，

内容<br>
另一些内容<br>

其他没有相应的结束标签的标签有<area><base><basefont><br><col><frame><hr><img><input><param><link><meta>等

3、标签的嵌套

标签可以放在另外一个标签所能影响的片段中，以实现对某一段文档的多重标签效果，但是要注意必须要正确嵌套。

如下即是错误的：

<p><em>Hello Word!</p></em>

改正如下：

<p><em>Hello World!</em></p>

二：元素

标签是为一个元素的开始和结束做标记，网页内容是由元素组成的，一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。

如<head>和</head>是标签，但是下面的就是一个head元素：

<head><title>HTML中的几个基本概念------标签、元素、属性</title></head>

其中<title></title>是标签，但

<title>HTML中的几个基本概念------标签、元素、属性</title>

又是一个title元素，同时这个title元素又是嵌套在head元素中的另一个元素。

有一些元素有内容，但允许忽略结束标签：

如：

<p>我爱中国
<p>I Love China

它就等同于：

<p>我爱中国</p>
<p>I Love China</p>

有的元素甚至可以忽略开始标签：

如head、html、body都可以忽略开始标签。但是虽然HTML标准允许这样做，但是在实际应用中不推荐这样做，因为这会使得文档不易阅读。

三：属性

与元素相关的特性叫做属性，可以为属性赋值(每个属性对应一个属性值，所以也称为"属性/值”对)/,"属性/值"出现在元素开始标签的最后一个“>”之前，通过空格分割。可以有任意数量的“属性/值”对，并且它们可以已任意顺序出现，但是属性名是不区分大小写的）。属性的使用格式如下：

<元素 属性='值'>内容</元素>

引号可以是单引号，也可以是双引号；

<元素 属性="值">内容</元素>

tip: 属性值的定义

①：不定义属性值

HTML规定属性也可以没有值，如下：

<dl compact>

浏览器会使用compact属性的默认值，但有的属性没有默认值，因此不能省略属性值。

②：属性中的空白

属性值可以包含空白，但是这种情况下必须使用引号，因为属性之间是允许使用空白分割的，如下是正确定义的方法：

<img src="c:/Documents and Settings/test.jpg" width=256 height=34/>

下面则是错误的：

<img src=c:/Documents and Settings/test.jpg width=256 height=34/>

也就是说，定义属性值的时候一定是连续字符序列，如果不是连续序列则要加引号进行标注。

③：属性中使用单引号或者双引号

单引号和双引号都可以作为属性值。当属性值中具有单引号时，这时就不能再用单引号来去包括属性值了，这时候就可以用双引号来包括属性值；但是，当属性值中有双引号时，属性值中的双引号就要用数字字符引用（&#39）或者字符实体引用（&quot；）来代替双引号，如下例：

<p title="欢迎来到"这里"">青岛</p>

ps:补充一些关于属性的其他知识

在HTML中有很多属性是通用于每个标签的（并且基本是可选的），这些属性有一个名称——标准属性。

①:语言属性

它包含关于书写元素内容的自然语言（如汉语、英语、俄语等）的信息，包括前面提到的lang和dir.

lang,用于说明书写时所使用的内容的语言，en表示英语，zh表示汉语

dir，用于说明文本的阅读方向。如ltr表示从左到右读阅读；rtl表示从右向左读。通常不需要设置。

②：键盘属性

当某些元素，尤其是链接和表单控件处于预**状态时，被称为拥有焦点（focus）,因为浏览器的注意力集中在该元素上，准备**它。可以为一些元素设置焦点属性，以增强网页浏览者使用键盘在网页上导航上时的灵活性。

accesskey,为元素分配一个键盘控制键，以便在使用键盘导航时更方便。该属性的值时对应于访问键的字符。

tabIndex:指定元素在使用制表键便利链接和表单控件时所形成的访问顺序中的位置。

③：核心属性

核心属性可以包含在任何元素的开始标签内。

class,表示特定元素所属的一个类或一组。同一类的元素使用相同的CSS规则。类名定义可以根据自己的喜好定义，但是只能由字母、数字、连字符（-）和下划线（_）组成。当然，一个元素可以有好多个类，多个类之间要用空格分隔。注意:class的值是区分大小写的。

id，为元素指定一个唯一性的标识符。id属性不能含除连字符（-）和下划线（_）之外的任何标点符号和特殊符号。注意：id的值亦是区分大小写的。

style，为元素指定css属性。

title，为元素提供一个文本标题。

哈哈哈，关于标签，元素，属性的介绍大概就是这些，知道了这些入门的知识后，我们队网页设计有了进一步的了解，让我们一起加油吧！ HTML中的几个基本概念------标签、元素、属性

HTML中的几个基本概念------标签、元素、属性