什么是 HTML？
HTML 是 Hypertext Markup Language 的缩写，意为超文本标记语言。简单来说，HTML 是一种用于创建网页的标记语言。
HTML 基础
HTML 文件结构
HTML 文件必须包含以下几个部分：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页内容
</body>
</html>
其中，<!DOCTYPE html> 是文档类型声明，告诉浏览器该文件使用的是 HTML5 标准；<html> 元素包含了整个 HTML 文档；<head> 元素包含了文档的头部信息；<title> 元素定义了文档的标题，在浏览器标签栏中显示；<body> 元素包含了文档的主要内容。
HTML 元素
HTML 使用标记语言来定义网页的内容。标记由尖括号和元素名称组成。例如，<p> 元素表示一个段落，<a> 元素表示一个超链接。
每个 HTML 元素可以包含内容和属性。元素的开始标记和结束标记之间包含了元素的内容。例如，<p> 元素包含了一个段落的文本内容：
<p>这是一个段落。</p>
元素的属性提供了关于元素的更多信息。属性是在元素的开始标记中定义的。例如，<a> 元素的 href 属性指定了链接的 URL：
<a href="https://www.example.com">这是一个链接</a>
HTML 标题
HTML 标题是通过 <h1> 到 <h6> 元素定义的。<h1> 元素是最高级标题，<h6> 元素是最低级标题：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
HTML 段落
HTML 段落是通过 <p> 元素定义的：
<p>这是一个段落。</p>
HTML 超链接
HTML 链接是通过 <a> 元素定义的。href 属性指定了链接的 URL：
<a href="https://www.example.com">这是一个链接</a>
HTML 图像
HTML 图像是通过 <img> 元素定义的。src 属性指定了图像的 URL：
<img src="image.png" alt="图像描述">
HTML 列表
HTML 列表是通过 <ul>、<ol> 和 <li> 元素定义的。<ul> 元素用于无序列表，<ol> 元素用于有序列表，<li> 元素用于列表项：
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<ol>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>
HTML 高级
HTML 表格
HTML 表格是通过 <table>、<tr>、<td> 和 <th> 元素定义的。<table> 元素定义了整个表格，<tr> 元素定义了表格的行，<td> 元素定义了表格的单元格，<th> 元素定义了表格的表头单元格：
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td>女</td>
</tr>
</table>
HTML 表单
HTML 表单是通过 <form>、<input>、<select>、<textarea> 和 <button> 元素定义的。<form> 元素定义了整个表单，<input> 元素定义了表单的输入框，<select> 元素定义了下拉菜单，<textarea> 元素定义了多行文本输入框，<button> 元素定义了按钮：
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<label for="sex">性别：</label>
<select id="sex" name="sex">
<option value="male">男</option>
<option value="female">女</option>
</select>
<label for="intro">自我介绍：</label>
<textarea id="intro" name="intro"></textarea>
<button type="submit">提交</button>
</form>
HTML 实践
建立个人主页
以下是一个简单的个人主页示例：
<!DOCTYPE html>
<html>
<head>
<title>我的个人主页</title>
<meta charset="UTF-8">
<style>
body {
background-color: #f6f6f6;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1 {
margin: 0;
}
nav {
background-color: #ccc;
padding: 10px;
}
nav a {
display: inline-block;
padding: 5px 10px;
text-decoration: none;
}
nav a:hover {
background-color: #fff;
color: #333;
transition: background-color 0.3s ease;
}
section {
background-color: #fff;
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>我的个人主页</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">关于我</a>
<a href="#">联系我</a>
</nav>
<section>
<h2>欢迎访问我的个人主页！</h2>
<p>我是一名 Web 开发工程师。</p>
<p>我喜欢编写代码，设计网站，学习新技术。</p>
</section>
<footer>
© 2021 我的个人主页
</footer>
</body>
</html>
本示例包含了一个页头、一个导航栏、一个主要内容区域和一个页脚。样式使用了一些 CSS，让页面看起来更加美观。