HTML（Hypertext Markup Language）是一种用于创建网页的标准化标记语言。它使用标签和属性来描述网页内容并添加样式和结构。MDN（Mozilla 开发者网络）是由 Mozilla 组织创建的一个网站，旨在为 Web 技术参考提供广泛的知识库。
一、HTML基础语法
HTML 使用标签或元素来表示内容。标签通常成对出现，开始标签用<tagname>表示，结束标签用</tagname>表示。在开始标签和结束标签之间，可以包含其他标签、属性和文本内容。以下是一个基本的 HTML 文档结构：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>页面主题</h1>
<p>段落内容</p>
</body>
</html>
DOCTYPE 是 HTML 的文档类型声明，告诉浏览器文档的类型和版本。<html> 元素是 HTML 文档的根元素，它包含 <head> 和 <body> 元素，其中 <head> 包含页面的元信息，如页面标题、关键字和描述信息。<body> 包含页面的主要内容。
二、HTML常用标签
HTML 有很多标签可以用来组织内容和添加样式。以下是一些常用标签的示例：
<p>
标签表示一个段落，并在段落之间添加空白。可以在 <p> 标签之间添加文本、图像、链接和其他 HTML 元素。
<a>
标签用于创建超链接，指向其他位置的页面或文档。可以使用相对或绝对 URL 来链接内部或外部资源。例如：
<a href="https://www.mozilla.org">Mozilla 首页</a> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML 文档</a>
<img>
标签用于在页面中插入图像。可以指定图像的 URL、宽度和高度等属性。例如：
<img src="image.png" alt="图片">
<ul>
和<li>
标签可用于创建无序列表。<ul> 表示无序列表，<li> 表示列表中的一个项目。例如：
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>
三、HTML表单
HTML 表单是一种用于收集用户输入信息的工具。它由 <form> 元素和与表单相关的控件组成，如输入框、单选框和复选框等。以下是一个表单的示例：
<form> <label for="name">姓名:</label> <input type="text" id="name" name="name"> <br> <label for="email">邮箱:</label> <input type="email" id="email" name="email"> <br> <label for="password">密码:</label> <input type="password" id="password" name="password"> <br> <input type="submit" value="提交"> </form>
在上面的示例中，使用了 <input> 元素来创建输入框和提交按钮。输入框也可以设置为单选框或复选框，通过指定不同的 type 属性来实现。
四、HTML布局和样式
HTML 可以通过 CSS（Cascading Style Sheets）来控制页面的样式和布局。CSS 允许将样式从 HTML 文档中分离出来，并在多个页面中共享。以下是一个使用 CSS 修改页面样式的示例：
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
color: #333;
font-size: 24px;
}
p {
color: #666;
line-height: 1.5em;
}
</style>
在上面的示例中，<style> 标签包含了样式规则，使用选择器来选择要应用样式的元素。例如，选择器 h1 将应用于所有 <h1> 元素，将标题的颜色设置为 #333，并将字号设置为 24px。同样，选择器 p 将应用于所有 <p> 元素，设置段落的颜色为 #666，并将行高设置为 1.5em。
五、HTML高级特性
除了上述基本功能外，HTML 还具有一些高级特性，如以下示例：
<canvas>
标签提供了一个用于绘制图形、图像和动画的 API。可以使用 JavaScript 在 <canvas> 元素内绘制直线、曲线、圆形等形状，并可添加图片和动画等内容。例如：
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Geo Location API
通过浏览器的地理位置 API，可以获取用户的地理位置信息，可以使用以下 JavaScript 代码来获取用户的纬度和经度：
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
console.log("纬度：" + position.coords.latitude);
console.log("经度：" + position.coords.longitude);
});
}
WebSocket
通过 WebSocket，可以在客户端和服务器之间建立持久的双向连接，并进行实时通信。示例代码如下：
var socket = new WebSocket("ws://www.example.com/socketserver");
socket.onopen = function() {
console.log("连接已建立");
}
socket.onmessage = function(event) {
console.log("收到消息：" + event.data);
}
socket.onclose = function() {
console.log("连接已关闭");
}
结论
HTML 是构建现代 Web 应用的必备技能之一，无论是创建网站、开发移动应用还是设计游戏，都离不开 HTML。MDN 是一个广泛的知识库，为 Web 技术爱好者和开发者提供了丰富的资源和文档，有需要学习 HTML 的人都可以通过 MDN 找到合适的学习资料与实例。
