HTML 元素详解 - 技术栈

HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础语言。它通过**标签（Tag）**来描述网页的结构，而不是编写程序逻辑。

一、HTML 页面基本结构

一个完整的 HTML 页面如下：

html 复制代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>

<body>

    <h1>Hello World</h1>

</body>

</html>

结构说明：

元素	作用
`<!DOCTYPE html>`	声明HTML5文档
`<html>`	整个网页根元素
`<head>`	网页信息（不会显示）
`<body>`	网页内容（会显示）

二、HTML 元素组成

HTML元素通常由三部分组成：

复制代码

<p>我是一个段落</p>

包括：

复制代码

开始标签
<p>

内容
我是一个段落

结束标签
</p>

有些标签没有结束标签，例如：

html 复制代码

<br>
<hr>
<img>

称为空元素（Void Element）。

三、标题元素（Heading）

HTML提供6级标题。

html 复制代码

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

显示效果：

html 复制代码

一级标题（最大）

二级标题

三级标题

...

六级标题（最小）

说明：

h1最大
h6最小
一个页面建议只有一个h1

四、段落元素

html 复制代码

<p>这是第一段。</p>

<p>这是第二段。</p>

浏览器会自动换行。

例如：

html 复制代码

<p>
今天学习HTML，
非常简单。
</p>

浏览器显示：

html 复制代码

今天学习HTML， 非常简单。

HTML会忽略多个空格和换行。

五、换行元素

复制代码

<br>

例如：

复制代码

你好<br>
世界

显示：

复制代码

你好
世界

六、水平线

html 复制代码

<hr>

效果：

复制代码

------------------------

通常用于内容分隔。

七、注释

复制代码

<!-- 这是注释 -->

浏览器不会显示。

例如：

html 复制代码

<!-- 首页标题 -->

<h1>欢迎来到我的网站</h1>

八、文本格式元素

粗体

html 复制代码

<b>粗体</b>

斜体

html 复制代码

<i>斜体</i>

删除线

html 复制代码

<del>100元</del>

显示：

100元

下划线

html 复制代码

<u>下划线</u>

高亮

html 复制代码

<mark>重点</mark>

上标

html 复制代码

2<sup>3</sup>

显示：

2³

下标

复制代码

H<sub>2</sub>O

显示：

H₂O

九、列表元素

无序列表

html 复制代码

<ul>

<li>苹果</li>

<li>香蕉</li>

<li>西瓜</li>

</ul>

显示：

复制代码

• 苹果

• 香蕉

• 西瓜

有序列表

html 复制代码

<ol>

<li>第一步</li>

<li>第二步</li>

<li>第三步</li>

</ol>

显示：

复制代码

1.

2.

3.

自定义列表

html 复制代码

<dl>

<dt>水果</dt>

<dd>苹果</dd>

<dd>香蕉</dd>

</dl>

十、链接元素

html 复制代码

<a href="https://www.baidu.com">
百度
</a>

打开新窗口：

html 复制代码

<a href="https://www.baidu.com"
target="_blank">
百度
</a>

常见属性：

属性	作用
href	网址
target	打开方式
title	提示文字

十一、图片元素

html 复制代码

<img
src="cat.jpg"
alt="小猫"
width="300">

属性：

属性	作用
src	图片地址
alt	图片说明
width	宽度
height	高度

例如：

html 复制代码

<img src="dog.png"
width="200"
height="150">

十二、表格元素

基本结构：

html 复制代码

<table>

<tr>

<th>姓名</th>

<th>年龄</th>

</tr>

<tr>

<td>张三</td>

<td>18</td>

</tr>

</table>

组成：

复制代码

table
│
├──tr（行）
│
├──th（表头）
│
└──td（单元格）

十三、表单元素

输入框：

html 复制代码

<input type="text">

密码框：

html 复制代码

<input type="password">

按钮：

html 复制代码

<input type="button" value="按钮">

提交：

html 复制代码

<input type="submit">

复选框：

html 复制代码

<input type="checkbox">

单选框：

html 复制代码

<input type="radio">

文本域：

html 复制代码

<textarea></textarea>

下拉菜单：

html 复制代码

<select>

<option>中国</option>

<option>美国</option>

</select>

十四、容器元素

div（块级元素）

html 复制代码

<div>

这是一个区域

</div>

特点：

独占一行
用于布局
最常用

span（行内元素）

html 复制代码

<span>红色文字</span>

特点：

不换行
用于局部修改样式

十五、HTML5 常用语义化元素

HTML5 提供了更有语义的布局标签：

html 复制代码

<header>
    网站头部
</header>

<nav>
    导航栏
</nav>

<main>
    页面主体
</main>

<section>
    内容区域
</section>

<article>
    文章
</article>

<aside>
    侧边栏
</aside>

<footer>
    页脚
</footer>

相比大量使用 div，这些标签能让代码更易读，也更利于搜索引擎和辅助工具理解页面结构。

十六、常见 HTML 元素速查表

分类	标签	用途
文档	`html`、`head`、`body`	页面结构
标题	`h1`~`h6`	标题
文本	`p`、`strong`、`em`、`span`	文本内容
换行	`br`	换行
分隔	`hr`	水平分隔线
链接	`a`	超链接
图片	`img`	显示图片
列表	`ul`、`ol`、`li`、`dl`	列表
表格	`table`、`tr`、`th`、`td`	表格
表单	`form`、`input`、`textarea`、`select`	用户输入
布局	`div`、`header`、`nav`、`main`、`section`、`article`、`aside`、`footer`	页面布局