前端基础HTML-基础标签

Q z1997

已于 2022-07-29 22:51:49 修改

阅读量144

点赞数

分类专栏：前端文章标签： html

于 2022-07-29 22:38:56 首次发布

本文链接：https://blog.csdn.net/weixin_43939924/article/details/126065264

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前端基础HTML-基础标签

01-标题标签

    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

在这里插入图片描述

02-段落标签

<body>
    <h1>这是文章标题</h1>
    <hr>
    <p>阿卡贝拉（意大利：Acappella )即无伴奏合唱。 <br>  其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》</p>
    <p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例： 有一种悲伤（翻唱）-《A Kind of Sorrow》</p>
</body>

在这里插入图片描述

03-文本格式化标签

    <b>加粗</b>
    <strong>加粗</strong>
    <u>下划线</u>
    <ins>下划线</ins>
    <i>倾斜</i>
    <em>倾斜</em>
    <s>删除线</s>
    <del>删除线</del>

在这里插入图片描述

图片标签

  	<!-- alt : 替换文本, 当图片不显示的时候显示的文字 -->
    <!-- width和height属性只需要给出一个值, 另一个等比例缩放 -- 好处就是图片不变形 -->
    <img src="cat.gif" alt="这是一只猫" title="这是title文字, 鼠标悬停的时候显示" width="200" height="800">

在这里插入图片描述

07-音频标签

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

在这里插入图片描述

视频标签

  <!-- 谷歌浏览器可以让视频自动播放, 但是必须是静音状态muted -->
    <video src="./video.mp4" controls autoplay muted loop></video>

在这里插入图片描述

注意点：
• 视频标签目前支持三种格式：MP4 、WebM 、Ogg

a 标签跳转标签

 <!-- href : 跳转地址 -->
    <a href="https://www.baidu.com/" target="_blank">跳转到百度</a>

    <br>

    <a href="./01-标题标签.html">点我呀, 点了就去01-标题标签</a>

    <!-- 当开发网站初期, 我们还不知道跳转地址的时候, href的值书写#(空链接) -->

    <br>
    <a href="#">空链接, 不知道跳到哪里去</a>

在这里插入图片描述
特点：
• 双标签，内部可以包裹内容
• 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

链接标签的href属性

属性名：href
➢ 属性值：
点击之后跳转去哪一个网页（目标网页的路径）
• 外部链接： <a href="https://www.baidu.com/" target="_blank">跳转到百度</a>
• 内部链接： <a href="./01-标题标签.html">点我呀, 点了就去01-标题标签</a>

显示特点：
• a标签默认文字有下划线
• a标签从未点击过，默认文字显示蓝色
• a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）

链接标签的target属性
➢ 属性名：target
➢ 属性值：目标网页的打开形式

在这里插入图片描述