编程笔记 html5&css&js 008 HTML图片

简介: 编程笔记 html5&css&js 008 HTML图片

和印刷品一样,网页上不仅要有文字,还要有图片和声音、视频、绘画等媒体形式。这一节来看图片如何显示到网页上。

一、HTML 图像

本节开始注意使用元素的属性。

标签( <img>)和源属性(Src)
在 HTML 中,图像由<img> 标签定义。
<img> 是独立标签,意思是说,它只包含属性,并且没有闭合标签。
要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。
定义图像的语法是:
<img src="url" alt="some_text">

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。

二、HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

三、HTML 图像- 设置图像的高度与宽度

height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。

属性值默认单位为像素:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。

注意: 假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。

四、支持的图像格式

HTML 标准并没有给出需要支持的图像格式的列表,因此每个用户代理支持一组不同的格式。

备注: 网页浏览器图像格式指南提供了有关图像格式及 Web 浏览器支持的综合信息。本节只是一个总结!

Web 最常用的图像格式是:

APNG(动态可移植网络图形)——无损动画序列的不错选择(GIF 性能较差)。

AVIF(AV1 图像文件格式)——静态图像或动画的不错选择,其性能较好。

GIF(图像互换格式)——简单图像和动画的不错选择。

JPEG(联合图像专家组)——有损压缩静态图像的不错选择(目前最流行的格式)。

PNG(便携式网络图形)——对于无损压缩静态图像而言是不错的选择(质量略好于 JPEG)。

SVG(可缩放矢量图形)——矢量图像格式。用于必须以不同尺寸准确描绘的图像。

WebP(网络图片格式)——图像和动画的绝佳选择。

推荐使用诸如 WebP 和 AVIF 等图像格式,因为它们在静态图像和动画的性能均比 PNG、JPEG、JIF 好得多。WebP 得到了广泛的支持,而 AVIF 则缺乏 Safari 的支持。

对于必须以不同尺寸准确绘制的图像,则仍然推荐使用 SVG 格式。

五、对齐设置

要设置网页中图片的水平对齐方式,可以使用CSS样式。以下是几种常用的水平对齐方式:

  1. 居中对齐:
    可以使用margin属性来实现图片的居中对齐。例子如下:
img {
  display: block; /* 设置图片为块级元素 */
  margin: 0 auto; /* 设置左右边距为auto,上下边距为0 */
}

这样可以使图片在其容器中水平居中对齐。

2. 左对齐和右对齐:

可以使用float属性来实现图片的左对齐和右对齐。例子如下:

.left-align {
  float: left;
}
.right-align {
  float: right;
}

然后在HTML中使用对应的类名来应用样式:

<img src="图片路径" alt="图片描述" class="left-align">
<img src="图片路径" alt="图片描述" class="right-align">

这样可以使图片分别左对齐和右对齐。

  1. 等分对齐:
    如果要将多个图片在同一行等分对齐,可以使用flexbox布局。例子如下:
.container {
  display: flex;
}
.container img {
  flex: 1; /* 设置图片的弹性伸缩比例为1,让图片等分容器的宽度 */
}

然后在HTML中使用container类名的容器包裹多个图片:

<div class="container">
  <img src="图片路径" alt="图片描述">
  <img src="图片路径" alt="图片描述">
  <img src="图片路径" alt="图片描述">
</div>

这样可以使多个图片在同一行等分对齐。

以上是几种常用的设置网页中图片水平对齐方式的方法,你可以根据具体需求选择适合的方式。

六、操作

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>编程笔记 html5&css&js HTML图片</title>
    <meta charset="utf-8">
    <style>
        /* 选择你喜欢的颜色吧 */
        body {
            color: cyan;
            background-color: teal;
        }
        img {
            display: block;
            /* 设置图片为块级元素 */
            margin: 0 auto;
            /* 设置左右边距为auto,上下边距为0 */
        }
    </style>
</head>
<body>
    <h1 align="center">这是一张图片</h1>
    <img src="image/image008.jpg" alt="风光图片" width="900" height="600">
</body>
</html>

小结

图片在网页中极为常用,要熟练掌握。

相关文章
|
1天前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
2天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
18 0
HTML5/CSS3粒子效果进度条代码
|
2天前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
13 0
|
2天前
|
JavaScript 前端开发
js和css以及js制作弹窗
js和css以及js制作弹窗
12 1
|
2天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
27 1
|
2天前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
2天前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
|
2天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
|
2天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
2天前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。