HTML——标签(标题.段落.换行与水平线.文本格式化.图像.路径.超链接.音频视频)

目录

目录

标题标签:

段落标签:

换行标签

水平线标签

文本格式化标签

图像标签

 相对路径 绝对路径

超链接 a 

音频audio

视频video

---

标题标签:

    语法格式：<h数字>标签</h数字>-----数字：1-6

    作用：用来设置页面的标题

    特点：

    1.数字越大，字体越小

    2.字体默认加粗

    3.默认占一行----块级元素（后面详解）

    4.默认有上下的间距

    h1 标签在一个网页中只能用一次，用来放新闻标题或网页的logo

    h2 ~ h6 没有使用次数的限制

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

效果: 

 

段落标签:

        语法格式：<p>段落</p>

<p>
  超文本标记语言（英语：HyperText MarkupLanguage，简称：HTML）是一种用于创建网页的标准标记语言。
</p>
<p>
  您可以使用 HTML 来建立自己的 WEB 站点，HTML运行在浏览器上，由浏览器来解析。
</p>

效果:

换行标签

        语法格式：<br/>----单标签

        作用：在页面中强制换行

        特点：

            1.单标签

            2.默认独占一行

            3.没有结束标签

            4.可以在任意位置使用

            5.可以嵌套使用

水平线标签

        语法格式：<hr/>----单标签

        作用：在页面中添加一条水平线

        特点：

            1.单标签

            2.默认独占一行,

            3.默认宽度是100%---浏览器的内容显示宽度

​
    <h1>超文本<br /><br /><br />链接</h1>
    <hr />
    <p>
      超文本标记语言（英语：HyperText Markup Language，简称：HTML)<br />是一种用于创建网页的标准标记语言。
      您可以使用 HTML 来建立自己的 WEB 站点，HTML
      运行在浏览器上，由浏览器来解析。<br />
      在本教程中，您将学习如何使用 HTML 来创建站点。<br />
      HTML 很容易学习！相信您能很快学会它！
    </p>

​

效果: 

文本格式化标签

        作用：为文本添加特殊格式，以突出重点

        常用的格式化标签：

        加粗---<b></b>, <strong><strong>--推荐使用后者

        斜体---<i></i>, <em></em>--推荐使用后者

        下划线---<u></u>, <ins></ins>--推荐使用后者

        删除线---<s></s>, <del></del>--推荐使用后者

        上移---

        下移---

    <b>加粗</b><br />
    <strong>加粗</strong><br />
    <i>倾斜</i><br />
    <em>倾斜</em><br />
    <u>下划线</u><br />
    <ins>下划线</ins><br />
    <s>删除线</s><br />
    <del>删除线</del>
    <h2>m<sup>2</sup></h2>
    <h3>H<sub>2</sub>O</h3>

效果:

图像标签

        1.语法格式：

        <img src="图片路径" alt="图片加载失败时的替换文本" />

        2.属性：

        src：图片路径

        alt：图片加载失败时的替换文本

        title:提示文本,鼠标悬停在图片上面的时候显示的文字

        width：图片宽度,不要写单位---系统默认单位是px

        height：图片高度,不要写单位---系统默认单位是px

        3.注意：实际开发中，图片的宽与高只写一个属性即可---避免图片变形--实现图片的宽高等比缩放

​
<img src="./猫.jpg" alt="" width="200" />

效果:

 相对路径 绝对路径

        相对路径：从当前文件位置出发查找目标文件                 

                          / 表示进入某个文件夹里面 ------ 文件夹名字 /

                          . 表示当前文件所在文件夹 ------ ./

                          .. 表示当前文件的上一级文件夹 ------- ../

        绝对路径：从盘符出发查找目标文件

                          Windows 电脑从盘符出发

                          Mac 电脑从根目录（ / ）出发

                          Windows 默认是 \ ，其他系统是 / ，建议统一写为 /

    <img src="./img/cat1.jpg" alt="" width="200" />
    <img src="C:/...." alt="" width="200" />

超链接 a 

        1.语法格式：

             <a href="链接的地址">链接标题</a>

        2.属性：

            href：链接的地址---本地路径或者网络路径

            空链接：href="#"---点击后不跳转，并不会刷新页面

            target：打开方式

                _self：默认值，当前窗口打开

                _blank：新窗口打开

        3.作用：

            3.1 跳转到指定的页面

            3.2 下载文件

    <a href="./01-路径.html" target="_blank">跳转到路径页面</a>
    <a href="https://www.bilibili.com/">跳转到bilibili</a>
    <a href="./img/cat1.jpg">下载图片</a>

效果:

音频audio

        1.语法格式：

            <audio src="音频的地址"></audio>

        2.属性：

            src：音频的地址

            controls：是否显示控制面板

                controls="controls"：显示

                controls：不显示

            loop：是否循环播放

                loop="2"：循环播放2次

                loop：无限循环播放

            autoplay：是否自动播放

                autoplay="autoplay"：自动播放

                autoplay：不自动播放

    <audio
      src="./audio/80000.m4a"
      controls="controls"
      loop="2"
      autoplay="autoplay"
    ></audio>

效果:

视频video

        1.语法格式：

            <video src="视频的 URL"></video>

        2.属性：

            src：音频的地址

            controls：是否显示控制面板

                controls="controls"：显示

                controls：不显示

            loop：是否循环播放

                loop="2"：循环播放2次

                loop：无限循环播放

            autoplay：是否自动播放

                autoplay="autoplay"：自动播放

                autoplay：不自动播放

            muted:静音播放

    <video
      src="./video/江苏连云港：中欧班列助力中亚国家“拥抱”大海-新华网.mp4"
      controls="controls"
    ></video>

效果: