2025年8月16日
当你决定踏入网站开发的世界时，HTML——超文本标记语言将是你的基石。作为网页设计的基础，掌握基础的HTML知识对于构建一个简单的页面至关重要。以下是一个基础HTML页面的示例，它将展示如何从最简单的结构开始创建一个完整的网页。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<!-- 页面的头部内容 -->
<header>
<h1>欢迎来到我的网站</h1>
</header>
<!-- 页面的导航栏内容 -->
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<!-- 页面主体内容 -->
<main>
<!-- 区块1：简介 -->
<section>
<h2>关于我们</h2>
<p>这是一个关于我们的简单介绍，欢迎您来到我们的网站。</p>
</section>
<!-- 区块2：联系方式 -->
<article>
<h2>联系我们</h2>
<address>
<strong>公司名称：</strong>某某科技有限公司<br>
<strong>地址：</strong>XX省XX市XXX大道XX号<br>
<strong>电话：</strong>010-12345678
</address>
</article>
<!-- 区块3：联系方式 -->
<section>
<h2>最新动态</h2>
<p>这里是关于我们最新的产品更新或者新闻内容。</p>
</section>
</main>
<!-- 页面的尾部内容 -->
<footer>
<p>© 2021 某某科技有限公司，保留所有权利。</p>
</footer>
</body>
</html>
分析网页的每一部分
- DOCTYPE 声明：声明当前文档的类型为 HTML。这里使用的是 HTML5 的标准。
- html 标签：这是整个文档的基础标记，包含了其他元素。
- head 标签：包含了页面的元数据，如字符集、标题和脚本链接等。这里的
<title>描述了网页标题。 - body 标签：包含了可见的页面内容。
- header、nav、main 和 footer：这些标签提供了语义化的网页结构。
<header>用于页面的头部内容，如导航和页面标题；<nav>提供网站中的导航链接；<main>包含实际的内容，而<footer>是页面的尾部，常用于版权或联系方式。
下面是页面内部每个部分的具体解释：
- h1、h2、p：这些标签分别用于定义标题和段落。
- ul、li 和 a：
<ul>创建一个无边框的项目符号列表，而<li>则是列表项；<a>提供超链接。 - article、section 和 address：这些标签分别表示文章、区块和联系信息。