什么是HTML？
HTML（HyperText Markup Language）是一种用于创建网页和其他类似文档的标准标记语言。HTML用于将结构化内容（如段落、图像、列表等）表示为不同元素，并为其添加样式和其他属性来创建网页。
HTML的限制集合
1. DOCTYPE声明
DOCTYPE声明告诉Web浏览器使用哪个HTML版本来呈现文档。它必须作为HTML文档的第一行，并指示使用哪种DTD（文档类型定义）。
<!DOCTYPE html>
<html>
<head>
<title>My HTML Document</title>
</head>
<body>
<p>This is some text.</p>
</body>
</html>
重要：DOCTYPE声明对于确保浏览器正确呈现您的网页非常重要。在HTML5中，您只需使用简单的DOCTYPE声明即可。
2.字符编码
字符编码告诉Web浏览器如何解释HTML文件中的字符编码。如果字符编码设置不正确，那么某些字符可能不会正常呈现，从而导致看起来不正常的文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My HTML Document</title>
</head>
<body>
<p>This is some text.</p>
</body>
</html>
重要：对于现代Web，UTF-8是一种通用的字符编码。在HTML5中，建议始终使用UTF-8字符编码。
3.语义元素
语义元素通过为您的页面添加结构和含义来帮助搜索引擎了解您的内容。语义元素应该描述页面上出现的内容，并且应该使用适当的元素来描述内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My HTML Document</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>Article Title</h2>
</header>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<section>
<h3>Section Title</h3>
<p>This is a section.</p>
</section>
<footer>
<p>This is the footer.</p>
</footer>
</article>
</main>
<footer>
<p>Copyright © 2022</p>
</footer>
</body>
</html>
在此示例中，我们使用了语义元素来表示“文章”，“头部”，“节”，“页脚”等元素。
重要：语义元素对于SEO（搜索引擎优化）特别重要。这些元素可以帮助搜索引擎了解您的网页，并使其排名更高。
4.表单元素
表单元素使您能够创建交互式表单，用户可以在其中输入信息。表单元素通常包括输入字段，单选按钮，复选框等。
<form action="/form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<br>
<input type="submit" value="Submit">
</form>
在此示例中，我们使用了输入字段，电子邮件字段和文本区域，以及提交按钮。
重要：表单元素使您能够收集信息，并通过您的网站将其发送给您。
5.媒体元素
媒体元素允许您在网页中嵌入视频，音频和图像。使用这些元素，您可以使您的网页更加丰富和互动。
视频：
<video src="video.mp4" controls>
<track kind="captions" src="captions.vtt" srclang="en">
</video>
在此示例中，我们使用了video元素来嵌入视频。我们需要提供视频的SRC，以便浏览器知道从哪里查找视频。我们还为视频添加了控件，并提供了字幕。
音频：
<audio src="audio.mp3" controls>
<source src="audio.ogg" type="audio/ogg">
<track kind="captions" src="captions.vtt" srclang="en">
</audio>
在此示例中，我们使用了audio元素来嵌入音频。我们需要提供音频的SRC，以便浏览器知道从哪里查找音频。我们还可以提供其他格式的SRC，以便浏览器能够找到最适合的格式。我们还为音频添加了控件，并提供了字幕。
图像：
<img src="image.jpg" alt="Description of image">
在此示例中，我们使用了img元素来嵌入图像。我们需要提供图像的SRC，以便浏览器知道从哪里查找图像。我们还为图像添加了alt属性，以提供图像的描述。alt属性对于启用屏幕阅读器的用户尤其重要，因为它可以帮助他们了解图片内容。
媒体元素对于通过视觉和听觉传达信息的网站非常重要。
6.样式表
样式表是一种定义网页样式的技术。通过将样式定义集中在单个文件中，您可以更轻松地对样式进行更改，并确保样式在整个网站中保持一致。
内部样式表：
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #ff0000;
font-size: 2em;
}
</style>
<title>My HTML Document</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is some text.</p>
</body>
</html>
在此示例中，我们使用了style元素来定义我们的样式。我们将背景颜色定义为浅灰色，并将字体设置为Arial sans-serif。我们还使h1的颜色为红色，字体大小为2em。
外部样式表：
external.css文件：
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #ff0000;
font-size: 2em;
}
HTML文件：
<html>
<head>
<link rel="stylesheet" href="external.css">
<title>My HTML Document</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is some text.</p>
</body>
</html>
在此示例中，我们将样式定义存储在external.css文件中，并将其链接到我们的HTML文件中。这使得我们可以维护我们的样式表，并使更改应用于整个网站。
样式表对于创建整洁，一致的网站非常重要。样式可以轻松地应用于多个元素，并容易进行更改。
7.脚本
脚本是一种用于创建交互式和动态网页的技术。脚本通常用于处理表格验证，动态内容更改，浏览器检测等。
<html>
<head>
<title>My HTML Document</title>
</head>
<body>
<button onclick="alert('Hello, World!')">Click Me!</button>
</body>
</html>
在此示例中，我们在页面上添加了一个按钮，并在用户单击按钮时触发JavaScript。我们使用onclick属性来定义何时触发JavaScript。
脚本对于创建交互性和动态性的网站非常重要。通过脚本，您可以使您的网站更加互动和个性化。
总结
在HTML中，有许多限制集合可用于启用额外的功能和结构。这些元素包括DOCTYPE声明，字符编码，语义元素，表单元素，媒体元素，样式表和脚本。每个元素都有其独特的作用和用途，并且在创建Web页面时都应该加以考虑。