HTML标签

最新推荐文章于 2025-05-01 23:03:21 发布

中枢叹号

最新推荐文章于 2025-05-01 23:03:21 发布

阅读量104

点赞数

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/NewHouser/article/details/127241870

版权

1.标题标签

适用于需要突出重点的标题、目录以及重要程度分级的文本

标题标签会独自形成一行，级数越高，字体越小、越细

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

2.段落标签

适用于内容文本，段落标签上下之间存在间距、也会单独形成一行

补充：在一定的条件下，当div标签和 p标签都可以使用的时候，尽量用 p标签，因为 p标签默认上下有间距，适合兼容一些特殊或移动端设备，有助于SEO优化

<p>段落标签段落标签段落标签段落标签段落标签段落标签</p>

3.换行标签、水平线标签

换行标签和水平线标签都是单标签（没有</hr>和</br>）

<hr>  水平标签
<br>  换行标签

4.文本格式化标签

根据本文需求使用相应的标签，有正常格式和简写格式，正常格式比较严谨，在语气上比简写格式更加突出，在网页的显示上没有差异

补充：不使用<b>、<u>等纯样式（简写）标签，有助于SEO 优化

<strong>加粗</strong>
<b>加粗</b>

<ins>下划线</ins>
<u>下划线</u>

<em>倾斜</em>
<i>倾斜</i>

<del>删除线</del>
<s>删除线</s>

5.图片标签

图片标签也是单标签（没有</img>）

图片标签有很多内置属性，如下：

src：图片引入路径

alt：替换文本（在图片加载失败时显示的文本，正常情况下不显示，可以不写）

title：提示文本（鼠标悬停在图片上时显示的文字，可以不写）

width/height：图片宽高（设置图片大小，推荐只设置一个，设置宽或者设置高，都设置的话图片可能会比例失调，当然也可以都不设置，使用原图）

<img src="./../.." 
    alt="" 
    title="" 
    width="" 
    height="">

6.音频标签

音频标签内置属性（按需使用）：

src：音频路径（必写）

controls：显示播放和暂停的按钮（控制台）（必写，不然不会显示）

autoplay：音频自动播放（有的浏览器不支持，如果写了但是没有自动播放就是不支持）

loop：循环播放

<audio src="./.." controls autoplay loop></audio>

7.视频标签

视频标签内置属性（按需使用）：

src：音频路径（必写）

controls：显示播放和暂停的按钮（控制台）

autoplay：视频自动播放（部分浏览器不支持，可能因为声音大，一打开网页怕吓着人）

loop：循环播放

muted：和autoplay组合使用实现自动静音播放（这样就不会吓着人）

<video src="./.." controls autoplay muted loop></video>

8.跳转标签

跳转标签内置属性（按需使用）：

href：跳转路径/地址（如果没有想好跳转到哪，就写 "#" ，表示空跳转，点了会回到页面顶部）

target：“_blank” （保留原网页，打开一个新窗口并跳转）

“_self” （当前网页跳转，不写 target 属性则默认 _self）

<a href="http://www.baidu.com/" target="_blank">百度</a>

试一试代码：

全部复制，运行，可以看看效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    .box {
        border: 3px solid rgb(86, 255, 52);
        margin-bottom: 5px;
        padding-left: 10px;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-align: center;
    }
</style>

<body>
    <!--············································ 标题标签 -->
    <div class="box">
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
    </div>

    <!--············································ 段落、换行、水平线标签 -->
    <div class="box">
        <h3>段落、换行、水平线标签</h3>
        <p>这是段落标签，注意，后面将要换行了，3··2··1<br>换行了，因为有换行标签，下面的横线是水平线标签</p>
        <hr>
        <p>注意看这段文字和下面一段文字的距离</p>
        <p>是不是有距离，这就是段落标签之间存在的间隙</p>
    </div>

    <!--······································ 文本格式化标签 -->
    <div class="box">
        <h3>文本格式化标签</h3>
        <strong>加粗</strong>
        <b>加粗</b>

        <ins>下划线</ins>
        <u>下划线</u>

        <em>倾斜</em>
        <i>倾斜</i>

        <del>删除线</del>
        <s>删除线</s>
    </div>


    <!--············································ 图片标签 -->
    <div class="box">
        <h3>图片标签</h3>
        <img src="  " alt="当然这个图片肯定看不到，因为路径指向我的文件夹,下面的音视频也一样，自己找一个写进去" title="鼠标悬停显示文字" width="200" height="200">
    </div>


    <!--············································ 音频标签 -->
    <div class="box">
        <h3>音频标签</h3>
        <audio src="" controls autoplay loop></audio>
    </div>


    <!--············································ 视频标签 -->
    <div class="box">
        <h3>视频标签</h3>
        <video src="" controls autoplay muted loop></video>
    </div>


    <!--············································ 跳转标签 -->
    <div class="box">
        <h3>跳转标签</h3>
        <a href="http://www.baidu.com/" target="_blank">跳转至百度</a>

        <a href="#">空跳转</a>
    </div>

</body>

</html>