首页 前端知识 剖析HTML 元素——WEB开发系列02

剖析HTML 元素——WEB开发系列02

2024-08-14 00:08:39 前端知识 前端哥 249 87 我要收藏

HTML元素是构成HTML文档结构的基本单位,定义了页面上的不同部分和内容。HTML元素可以包含不同类型的内容,如文本、图片、链接、表格等,每种元素都有其特定的用途和语义。通过组合和嵌套不同的HTML元素,可以创建复杂的网页结构和布局。


一、HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

开始标签 *

元素内容

结束标签 *

<p>

这是一个段落

</p>

<a href="default.htm">

这是一个链接

</a>

<br>

换行

 

开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。


二、HTML元素组成

每个HTML元素由以下部分组成:

  1. 开始标签(Opening tag):以左尖括号 < 开始,以右尖括号 > 结束,包含元素的名称。例如,段落元素的开始标签是 <p>
  2. 内容(Content):元素的实际文本或嵌套的其他HTML元素。内容出现在开始标签之后,结束标签之前。例如,<p> 元素的内容是段落中的文字。
  3. 结束标签(Closing tag):以左尖括号 <、斜杠 / 和元素名称开始,以右尖括号 > 结束。结束标签指示元素的结束位置。例如,段落元素的结束标签是 </p>
  4. 元素的整体结构:开始标签、内容和结束标签一起形成完整的HTML元素。例如,一个完整的段落元素如下所示:
登录后复制
<p>This is a paragraph.</p>

2372f440a7139a1e97f3e346c055c1c2.png

这个元素的主要组成部分包括:

  1. 开始标签(Opening tag):以左、右角括号包围的元素名称(这个例子中是 <p>)。开始标签指示元素的起始或开始生效的地方,它位于段落文本的开头。
  2. 内容(Content):元素的实际文本内容,即段落中的文字部分。
  3. 结束标签(Closing tag):与开始标签类似,但在元素名称之前有一个斜杠。结束标签表示该元素的终止位置。忘记包含结束标签是初学者常见的错误之一,会导致页面呈现出意外的结果。

三、嵌套的 HTML 元素

嵌套的HTML元素指的是一个HTML元素可以包含在另一个HTML元素内部。这种嵌套结构是HTML语言的一个关键特性,允许开发者创建复杂的网页布局和结构,以及定义更丰富的内容层级关系。

举例来说,可以将一个段落 <p> 元素嵌套在一个 <div> 元素内,如下所示:

b815b4d445b91eab727d5d49bbbdb257.png

<div>
    <p>This is a paragraph inside a division.</p>
</div>

在这个示例中,<p> 元素被嵌套在 <div> 元素的内部。<div> 元素通常用于组合和分组页面上的内容块。


另一个常见的例子是将链接 <a> 元素嵌套在段落 <p> 元素内:

29f0dff65686fe7fe5ce66fc859fb9b8.gif

<p>Visit our <a href="https://baidu.com">website</a> for more information.</p>

这里,<a> 元素被嵌套在 <p> 元素中,形成一个包含链接的段落。

通过合理和有效地嵌套HTML元素,可以更好地组织内容、优化页面结构,并提升页面的可访问性和用户体验。


四、块级元素和内联元素

在HTML中,元素可以根据它们的显示特性分为两种主要类型:块级元素和内联元素。

1、块级元素(Block-level Elements):

  1. 特点
  • 每个块级元素通常会在新的一行上开始,占据父元素的整个宽度。
  • 它们会创建一个“块”或“框”,用于结构化文档内容。
  • 块级元素可以容纳内联元素和其他块级元素。
  1. 常见的块级元素
  • <div>: 用于定义文档中的分区或节。
  • <p>: 用于定义段落。
  • <h1> to <h6>: 用于定义标题。
  • <form>: 用于创建表单。
  • <ul><ol><li>: 用于定义列表。

示例:

<div>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
</div>

2、内联元素(Inline Elements):

  1. 特点
  • 内联元素通常不会打断块级元素的排列,它们在同一行内显示,仅占据它们实际的大小空间。
  • 内联元素通常用于包裹文本片段或其他内联元素。
  1. 常见的内联元素
  • <span>: 用于对文本进行分组或设置样式。
  • <a>: 定义超链接。
  • <strong><em>: 用于强调文本内容。
  • <img>: 插入图像。

示例:

<p>Visit our <a href="https://example.com">website</a> for more information.</p>
<p><strong>Important:</strong> This is a critical message.</p>

3、区别总结:

  • 显示特性:块级元素通常占据整个父元素的宽度,而内联元素只占据它们需要的空间。
  • 排列方式:块级元素通常会从新的一行开始,而内联元素在同一行内显示。
  • 内容类型:块级元素常用于创建页面结构和布局,而内联元素常用于设置文本样式或包裹文本片段。

五、HTML 文档示例

<!DOCTYPE html>
<html>
  <body>
    <p>这是第一个段落。</p>
  </body>
</html>

解析:

<p> 元素

  • <p> 元素定义了一个段落,内容为:“这是第一个段落。”
  • 它由开始标签 <p> 和结束标签 </p> 组成。

<body> 元素

  • <body> 元素定义了整个 HTML 文档的主体部分,包含一个段落(<p> 元素)作为其内容。
  • <body> 元素由开始标签 <body> 和结束标签 </body> 组成。

<html> 元素

  • <html> 元素定义了整个 HTML 文档的根元素。
  • 它包含 <body> 元素作为其内容。
  • <html> 元素由开始标签 <html> 和结束标签 </html> 组成。

这段 HTML 文档示例包含了三个核心 HTML 元素:<html>、<body> 和 <p>。 <html> 元素作为文档的根元素,包含了整个文档的结构,其中 <body> 元素是文档的主体部分,而 <p> 元素则定义了一个具体的段落。


注:不要忘记结束标签

即使忘记了使用结束标签,大多数浏览器通常能正确地显示 HTML 内容。例如:

<p>这是一个段落<p>这是一个段落

这样的示例在浏览器中通常也能显示为两个段落。这是因为浏览器在解析 HTML 时会尝试修复未关闭的标签。但是不应该依赖这种行为。忘记使用结束标签可能会导致不可预期的结果或错误显示。正确的 HTML 编写应该包括始终使用匹配的开始和结束标签,以确保文档结构正确且在各种浏览器和环境中一致显示。


六、HTML 空元素

HTML 中的空元素是指没有内容的元素,它们在 HTML 中只有一个开始标签,没有对应的结束标签。这些空元素通常用于插入或嵌入其他内容,而不是定义内容本身。

在 HTML 中,常见的空元素包括:

  • <br>:换行符,用于在文本中创建换行。
  • <img>:用于插入图像。
  • <input>:用于创建输入字段。
  • <meta>:用于指定关于 HTML 文档的元数据信息。
  • <link>:用于在 HTML 文档中引入外部资源,如样式表。
  • <hr>:水平分隔线,用于分隔内容。

不是所有元素都拥有开始标签、内容和结束标签。一些元素只有一个标签,通常用来在此元素所在位置插入/嵌入一些东西。这些元素被称为空元素。例如:元素 <img> 是用来在页面插入一张指定的图片。

<img
  src="https://search-operate.cdn.bcebos.com/e8cbce1d53432a6950071bf26b640e2b.gif"
  alt="图标" />

35e70bb1ac7e73e77a9a95f148a54a06.png

显示如下:

419aacbc0396c56c3d302ebec2190460.png


如有表述错误及欠缺之处敬请批评指正。

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15451.html
标签
评论
发布的文章

HTML5 地理定位

2024-08-20 09:08:58

HTML5 的真相(一)

2024-08-20 09:08:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!