118 lines
3.3 KiB
Markdown
118 lines
3.3 KiB
Markdown
|
---
|
|||
|
|
title: Elements
|
|||
|
|
localeTitle: 分子
|
|||
|
|
---
|
|||
|
|
# HTML元素
|
|||
|
|
|
|||
|
|
元素是HTML的构建块，用于描述网页的结构和内容。它们是超文本标记语言（HTML）的“标记”部分。
|
|||
|
|
|
|||
|
|
HTML语法使用尖括号（“<”和“>”）来保存HTML元素的名称。元素通常具有开始标记和结束标记，并提供有关其包含的内容的信息。两者之间的区别在于结束标记有正斜杠。
|
|||
|
|
|
|||
|
|
这是一个使用[p元素](#) （ `<p>` ）告诉浏览器一组文本是段落的示例：
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<p>This is a paragraph.</p>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
打开和关闭标记应该匹配，否则浏览器可能以意外的方式显示内容。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 自闭元素
|
|||
|
|
|
|||
|
|
某些HTML元素是自动关闭的，这意味着它们没有单独的结束标记。自闭元素通常会在文档中插入一些内容。
|
|||
|
|
|
|||
|
|
一个例子是[br元素](#) （ `<br>` ），它在文本中插入换行符。以前，自动关闭标签内部有正斜杠（ `<br />` ），但HTML5规范不再需要这样。
|
|||
|
|
|
|||
|
|
## HTML元素功能
|
|||
|
|
|
|||
|
|
有许多可用的HTML元素。以下是它们执行的一些功能的列表：
|
|||
|
|
|
|||
|
|
* 提供有关网页本身的信息（元数据）
|
|||
|
|
* 将页面内容结构化为部分
|
|||
|
|
* 嵌入图像，视频，音频剪辑或其他多媒体
|
|||
|
|
* 创建列表，表格和表单
|
|||
|
|
* 提供有关特定文本内容的更多信息
|
|||
|
|
* 链接到样式表，其中包含有关浏览器应如何显示页面的规则
|
|||
|
|
* 添加脚本以使页面更具交互性和动态性
|
|||
|
|
|
|||
|
|
## 嵌套HTML元素
|
|||
|
|
|
|||
|
|
您可以将元素嵌套在HTML文档中的其他元素中。这有助于定义页面的结构。只需确保标签首先从最里面的元素关闭。
|
|||
|
|
|
|||
|
|
正确： `<p>This is a paragraph that contains a <span>span element.</span></p>`
|
|||
|
|
|
|||
|
|
不正确： `<p>This is a paragraph that contains a <span>span element.</p></span>`
|
|||
|
|
|
|||
|
|
## 块级和内联元素
|
|||
|
|
|
|||
|
|
元素有两大类，称为块级和内联。块级元素自动从新行开始，而内联元素位于周围内容中。
|
|||
|
|
|
|||
|
|
帮助将页面组织成部分的元素（例如导航栏，标题和段落）通常是块级元素。插入或提供有关内容的更多信息的元素通常是内联的，例如[链接](#)或[图像](#) 。
|
|||
|
|
|
|||
|
|
## HTML元素
|
|||
|
|
|
|||
|
|
有一个`<html>`元素，用于包含HTML文档的其他标记。它也被称为“根”元素，因为它是其他HTML元素的父级和页面的内容。
|
|||
|
|
|
|||
|
|
这是一个带有[head元素](#the-head-element) ， [body元素](#the-body-element)和一个[段落](#the-p-element)的页面示例：
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<p>I'm a paragraph</p>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## HEAD元素
|
|||
|
|
|
|||
|
|
这是用于处理HTML文档的信息和元数据的容器。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
</head>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 身体元素
|
|||
|
|
|
|||
|
|
这是HTML文档的可显示内容的容器。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<body>...</body>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## P元素
|
|||
|
|
|
|||
|
|
创建一个段落，可能是最常见的块级元素。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<p>...</p>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## A（链接）元素
|
|||
|
|
|
|||
|
|
创建一个超链接，将访问者定向到另一个页面或资源。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<a href="#">...</a>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 其他资源
|
|||
|
|
|
|||
|
|
* [HTML段落](#)
|
|||
|
|
* [HTML br](#)
|
|||
|
|
* [HTML链接](#)
|
|||
|
|
* [HTML图片](#)
|
|||
|
|
* [HTML头](#)
|
|||
|
|
* [HTML正文](#)
|
|||
|
|
* [HTML DOCTYPE](#)
|