引言
在数字化时代，网页设计已经成为人们日常生活中不可或缺的一部分。HTML（HyperText Markup Language）作为网页设计的基石，掌握它对于想要进入网页设计领域的人来说至关重要。本文将带领大家从HTML的基础标签开始，逐步深入，最终搭建一个互动网页。
HTML基础标签
1. HTML结构
HTML文档的基本结构包括：
<!DOCTYPE html>：声明文档类型。<html>：定义整个HTML文档。<head>：包含文档的元信息，如标题、字符集等。<body>：包含文档的主体内容。
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<!-- 网页内容 -->
</body>
</html>
2. 文档标题
使用<title>标签定义网页标题，这将在浏览器的标签页中显示。
<title>HTML基础标签</title>
3. 文本内容
使用<h1>到<h6>标签定义标题，<p>标签定义段落。
<h1>HTML基础标签</h1>
<p>这里是网页的文本内容。</p>
4. 链接
使用<a>标签创建链接，href属性指定链接的目标地址。
<a href="https://www.example.com">访问示例网站</a>
HTML布局
1. 容器标签
使用<div>和<span>标签进行页面布局。
<div>这是一个容器。</div>
<span>这是一个内联元素。</span>
2. 表格
使用<table>、<tr>、<td>标签创建表格。
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
互动网页
1. 表单
使用<form>、<input>、<button>标签创建表单。
<form action="submit.html" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<button type="submit">提交</button>
</form>
2. JavaScript
使用JavaScript添加交互功能。
<script>
function sayHello() {
alert('Hello, World!');
}
</script>
总结
通过本文的学习，你已掌握了HTML的基础标签、布局以及如何搭建一个简单的互动网页。继续学习其他网页设计技术，如CSS和JavaScript，将使你成为一名优秀的网页设计师。
