Heureka's blog

Appearance

03. HTML 常用标签 ​

HTML（HyperText Markup Language）是构建网页结构的标记语言。掌握常用标签是前端开发的基础。

一、文本标签 ​

标题标签 ​

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

段落与文本格式 ​

html
<p>这是一个段落</p>

<strong>粗体文本（重要）</strong>
<b>粗体文本</b>
<em>斜体文本（强调）</em>
<i>斜体文本</i>
<mark>高亮文本</mark>
<del>删除线文本</del>
<ins>下划线文本</ins>
<sub>下标</sub>
<sup>上标</sup>

其他文本标签 ​

html
<blockquote>引用文本块</blockquote>
<q>行内引用</q>
<code>代码文本</code>
<pre>预格式化文本
    保留空格和换行</pre>
<abbr title="HyperText Markup Language">HTML</abbr>

二、列表标签 ​

无序列表 ​

html
<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

有序列表 ​

html
<ol type="1" start="1">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

定义列表 ​

html
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

三、超链接与锚点 ​

超链接 ​

html
<!-- 外部链接 -->
<a href="https://www.example.com" target="_blank">访问网站</a>

<!-- 内部链接 -->
<a href="/about.html">关于我们</a>
<a href="#section">跳转到锚点</a>

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

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

锚点定位 ​

html
<!-- 定义锚点 -->
<h2 id="section">章节标题</h2>

<!-- 跳转到锚点 -->
<a href="#section">回到章节</a>

四、图片标签 ​

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

<!-- 完整属性 -->
<img
    src="image.jpg"
    alt="图片描述"
    width="300"
    height="200"
    title="鼠标悬停提示"
    loading="lazy"
>

<!-- 响应式图片 -->
<picture>
    <source media="(max-width: 600px)" srcset="small.jpg">
    <source media="(max-width: 1200px)" srcset="medium.jpg">
    <img src="large.jpg" alt="响应式图片">
</picture>

五、表单标签 ​

表单容器 ​

html
<form action="/submit" method="POST">
    <!-- 表单内容 -->
</form>

输入类型 ​

html
<!-- 文本输入 -->
<input type="text" name="username" placeholder="请输入用户名">

<!-- 密码输入 -->
<input type="password" name="password" placeholder="请输入密码">

<!-- 邮箱输入 -->
<input type="email" name="email" placeholder="请输入邮箱">

<!-- 数字输入 -->
<input type="number" name="age" min="0" max="150">

<!-- 日期选择 -->
<input type="date" name="birthday">

<!-- 时间选择 -->
<input type="time" name="time">

<!-- 文件上传 -->
<input type="file" name="file" multiple>

<!-- 单选框 -->
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>

<!-- 复选框 -->
<input type="checkbox" name="hobby" value="reading" id="reading">
<label for="reading">阅读</label>

<!-- 隐藏字段 -->
<input type="hidden" name="token" value="abc123">

下拉选择 ​

html
<select name="city">
    <option value="">请选择城市</option>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
</select>

文本域 ​

html
<textarea name="message" rows="5" cols="40" placeholder="请输入留言"></textarea>

按钮 ​

html
<button type="submit">提交表单</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

六、多媒体标签 ​

音频 ​

html
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频标签
</audio>

视频 ​

html
<video controls width="600" poster="poster.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持视频标签
</video>

iframe 嵌入 ​

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

七、语义化标签 ​

页面结构 ​

html
<header>页眉</header>
<nav>导航</nav>
<main>主要内容</main>
<article>文章</article>
<aside>侧边栏</aside>
<section>区域</section>
<footer>页脚</footer>

内容分组 ​

html
<figure>
    <img src="image.jpg" alt="图片">
    <figcaption>图片说明</figcaption>
</figure>

<details>
    <summary>点击查看详情</summary>
    详细内容...
</details>

<dialog>对话框</dialog>
<progress value="70" max="100">70%</progress>
<meter value="0.7" min="0" max="1">70%</meter>

八、表格标签 ​

html
<table>
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
            <td>数据3</td>
        </tr>
        <tr>
            <td>数据4</td>
            <td>数据5</td>
            <td>数据6</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3" align="center">合计</td>
        </tr>
    </tfoot>
</table>

九、特殊字符 ​

html
&nbsp;    空格
&lt;      <
&gt;      >
&amp;     &
&quot;    "
&#39;     '
&copy;    ©
&reg;     ®
&trade;   ™

十、HTML5 新增属性 ​

全局属性 ​

html
<div id="unique" class="multiple classes" style="color:red">
    数据属性
    data-id="123"
    data-name="example"
    ARIA 属性
    role="button"
    aria-label="点击按钮"
</div>

<input required>
<input autocomplete="off">
<input autofocus>
<input disabled>
<input readonly>
<textarea spellcheck="false"></textarea>

总结 ​

掌握这些常用 HTML 标签是构建网页的基础。在实际开发中，推荐使用语义化标签来提高代码可读性和 SEO 优化。