图像标签——<img>标签

HTML系列文章目录

HTML网页设计：一、HTML的基本结构
HTML网页设计：二、网页的基本标签
HTML网页设计：三、图像标签之＜img＞标签
HTML网页设计：四、超链接
HTML网页设计：五、行内元素和块元素
HTML网页设计：六、列表
HTML网页设计：七、表格
HTML网页设计：八、媒体元素
HTML网页设计：九、网页的简单布局
HTML网页设计：十、iframe内联框架
HTML网页设计：十一、表单

在 HTML 中，图像由<img>标签定义。<img> 是空标签，只包含属性，没有闭合标签。实际上图像并不会插入至HTML页面中，而是链接到HTML页面上，<img> 标签的作用是为被引用的图像创建占位符，其src和alt为必需属性。

常用属性：

[src]：规定显示图像的URL，URL 指存储图像的位置，可以用绝对位置和相对位置，建议使用相对路径。
[alt]：规定图像的替换文本，即在浏览器无法载入图像时，替换文本属性告诉读者失去的信息。
[title]：显示鼠标悬停文字。
[width]：规定图像的宽度（若指定width=“100%”，表示不管图片尺寸，将图片设置为浏览器宽度的100%，自动按照比例确定图片高度）。
[height]：规定图像的高度。

代码示例如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图像标签学习</title>
</head>
<body><!--同级目录下文件相对路径使用./ 相对目录下文件相对路径使用../--><img src="./7908.jpg" alt="许嵩照片" title="许嵩" width="200px" height="280px"><br/><!--许嵩照片在同级目录下 所以使用../应该加载不出来，故显示替换文本--><img src="../7908.jpg" alt="许嵩照片" title="许嵩" width="200px" height="280px"><br/><!--指定width属性为100%--><img src="../9736.jpg" alt="可爱猫猫" title="猫猫" width="100%" height="280px">
</body>
</html>

网页显示如下：

HTML网页设计：三、图像标签之＜img＞标签相关推荐

用计算机处理图像属于啥技术,计算机图像处理技术在网页设计中的应用
谭昊琳摘要:网页设计中图像的处理越来越重要.网页设计中的图像计算机处理进行了概念的介绍,对计算机图像处理的重要性也进行了分析.为了给网页设计中的图像处理更好,提高浏览量,提出了网页设计中的计算机图像 ...
【单选按钮区域实现三选一】【2018腾讯手游排行榜】【HTML表格标签】【网页设计与网站开发HTML、CSS、JavaScript】【第七章】表单——实验作业题【实验3、4、5】
以下为本人大一选修课<网页设计与网站开发>的实验作业题,均为本人原创,分享给大家.如有不足之处欢迎指出. 目录 1.实验3 题目代码实验效果 2.实验4 题目代码实验效果 3.实验 ...
html 分割线_零基础网页设计/前端/html,第四课：前三课总结，以及单标签img
大家好,我是你们的"浪花一朵".如果我之前写的网页设计的课程没有看过,可以关注我,翻看作者之前的课程哦! 一.1~3课总结 1.为了使网页的内容与网页的边缘没有间隙,我们一般会在标 ...
网页设计（三）——DIV+CSS布局2
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
下列可以产生斜体字的html标签是,电子科技大学《网页设计与制作》20秋期末考试题目【标准答案】...
电子科技大学<网页设计与制作>20春期末考试试卷总分:100 得分:100 一.单选题 (共 40 道试题,共 100 分) 1.如何产生带有数字列表符号的列表? A. B. C. D ...
CSS之Responsive网页设计的三个特性
Responsive网页设计无疑是网页设计中的一个热门话题.某种程度上,他将是一个最受欢迎的网页设计概念,因为随着网站用户日渐多样化的访问方法,比如说"iPad"."iP ...
用三个步骤实现响应式网页设计
写在前面的话:随着移动设备的逐渐普及和Web技术的发展,跨端的Web开发需求将会越来越大.如何在多种设备上进行跨端的界面适配呢?我们可以利用CSS3的Media Query来实现.本文主要介绍了移动开 ...
html5学习笔记——三、图文展示网页设计
常用图像标签 < img>标签 < img>标签用于定义网页中的图像,语法格式如下: <img src="图片路径" alt="图片无法显示 ...
三万字加源码，教你从零开始学网页设计（HTML5+CSS)
大二的时候选修过网页设计这门课,但是时间长了好多东西都还给老师了,于是乎趁着在家的这段时间重新复习一下网页设计,也就是所谓的前端,也希望这篇文章能对一些小伙伴有所帮助. 文章目录第一章 HTML的基 ...
网页设计（五）——marquee标签
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 首先给出一些关于marquee标签的介绍 ...

HTML网页设计：三、图像标签之＜img＞标签

图像标签——<img>标签

HTML系列文章目录

常用属性：

HTML网页设计：三、图像标签之＜img＞标签相关推荐

最新文章

热门文章