介绍
HTML 标题在创建结构良好的网页时至关重要。它们提供了层次结构,并帮助读者快速浏览网站。在本实验中,你将学习如何使用 <h1> 到 <h6> 标签创建不同级别的 HTML 标题。
注意:你可以在
index.html中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
添加 HTML 模板
第一步是创建一个名为 index.html 的 HTML 文件。你可以使用任何文本编辑器,例如 Notepad、TextEdit 或 Sublime Text。
通过在第一行输入 <!DOCTYPE html>,并在第二行和最后一行分别输入 <html></html> 标签,将基本的 HTML 结构添加到你的 index.html 文件中。
<!doctype html>
<html>
<head></head>
<body></body>
</html>
添加头部部分
在 <html> 标签内,使用 <head> 标签创建 head 部分。在 head 部分中,使用 <title> 标签添加网页的标题。
<!doctype html>
<html>
<head>
<title>My Web Page</title>
</head>
</html>
创建主体部分
使用 <body></body> 标签创建 body 部分。在 body 部分中,使用 <h1> 到 <h6> 标签添加不同级别的标题。
<!doctype html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>First Sub-Heading</h2>
<h3>Second Sub-Heading</h3>
<h4>Third Sub-Heading</h4>
<h5>Fourth Sub-Heading</h5>
<h6>Fifth Sub-Heading</h6>
</body>
</html>
请确保将 "Main Heading" 和子标题替换为你自己的相关标题。
使用 分组标题
你可以使用 <hgroup> 标签将多个标题分组。在下面的示例中,我们使用 <hgroup> 将最后三个标题分组。
<!doctype html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>First Sub-Heading</h2>
<h3>Second Sub-Heading</h3>
<h4>Third Sub-Heading</h4>
<hgroup>
<h4>Fourth Sub-Heading Part 1</h4>
<h5>Fourth Sub-Heading Part 2</h5>
<h6>Fourth Sub-Heading Part 3</h6>
</hgroup>
</body>
</html>
保存你的 index.html 文件并在浏览器中打开,查看你创建的标题。
总结
在本实验中,你学习了如何使用 <h1> 到 <h6> 标签创建 HTML 标题。标题对于创建结构良好的网页至关重要,同时也有助于搜索引擎优化(SEO)。请记住,每个 HTML 文件应仅包含一个 <h1> 标签,用于页面的主标题。



