HTML参考手册：按字母顺序排列

🌐 A – D

A

• <a>：定义超链接。
• 属性：href, target, title
• 示例：

<a href="https://www.example.com" target="_blank" title="Example Link">Visit Example</a>

B

• <b>：定义粗体文本。
• 示例：

<p>This is a <b>bold</b> text.</p>

C

• <canvas>：用于绘制图形。
• 属性：width, height
• 示例：

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 100, 100);
</script>

D

• <div>：定义文档中的分区或节。
• 示例：

<div class="container">
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph inside a div.</p>
</div>

🌐 E – H

E

• <em>：定义强调的文本。
• 示例：

<p>This is an <em>important</em> message.</p>

F

• <form>：定义表单，用于用户输入数据。
• 属性：action, method
• 示例：

<form action="/submit-form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <button type="submit">Submit</button>
</form>

G

• <img>：定义图像。
• 属性：src, alt, width, height
• 示例：

<img src="image.jpg" alt="Description of image" width="300" height="200">

H

• <h1> 至 <h6>：定义标题。
• 示例：

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Sub Sub Heading</h3>

🌐 I – L

I

• <i>：定义斜体文本。
• 示例：

<p>This is an <i>italicized</i> text.</p>

J

• <iframe>：定义内联框架，用于嵌入另一个文档。
• 属性：src, width, height
• 示例：

<iframe src="https://www.example.com" width="600" height="400"></iframe>

K

• <kbd>：定义键盘输入。
• 示例：

<p>To save the document, press <kbd>Ctrl + S</kbd>.</p>

L

• <label>：定义表单标签。
• 属性：for
• 示例：

<label for="email">Email:</label>
<input type="email" id="email" name="email">

🌐 M – P

M

• <main>：定义文档的主要内容。
• 示例：

<main>
  <h1>Article Title</h1>
  <p>This is the main content of the article.</p>
</main>

N

• <nav>：定义导航链接。
• 示例：

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

O

• <ol>：定义有序列表。
• 示例：

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

P

• <p>：定义段落。
• 示例：

<p>This is a paragraph of text.</p>

🌐 Q – T

Q

• <q>：定义短引用。
• 示例：

<p>John said, <q>I am learning HTML.</q></p>

R

• <ruby>：定义 ruby 注释（中文注音）。
• 示例：

<ruby>
  汉字 <rt>hàn zì</rt>
</ruby>

S

• <section>：定义文档中的节。
• 示例：

<section>
  <h2>Section Title</h2>
  <p>This is the content of the section.</p>
</section>

T

• <table>：定义表格。
• 示例：

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>30</td>
  </tr>
</table>

🌐 U – Z

U

• <ul>：定义无序列表。
• 示例：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

V

• <video>：定义视频。
• 属性：src, controls, width, height
• 示例：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

W

• <wbr>：定义换行机会。
• 示例：

<p>This is a very long word that might need to be broken<wbr> at some point.</p>

X

• <xmp>：定义预格式化的文本。
• 示例：

<xmp>
  <p>This is a paragraph inside an xmp element.</p>
</xmp>

Y

• <yt>：（非标准标签）用于嵌入指定页面。
• 示例：

<iframe width="560" height="315" src="https://www.6x66.cn/" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Z

• <var>：定义变量。
• 示例：

<p>The area of a circle is π × <var>r</var><sup>2</sup>.</p>

🛑 常见问题及解决方案

问题1：标签不生效

解决方案：

• 检查拼写：确保标签和属性的拼写正确。
• 闭合标签：确保所有标签都正确闭合，特别是自闭合标签如 <img> 和 <input>。

问题2：样式不一致

解决方案：

• 使用CSS：确保所有样式都通过CSS定义，避免内联样式。
• 浏览器兼容性：测试不同浏览器，确保样式一致。

问题3：表单提交失败

解决方案：

• 检查表单属性：确保 action 和 method 属性正确。
• 验证输入：使用JavaScript进行表单验证，确保所有必填项都已填写。

问题4：视频加载缓慢

解决方案：

• 优化视频文件：压缩视频文件大小，使用合适的编码格式。
• 使用CDN：将视频文件托管在内容分发网络（CDN）上，以提高加载速度。

🎓 结论

通过本文的介绍，相信你已经对HTML的各种标签有了更深入的了解。这份按字母顺序排列的参考手册可以帮助你快速查找和理解各种HTML标签，提升你的开发效率。希望这些技巧能帮助你打造出更加优质的网页！

---

如果你有任何疑问或需要进一步的帮助，请在评论区留言。期待与你交流！🌟