什么是 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，让页面看起来更加美观。
