HTML基础介绍
发布: (2026年2月24日 GMT+8 16:30)
3 分钟阅读
原文: Dev.to
Source: Dev.to
什么是 HTML？
HTML 代表 超文本标记语言（Hyper Text Markup Language）。它用于创建网页并在互联网上组织内容。你看到的每个网站都是使用 HTML 构建的。
文档类型声明（Doctype）——它是什么以及我们为什么使用它
<!DOCTYPE html>为什么使用它
- 告诉浏览器文档使用的是 HTML5。
- 帮助浏览器正确渲染页面。
- 避免兼容性问题。
- 这是一条声明，而不是 HTML 标签。
示例
“ 标签
<head><head>
```` 元素包含关于网页的元信息。它包括：
- `` – 在浏览器标签页中显示的页面标题
- 元数据（字符集、视口、SEO 标签等）
- 链接到 CSS 样式表
- 在页面主体加载前需要的脚本（JavaScript）
````html
<head>
```` 中的内容 **不会** 直接显示在渲染后的页面上。
### 示例
```html
My First Page
```
## `` 标签
````html
<title>
```` 元素放在 `` 中。
**目的：** 在浏览器标签页中显示页面名称。
### 示例
```html
HTML Basics
```
浏览器标签页将显示 **HTML Basics**。
## `` 标签
````html
<body>
```` 元素包含网页的主要内容。`` 中的所有内容对用户可见。
### 示例
```html
## Welcome
This is my first HTML page.
```
## 块级元素
块级元素会在新行开始，并占据其容器的全部宽度。
### 示例
```html
## Section Heading
This paragraph is a block element.
```
## `` 标签
````html
<div>
```` 代表 **division**（区块）。它用于将元素组合在一起，充当容器或盒子，内部可以放置其他元素。
### 示例
```html
## Welcome
This is inside a div.
```
## `` 标签
````html
<p>
```` 代表 **paragraph**（段落）。用于以段落形式编写文本。
- 自动在新行开始。
- 同时也是块级元素。
### 示例
```html
This is a paragraph.
```
## 标题标签（`` 到 ``）
标题标签提供标题和副标题，建立层级结构以表示重要性。
| 标签 | 常见用途 |
|--------|---------------------------------|
| `` | 页面主标题 |
| `` | 子主题或章节标题 |
| `` | 子子主题 |
| … | … |
| `` | 最小的标题 |
所有标题标签都是块级元素。
### 示例
```html
## Main Heading
## Sub Title
### Small Heading
```
## 行内元素
行内元素 **不会** 在新行开始，只占据其内容所需的宽度。
### 示例
```html
This is a paragraph with **bold** and [a link](#) inline.
```