1. 什么是 HTML？
HTML（Hypertext Markup Language）是一种用于创建网页的标准标记语言，它由一些尖括号包围的标记（tag）组成，这些标记告诉浏览器如何显示网页的内容。
HTML 使用结构化的标记来分别表示文本、图像、多媒体内容、表格、表单、布局等元素，它是实现网页交互和动态效果的基础。
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<p>这是我的第一个网页</p>
<img src="picture.jpg" alt="图片">
</body>
</html>
以上是一个简单的 HTML 页面，其结构如下：
DOCTYPE 声明 - 定义文档类型和版本
html 元素 - 整个网页的根元素
head 元素 - 页面信息的容器，包括标题、样式、脚本等
title 元素 - 页面的标题
body 元素 - 页面的主体部分，包括各种内容和元素
p 元素 - 段落标记，用于显示一段文本
img 元素 - 图像标记，用于显示一张图片
通过 HTML 标记和元素，我们可以构建出各种类型和样式的网页，从简单的个人主页到复杂的电子商务网站，都可以使用 HTML 实现。
2. HTML 的基本结构
2.1 DOCTYPE 声明
DOCTYPE 声明用于指示浏览器页面所使用的 HTML 版本和类型，它位于首行，即 HTML 文件的最开始处。
HTML5 的 DOCTYPE 声明如下：
<!DOCTYPE html>这个声明告诉浏览器，当前页面使用的是 HTML5，其他版本的 DOCTYPE 声明可以参考 这个链接。
2.2 HTML 元素
HTML 元素（Element）由开始标记和结束标记组成，中间包含内容或其它 HTML 元素。
开始标记和结束标记都是由尖括号包围的字符串，开始标记包括标记名称和任意数目的属性，结束标记只包括标记名称。开始标记和结束标记之间的内容是元素的内容。
例如，一个段落元素的开始标记是 <p>，结束标记是 </p>，中间的文本是这个段落的内容。
<p>这是一个段落</p>2.3 HTML 属性
HTML 属性（Attribute）指定了 HTML 元素的额外信息，它们以名称/值对的形式出现在 HTML 元素的开始标记中，属性值用引号括起来。
例如，一个图片元素可以包含 src 属性，指定图片的来源：
<img src="picture.jpg" alt="图片">上例中的 alt 属性，是用于显示图片的替代文本，当图片无法显示时将显示这段文本。
3. HTML的应用
3.1 网页结构
HTML 定义了网页的结构和内容，它提供的元素和标记可以划分页面，组织内容。比如可以使用标题（h1~h6）元素标记不同层次的标题，使用段落（p）元素标记内容段落，使用列表（ul、ol、li）元素标记项目，使用表格（table、tr、td）元素标记表格等等。
通过这些元素的组合和嵌套，我们可以构建出各种复杂的页面结构和内容，使其易于阅读和理解。
比如下面的代码实现了一个简单的网页结构，包含页面标题、导航栏和主体部分：
<!DOCTYPE html>
<html>
<head>
<title>我的网站</title>
</head>
<body>
<header>
<h1>我的网站</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<h2>欢迎来到我的网站</h2>
<p>这是一个演示网站，用于介绍 HTML 和 CSS。</p>
<h3>HTML 入门</h3>
<ul>
<li><a href="#">HTML 介绍</a></li>
<li><a href="#">HTML 元素</a></li>
<li><a href="#">HTML 属性</a></li>
</ul>
<h3>CSS 入门</h3>
<ul>
<li><a href="#">CSS 介绍</a></li>
<li><a href="#">CSS 语法</a></li>
<li><a href="#">CSS 属性</a></li>
</ul>
</main>
<footer>
<p>版权所有 ? 2022 我的网站。</p>
</footer>
</body>
</html>
这段代码实现了一个简单的页面，包含网站标题、导航栏和主体部分，主体部分又包括欢迎信息、HTML 入门和 CSS 入门等多个模块。它通过 HTML 的各种元素、属性和标记来定义页面结构和内容，使用户可以更好地理解页面内容和跳转导航。
3.2 表单和用户输入
HTML 还可以用于创建表单（form），使用户可以在网页上输入数据或选择选项，通过 HTTP 协议将数据传送到服务器端进行处理。
表单元素包括输入框（input）、文本框（textarea）、单选框（radio）、复选框（checkbox）、下拉列表（select）、按钮（button）等。HTML 还提供了一些属性，使我们可以限制输入内容、验证输入合法性，增强用户体验。
下面是一个简单的表单示例：
<form action="/submit" method="post">
<label>用户名：<input name="username" type="text"></label>
<label>密码：<input name="password" type="password"></label>
<label>性别：<input name="gender" type="radio" value="male">男</label>
<label><input name="gender" type="radio" value="female">女</label>
<label>爱好：<input name="hobby" type="checkbox" value="reading">阅读</label>
<label><input name="hobby" type="checkbox" value="music">音乐</label>
<label><input name="hobby" type="checkbox" value="movie">电影</label>
<label>城市：<select name="city">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option value="tianjin">天津市</option>
</select>
</label>
<button type="submit">提交</button>
</form>
该表单包括用户名、密码、性别、爱好和城市这几个输入项。用户可以填写或选择并提交，提交后提交结果将被处理并返回结果。
3.3 链接和导航
HTML 还可以用于实现链接和导航，使用户可以方便地在不同页面之间跳转，或在当前页面内导航到不同的位置。
HTML 的链接元素（a）用于定义超链接，属性主要包括 href、target 和 rel：
<a href="http://example.com" target="_blank" rel="nofollow">This is a link</a>
通过 href 属性指定跳转目标，可以是网址、电子邮件地址、电话号码等；通过 target 属性指定打开方式，如 _blank 表示在新标签页打开；通过 rel 属性指定与当前页面关联的其他文档资源，如预加载资源、引用样式表等。
HTML 还提供了锚点元素（a）和 ID 属性，使用户可以在当前页面内导航到指定位置。
例如，以下代码中的链接将跳转到 ID 属性为 "chapter2" 的元素位置：
<a href="#chapter2">Go to Chapter 2</a>
...
<h2 id="chapter2">Chapter 2</h2>
这样用户就可以点击链接从当前位置导航到第二章的位置，方便页面内导航。
3.4 媒体内容
HTML 还可以用于嵌入媒体内容，如图片、音频、视频等。
HTML 的图片元素（img）用于显示图片，可以通过 src 属性指定图片地址，alt 属性指定替代文本，当图片无法显示时显示该文本。
HTML 的音频元素（audio）和视频元素（video）用于播放音频和视频内容，可以通过 src 属性指定来源，使用 controls 属性显示播放控制栏，使用 autoplay 属性使其自动播放等等。
<img src="picture.jpg" alt="This is a picture">
<audio src="music.mp3" controls></audio>
<video src="video.mp4" controls autoplay></video>
4. 总结
HTML 是创建 Web 页面的基础，它定义了页面的结构和内容、表单和用户输入、链接和导航、媒体内容等核心功能。使用 HTML，我们可以构建各种类型和样式的网页，实现交互和动态效果，为用户提供更好的浏览体验。
HTML 不断发展和更新，目前的版本是 HTML5，它包括了更多的新功能和语法规则，使得 Web 应用程序更加强大和易用。