100个HTML标记语言的常用标签及属性

hhb_618

已于 2023-04-19 14:26:41 修改

阅读量398

点赞数

分类专栏：前端文章标签： html 前端 java

于 2023-04-19 14:25:33 首次发布

本文链接：https://blog.csdn.net/m0_55877125/article/details/130243257

版权

前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

以下是100个HTML标记语言的常用标签及属性，并且附带有示例：

1. <!DOCTYPE>：定义文档类型。示例：<!DOCTYPE html>
2. <html>：定义 HTML 文档。示例：<html lang="en">
3. <head>：定义文档头部区域。示例：<head><title>My Webpage</title></head>
4. <title>：定义文档标题。示例：<title>My Webpage</title>
5. <body>：定义 HTML 文档的主体。示例：<body><h1>Welcome to my webpage</h1></body>
6. <h1>-<h6>：定义标题。示例：<h1>大标题</h1>
7. <p>：定义段落。示例：<p>这是一段文字。</p>
8. <a>：定义超链接。示例：<a href="https://www.example.com">链接文本</a>
9. <img>：定义图像。示例：<img src="image.jpg" alt="图片说明">
10. <ul>：定义无序列表。示例：<ul><li>列表项1</li><li>列表项2</li></ul>
11. <ol>：定义有序列表。示例：<ol><li>列表项1</li><li>列表项2</li></ul>
12. <li>：定义列表项。示例：<ul><li>列表项1</li><li>列表项2</li></ul>
13. <br>：定义换行符。示例：<p>这是第一行<br>这是第二行</p>
14. <hr>：定义水平线。示例：<hr>
15. <table>：定义表格。示例：<table><tr><th>表头1</th><th>表头2</th></tr><tr><td>单元格1</td><td>单元格2</td></tr></table>
16. <tr>：定义表格行。示例：<table><tr><td>单元格1</td><td>单元格2</td></tr></table>
17. <td>：定义表格单元格。示例：<table><tr><td>单元格1</td><td>单元格2</td></tr></table>
18. <th>：定义表格表头单元格。示例：<table><tr><th>表头1</th><th>表头2</th></tr></table>
19. <form>：定义表单。示例：<form action="submit.php" method="post">表单内容</form>
20. <input>：定义输入控件。示例：<input type="text" name="username">
21. <textarea>：定义多行文本框。示例：<textarea name="content"></textarea>
22. <button>：定义按钮。示例：<button>点击我</button>
23. <select>：定义下拉菜单。示例：<select name="city"><option value="BJ">北京市</option><option value="SH">上海市</option></select>
24. <option>：定义下拉菜单选项。示例：<select name="city"><option value="BJ">北京市</option><option value="SH">上海市</option></select>
25. <label>：定义表单标签。示例：<label for="username">用户名：</label><input type="text" id="username" name="username">
26. <fieldset>：定义表单字段集。示例：<fieldset><legend>个人信息</legend>表单内容</fieldset>
27. <legend>：定义表单字段集的标题。示例：<fieldset><legend>个人信息</legend>表单内容</fieldset>
28. <div>：定义文档中的区块。示例：<div>区块内容</div>
29. <span>：在行内定义一个小块级别的元素。示例：<p>今天的天气很好，<span style="color:red">阳光明媚</span>，温度适宜。</p>
30. <header>：定义页面或区块的页眉。示例：<header><h1>网站名称</h1><nav>导航菜单</nav></header>
31. <nav>：定义页面的导航链接部分。示例：<nav><a href="/">首页</a><a href="/about">关于我们</a></nav>
32. <section>：定义页面或区块的节。示例：<section><h2>特色产品</h2>产品列表</section>
33. <article>：定义独立的文章内容。示例：<article><h2>文章标题</h2>文章内容</article>
34. <aside>：定义页面或区块的侧栏内容。示例：<aside><h3>公告栏</h3>公告内容</aside>
35. <footer>：定义页面或区块的页脚。示例：<footer><p>版权信息</p></footer>
36. <style>：定义样式表。示例：<style>body {background-color: #fff;}</style>
37. <script>：定义脚本。示例：<script>alert("Hello World!")</script>
38. <meta>：定义文档的元数据。示例：<meta charset="UTF-8">

39. <link>：定义文档与外部资源之间的链接关系。示例：<link rel="stylesheet" type="text/css" href="style.css">
40. <base>：定义文档内所有链接的基础URL。示例：<base href="https://www.example.com/">
41. <iframe>：定义内联框架，用于在网页中嵌入其他网页或应用程序。示例：<iframe src="https://www.example.com/" width="100%" height="500"></iframe>
42. <audio>：定义音频内容。示例：<audio src="music.mp3" controls></audio>
43. <video>：定义视频内容。示例：<video src="movie.mp4" controls></video>
44. <source>：为 <audio> 或 <video> 定义媒体资源。示例：<video controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"></video>
45. <track>：为 <audio> 或 <video> 定义字幕或章节列表。示例：<video controls><source src="movie.mp4" type="video/mp4"><track src="subtitles_en.vtt" kind="subtitles" srclang="en"></video>
46. <map>：定义图像的可点击区域。示例：<map name="map"><area shape="rect" coords="0,0,100,100" href="page.html" alt="点击区域"></map><img src="image.jpg" usemap="#map">
47. <area>：定义图像区域。示例：<map name="map"><area shape="rect" coords="0,0,100,100" href="page.html" alt="点击区域"></map>
48. <canvas>：定义绘画区域。示例：<canvas id="myCanvas" width="200" height="100"></canvas>
49. <svg>：定义可缩放矢量图形。示例：<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>
50. <a name>：定义锚点。示例：<a name="top">回到顶部</a>
51. <embed>：定义嵌入式内容（如Flash）。示例：<embed src="flash.swf">
52. <object>：定义嵌入式对象（如Flash、Java Applets）。示例：<object data="flash.swf" type="application/x-shockwave-flash"></object>
53. <param>：为 <object> 定义参数。示例：<object data="flash.swf" type="application/x-shockwave-flash"><param name="loop" value="true"></object>
54. <meter>：定义度量衡尺寸。示例：<meter value="60" min="0" max="100"></meter>
55. <progress>：定义进度条。示例：<progress value="60" max="100"></progress>
56. <details>：定义可折叠的详细信息区域。示例：<details><summary>点击展开</summary>详细信息</details>
57. <summary>：定义 <details> 元素的标题。示例：<details><summary>点击展开</summary>详细信息</details>
58. <time>：定义日期或时间。示例：<time datetime="2023-04-19">今天</time>
59. <ruby>：定义注音文本。示例：<ruby>漢<rt>ㄏㄢˋ</rt>字<rt>zì</rt></ruby>
60. <bdi>：定义包含与其他文本方向不同的文本。示例：<p><bdi dir="rtl">مرحبا بالعالم</bdi></p>
61. <dialog>：定义对话框或窗口。示例：<dialog open>对话框内容</dialog>
62. <picture>：为不同的屏幕大小设置不同的图像源，提高网站的可访问性。示例：<picture><source media="(max-width: 600px)" srcset="small.jpg"><source media="(max-width: 1200px)" srcset="medium.jpg"><img src="large.jpg" alt="图片"></picture>
63. <slot>：定义可重复使用的模板。示例：<template><article><h2><slot name="title"></slot></h2><p><slot name="content"></slot></p></article></template><article is="my-article"><h1 slot="title">标题</h1><p slot="content">内容</p></article>
64. <template>：定义可重复使用的模板。示例：<template><article><h2>标题</h2><p>内容</p></article></template><article is="my-article"></article>
65. <webview>：定义嵌入式网页视图。示例：<webview src="https://www.example.com/"></webview>
66. <keygen>：为表单创建加密密钥对。该标签已被废弃。建议使用其他安全机制。示例：<keygen name="security">
67. <menu>：定义菜单列表。示例：<menu><li><a href="#home">首页</a></li><li><a href="#about">关于我们</a></li></menu>
68. <datalist>：定义可选数据列表。示例：<input list="cities"><datalist id="cities"><option value="北京"><option value="上海"></datalist>
69. <basefont>：定义基础字体大小、颜色和字体类型。该标签已被废弃。建议使用 CSS 样式代替。

70. <bgsound>：定义背景音乐。该标签已被废弃。建议使用 <audio> 标签代替。
71. <blink>：定义闪烁的文本。该标签已被废弃。建议使用 CSS 动画代替。
72. <marquee>：定义滚动的文本。该标签已被废弃。建议使用 CSS 动画代替。
73. <spacer>：定义空白区域。该标签已被废弃。建议使用 CSS margin 和 padding 属性代替。
74. <font>：定义字体样式、大小和颜色。该标签已被废弃。建议使用 CSS font 属性代替。
75. <acronym>：定义缩写，鼠标悬停时显示完整的含义。该标签已被废弃。建议使用 <abbr> 标签代替。
76. <applet>：定义 Java Applet。该标签已被废弃。建议使用其他技术代替。
77. <basefont>：定义基础字体大小、颜色和字体类型。该标签已被废弃。建议使用 CSS 样式代替。
78. <big>：定义大号文本。该标签已被废弃。建议使用 CSS font-size 属性代替。
79. <center>：定义居中对齐的文本。该标签已被废弃。建议使用 CSS text-align 属性代替。
80. <dir>：定义文本列表。该标签已被废弃。建议使用 <ul> 或 <ol> 标签代替。
81. <frame>：定义框架，用于分割网页内容。该标签已被废弃。建议使用更现代的 HTML 和 CSS 技术代替。
82. <frameset>：定义框架集合，用于定义整个网页的结构。该标签已被废弃。建议使用更现代的 HTML 和 CSS 技术代替。
83. <noframes>：为不支持框架的浏览器提供替代内容。该标签已被废弃。建议使用更现代的 HTML 和 CSS 技术代替。
84. <strike>：定义删除线文本。该标签已被废弃。建议使用 CSS text-decoration 属性代替。
85. <tt>：定义打字机文本。该标签已被废弃。建议使用 CSS font-family 属性代替。

86. <u>：定义下划线文本。该标签已被废弃。建议使用 CSS text-decoration 属性代替。
87. <isindex>：定义用于搜索的单行输入字段和提交按钮。该标签已被废弃。建议使用 <form> 标签代替。
88. <listing>：定义格式化的文本。该标签已被废弃。建议使用 CSS white-space 属性代替。
89. <plaintext>：定义纯文本内容。该标签已被废弃。建议使用 <pre> 标签代替。
90. <s>：定义删除线文本。该标签已被废弃。建议使用 CSS text-decoration 属性代替。
91. <xmp>：定义预格式化的文本。该标签已被废弃。建议使用 <pre> 标签代替。
92. <nobr>：定义不可换行的文本。该标签已被废弃。建议使用 CSS white-space 属性代替。
93. <bgproperties>：定义背景图像的属性，如是否固定或重复。该标签已被废弃。建议使用 CSS background 属性代替。
94. <spacer>：定义空白区域。该标签已被废弃。建议使用 CSS margin 和 padding 属性代替。
95. <keygen>：为表单创建加密密钥对。该标签已被废弃。建议使用其他安全机制代替。
96. <menu>：定义菜单列表。该标签已被废弃。建议使用 <ul> 或 <ol> 标签代替。
97. <nextid>：定义下一个元素的 ID。该标签已被废弃。建议使用 JavaScript 动态生成 ID 代替。
98. <noembed>：为不支持嵌入式内容的浏览器提供替代内容。该标签已被废弃。建议使用更现代的技术代替。
99. <object>、<param> 和 <embed> 组合使用用于嵌入多媒体内容。该标签仍然可以使用，但建议使用其他技术代替。
100. <style>：定义文档的样式信息。该标签仍然常用于网页设计中，建议使用 CSS 样式表代替行内样式。