HTML基础标签

qiuqiuyaq

已于 2022-06-06 13:52:17 修改

阅读量379

点赞数 2

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

于 2022-05-31 23:11:37 首次发布

本文链接：https://blog.csdn.net/weixin_60569662/article/details/125024679

版权

HTML 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文详细介绍了HTML中元素的使用，包括src、alt属性的作用，以及如何设置图片尺寸、使用alt属性提供备选文本。同时涵盖了标签的链接制作，内外链跳转和多媒体元素如audio和video的嵌入实例。

摘要由CSDN通过智能技术生成

图片

HTML <img> 元素将一份图像嵌入文档。
默认为行内元素，即display: inline。

src属性

该属性是必须的，它包含了你想嵌入的图片的文件路径。

可以用外部链接
alt属性

该属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。

height属性

图像的高度，在 HTML5 中的单位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比。可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。
width属性

图像的宽度，在 HTML5 中单位是 CSS 像素，在 HTML 4 中可以是像素也可以是百分比。
资源：https://cdn.acwing.com/media/article/image/2022/03/01/1_3ec4c1cf99-mountain.jpg

<!-- HTML文件第一行是文件的类型 所有的网页都需要写这一条 -->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="width=device-width, initial-scale=1.0">
    <!-- 定义标签的标题 -->
    <title>Web</title>
    <link rel="icon" href="/images/logo.png">
</head>

<body>
    <p>hello world</p>
    <img src="https://cdn.acwing.com/media/article/image/2022/03/01/1_3ec4c1cf99-mountain.jpg" alt="">
</body>

</html>

资源在本地的处理方式如下：

<!-- HTML文件第一行是文件的类型 所有的网页都需要写这一条 -->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="width=device-width, initial-scale=1.0">
    <!-- 定义标签的标题 -->
    <title>Web</title>
    <link rel="icon" href="/images/logo.png">
</head>

<body>
    <p>hello world</p>
    <img src="/images/mountain.jpg" alt="">
</body>

</html>

<!-- HTML文件第一行是文件的类型 所有的网页都需要写这一条 -->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="width=device-width, initial-scale=1.0">
    <!-- 定义标签的标题 -->
    <title>Web</title>
    <link rel="icon" href="/images/logo.png">
</head>

<body>
    <p>hello world</p>
    <img width="300" src="/images/mountain.jpg" alt="">
</body>

</html>

如果只设定宽度，会把高度等比例压缩

如果只设定高度，会把宽度等比例压缩

<!-- HTML文件第一行是文件的类型 所有的网页都需要写这一条 -->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="width=device-width, initial-scale=1.0">
    <!-- 定义标签的标题 -->
    <title>Web</title>
    <link rel="icon" href="/images/logo.png">
</head>

<body>
    <p>hello world</p>
    <img height="50" src="/images/mountain.jpg" alt="">
</body>

</html>

同时设置宽度和高度

<!-- HTML文件第一行是文件的类型 所有的网页都需要写这一条 -->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="width=device-width, initial-scale=1.0">
    <!-- 定义标签的标题 -->
    <title>Web</title>
    <link rel="icon" href="/images/logo.png">
</head>

<body>
    <p>hello world</p>
    <img width="300" height="50" src="/images/mountain.jpg" alt="">
</body>

</html>

可以在图片后面接文字，图片是行内元素，默认不换行，注意只能接行内标签，不能接 <div> 标签，也不能接块状标签

接块状标签会自动换行

音频与视频

<audio>标签

HTML <audio> 元素用于在文档中嵌入音频内容。 <audio> 元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者 <source> 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。

使用src属性播放

示例：

<!-- 在src属性里面直接写上源文件的地址 加上controls就可以播放音乐了 -->
<audio controls src="/audios/bgm.mp3">
        Your browser does not support the
        <code>audio</code> element.
</audio>

<!-- 当audio无法播放的时候:Your browser does not 
     support the <code>audio</code> element.
     文件损坏 浏览器不支持音频格式 -->

<audio> 与多个 <source> 元素

这个例子包含了多个 <source> 元素。如果能够播放的话，浏览器就会试图去加载第一个 source 元素；如果不行，那就退而求其次去加载第二个。

<audio controls>
    <source src="/audios/sound1.mp3" type="audio/mpeg"/>
    <source src="/audios/sound2.mp3" type="audio/mpeg"/>
</audio>

资源：

https://www.acwing.com/static/web/audio/user/statistics/annual_summary/bgm.mp3

https://www.acwing.com/static/web/audio/chat_message_recevied.mp3

https://www.acwing.com/static/web/audio/chat_message_recevied2.mp3

<video>标签

HTML <video> 元素用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。

示例：

<video controls src="/videos/video2.mp4"></vidio>

<!-- 设置视频的宽高 -->
<!-- 加上播放的控制栏controls -->
<video controls width="800">

    <source src="/videos/video1.mp4"
            type="video/mp4">

    <source src="/videos/video2.mp4"
            type="video/mp4">

    Sorry, your browser doesn't support embedded videos.
</video>

资源：

https://www.acwing.com/static/web/video/video1.mp4

https://www.acwing.com/static/web/video/video2.mp4

超链接

HTML <a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a> 中的内容应该指明链接的意图。如果存在 href 属性，当 <a> 元素聚焦时按下回车键就会激活它。

站外跳转

<!-- HTML文件第一行是文件的类型 所有的网页都需要写这一条 -->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="width=device-width, initial-scale=1.0">
    <!-- 定义标签的标题 -->
    <title>Web</title>
    <link rel="icon" href="/images/logo.png">
</head>

<body>
    <h3>超链接</h3>
    <a href="https://leetcode.cn/problemset/all/">LeetCode</a>
    <a href="/about.html" target="_blank">about</a>
</body>

</html>

站内跳转

！+ Tab 会自动补全一个基础版本的 HTML 结构

<!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>About</title>
</head>
<body>
    <h3>About</h3>
</body>
</html>

如何实现打开一个新页面？

点击链接打开新标签页面时加入属性：target="_blank"

超链接里面有起始标签和结尾标签，所以 <a> 里面可以加任意的标签

<!-- HTML文件第一行是文件的类型 所有的网页都需要写这一条 -->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="width=device-width, initial-scale=1.0">
    <!-- 定义标签的标题 -->
    <title>Web</title>
    <link rel="icon" href="/images/logo.png">
</head>

<body>
    <h3>超链接</h3>
    <a href="https://leetcode.cn/problemset/all/" target="_blank">

        <img width="30" src="/images/logo.png" alt="logo">
    </a>

</body>

</html>

qiuqiuyaq

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML基础标签

图片HTML <img> 元素将一份图像嵌入文档。默认为行内元素，即display: inline。src属性该属性是必须的，它包含了你想嵌入的图片的文件路径。可以用外部链接alt属性该属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。heig
复制链接

扫一扫