<!DOCTYPE html>
<html>
<head>
<title>轻松入门：编写简单网页结构代码</title>
</head>
<body>
<h1>搭建你的第一个网页框架</h1>
<p>在这个信息飞速发展的时代，几乎每个人都需要一些基本的网页知识。构建一个简单的网页并不像想象中那么复杂，只需要掌握一些基础的结构代码即可。</p>
<img src="https://webdev_resources/photos/website_structure.jpg" alt="网站结构示例图">
<h2>HTML文档类型声明</h2>
<p>当你开始编写一个HTML文件时，首先需要添加一条<!DOCTYPE html>的声明。这是告诉浏览器这是一个HTML5文件的标志。</p>
<pre><code><!DOCTYPE html>
</code></pre>
<h2>根元素和头部信息</h2>
<p>接下来是<html>标签，它是所有HTML文档的基础。在<head>标签内，我们可以设置文档的元数据，比如标题(title)。这是通过<title>标签实现的。</p>
<pre><code><html>
<head>
<title>我的网页</title>
</head>
</code></pre>
<h2>正文内容和一级标题</h2>
<p>在<body>标签内，我们将填入所有可见的页面内容。这里的<h1>标志符定义了一个一级标题，它用来突出显示页面的主要话题。</p>
<pre><code><body>
<h1>欢迎来到我的网页</h1>
</code></pre>
<h2>段落和图像元素</h2>
<p>在HTML中，<p>标签用于定义一个段落。而<img>标签则用来插入图片。在 img 标签内，你可以通过src属性指定图片的路径，并通过alt属性为用户提供文字替代描述。</p>
<pre><code><p>这是一个简单的HTML网页设计。</p>
<img src="https://picsm.photos/" alt="随机图片">
</code></pre>
<h2>无序列表结构</h2>
<p>在网站上列出项目或步骤时，我们通常会使用无序列表（<ul>和<li>）。这些标签帮你将每个元素以列表的形式组织在一起。</p>
<pre><code><ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</code></pre>
<h2>总结</h2>
<p>通过以上基本的HTML结构元素，你已经能够编写一个简单但功能全面的网页了。随着你对HTML语言的深入学习，你将能创造出更加复杂和个性化的网页。</p>
</body>
</html>