网页标签大全以及对应功能
作者: 字符空间 发布时间: 2025-11-03 阅读: 15
一、文档结构标签
| 标签 | 功能描述 | 示例 |
|---|
| <html> | 定义HTML文档的根元素 | <html>...</html> |
| <head> | 包含文档的元数据信息 | <head><title>标题</title></head> |
| <title> | 定义文档标题，显示在浏览器标题栏 | <title>我的网页</title> |
| <body> | 包含文档的可见内容 | <body>网页内容</body> |
| <!DOCTYPE> | 定义文档类型和版本 | <!DOCTYPE html> |
二、文本内容标签
| 标签 | 功能描述 | 示例 |
|---|
| <h1>-<h6> | 定义标题，h1最高级，h6最低级 | <h1>主标题</h1> |
| <p> | 定义段落 | <p>这是一个段落</p> |
| <br> | 插入换行符 | 第一行<br>第二行 |
| <hr> | 创建水平分割线 | <hr> |
| <pre> | 定义预格式化文本，保留空格和换行 | <pre>保留 格式 的文本</pre> |
三、文本格式化标签
| 标签 | 功能描述 | 示例 |
|---|
| <strong> | 定义重要文本，通常显示为粗体 | <strong>重要内容</strong> |
| <em> | 定义强调文本，通常显示为斜体 | <em>强调内容</em> |
| <b> | 定义粗体文本 | <b>粗体文本</b> |
| <i> | 定义斜体文本 | <i>斜体文本</i> |
| <u> | 定义下划线文本 | <u>下划线文本</u> |
| <mark> | 定义标记/高亮文本 | <mark>高亮文本</mark> |
| <code> | 定义计算机代码片段 | <code>var x = 10;</code> |
四、链接和图像标签
| 标签 | 功能描述 | 示例 |
|---|
| <a> | 定义超链接 | <a href="url">链接文本</a> |
| <img> | 嵌入图像 | <img src="image.jpg" alt="描述"> |
| <map> | 定义图像映射 | <map name="map1">...</map> |
| <area> | 定义图像映射中的区域 | <area shape="rect" coords="x,y" href="url"> |
五、列表标签
| 标签 | 功能描述 | 示例 |
|---|
| <ul> | 定义无序列表 | <ul><li>项目</li></ul> |
| <ol> | 定义有序列表 | <ol><li>第一项</li></ol> |
| <li> | 定义列表项 | <li>列表项目</li> |
| <dl> | 定义描述列表 | <dl><dt>术语</dt><dd>描述</dd></dl> |
| <dt> | 定义描述列表中的项目 | <dt>HTML</dt> |
| <dd> | 定义描述列表中的描述 | <dd>超文本标记语言</dd> |
六、表格标签
| 标签 | 功能描述 | 示例 |
|---|
| <table> | 定义表格 | <table>...</table> |
| <caption> | 定义表格标题 | <caption>表格标题</caption> |
| <tr> | 定义表格行 | <tr><td>数据</td></tr> |
| <th> | 定义表格标题单元格 | <th>姓名</th> |
| <td> | 定义表格数据单元格 | <td>张三</td> |
| <thead> | 定义表格的页眉 | <thead><tr><th>标题</th></tr></thead> |
| <tbody> | 定义表格的主体 | <tbody><tr><td>数据</td></tr></tbody> |
| <tfoot> | 定义表格的页脚 | <tfoot><tr><td>总计</td></tr></tfoot> |
七、表单标签
| 标签 | 功能描述 | 示例 |
|---|
| <form> | 定义HTML表单 | <form action="url" method="post">...</form> |
| <input> | 定义输入控件 | <input type="text" name="username"> |
| <textarea> | 定义多行文本输入控件 | <textarea name="content"></textarea> |
| <button> | 定义可点击按钮 | <button type="submit">提交</button> |
| <select> | 定义下拉列表 | <select name="city">...</select> |
| <option> | 定义下拉列表中的选项 | <option value="1">北京</option> |
| <label> | 定义input元素的标注 | <label for="name">姓名:</label> |
| <fieldset> | 将表单内的相关元素分组 | <fieldset><legend>个人信息</legend>...</fieldset> |
| <legend> | 定义fieldset元素的标题 | <legend>表单组标题</legend> |
八、HTML5语义化标签
| 标签 | 功能描述 | 示例 |
|---|
| <header> | 定义文档或节的页眉 | <header>网站头部</header> |
| <nav> | 定义导航链接 | <nav><a href="#">首页</a></nav> |
| <main> | 定义文档的主要内容 | <main>主要内容区域</main> |
| <article> | 定义独立的自包含内容 | <article>博客文章</article> |
| <section> | 定义文档中的节 | <section>章节内容</section> |
| <aside> | 定义页面内容之外的内容 | <aside>侧边栏</aside> |
| <footer> | 定义文档或节的页脚 | <footer>版权信息</footer> |
| <figure> | 定义独立的流内容 | <figure><img src="img.jpg"></figure> |
| <figcaption> | 定义figure元素的标题 | <figcaption>图片说明</figcaption> |
九、多媒体标签
| 标签 | 功能描述 | 示例 |
|---|
| <audio> | 嵌入音频内容 | <audio controls><source src="audio.mp3"></audio> |
| <video> | 嵌入视频内容 | <video controls><source src="video.mp4"></video> |
| <source> | 为媒体元素定义多个源 | <source src="movie.mp4" type="video/mp4"> |
| <track> | 为媒体元素定义文本轨道 | <track kind="subtitles" src="subs.vtt"> |
| <canvas> | 定义图形容器，通过脚本绘制图形 | <canvas id="myCanvas"></canvas> |
| <svg> | 定义SVG图形的容器 | <svg width="100" height="100">...</svg> |
十、元信息和脚本标签
| 标签 | 功能描述 | 示例 |
|---|
| <meta> | 提供关于HTML文档的元数据 | <meta charset="UTF-8"> |
| <link> | 定义文档与外部资源的关系 | <link rel="stylesheet" href="style.css"> |
| <style> | 定义文档的样式信息 | <style>body { color: red; }</style> |
| <script> | 定义客户端JavaScript | <script>alert('Hello');</script> |
| <noscript> | 定义当脚本不被支持时的替代内容 | <noscript>请启用JavaScript</noscript> |
| <base> | 指定页面中所有相对URL的基准URL | <base href="https://www.example.com/"> |
总结
HTML标签是构建网页的基础，每个标签都有其特定的语义和功能。合理使用这些标签可以：
- 创建结构良好的网页
- 提高可访问性
- 优化搜索引擎排名
- 便于维护和开发
- 提供更好的用户体验
随着HTML5的普及，语义化标签的使用变得越来越重要，它们不仅让代码更易读，也为浏览器和辅助技术提供了更好的内容理解。
❤️收藏
👍点赞
用户评论
发表评论