HTML(HyperText Markup Language)是构建 Web 页面结构的基础语言。HTML 由不同类型的标签组成,每种标签都有特定的用途。本文将全面介绍 HTML 标签的分类及其用法。
HTML 标签通常成对出现,由 开始标签 和 结束标签 组成,例如:
<p>这是一个段落p>
某些标签是 自闭合 的,例如
和
。
这些标签用于定义页面的整体结构。
:定义 HTML 文档的根元素。
:包含页面的元数据。
:包含页面的主要内容。
:定义网页的头部区域。
:定义网页的底部区域。
:页面的主要内容。
:定义一个独立的内容块。
:独立的文章内容。
:导航栏。
:侧边栏。:块级容器。
:行内容器。
示例:
<header>
<h1>网站标题h1>
<nav>
<ul>
<li><a href="#">首页a>li>
<li><a href="#">关于a>li>
ul>
nav>
header>
2.2 文本格式化标签(Text Formatting Tags)
用于修饰和格式化文本。
-
:标题标签。
:段落。
:换行。
:水平分割线。
/
:加粗。
/
:斜体。
:下划线。
:高亮。
/
:下标 / 上标。
:引用。
:代码片段。
示例:
<p><strong>重要:strong>请在 HTML 中使用语义化标签!p>
2.3 链接和媒体标签(Links & Media Tags)
示例:
<a href="https://www.example.com">访问示例网站a>
<img src="image.jpg" alt="示例图片">
2.4 表单标签(Form Tags)
用于创建用户输入界面。
:表单。
:输入框。
:标签。
:按钮。
:多行文本输入。
:下拉列表。
:下拉选项。
:分组表单。
:分组标题。
:可选输入项。
示例:
<form>
<label for="name">姓名:label>
<input type="text" id="name" name="name">
<button type="submit">提交button>
form>
2.5 表格标签(Table Tags)
用于创建表格结构。
:表格。
:行。
:表头。
:单元格。
:表格标题。
/ / :表格的不同部分。
示例:
<table>
<thead>
<tr>
<th>姓名th>
<th>年龄th>
tr>
thead>
<tbody>
<tr>
<td>张三td>
<td>25td>
tr>
tbody>
table>
2.6 交互元素(Interactive Elements)
/
:可折叠内容。
:对话框。
:进度条。
:度量值。
示例:
<details>
<summary>点击展开summary>
<p>这里是隐藏的内容。p>
details>
3. 语义化标签的重要性
HTML5 引入了很多语义化标签,如
、
、
等,提升了可读性和 SEO 效果。
示例:
<header>
<h1>网站标题h1>
header>
<section>
<article>
<h2>文章标题h2>
<p>文章内容...p>
article>
section>
4. 结论
本文介绍了 HTML 标签的主要类型及其使用示例。掌握这些标签的用法,可以帮助你更好地构建网页结构,提高网页的可读性和可维护性。希望这篇文章对你有所帮助!