HTML - 标签参考
你好，未来的网页开发者们！我很高兴能成为你们在这激动人心的HTML标签世界中的向导。作为一名教授计算机科学多年的老师，我可以告诉你，理解HTML标签就像学习网页开发的字母表。那么，让我们开始吧！
HTML标签是什么？
HTML标签是网页的构建块。它们就像是告诉网页浏览器如何显示内容的秘密代码。想象你正在建造一栋房子 - HTML标签就是给你的网页提供结构的砖块、窗户和门。
例如，让我们来看一个简单的HTML标签：
<p>这是一个段落。</p>在这里，<p> 是开启标签，而 </p> 是关闭标签。它们之间的内容将会在你的网页上显示为一个段落。
为什么它们很重要？
HTML标签很重要，因为它们给你的内容提供了意义和结构。没有它们，你的网页将只是一堆混乱的文本！它们帮助浏览器理解每一块内容应该是什么，无论是标题、段落、图片还是链接。
HTML标签列表及示例
让我们探索一些最常见的HTML标签。我会为每个类别提供示例和解释。
HTML基础标签
这些是任何HTML文档的基础。
| 标签 | 描述 | 示例 |
|---|---|---|
<!DOCTYPE> |
定义文档类型 | <!DOCTYPE html> |
<html> |
HTML页面的根元素 | <html>...</html> |
<head> |
包含关于文档的元信息 | <head>...</head> |
<title> |
为文档指定标题 | <title>我的第一个网页</title> |
<body> |
定义文档的主体 | <body>...</body> |
这里是一个基本的HTML结构：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这里是我所有内容的地方。</p>
</body>
</html>这个结构就像是你的网页的骨架。我们将要学习的其他一切都将适应这个基本框架。
HTML格式化标签
这些标签帮助你格式化网页上的文本。
| 标签 | 描述 | 示例 |
|---|---|---|
<h1> 到 <h6>
|
标题 | <h1>主标题</h1> |
<p> |
段落 | <p>这是一个段落。</p> |
<br> |
换行 | 行1<br>行2 |
<strong> |
加粗文本 | <strong>重要！</strong> |
<em> |
强调文本 | <em>斜体</em> |
让我们看看这些标签的实际应用：
<h1>欢迎来到我的食谱集</h1>
<h2>食谱：巧克力曲奇</h2>
<p>这些饼干<stron>美味</stron>且<em>易于制作</em>！</p>
<p>材料：<br>
面粉<br>
糖<br>
巧克力碎片</p>这个示例展示了如何使用格式化标签来构建一个食谱页面。<h1> 和 <h2> 标签创建层次标题，而 <strong> 和 <em> 强调重要的单词。
HTML表单和输入标签
表单允许用户输入可以发送到服务器处理的数据。
| 标签 | 描述 | 示例 |
|---|---|---|
<form> |
定义HTML表单 | <form>...</form> |
<input> |
输入控件 | <input type="text" name="username"> |
<textarea> |
多行输入控件 | <textarea>在此输入文本...</textarea> |
<button> |
可点击按钮 | <button type="submit">发送</button> |
这里有一个简单的表单示例：
<form action="/submit-recipe" method="post">
<label for="recipe-name">食谱名称：</label>
<input type="text" id="recipe-name" name="recipe-name"><br><br>
<label for="ingredients">材料：</label>
<textarea id="ingredients" name="ingredients"></textarea><br><br>
<button type="submit">提交食谱</button>
</form>这个表单允许用户提交食谱名称和材料。action 属性指定表单数据应该发送到哪里，而 method 属性定义了如何发送。
HTML图像标签
图像使你的网页更具视觉吸引力和信息性。
| 标签 | 描述 | 示例 |
|---|---|---|
<img> |
嵌入图像 | <img src="cookie.jpg" alt="巧克力曲奇"> |
让我们在我们的食谱页面中添加一个图像：
<h2>巧克力曲奇</h2>
<img src="cookie.jpg" alt="一个美味的巧克力曲奇" width="300" height="200">
<p>这看起来是不是很美味？</p>src 属性指定图像文件，而 alt 提供屏幕阅读器使用或图像加载失败时的替代文本。
HTML音频和视频标签
这些标签允许你在网页中嵌入多媒体内容。
| 标签 | 描述 | 示例 |
|---|---|---|
<audio> |
嵌入音频内容 | <audio src="recipe.mp3" controls></audio> |
<video> |
嵌入视频内容 | <video src="baking.mp4" controls></video> |
以下是如何将烘焙教程视频添加到你的食谱页面中的示例：
<h3>观看烘焙过程</h3>
<video src="cookie-baking.mp4" controls width="400" height="300">
你的浏览器不支持video标签。
</video>controls 属性为视频播放器添加播放、暂停和音量控制。
HTML链接标签
链接是将网络编织在一起的线索，使用户可以在页面之间导航。
| 标签 | 描述 | 示例 |
|---|---|---|
<a> |
定义超链接 | <a href="https://www.example.com">访问Example.com</a> |
让我们为我们的食谱页面添加一些链接：
<p>查看我们的<a href="recipes.html">其他食谱</a>或<a href="https://www.cookingchannel.com" target="_blank">访问烹饪频道</a>获取更多灵感。</p>href 属性指定链接去的页面的URL。target="_blank" 属性在新标签页中打开链接。
HTML列表标签
列表帮助以清晰、易读的格式组织信息。
| 标签 | 描述 | 示例 |
|---|---|---|
<ul> |
无序列表 | <ul>...</ul> |
<ol> |
有序列表 | <ol>...</ol> |
<li> |
列表项 | <li>项目</li> |
让我们使用列表来组织我们的食谱材料和步骤：
<h3>材料：</h3>
<ul>
<li>2杯通用面粉</li>
<li>1杯巧克力碎片</li>
<li>1/2杯糖</li>
</ul>
<h3>步骤：</h3>
<ol>
<li>混合干性材料</li>
<li>加入湿性材料</li>
<li>加入巧克力碎片</li>
<li>在350°F下烘烤10-12分钟</li>
</ol>这个示例展示了如何创建无序列表（项目符号）和有序列表（编号）。
HTML表格标签
表格非常适合以行列形式显示数据。
| 标签 | 描述 | 示例 |
|---|---|---|
<table> |
定义表格 | <table>...</table> |
<tr> |
表格行 | <tr>...</tr> |
<th> |
表格标题 | <th>标题</th> |
<td> |
表格数据/单元格 | <td>数据</td> |
让我们为我们的饼干创建一个营养成分表：
<h3>营养成分（每份）</h3>
<table border="1">
<tr>
<th>营养素</th>
<th>含量</th>
</tr>
<tr>
<td>卡路里</td>
<td>150</td>
</tr>
<tr>
<td>脂肪</td>
<td>7g</td>
</tr>
<tr>
<td>碳水化合物</td>
<td>20g</td>
</tr>
</table>这创建了一个简单的表格，包含标题和数据单元格。border 属性为表格添加可见边框。
HTML样式和语义标签
这些标签可以帮助改善你的网页的结构和外观。
| 标签 | 描述 | 示例 |
|---|---|---|
<div> |
在文档中定义一个区域 | <div>...</div> |
<span> |
文本的行内容器 | <span style="color:red;">红色文本</span> |
<header> |
为文档或区域定义一个标题 | <header>...</header> |
<footer> |
为文档或区域定义一个页脚 | <footer>...</footer> |
让我们使用这些标签来改进我们的食谱页面结构：
<header>
<h1>我的食谱集</h1>
<nav>
<a href="index.html">首页</a> |
<a href="recipes.html">食谱</a> |
<a href="about.html">关于</a>
</nav>
</header>
<main>
<article>
<h2>巧克力曲奇</h2>
<!-- 食谱内容在这里 -->
</article>
</main>
<footer>
<p>© 2023 我的食谱集。保留所有权利。</p>
</footer>这些语义标签给你的页面结构提供了更多意义，这对浏览器和搜索引擎都有帮助。
HTML元标签
元标签提供了关于HTML文档的元数据。它们位于 <head> 部分内。
| 标签 | 描述 | 示例 |
|---|---|---|
<meta> |
指定关于HTML文档的元数据 | <meta charset="UTF-8"> |
以下是如何使用元标签的示例：
<head>
<meta charset="UTF-8">
<meta name="description" content="美味的巧克力曲奇食谱">
<meta name="keywords" content="饼干，烘焙，甜点">
<meta name="author" content="简· Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>巧克力曲奇食谱</title>
</head>这些元标签提供了关于字符编码、页面描述、关键字、作者和视口设置（用于响应式设计）的信息。
HTML编程标签
这些标签用于嵌入或引用外部内容或脚本。
| 标签 | 描述 | 示例 |
|---|---|---|
<script> |
定义客户端脚本 | <script src="script.js"></script> |
<noscript> |
为禁用脚本的用户定义替代内容 | <noscript>你的浏览器不支持JavaScript！</noscript> |
以下是如何使用这些标签的示例：
<head>
<script src="recipe-calculator.js"></script>
</head>
<body>
<!-- 其他内容 -->
<noscript>
<p>请启用JavaScript以使用配料计算器。</p>
</noscript>
</body><script> 标签链接到外部JavaScript文件，而 <noscript> 标签为禁用JavaScript的用户提供了消息。
就这样了！我们已经涵盖了从基本结构到更高级元素的广泛范围的HTML标签。记住，最好的学习方式是实践，所以尝试使用这些标签创建你自己的网页。实验，犯错误，然后从中学习。所有伟大的网页开发者都是从这里开始的！
快乐编码，愿你的网页总是渲染得美丽！
Credits: Image by storyset