预计学习时间：45分钟
本节课将介绍HTML的基础知识和常用标签，让你能够理解HTML的结构和语法，以及学会使用常见的HTML标签来构建网页。
1. HTML简介
HTML（超文本标记语言）是用于创建网页的标记语言。它使用标签（tag）来描述网页的结构和内容，并通过标签之间的嵌套和属性来表达不同的意义和样式。
2. HTML文件和基本结构
一个HTML文件以.html为扩展名，它由HTML标签和文本内容组成。在开始编写HTML代码之前，我们先了解HTML文件的基本结构。
示例代码：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
<!-- 在这里编写页面内容 -->
</body>
</html>
解释：
<!DOCTYPE html>：声明文档类型为HTML5。<html>：HTML文档的根元素，包含了整个HTML页面的内容。<head>：头部元素，用于定义文档的一些属性和元数据。<meta charset="UTF-8">：定义文档使用的字符编码为UTF-8，确保页面能正确显示各种字符。<title>：定义网页的标题，将显示在浏览器的标题栏或标签页上。<body>：页面的主体内容，包含了实际显示在浏览器窗口中的内容。
3. HTML注释
HTML注释用于在代码中添加注解和说明，它不会被浏览器显示在网页中。通过注释，我们可以给自己或其他开发人员留下一些关于代码功能或用途的备注信息。
示例代码：
html
<!-- 这是一个HTML注释 -->
<p>这是一个段落。</p>
解释：
<!-- ... -->：注释的开始和结束标记，之间的内容被视为注释，不会被浏览器解析和显示。
4. 常用HTML标签
接下来，让我们了解一些常用的HTML标签及其用途。我们将在实例代码中使用这些标签，并为每个标签添加注释，以便更好地理解它们的作用。
标题标签
标题标签用于定义标题和子标题，共有六个级别，从<h1>到<h6>，依次表示不同的标题级别。
示例代码：
html
<!-- 这是一级标题 -->
<h1>欢迎来到我的网站！</h1>
<!-- 这是二级标题 -->
<h2>关于我们</h2>
<!-- 这是三级标题 -->
<h3>产品介绍</h3>
<!-- 这是四级标题 -->
<h4>
联系方式</h4>
<!-- 这是五级标题 -->
<h5>常见问题</h5>
<!-- 这是六级标题 -->
<h6>意见反馈</h6>
解释：
<h1>到<h6>：用于定义不同级别的标题，其中<h1>是最高级别的标题，<h6>是最低级别的标题。
段落标签
段落标签用于定义文本段落。
示例代码：
html
<!-- 这是一个段落 -->
<p>这是一个段落的内容。</p>
解释：
<p>：用于定义一个段落，其中的文本将被浏览器显示为一个自然换行的段落。
链接标签
链接标签用于创建超链接，让用户能够点击跳转到其他网页或同一页面的不同部分。
示例代码：
html
<!-- 这是一个外部链接 -->
<a href="https://www.example.com">点击这里访问示例网站</a>
<!-- 这是一个内部链接 -->
<a href="#section2">跳转到第二节</a>
<!-- 这是一个电子邮件链接 -->
<a href="mailto:info@example.com">联系我们</a>
解释：
<a>：用于创建链接，其中的href属性指定链接的目标，可以是一个URL、一个页面内的锚点（以#开头的ID），或者是一个电子邮件地址（以mailto:开头）。
图像标签
图像标签用于插入图像到网页中。
示例代码：
html
<!-- 这是一个图像 -->
<img src="image.jpg" alt="图片描述">
解释：
<img>：用于插入图像，其中的src属性指定图像的URL，alt属性用于提供图像的替代文本，当图像无法显示时，将显示替代文本。
列表标签
列表标签用于创建有序或无序列表。
示例代码：
html
<!-- 这是一个有序列表 -->
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<!-- 这是一个无序列表 -->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
解释：
<ol>：用于创建有序列表，其中的li标签表示列表项。<ul>：用于创建无序列表，也使用li标签表示列表项。
表格标签
表格标签用于创建数据表格。
示例代码：
html
<!-- 这是一个表格 -->
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>
解释：
<table>：用于创建表格，其中的tr标签表示表格的行，th标签表示表头单元格，td标签表示数据单元格。
表单标签
表单标签用于创建用户输入表单。
示例代码：
html
<!-- 这是一个表单 -->
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<button type="submit">提交</button>
</form>
解释：
<form>：用于创建表单，其中的label标签用于标注表单字段，input标签用于创建输入字段，button标签用于提交表单数据。
5. 实战案例
接下来，我们将结合前面学习的HTML知识，创建一个简单的网页示例，包含常见的HTML标签。
示例代码：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的网页示例</title>
</head>
<body>
<!-- 标题 -->
<h1>欢迎来到我的网页</h1>
<!-- 段落 -->
<p>这是一个简单的网页示例，用于演示HTML标签的使用。</p>
<!-- 链接 -->
<a href="https://www.example.com">点击这里访问示例网站</a>
<!-- 图像 -->
<img src="image.jpg" alt="示例图片">
<!-- 列表 -->
<h2>我的兴趣爱好</h2>
<ul>
<li>音乐</li>
<li>电影</li>
<li>阅读</li>
</ul>
<!-- 表格 -->
<h2>学生成绩</h2>
<table>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
<tr>
<td>张三</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>李四</td>
<td>80</td>
<td>95</td>
</tr>
</table>
<!-- 表单 -->
<h2>用户注册</h2>
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<button type="submit">提交</button>
</form>
<!-- 页面脚注 -->
<footer>
© 2023 我的网页示例. All rights reserved.
</footer>
</body>
</html>
解释：
- 在示例代码中，我们使用了前面学习的各种HTML标签来创建一个简单的网页示例，其中包含了标题、段落、链接、图像、列表、表格、表单和脚注等元素。
6. 学习本节内容对后续微信小程序开发的帮助
通过学习本节的HTML基础知识和常用标签，你将对微信小程序的开发有以下帮助：
- 微信小程序使用的是WXML（微信小程序的模板语言），它是基于HTML语法的一种扩展。通过学习HTML，你可以更好地理解WXML的结构和语法。
- 微信小程序的视图层主要使用WXML和WXSS（微信小程序的样式语言）来描述页面的结构和样式，而WXML中的标签和属性很多都来源于HTML标签和属性。
- 熟悉HTML标签的使用和常见属性的含义，可以帮助你更快地理解和使用微信小程序中的组件和功能。
7. 总结
在本节课中，我们学习了HTML的基础知识和常用标签，了解了HTML文件的基本结构、HTML注释的使用方法，以及常见标签的作用和用法。我们还通过实战案例演示了如何使用这些标签来创建一个简单的网页。通过学习本节内容，你已经掌握了HTML的基础，为后续的学习和实践奠定了坚实的基础。
8.HTML学习思路与方法
当你想学习更多HTML标签或查看新标签的文档时，有几个资源和方法可供参考：
- W3Schools：W3Schools是一个广泛使用的在线学习平台，提供丰富的HTML标签和属性的文档。你可以访问W3Schools的HTML教程来学习各种标签的用法和示例。
- MDN Web 文档：MDN Web 文档是Mozilla开发者网络提供的一个权威的Web技术文档库。它包含了HTML、CSS、JavaScript等各种Web技术的详细说明和示例。你可以访问MDN Web 文档的HTML部分来学习HTML标签和属性的使用。
- 在线搜索引擎：使用在线搜索引擎（如Google、Bing等）搜索特定的HTML标签或属性，你可以找到各种博客、教程和Stack Overflow等资源，以深入了解它们的用法和示例。
- 官方规范文档：如果你希望查看HTML标准的官方规范文档，可以参考W3C（World Wide Web Consortium）发布的HTML规范。你可以访问W3C HTML规范文档来了解HTML的各种标签和属性的定义和用法。
当你打开文档或教程时，你会看到标签和属性的说明、示例代码和用法细节。通常，文档会提供关于标签的描述、可用的属性列表以及它们的取值范围和用法。这样，你就可以自主学习和探索新的HTML标签。
记住，实践是学习的关键。尝试在你的HTML代码中使用新的标签和属性，并观察它们在浏览器中的效果。通过实际编码和实验，你将更好地理解和掌握HTML的各种标签和功能。
个人结语： 本节课GPT给的内容还是不错的，有常用标题推荐，有案例，并且结合本节内容还能给出最后汇总的示例Demo。最主要的还是讲述了如何去自主学习，和一些学习的平台（笔者喜欢MDN Web 文档）。技术这东西本身就是一直在更新迭代，学会了自学的方法掌握了思想和渠道，有利于后期开发的成长。
