在《什么是网页源代码》中，我们简要介绍了网页源代码的组成，其中 HTML（超文本标记语言）作为网页的骨架，负责组织和展示网页的基本结构和内容。
本篇文章将重点介绍 HTML 的相关概念，并通过实例帮助初学者更好地理解和掌握 HTML 的基本用法。
1. 什么是HTML？
HTML（HyperText Markup Language，超文本标记语言）是一种标记语言，用于创建和设计网页。HTML使用一系列称为“标签”（tag）的元素来定义网页的各个部分，如标题、段落、列表、图片等。通过组合不同的标签和属性，我们可以构建出丰富多样的网页内容。
2. HTML的基本结构
一个典型的 HTML 文档包括以下几个部分：
文档类型声明<!DOCTYPE html>：告诉浏览器这是一个 HTML5 文档。
- ⭕
<html>：HTML文档的根元素。 - ⭕
<head>：包含关于文档的元数据（metadata），如标题、字符集、引用的 CSS 和 JavaScript 文件等。 - ⭕
<body>：包含网页的所有可见内容，如文本、图片、链接等。
以下是一个简单的HTML文档示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的HTML示例</title>
</head>
<body>
<h1>欢迎来到我的网站！玩机大学</h1>
<p>这是一个简单的HTML示例。</p>
</body>
</html>
3. 常用HTML标签与实例
接下来，我们将介绍一些常用的 HTML 标签及其用途，并通过实例加以说明。
3.1 标题标签
<h1>至<h6>共有六个级别的标题标签，表示不同层次的标题。
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
3.2 段落标签
<p> 用于表示普通文本，每个<p>标签都会在内容前后自动添加空行，以形成段落。
<p>这是一个段落。</p> <p>这是另一个段落。</p>
3.3 链接标签
<a>用于创建超链接。href属性指定链接的目标地址。
<a href="https://www.cccitu.com/">访问玩机大学</a>
3.4 图片标签
<img>用于在网页上插入图片。src属性指定图片的来源，alt属性提供图片的替代文本，以便在图片无法加载时显示。
<img src="example.jpg" alt="示例图片">
3.5 列表标签
HTML 支持有序列表<ol>和无序列表<ul>。列表项使用<li>标签表示。
<!-- 无序列表 -->
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>步骤1</li>
<li>步骤2</li>
<li>步骤3</li>
</ol>
3.6 表格标签
<table>用于创建表格，<tr>表示表格行，<th>表示表头单元格，<td>表示表格数据单元格。
<table>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
3.7 表单标签
<form>用于创建表单，以收集用户输入的数据。<input>、<textarea>、<select>等标签用于定义不同类型的输入控件。
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<br>
<label for="email">电子邮件：</label>
<input type="email" id="email" name="email">
<br>
<label for="message">留言：</label>
<textarea id="message" name="message"></textarea>
<br>
<input type="submit" value="提交">
</form>
四、总结
本文为初学者介绍了 HTML 的相关概念，并通过实例展示了常用标签的用法。学习 HTML 是网页开发的第一步，通过掌握这些基本标签和属性，你可以逐渐构建更复杂的网页。
虽然现代网页开发涉及许多其他技术，如 CSS、JavaScript 等，但 HTML 始终是其基础，对 HTML 的理解和掌握将使你在网页开发领域更加自信。希望本文能帮助你建立扎实的 HTML 基础，为日后学习更高级的技术做好准备。
暂无评论
要发表评论，您必须先 登录