10 HTML基础入门

10 HTML基础入门

HTML文档结构

在学习HTML之前,首先需要了解HTML文档的基本结构。一个完整的HTML文档通常包含<html><head><body>三个主要部分。下面我们详细看看这三个部分的作用和示例。

<html>标签

<html>标签是HTML文档的根元素,所有其它标签都应当包含在这个标签内部。它通常还会包含lang属性,用于指定文档的语言。例如:

1
<html lang="zh">

<head>标签

<head>标签包含了文档的元数据,这些信息不会直接显示在网页上。<head>部分通常包括:

  • 文档标题,通过<title>标签来定义
  • 字符集的声明,通过<meta>标签
  • 外部样式表和脚本的引用

以下是一个示例:

1
2
3
4
5
6
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
<link rel="stylesheet" href="styles.css">
</head>

在上面的例子中,<meta charset="UTF-8">指定了页面的字符集为UTF-8,<title>标签设置了浏览器标题为“我的第一个网页”。

<body>标签

<body>标签包含网页的所有可见内容,也就是用户可以在浏览器中看到的部分。这包括文本、图片、链接等。以下是一个简单的示例:

1
2
3
4
5
<body>
<h1>欢迎来到我的网站</h1>
<p>这是我的第一个HTML网页。</p>
<a href="https://www.example.com">访问我的博客</a>
</body>

在这个例子中,使用了<h1>标签来显示标题、<p>标签来显示段落文本,以及<a>标签来创建一个链接。

整体示例

以下是一个完整的HTML文档结构的示例,它结合了上述所有标签:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是我的第一个HTML网页。</p>
<a href="https://www.example.com">访问我的博客</a>
</body>
</html>

小结

通过上面的内容,我们学习了HTML文档的基本结构,包括<html><head><body>标签的使用。掌握这些基础知识是学习HTML的第一步,接下来可以尝试添加更多的HTML元素,丰富网页内容。

10 HTML基础入门

https://zglg.work/html/10/

作者

AI教程网

发布于

2024-08-08

更新于

2024-08-10

许可协议