HTML 标签详解 速览

HTML标签详解与使用最佳实践
原创 于 2025-07-30 00:28:37 发布 · 1.1k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端 #标签 #学习

HTML 标签详解 速览

1. HTML 基础结构标签

1.1 文档类型声明

<!DOCTYPE html>

声明文档类型为 HTML5，必须放在文档的第一行。

1.2 根元素

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

1.3 头部信息

<head>
    <!-- 字符编码 -->
    <meta charset="UTF-8">
    
    <!-- 页面标题 -->
    <title>页面标题</title>
    
    <!-- 视口设置（响应式） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 页面描述 -->
    <meta name="description" content="页面描述内容">
    
    <!-- 关键词 -->
    <meta name="keywords" content="关键词1,关键词2,关键词3">
    
    <!-- 作者 -->
    <meta name="author" content="作者姓名">
    
    <!-- 网站图标 -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    
    <!-- 样式表 -->
    <link rel="stylesheet" href="styles.css">
    
    <!-- 外部脚本 -->
    <script src="script.js"></script>
</head>

2. 文本内容标签

2.1 标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.2 段落和文本

<!-- 段落 -->
<p>这是一个段落。</p>

<!-- 换行 -->
<br>

<!-- 水平线 -->
<hr>

<!-- 强调文本 -->
<strong>粗体文本</strong>
<b>粗体文本（无语义）</b>

<!-- 斜体文本 -->
<em>强调文本</em>
<i>斜体文本（无语义）</i>

<!-- 删除线 -->
<del>删除的文本</del>
<s>删除的文本（无语义）</s>

<!-- 下划线 -->
<ins>插入的文本</ins>
<u>下划线文本（无语义）</u>

<!-- 上标和下标 -->
<p>水的化学式是 H<sub>2</sub>O</p>
<p>面积单位：m<sup>2</sup></p>

<!-- 引用 -->
<blockquote>
    <p>这是引用的内容。</p>
    <cite>—— 引用来源</cite>
</blockquote>

<!-- 行内引用 -->
<p>他说：<q>今天天气很好</q>。</p>

<!-- 缩写 -->
<abbr title="超文本标记语言">HTML</abbr>

<!-- 联系信息 -->
<address>
    联系方式：<br>
    邮箱：example@email.com<br>
    电话：123-456-7890
</address>

2.3 列表标签

<!-- 无序列表 -->
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

<!-- 自定义列表 -->
<dl>
    <dt>术语1</dt>
    <dd>术语1的定义</dd>
    <dt>术语2</dt>
    <dd>术语2的定义</dd>
</dl>

<!-- 嵌套列表 -->
<ul>
    <li>主分类1
        <ul>
            <li>子分类1.1</li>
            <li>子分类1.2</li>
        </ul>
    </li>
    <li>主分类2</li>
</ul>

3. 链接和媒体标签

3.1 链接标签

<!-- 基本链接 -->
<a href="https://www.example.com">访问网站</a>

<!-- 本地链接 -->
<a href="/page.html">本地页面</a>

<!-- 锚点链接 -->
<a href="#section1">跳转到第一节</a>

<!-- 邮箱链接 -->
<a href="mailto:example@email.com">发送邮件</a>

<!-- 电话链接 -->
<a href="tel:+1234567890">拨打电话</a>

<!-- 下载链接 -->
<a href="/file.pdf" download>下载文件</a>

<!-- 新窗口打开 -->
<a href="https://www.example.com" target="_blank" rel="noopener">新窗口打开</a>

<!-- 链接属性 -->
<a href="page.html" 
   target="_blank" 
   rel="noopener noreferrer" 
   title="链接提示信息">
   链接文本
</a>

3.2 图片标签

<!-- 基本图片 -->
<img src="image.jpg" alt="图片描述">

<!-- 带尺寸的图片 -->
<img src="image.jpg" alt="图片描述" width="300" height="200">

<!-- 响应式图片 -->
<img src="image.jpg" 
     srcset="image-small.jpg 480w,
             image-medium.jpg 800w,
             image-large.jpg 1200w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 800px) 50vw,
            25vw"
     alt="响应式图片">

<!-- 带标题的图片 -->
<figure>
    <img src="chart.png" alt="销售数据图表">
    <figcaption>图1：2023年销售数据趋势</figcaption>
</figure>

3.3 音频标签

<!-- 基本音频 -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频播放。
</audio>

<!-- 自动播放音频（需静音） -->
<audio controls autoplay muted>
    <source src="background.mp3" type="audio/mpeg">
</audio>

<!-- 循环播放 -->
<audio controls loop>
    <source src="loop.mp3" type="audio/mpeg">
</audio>

3.4 视频标签

<!-- 基本视频 -->
<video width="640" height="480" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    您的浏览器不支持视频播放。
</video>

<!-- 带海报和字幕的视频 -->
<video width="800" height="600" controls poster="poster.jpg">
    <source src="movie.mp4" type="video/mp4">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
    <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文">
</video>

<!-- 自动播放视频（需静音） -->
<video autoplay muted loop>
    <source src="background.mp4" type="video/mp4">
</video>

4. 表格标签

4.1 基本表格

<table>
    <caption>学生成绩表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>95</td>
            <td>88</td>
            <td>92</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>87</td>
            <td>93</td>
            <td>89</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>平均分</td>
            <td>91</td>
            <td>90.5</td>
            <td>90.5</td>
        </tr>
    </tfoot>
</table>

4.2 复杂表格

<table border="1">
    <caption>产品销售数据</caption>
    <colgroup>
        <col span="1" style="background-color: #f0f0f0;">
        <col span="3" style="background-color: #e0e0e0;">
    </colgroup>
    <thead>
        <tr>
            <th rowspan="2">产品</th>
            <th colspan="3">季度销售</th>
        </tr>
        <tr>
            <th>Q1</th>
            <th>Q2</th>
            <th>Q3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>产品A</td>
            <td>100</td>
            <td>150</td>
            <td>200</td>
        </tr>
        <tr>
            <td>产品B</td>
            <td>80</td>
            <td>120</td>
            <td>180</td>
        </tr>
    </tbody>
</table>

5. 表单标签

5.1 基本表单结构

<form action="/submit" method="post">
    <fieldset>
        <legend>个人信息</legend>
        
        <!-- 文本输入框 -->
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required>
        
        <!-- 邮箱输入框 -->
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" required>
        
        <!-- 密码输入框 -->
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" minlength="8">
        
        <!-- 提交按钮 -->
        <input type="submit" value="提交">
    </fieldset>
</form>

5.2 各种输入类型

<form>
    <!-- 文本输入 -->
    <input type="text" placeholder="请输入文本">
    
    <!-- 邮箱 -->
    <input type="email" placeholder="请输入邮箱">
    
    <!-- 密码 -->
    <input type="password" placeholder="请输入密码">
    
    <!-- 数字 -->
    <input type="number" min="0" max="100" step="1">
    
    <!-- 范围滑块 -->
    <input type="range" min="0" max="100" value="50">
    
    <!-- 日期 -->
    <input type="date">
    
    <!-- 时间 -->
    <input type="time">
    
    <!-- 日期时间 -->
    <input type="datetime-local">
    
    <!-- 颜色选择器 -->
    <input type="color" value="#ff0000">
    
    <!-- 文件上传 -->
    <input type="file" multiple accept="image/*">
    
    <!-- 复选框 -->
    <input type="checkbox" id="agree" name="agree">
    <label for="agree">我同意条款</label>
    
    <!-- 单选按钮 -->
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>
    
    <!-- 下拉选择框 -->
    <select name="country">
        <option value="">请选择国家</option>
        <option value="cn">中国</option>
        <option value="us">美国</option>
        <option value="jp">日本</option>
    </select>
    
    <!-- 多选下拉框 -->
    <select name="hobbies" multiple>
        <option value="reading">阅读</option>
        <option value="music">音乐</option>
        <option value="sports">运动</option>
    </select>
    
    <!-- 文本域 -->
    <textarea name="message" rows="5" cols="50" placeholder="请输入留言"></textarea>
    
    <!-- 隐藏字段 -->
    <input type="hidden" name="token" value="abc123">
    
    <!-- 按钮 -->
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button" onclick="alert('点击了按钮')">普通按钮</button>
</form>

5.3 表单验证

<form>
    <!-- 必填字段 -->
    <input type="text" name="required" required>
    
    <!-- 邮箱验证 -->
    <input type="email" name="email" required>
    
    <!-- 数字范围 -->
    <input type="number" name="age" min="18" max="100" required>
    
    <!-- 长度限制 -->
    <input type="text" name="username" minlength="3" maxlength="20" required>
    
    <!-- 模式匹配 -->
    <input type="text" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
           placeholder="123-456-7890">
    
    <!-- 自定义验证消息 -->
    <input type="text" name="custom" required 
           oninvalid="this.setCustomValidity('请输入内容')"
           oninput="this.setCustomValidity('')">
    
    <input type="submit" value="提交">
</form>

6. HTML5 语义化标签

6.1 页面结构标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>语义化页面结构</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h2>文章标题</h2>
                <time datetime="2023-01-01">2023年1月1日</time>
            </header>
            <section>
                <h3>第一部分</h3>
                <p>文章内容...</p>
            </section>
            <section>
                <h3>第二部分</h3>
                <p>更多内容...</p>
            </section>
            <footer>
                <p>作者：张三</p>
            </footer>
        </article>

        <aside>
            <h3>相关文章</h3>
            <ul>
                <li><a href="#">相关文章1</a></li>
                <li><a href="#">相关文章2</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2023 版权所有</p>
    </footer>
</body>
</html>

6.2 详细语义标签

<!-- 页眉 -->
<header>
    <h1>网站名称</h1>
    <nav>导航菜单</nav>
</header>

<!-- 主要内容 -->
<main>
    <article>
        <header>
            <h2>文章标题</h2>
            <time datetime="2023-01-01">发布日期</time>
        </header>
        <section>
            <h3>章节标题</h3>
            <p>内容...</p>
        </section>
        <footer>
            <p>文章底部信息</p>
        </footer>
    </article>
</main>

<!-- 侧边栏 -->
<aside>
    <h3>侧边栏内容</h3>
    <p>相关链接、广告等</p>
</aside>

<!-- 页脚 -->
<footer>
    <p>版权信息、联系方式等</p>
</footer>

<!-- 独立内容 -->
<article>
    <h2>独立文章</h2>
    <p>可以独立存在的内容</p>
</article>

<!-- 章节 -->
<section>
    <h2>文档章节</h2>
    <p>文档的一个主题部分</p>
</section>

<!-- 图文组合 -->
<figure>
    <img src="image.jpg" alt="图片描述">
    <figcaption>图片说明文字</figcaption>
</figure>

<!-- 时间标记 -->
<time datetime="2023-01-01T14:30">2023年1月1日下午2:30</time>

<!-- 标记高亮文本 -->
<p>这里有一段<mark>高亮显示</mark>的文本。</p>

<!-- 进度条 -->
<progress value="70" max="100">70%</progress>

<!-- 度量衡 -->
<meter value="0.6" min="0" max="1" low="0.3" high="0.7">60%</meter>

7. 多媒体和交互标签

7.1 Canvas 绘图

<!-- Canvas 画布 -->
<canvas id="myCanvas" width="400" height="300">
    您的浏览器不支持 Canvas。
</canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制矩形
ctx.fillStyle = '#FF0000';
ctx.fillRect(10, 10, 100, 100);
</script>

7.2 嵌入内容

<!-- 内联框架 -->
<iframe src="https://www.example.com" 
        width="600" 
        height="400" 
        frameborder="0"
        allowfullscreen>
    您的浏览器不支持 iframe。
</iframe>

<!-- 嵌入对象 -->
<object data="document.pdf" type="application/pdf" width="600" height="400">
    <p>您的浏览器不支持 PDF 查看。</p>
</object>

<!-- 嵌入参数 -->
<embed src="movie.swf" width="600" height="400" type="application/x-shockwave-flash">

7.3 详细信息和摘要

<!-- 详细信息展开/收起 -->
<details>
    <summary>点击查看详细信息</summary>
    <p>这里是详细内容...</p>
    <p>可以包含任何 HTML 元素</p>
</details>

<!-- 默认展开 -->
<details open>
    <summary>默认展开的详细信息</summary>
    <p>这部分内容默认可见</p>
</details>

8. 国际化和辅助功能标签

8.1 语言和方向

<!-- 设置语言 -->
<html lang="zh-CN">
    <head>
        <title>中文页面</title>
    </head>
    <body>
        <p lang="en">This paragraph is in English.</p>
        <p lang="ja">この段落は日本語です。</p>
    </body>
</html>

<!-- 文本方向 -->
<p dir="ltr">Left to right text</p>
<p dir="rtl">نص من اليمين إلى اليسار</p>

8.2 辅助功能标签

<!-- 标签关联 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<!-- 描述关联 -->
<input type="text" id="search" aria-describedby="search-help">
<div id="search-help">请输入搜索关键词</div>

<!-- 角色和属性 -->
<div role="navigation" aria-label="主导航">
    <ul>
        <li><a href="#home">首页</a></li>
    </ul>
</div>

<!-- 隐藏但对屏幕阅读器可见 -->
<div class="sr-only">仅屏幕阅读器可见的内容</div>

<style>
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
</style>

9. 实际应用示例

9.1 完整的网页结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="这是一个完整的网页示例">
    <title>完整网页示例</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
        header { background: #333; color: white; padding: 1rem; }
        nav ul { list-style: none; display: flex; }
        nav li { margin-right: 1rem; }
        nav a { color: white; text-decoration: none; }
        main { padding: 2rem; }
        article { margin-bottom: 2rem; }
        footer { background: #f0f0f0; padding: 1rem; text-align: center; }
    </style>
</head>
<body>
    <header>
        <h1>我的网站</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#services">服务</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h2>欢迎来到我的网站</h2>
                <time datetime="2023-01-01">2023年1月1日</time>
            </header>
            <p>这是网站的主要内容区域。</p>
            <section>
                <h3>我们的服务</h3>
                <ul>
                    <li>网站设计</li>
                    <li>应用开发</li>
                    <li>技术支持</li>
                </ul>
            </section>
        </article>

        <aside>
            <h3>最新消息</h3>
            <ul>
                <li><a href="#">新功能上线</a></li>
                <li><a href="#">优惠活动</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2023 我的公司. 保留所有权利.</p>
        <address>
            邮箱: <a href="mailto:info@example.com">info@example.com</a>
        </address>
    </footer>
</body>
</html>

9.2 复杂表单示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户注册表单</title>
    <style>
        .form-container { max-width: 600px; margin: 2rem auto; padding: 2rem; }
        .form-group { margin-bottom: 1rem; }
        label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
        input, select, textarea { width: 100%; padding: 0.5rem; border: 1px solid #ccc; }
        .checkbox-group { display: flex; align-items: center; }
        .checkbox-group input { width: auto; margin-right: 0.5rem; }
        .submit-btn { background: #007cba; color: white; padding: 0.75rem 1.5rem; border: none; cursor: pointer; }
        .submit-btn:hover { background: #005a87; }
    </style>
</head>
<body>
    <div class="form-container">
        <h2>用户注册</h2>
        <form action="/register" method="post">
            <div class="form-group">
                <label for="username">用户名 *</label>
                <input type="text" id="username" name="username" required minlength="3" maxlength="20">
            </div>

            <div class="form-group">
                <label for="email">邮箱 *</label>
                <input type="email" id="email" name="email" required>
            </div>

            <div class="form-group">
                <label for="password">密码 *</label>
                <input type="password" id="password" name="password" required minlength="8">
            </div>

            <div class="form-group">
                <label for="confirm-password">确认密码 *</label>
                <input type="password" id="confirm-password" name="confirm-password" required>
            </div>

            <div class="form-group">
                <label for="birth-date">出生日期</label>
                <input type="date" id="birth-date" name="birth-date">
            </div>

            <div class="form-group">
                <label for="gender">性别</label>
                <select id="gender" name="gender">
                    <option value="">请选择</option>
                    <option value="male">男</option>
                    <option value="female">女</option>
                    <option value="other">其他</option>
                </select>
            </div>

            <div class="form-group">
                <label>兴趣爱好</label>
                <div class="checkbox-group">
                    <input type="checkbox" id="reading" name="hobbies" value="reading">
                    <label for="reading">阅读</label>
                </div>
                <div class="checkbox-group">
                    <input type="checkbox" id="music" name="hobbies" value="music">
                    <label for="music">音乐</label>
                </div>
                <div class="checkbox-group">
                    <input type="checkbox" id="sports" name="hobbies" value="sports">
                    <label for="sports">运动</label>
                </div>
            </div>

            <div class="form-group">
                <label for="bio">个人简介</label>
                <textarea id="bio" name="bio" rows="4" placeholder="请简单介绍一下自己..."></textarea>
            </div>

            <div class="form-group checkbox-group">
                <input type="checkbox" id="terms" name="terms" required>
                <label for="terms">我同意 <a href="/terms">服务条款</a> 和 <a href="/privacy">隐私政策</a> *</label>
            </div>

            <button type="submit" class="submit-btn">注册</button>
        </form>
    </div>
</body>
</html>

10. 标签使用最佳实践

10.1 语义化使用

<!-- 好的做法：使用语义化标签 -->
<article>
    <header>
        <h2>文章标题</h2>
        <time datetime="2023-01-01">2023-01-01</time>
    </header>
    <p>文章内容...</p>
</article>

<!-- 避免：仅使用 div -->
<div class="article">
    <div class="header">
        <div class="title">文章标题</div>
        <div class="date">2023-01-01</div>
    </div>
    <div class="content">文章内容...</div>
</div>

10.2 可访问性考虑

<!-- 正确的标签使用 -->
<label for="search-input">搜索：</label>
<input type="search" id="search-input" name="q" placeholder="输入搜索关键词">

<!-- 添加 ARIA 属性 -->
<button aria-label="关闭对话框">×</button>

<!-- 表格的可访问性 -->
<table>
    <caption>学生成绩表</caption>
    <thead>
        <tr>
            <th scope="col">姓名</th>
            <th scope="col">成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">张三</th>
            <td>95</td>
        </tr>
    </tbody>
</table>

10.3 SEO 优化

<!-- 良好的标题结构 -->
<h1>页面主标题</h1>
<h2>主要章节</h2>
<h3>子章节</h3>
<h4>更小的子章节</h4>

<!-- 描述性链接文本 -->
<a href="/products">查看我们的产品</a>
<!-- 避免： -->
<a href="/products">点击这里</a>

<!-- 图片的 alt 属性 -->
<img src="product.jpg" alt="红色运动鞋，尺码42">

HTML 标签是构建网页的基础，正确使用这些标签不仅能创建结构良好的网页，还能提高可访问性和 SEO 效果。在实际开发中，应该根据内容的语义选择合适的标签，并遵循最佳实践来确保网页的质量。

HTML5的menu菜单标签
Kelvin的博客
10-18 2912
代码示例<span contextmenu="myMenu">右击一下</span> <menu type="context" id="myMenu"> <menuitem label="单击一下" onclick="alert('您单击了我一下')" icon=""> </menuitem> </menu>代码说明： <menu>标签用于上下文菜单、工具栏以及用于列出表单控件和命令
html一文入门---标签大合集
2402_86110194的博客
08-23 2502
有序列表 (): 显示项目的顺序重要，通常使用数字或字母作为标记。 定义列表 (): 用于展示术语及其定义。 四、表格标签 : 定义表格。: 定义表格行。: 定义表格单元格。: 定义表格头单元格。定义表格的例子： 结果： 其中table中的参数 border="5" 是外边框的宽度；cellspacing="10" 两个表格之间的间距；align="center"表格的位置；width="80%"表格的像素（大小）。td中的参数 rowspan="2"行合并；colspan="2"
HTML所有标签的用法及示例（一）
qq_45914609的博客
09-20 2002
了解HTML所有标签的用法，并列出基础示例。HTML所有标签大致包括这11种类型：1.文档结构标签2.元数据标签3.内容分区标签4.文本内容标签5.内联文本语义标签6.多媒体标签7.嵌入内容标签8.表格标签9.表单标签10.脚本标签11.其他标签。
入门HTML(含常见标签)—附实现案例
qq_63218110的博客
11-27 5244
HTML不同于我们所熟知的C，Java等编程语言，它是一种标签化语言，其形式类似于XML。本篇文章主要常见文本标签和文档结构标签。
HTML文档标签详解
シ❤゛甜虾的个人博客
04-12 2201
一、HTML文档标签 1.<!DOCTYPE>: 定义文档类型. 2.<html>: 定义HTML文档. 3.<head>: 定义文档的头部.(头部内包含) 4.<meta>:定义元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词. 5.<base>:定义页面上的所有链接规定默认地址或默认目标. 6.<title>:定义文档的标题. 7.<link>:定义文档与外部资源的关系. 8...
HTML标签速览与基础结构详解
- **标题标记**：`<title>`用于设定网页的标题，这个标题会显示在浏览器的标签页上。例如 `<title>HTML总体结构</title>`。 - **元信息标记**： - `<meta name="generator" content="value">`：用于指定文档的...
HTML4.01与XHTML1.0标签速览与基础属性详解
本资源是一份详细的HTML4.01和XHTML1.0教程文档，主要针对初学者设计，旨在帮助用户理解和掌握HTML的基础知识和常用标签。文档结构清晰，分为三个部分： 1. **按功能顺序列出的HTML4.01/XHTML1.0标签手册**： - 此...
HTML标签全览：速查与详解
"HTML标签参考手册提供了HTML语言中常见的标签及其描述，涵盖了从基本结构到交互元素的各种功能。" 在HTML（HyperText Markup Language）中，标签是构建网页内容和结构的基本元素。以下是一些常见HTML标签的详细...
HTML5核心特性详解与实战代码速览
首先，HTML5最大的革新之一是语义化标签的广泛引入。传统的HTML中，开发者通常使用大量的div和class来划分页面区域，例如或，这种方式虽然可行，但缺乏明确的意义表达。而HTML5提供了诸如、、、、、、等语义化元素，...
HTML网页代码全览与常用标签详解
这是用于插入图像的HTML标签，`src` 属性用于指定图像的URL，如 `"图片路径">"`。这允许网页开发者添加视觉内容。 2. **超链接标签 `<a>`**: 通过 `href` 属性定义链接的目标地址，如 `"目标URL">链接文本</a>"`...
【无标题】
2301_78158657的博客
07-31 61
HTML是一种超文本标记语言"超文本"就是指页面内可以包含图片,链接,甚至音乐,程序等非文字的元素HTML不是一种编程语言HTML5是最新版本。
HTML标签(一)(语法规范、常用标签)
m0_48375854的博客
09-26 815
文章目录一、HTML语法规范1.基本语法概述2.标签关系二、HTML基本结构标签1.第一个HTML网页2.标签解析三、HTML常用标签1.HTML5文档头部相关标签<title></title><meta />2.文本控制标签标题标记<h1> - <h6>段落标签<p></p>水平线标签<hr />3、文本样式标签<font></font>4.文本格式化标签5.特殊字符标签6.图像标签1.
怎么快速上手写一篇HTML文档？
花果山的和尚的博客
06-10 6884
&lt;h1&gt;biaoti&lt;/h1&gt;
【HTML】之基本标签的使用详解
weixin_64178283的博客
10-25 1437
本文介绍了HTML的基础知识和一些常用的标签，希望能够帮助你入门HTML。学习HTML是一个循序渐进的过程，需要不断练习和实践。记住，熟能生巧！后续可以继续学习 CSS 和 JavaScript，让你的网页更加美观和具有交互性。希望这篇博客对你有帮助!记住多练习，通过构建一些简单的网页来巩固你学到的知识。祝你学习愉快!
HTML常用标签的使用方法及属性
最新发布
2402_88947054的博客
12-17 1431
定义列表使用<dl>标签来创建，每个术语使用<dt>标签，每个描述使用<dd>标签。定义列表常用于术语解释。例如：六.表格标签：‌tabletrtdththeadtbodytfoot和caption‌。‌table‌：用于定义表格的标签，包裹整个表格内容。‌tr‌：用于定义表格中的行，必须嵌套在table标签中。‌td‌：用于定义表格中的单元格，必须嵌套在tr标签中。‌th‌：用于定义表头单元格，通常用于列标题，具有默认加粗效果。‌thead‌：用于定义表格的头部区域，包含表格的标题行。
HTML总结
qq_66112267的博客
07-10 128
html总结
HTML——基础结构以及常见标签
程序员阿皓的博客
04-16 2328
本文介绍一下HTML基础结构以及常用的标签。
前端---HTML篇（详解HTML各类标签）
stu_kk的博客
11-29 1342
html学习笔记分享
【自学HTML笔记第5篇】HTML中的下拉菜单标签
m0_64231944的博客
10-22 7407
HTML中的下拉菜单标签和主要属性
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值