html代码案例
发布日期：2025-06-19 18:24:08
在网站建设中，通过实际的 HTML 代码案例能更直观地理解和掌握相关知识。下面将从多个方面给出不同的 HTML 代码案例，帮助大家更好地了解网站建设的基础。
基本网页结构案例
一个最基本的 HTML 网页包含文档类型声明、HTML 标签、头部标签和主体标签。以下是代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<meta name="viewport" content="width=device-width, initial - scale=1.0">
<title>基本网页</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个基本的 HTML 网页示例。</p>
</body>
</html>在这个案例中，<!DOCTYPE html> 声明文档类型为 HTML5。<html> 标签是整个 HTML 文档的根标签，lang="en" 表示语言为英语。<head> 标签包含了文档的元数据，如字符编码和页面标题。<body> 标签包含了网页显示的实际内容，这里有一个一级标题和一个段落。
超链接和图片案例
网页中经常会用到超链接和图片，以下是包含超链接和图片的代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<meta name="viewport" content="width=device-width, initial - scale=1.0">
<title>超链接和图片</title>
</head>
<body>
<h1>超链接和图片示例</h1>
<a href="https://www.example.com">访问示例网站</a>
<img src="example.jpg" alt="示例图片" width="300" height="200">
</body>
</html><a> 标签用于创建超链接，href 属性指定链接的目标地址。<img> 标签用于插入图片，src 属性指定图片的路径，alt 属性是图片的替代文本，当图片无法显示时会显示该文本，width 和 height 属性分别指定图片的宽度和高度。
列表案例
HTML 中有有序列表和无序列表，以下是示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<meta name="viewport" content="width=device-width, initial - scale=1.0">
<title>列表示例</title>
</head>
<body>
<h1>列表示例</h1>
<h2>无序列表</h2>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<h2>有序列表</h2>
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
</body>
</html><ul> 标签用于创建无序列表，列表项使用 <li> 标签。<ol> 标签用于创建有序列表，同样列表项也使用 <li> 标签。
表格案例
表格在展示数据时非常有用，以下是一个简单的表格代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<meta name="viewport" content="width=device-width, initial - scale=1.0">
<title>表格示例</title>
</head>
<body>
<h1>表格示例</h1>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>
</body>
</html><table> 标签用于创建表格，border="1" 表示表格有 1 像素的边框。<tr> 标签表示表格的行，<th> 标签用于表头单元格，<td> 标签用于普通数据单元格。
相关问答
1. 为什么在 HTML 中要使用 <!DOCTYPE html> 声明？
使用 <!DOCTYPE html> 声明是为了告诉浏览器当前文档使用的是 HTML5 标准。浏览器会根据这个声明来解析和渲染网页，如果没有这个声明，浏览器可能会进入怪异模式，导致网页显示出现问题。
2. 如何在 HTML 中创建一个邮件链接？
在 HTML 中创建邮件链接可以使用 <a> 标签，通过 href 属性指定邮件地址。示例代码如下：<a href="mailto:example@example.com">发送邮件</a>。当用户点击这个链接时，会打开默认的邮件客户端并创建一封新邮件，收件人地址为 example@example.com。