web前端入门到实战:HTML图像标签img和源属性src及Alt属性、宽高、对齐
使用<img>
标签定义 HTML 页面中的图像,图像标签<img>
有两个必需的属性:源属性src和alt,<img>
是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)。src指 “source”。源属性的值是图像的 URL 地址。`
1 定义图像的语法是: 2 <img src="url" alt="some_text">
URL 指存储图像的位置。如果名为 “boat.gif” 的图像位于 www.w3cschool.cn 的 images 目录中,那么其 URL 为 //www.w3cschool.cn/images/boat.gif。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。
HTML 图像- Alt属性:用来为图像定义一串预备的可替换的文本,替换文本属性的值是用户定义的,在浏览器无法载入图像时,替换文本属性告诉读者他们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
HTML 图像- 设置图像的高度与宽度,height(高度)与width(宽度)属性用于设置图像的高度与宽度。您可以在编程测试中调整一张图像的大小,属性值默认单位为像素/指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。
1 <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
设置图像边框:在标签中您可以使用border属性以像素为单位指定边框粗细。厚度为 0 表示图片周围没有边框。
1 <img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" border = "3">
设置图像对齐:默认情况下,图像在页面中将显示为左侧对齐,在标签中您可以使用align属性将设置图像的对齐方式:center(居中)或right(右侧)。
1 <img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" align="right">
Tips:假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,建议是慎用图片;其次加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。
web前端入门到实战:HTML图像标签img和源属性src及Alt属性、宽高、对齐相关推荐
- html前端页面的基本骨架是,web前端入门到实战:css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案 发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南 优点 简单,不需要工程,不用puppeteer生成骨架d ...
- 转圈加载html,web前端入门到实战:纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式 发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南 不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
- web前端入门到实战:HTML5新增和废弃的标签
一.废弃的标签 以下的 HTML 4.01 元素在HTML5中已经被删除,虽然浏览器为了兼容性考虑都还支持这些标签,但建议使用新的替代标签,矛盾的是老浏览器对新标签的支持度又不够,视项目的受众对象而定 ...
- web前端入门到实战:HTML5文档类型如何定义,有哪些标签,以及如何使用,从整体认识HTML5
html5新增结构标签 header 头部 nav 导航 section 区域 article 文章 aside 侧边栏 figure 一组多媒体内容 figcaption 多媒体内容的标题 foot ...
- web前端入门到实战:实现图形验证码
什么是图形验证码 图形验证码是验证码的一种.验证码(CAPTCHA)是"Completely Automated Public Turing test to tell Computers a ...
- web前端入门到实战:HTML5 VideoAPI,打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法 <v ...
- web前端入门到实战:HTML属性选择器(下)
一.格式 标签[属性=值]:{属性:值:} 1.属性的取值是以什么开头的 attribute |= value(CSS2)attribute^=value(CSS3)两者之间的区别:CSS2中只能找到 ...
- web前端入门到实战:CSS新属性实现特殊的图片显示效果
1 概述 1.1 前言 使用一个或多个图像相关的CSS属性(background-blend-mode, mix-blend-mode, or filter)可以实现许多特殊的图片显示效果,共列举了2 ...
- web前端入门到实战:CSS3两大实用属性,以及网页制作技巧
一.使用 :not() 在菜单上应用/取消应用边框 我们通常的做法是先给每个菜单项设置边框,然后在设置最后一个菜单的边框为零 /* add border */ .nav li {border-righ ...
- web前端入门到实战:CSS mix-blend-mode滤色screen混合模式
一.滤色screen混合模式速览 screen混合模式,国内称为"滤色",其计算公式是: 公式中的C表示最终混合的RGB色值(范围是0-255),A和B表示用来混合的两个颜色的RG ...
最新文章
- extlinux安装livecd到USB
- Android Stadio调试gradle 插件 || Android Stadio 远程调试 || Anroid APT调试
- STM32固件库文件树及构成详解
- 红橙Darren视频笔记 自定义sidebar 自定义View ViewGroup套路
- 基于Python的接口自动化unittest测试框架和ddt数据驱动详解
- 【前端】:我的第一个网页
- python built-in cache (don't reinvent the wheel)
- Hyperledger Fabric的工作流程
- Java CookBook(一)
- applet java_在浏览器中运行java applet
- 计算机专业个税,税后工资个税计算器
- 请立即停止刷博客流量
- 不换门可以改开门的方向吗_防盗门可以更改开门方向吗?
- JAVA实现接入企业微信报警
- HL7解析类的使用(java)
- 数据:锁定在智能合约中的MKR供应占比已创下16个月新高
- 微信公众号内下载pdf等文件,受微信所限制,安卓和IOS不同处理方式(最最最优版)
- 升阳云ERP,基于开源框架设计的三大特点
- 在64位计算机上安装MapGuide Studio 2010
- 微信公众号推送多图文消息,直接跳转至外部链接(wxJava)
热门文章
- 杰出人士的七种共性之5-独木求林
- Latex 图注设置(图1:改为图1-1)
- 未将引用设置到对象的实例
- “客户机操作系统已将 CD-ROM 门锁定,并且可能正在使用 CD-ROM,这可能会导致客户机...” 报错解决办法
- 2021react复习
- 中文字符集与字符编码的基础知识
- 无法在驱动器1分区上安装W ndOwS,安装win10提示无法在驱动器0分区上安装windows
- 基于基因组数据的癌症亚型发现聚类研究
- B站视频怎么下载到本地【实用教程】
- 2020.10期权合约产品研究报告 | TokenInsight