HTML学习（三）---块级元素和内联元素，HTML中的图片，地址，视频与音频，以及超链接
文章目录
- 一、块级元素和内联元素
- 1. 块级元素：
- 2. 内联元素：
- 二、HTML中的图片
- 1. 语法：
- 2. 图片属性：
- 3. 常见的图片格式：
- 三、路径
- 1. 相对路径
- 2. 绝对路径
- 四、视频与音频
- 1. 视频标签
- 2. 音频标签
- 五、超链接
- 1.超链接
- 2. 锚点链接
- 3. 页面滑动效果
- 总结
一、块级元素和内联元素
在 HTML 中有两种元素类别:块级元素和内联元素。分类不同决定着展示形式不一样。
1. 块级元素：
- 块级元素独占一行
- 它可以嵌套其他元素
- 常见的比如p、h、div等
2. 内联元素：
- 可以一行放多个，通常与文本一起使用
- 不能嵌套块级元素，可以嵌套其他内联元素。
- 常见比如 strong、em、a等
段落p标签里面不要放其他块级元素。 段落里面主要放文字相关，比如内联元素。但是元素分类不是一直不可更改的，后面 的css可以通过display改变他们显示模式。
二、HTML中的图片
1. 语法：
<img src="某某图片.png" alt="图片名字">- 单标签（空元素）：默认包含两个属性：src和alt；
- src属性：指向要插入到页面的图像地址；
- alt属性：备选文本，用于在图片无法显示文本或者因为网速慢情况下显示的文字。
- 属性采取键值对形式。 属性="值"
- 属性之间没有必要的先后顺序
- 但是属性之间必须有空格分隔
2. 图片属性：
| 属性 | 作用 |
|---|---|
| src | 指向要插入到页面的图像地址 |
| alt | 备选文本。图片无法显示提示的文字 |
| width | 设置图片宽度（建议css修改） |
| height | 设置图片高度（建议css修改） |
| title | 图像标题。鼠标悬停显示的文本 |
3. 常见的图片格式：
jpeg / jpg | 有损压缩技术，放大缩小会变得 模糊或有锯齿。 | 适用场景：摄影照片、网页图片 （非透明背景） |
|---|---|---|
png | 无损压缩，支持透明度。 | 适用场景：Logo、网页图形、需 要透明度的图像。 |
gif | 支持动画，最多256色。支持简单动画和透明背景 | 适用场景：简单动画、表情包、 低色彩图形。 |
webp | Google 开发的现代格式。 支持有损/无损压缩、透明度和动画。 | 适用场景：网页优化（替代 JPEG/PNG/GIF）代表：淘宝等。 |
avif | 基于AV1视频编码，支持高压缩率和HDR。压缩效率优于WebP。 | 适用场景：未来网页优化，需高性能压缩的场景(B站、京东等） |
三、路径
在HTML中，路径用于指定文件（如图像、样式表或其他网页）的位置。
白话：图片相对于html文件的位置，html怎么找到图片。
1. 相对路径
相对于当前文件位置的路径
- 同一目录：直接使用文件名即可./表示当前文件夹；
- 下级子目录：使用目录名/文件名；
- 上级目录：使用../返回上一级。
<h3>一、相对路径</h3> <h4>1. 同一级路径</h4> <img src="./pig.png" alt=""> <h4>2. 下一级路径</h4> <img src="img/pig.png" alt=""> <img src="./img/pig.png" alt=""> <h4>3. 上一级路径</h4>2. 绝对路径
绝对路径是从根目录开始的完整路径，包含完整的 URL 地址。（了解即可）
<h4>1.盘符路径</h4> <img src="E:\HTML5\代码\pig.png" alt=""> <img src="E:/HTML5/代码/pig.png" alt=""> <h4>2.网络路径</h4> <img src="https://www.itcast.cn/2018czgw/images/logo2.png" alt="">四、视频与音频
1. 视频标签
语法：
<video src="./media/1.mp4" width="400" controls="controls"></video>视频标签属性：
| 属性 | 作用 |
|---|---|
| src | 指向要插入到页面的视频地址 |
| controls | 显示浏览器自带播放控件 |
| width/height | 设置视频的宽高 |
| autoplay | 自动播放 |
| loop | 循环播放 |
| muted | 静音 |
| poster | 预览图像 |
视频标签兼容性写法：
<!-- 兼容性写法 --> <video width="400" controls muted loop poster="./media/yu7.jpg"> <source src="./media/yu7.mp4" type="video/mp4"> <p> 您的浏览器不支持视频播放 </p> </video>- 将 src 属性放在几个单独的 <source> 元素当中，这些元素分别指向各自的资源。
- 浏览器会检查 <source> 元素，并且播放第一个与其自身相匹配的媒体。
- 每个 <source> 元素都含有 type 属性，浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属 性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，但是这样会消耗掉大量的时间和资源。
2. 音频标签
音频标签与视频标签类似，使用audio。
<!-- 音频标签浏览器不让自动播放 后续可以用js实现 --> <audio src="./media/ldh.mp3" controls muted autoplay></audio> <!-- 兼容性写法 --> <audio controls> <source src="./media/ldh.mp3" type="audio/mp3"> <p> 您的浏览器不支持音频播放 </p> </audio>五、超链接
1.超链接
超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以链接到文档的指定部分。
语法：
<a href=""> </a>href属性（也称为超文本引用或目标，它将包含一个网址）来创建一个基本链接。
链接可以包含除了自身之外的其他元素，比如 文字、标题、图片、视频等。
其他属性：
- title：鼠标悬停的提示文字；
- target：打开页面的方式 ( _self默认当前窗口打开，_blank新窗口打开)
<!-- 超链接 --> <!-- 1. 内部链接 --> <a href="./11-音视频标签.html">音视频</a> <!-- 2. 外部链接 --> <a href="https://www.deepseek.com/" title="deepseek" target="_blank">deepseek</a> <!-- 3. 空连接 --> <a href="#">产品介绍</a> <!-- 4. 下载链接 --> <a href="./download.zip">下载软件</a> <!-- 5. 邮件链接 --> <a href="mailto:123@qq.com">联系我们</a>2. 锚点链接
锚点链接允许用户在同一个页面内跳转到指定位置。 非常适合长页面导航。
<a href="#2"> 2. 外部链接</a> <br> <h2 id="2">2. 外部链接</h2>3.页面滑动效果
想要点击链接之后。页面具有滑动效果。 请在<head>标签中添加下面代码。
<style> html { scroll-behavior: smooth; } </style>总结
这篇主要介绍块级元素和内联元素，HMTL中的图片，地址，视频与音频，以及超链接。下一篇介绍布局标签（网站结构标签，无语义标签，列表标签），表格，表单，以及辅助标签。