HTML-常用标签

约 803 字大约 3 分钟

2025-10-15

标题和段落标签

<h1> ~ <h6> 用来定义正文文档的标题

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

<p>定义文本段落，浏览器会自动在段落前后添加空白
```
<p>这是一个段落</p>
```

强调标签和注释

<strong>加粗文本</strong>
<em>斜体文本</em>
<ins>文本下划线</ins>
<del>文本删除线</del>
<mark>高亮文本</mark>
<small>小号文本</small>
<span>行内文本容器</span>
<sub>下标</sub>
<sup>上标</sup>

链接标签

超链接

<!-- 超链接语法格式 -->
<a href="">链接文本</a>

<!-- 空链接 -->
<a href="#">链接到空页面</a>

<!-- 下载链接 -->
<a href="download.exe">下载windows版本</a>

<!-- 邮件链接 -->
<a href="mailto:eric@mail.com">给我发邮件</a>

<a> 标签有一个target属性，用于控制链接跳转的方式：

target="_self"：在当前页面跳转链接
target="_blank"：在新页面跳转链接

锚点链接

锚点链接允许用户在同一页面跳转到指定位置，非常适合长页面导航。

使用 id 属性创建锚点目标，比如：

<h2 id="1">第一部分</h2>

使用 # 标记锚点目标

<a herf="#1">跳转到第一部分</a>

引用标签

<blockquote>块级引用</blockquote>
<q>行内引用</q>
<cite>引用标题</cite>

图片标签以及常见格式

在文档中嵌入图像，必须提供替代文本alt=""

<img src="" alt="">

图片常用的属性还有：

width：设置图片的宽
htight：设置图片的高
title：鼠标悬停提示

在宽高只定义其中一个时，另外一个会等比例缩放，不过以上属性还是建议使用CSS修改

视频和音频标签

`<video>` 视频标签

<video src=""></video>

<video src="video.mp4" controls="controls" width="300"></video>
<!-- h5中如果属性的键和值是相同的，则可以省略值 -->
<video src="video.mp4" controls width="300"></video>

视频标签的其他属性:

controls：显示播放控件
muted：静音
autoplay：自动播放
loop：循环播放
poster：预览图像

由于浏览器的设置，我们想要自动播放需要先设置静音

视频标签兼容性写法
```
<video controls mute autoplay loop>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  <source src="video.webm" type="video/webm">
  <p>您的浏览器不支持h5标签，请升级浏览器</p>
</video>
```
1. 将 src 属性放在几个单独的 <source> 元素中，这些元素分别指向各自的资源。
2. 浏览器会检查<source>元素，并且播放第一个与其自身相匹配的媒体
3. 浏览器会根据每个<source>的type属性来迅速地跳过那些不支持的格式。

`<audio>` 音频标签

<audio>标签的写法和 <video> 是一样的

但是，浏览器禁止音频标签自动播放，可以通过js实现

<audio src="audio.mp3" controls></audio>

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  <p>您的浏览器不支持h5标签，请升级浏览器</p>
</audio>
<!-- h5中如果属性的键和值是相同的，则可以省略值 -->
<audio src="video.mp4" controls width="300"></audio>