<!DOCTYPE html>
<html>
<head>
<title>40个常见的HTML标签及含义</title>
</head>
<body>
<h1>40个常见的HTML标签及含义</h1>
<p><strong>1. <!DOCTYPE></strong>: 声明文档类型，告诉浏览器使用哪种 HTML 或 XHTML 规范。</p>
<code><!DOCTYPE html></code>
<p><strong>2. <html></strong>: 根元素，表示 HTML 文档的开始和结束。</p>
<code><html></html></code>
<p><strong>3. <head></strong>: 包含元数据、标题、样式表链接等信息。</p>
<code><head></head></code>
<p><strong>4. <title></strong>: 定义文档的标题，显示在浏览器标签页上。</p>
<code><title>页面标题</title></code>
<p><strong>5. <body></strong>: 包含网页的主要内容。</p>
<code><body></body></code>
<p><strong>6. <h1> 到 <h6></strong>: 标题标签，<h1> 是最高级别，<h6> 是最低级别。</p>
<code><h1>这是标题 1</h1></code>
<p><strong>7. <p></strong>: 段落标签。</p>
<code><p>这是一个段落。</p></code>
<p><strong>8. <a></strong>: 超链接标签。</p>
<code><a href="https://example.com">点击这里</a></code>
<p><strong>9. <img></strong>: 图像标签。</p>
<code><img src="image.jpg" alt="描述图片的文字"></code>
<p><strong>10. <br></strong>: 换行标签。</p>
<code><br></code>
<p><strong>11. <hr></strong>: 水平线标签。</p>
<code><hr></code>
<p><strong>12. <ul></strong>: 无序列表标签。</p>
<code><ul><li>项 1</li><li>项 2</li></ul></code>
<p><strong>13. <ol></strong>: 有序列表标签。</p>
<code><ol><li>项 1</li><li>项 2</li></ol></code>
<p><strong>14. <li></strong>: 列表项标签。</p>
<code><li>列表项</li></code>
<p><strong>15. <div></strong>: 定义文档中的一个区域或节。</p>
<code><div>这是一个 div 元素</div></code>
<p><strong>16. <span></strong>: 定义文档中的一个部分，通常用于应用样式。</p>
<code><span>这是一个 span 元素</span></code>
<p><strong>17. <table></strong>: 表格标签。</p>
<code><table><tr><td>单元格 1</td><td>单元格 2</td></tr></table></code>
<p><strong>18. <tr></strong>: 表格行标签。</p>
<code><tr><td>单元格 1</td><td>单元格 2</td></tr></code>
<p><strong>19. <td></strong>: 表格数据单元格标签。</p>
<code><td>单元格内容</td></code>
<p><strong>20. <th></strong>: 表格标题单元格标签。</p>
<code><th>表格标题</th></code>
<p><strong>21. <form></strong>: 表单标签，用于收集用户输入。</p>
<code><form><input type="text" name="name"></form></code>
<p><strong>22. <input></strong>: 输入控件标签。</p>
<code><input type="text" name="name"></code>
<p><strong>23. <button></strong>: 按钮标签。</p>
<code><button>点击我</button></code>
<p><strong>24. <select></strong>: 下拉选择框标签。</p>
<code><select><option>选项 1</option><option>选项 2</option></select></code>
<p><strong>25. <option></strong>: 下拉菜单选项标签。</p>
<code><option>选项 1</option></code>
<p><strong>26. <textarea></strong>: 多行文本输入框标签。</p>
<code><textarea>多行文本输入框</textarea></code>
<p><strong>27. <label></strong>: 标签标签，关联表单控件。</p>
<code><label for="name">姓名:</label><input id="name" type="text" name="name"></code>
<p><strong>28. <fieldset></strong>: 分组表单控件标签。</p>
<code><fieldset><legend>个人信息</legend><input type="text" name="name"></fieldset></code>
<p><strong>29. <legend></strong>: 定义 <fieldset> 的标题。</p>
<code><legend>个人信息</legend></code>
<p><strong>30. <optgroup></strong>: 定义下拉列表中相关选项的组合。</p>
<code><optgroup label="水果"><option>苹果</option><option>香蕉</option></optgroup></code>
<p><strong>31. <output></strong>: 显示计算结果的标签。</p>
<code><output>计算结果</output></code>
<p><strong>32. <header></strong>: 定义文档或节的页眉。</p>
<code><header>这是页眉</header></code>
<p><strong>33. <footer></strong>: 定义文档或节的页脚。</p>
<code><footer>这是页脚</footer></code>
<p><strong>34. <nav></strong>: 定义导航链接的部分。</p>
<code><nav><a href="/home">首页</a><a href="/about">关于我们</a></nav></code>
<p><strong>35. <article></strong>: 定义独立的内容。</p>
<code><article>这是一篇独立的文章</article></code>
<p><strong>36. <section></strong>: 定义文档中的节。</p>
<code><section>这是文档的一个节</section></code>
<p><strong>37. <aside></strong>: 定义侧栏内容。</p>
<code><aside>这是侧栏内容</aside></code>
<p><strong>38. <figure></strong>: 定义自包含的内容，如插图、图表、照片等。</p>
<code><figure><img src="image.jpg" alt="图片描述"></figure></code>
<p><strong>39. <figcaption></strong>: 定义 <figure> 元素的标题。</p>
<code><figure><img src="image.jpg" alt="图片描述"><figcaption>图片标题</figcaption></figure></code>
<p><strong>40. <main></strong>: 定义文档的主要内容。</p>
<code><main>这是主要内容</main></code>
</body>
</html>上一篇：html font
下一篇：html预览
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站