以下是一些简单的 HTML 代码实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First HTML Page</title></head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML page.</p>
</body>
</html>
这个例子展示了一个最基本的 HTML 页面结构,包含了文档类型声明、<html>标签、<head>部分(其中设置了字符编码和页面标题)以及<body>部分的一个标题和一个段落。
实例二:添加图片和链接
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Image and Link Example</title>
</head>
<body>
<h1>Beautiful Picture</h1>
<img src="https://example.com/beautiful.jpg" alt="A beautiful scenery">
<p>Visit our <a href="https://www.yzwt.cn">website</a> for more.</p>
</body>
</html>
这里展示了如何在页面中插入一张图片和一个链接。图片通过<img>标签插入,设置了src属性指定图片的 URL 和alt属性提供替代文本。链接通过<a>标签创建,设置href属性指定链接的目标地址。这里用的是百度logo。
实例三:创建一个简单的列表
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>List Example</title>
</head>
<body>
<h1>Favorite Fruits</h1>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</body>
</html>
这个例子创建了一个无序列表,使用<ul>标签表示无序列表,<li>标签表示列表项,列出了一些最喜欢的水果。
实例四:表格展示数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table Example</title>
</head>
<body>
<h1>Student Scores</h1>
<table>
<tr>
<th>Student Name</th>
<th>Math Score</th>
<th>English Score</th>
</tr>
<tr>
<td>Tom</td>
<td>85</td>
<td>90</td>
</tr>
<tr>
<td>Lily</td>
<td>92</td>
<td>88</td>
</tr>
</table>
</body>
</html>
这里创建了一个表格来展示学生的成绩。<table>标签表示表格,<tr>表示表格行,<th>表示表头单元格,<td>表示普通数据单元格。