`

9、HTML语言剖析之图形标记

    博客分类:
  • html
阅读更多
■ <IMG> :
<IMG> 称图形标记,主要用以插入图片于网页中,至于其它用处如配合影片文件等的播 放及影像地图(Image Map 或称一图多连结)则于不会在这节提及,请看【影像地图】及 【其他标记】。
<IMG> 的一般参数设定:

例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

src="logo.gif"
图片来源,接受 .gif, .jpg 及 .png 格式,前两者通行己久,后者由 96 年开始发展, 于未来取代前两者。若图片文件与该 html 文件同处一目录则只 写上文件案名称,否则 必须加上正确的途径,相对及绝对皆可。
width=100 height=100
设定图片大小,此宽度、及高度一般采用 pixels 作单位。通常只设为图片的真实 大小以免失真,若 要改变图片大小最好事先使用图像编辑工具。
hspace=5 vspace=5
设定图片边沿空白,以免文字或其它图片过于贴近。hspace 是设定图片左右的空 间,vspace 则是设定图片上下的空间,高度采用 pixels 作单位。
border=2
图片边框厚度。
align="top"
调整图片旁边文字的位置,你可以控制文字出现在图片的偏上方、中间、底端、 左右等,可选值:top, middle, bottom, left, right,内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom,
texttop 表示图片和文字依顶线对 ,
baseline 表示图片对 到目前文字行底线值,
absmiddle 表示图片对 到目前文字行绝对中央,
absbottom 表示图片对 到目前文字行绝对底部,(绝对底部意指它考虑到比方 y 、g、q 等字的下缘)。
alt="Logo of PenPal Garden"
这是用以描述该图形的文字,若用者使用文字浏览器,由于不支持图片,这些文 字更会代替图片而被显示。若于支持图片显示的浏览器,当鼠标移至图片上该些 文字亦会显示。
lowsrc="pre_logo.gif"
设定先显示低解像图片,若所加入的是一张很大的图片,下载 时很长,这张低 解像图片会先被显示以免浏览失却兴趣,通当是原图片灰阶版本。
例子一: 原始码 <img src="girl.gif" width=100 height=112 border=0 alt="beautiful girl"> 普通插入 
显示结果  普通插入 


例子二: 原始码 <img src="girl.gif" width=100 height=112 border=0 alt="beautiful" hspace=10 vspace=20"> 设定上下左右空白位置 
显示结果  设定上下左右空白位置 


例子三: 原始码 <img src="girl.gif" width=100 height=112 border=4 alt="beautiful" hspace=10 vspace=20"> 设定上下左右空白位置 
显示结果  设定字画中间对 ,边框厚度为 4。 


例子四: 原始码 <img src="girl.gif" width=100 height=112 alt="beautiful lady" align="right" border=0> 设定图片靠右。 
显示结果  设定图片靠右。 


例子五: 原始码 <img src="girl.gif" width=200 height=220 alt="I'm not beautiful right now" border=0> 放大了的图片 
显示结果  放大了的图片
分享到:
评论

相关推荐

    html标记语言详细解析与实例

    14. HTML 语言剖析之图形标记:图形标记用于创建图形,包括&lt;IMG&gt; 标记。 15. HTML 语言剖析之链接标记:链接标记用于创建超链接,包括&lt;A&gt; 标记。 16. HTML 语言剖析之多媒体标记:多媒体标记用于创建多媒体内容,...

    HTML语言剖析之HTML标记一览

    7. **图形标记**: - `&lt;IMG&gt;`:插入图像,并可以设置图像属性,如来源、尺寸等。 8. **链接标记**: - `&lt;A&gt;`:创建超链接,用于在页面间跳转。 - `&lt;BASE&gt;`:设置基础URL,用于处理相对链接。 9. **框架标记**:...

    2022年HTML语言剖析(九)图形标记CSSHTML教程.docx

    HTML中的图形标记主要由`&lt;IMG&gt;`标签来实现,它用于在网页中插入图像。`&lt;IMG&gt;`标签具有多种参数设定,以控制图像的显示效果和功能。以下是对`&lt;IMG&gt;`标签及其参数的详细解释: 1. `src`:这个参数是必需的,用于指定...

    html语言剖析

    HTML 是在 SGML 定义下的一个描述性语言,或可说 HTML 是 SGML 的一个应用程式,HTML 不是程式语言,如 C++ 和 Java 之类,它只是标示语言,基本上你只要明白了各种 标记的用法便算学懂了 HTML,HTML 的格式非常简单...

    html教程(最简单易学的html标记手册)

    HTML语言剖析 • 第一课 Html简介 • 第二课 HTML标记一览 • 第三棵 文件标记 • 第四课 排版标记 • 第五课 字体标记 • 第六课 清单标记 • 第七课 表格标记 • 第八课 表单标记 • 第九课 图形标记 •...

    HTML语言学习教程——HTML语言剖析[参照].pdf

    这个教程旨在为初学者提供全面的HTML语言剖析,帮助那些对HTML不熟悉的朋友掌握这一核心技术。 1. **HTML语言简介** HTML代表超文本标记语言,是一种用于组织网页结构和内容的标记语言。它通过使用一系列的标签...

    XML描述矢量图形的标记语言

    ### XML描述矢量图形的标记语言 #### GML(Geography Markup Language) GML是由Open Geospatial Consortium(OGC)提出的一种基于XML的空间信息编码标准。作为一种强大的地理信息描述工具,GML得到了Oracle、...

    HTML.rar_HTML参考手册_html_html 参考手册_html语言

    "HTML语言剖析.exe"很可能是一个交互式的HTML学习程序,它可能包含了HTML的基本元素、标签、事件处理、样式控制等内容的详细讲解,并且提供实践操作的界面,帮助用户通过实例来理解HTML的工作原理。这类软件通常会...

    HTML5互动股票图形数据 HTML5互动股票图形数据网页特效.zip

    此压缩包文件“HTML5互动股票图形数据 HTML5互动股票图形数据网页特效.zip”包含了利用HTML5技术制作的股票图形数据展示的网页特效,这些特效可能包括实时更新的股票走势、图表分析、以及各种交互式功能。...

    Html语言学习教程

    9. **图形标记**: - `&lt;IMG&gt;`:插入图像,需要指定`src`属性指向图像文件。 - `&lt;ALT&gt;`:提供图像的文字描述,对于无法显示图像或视障用户很有用。 10. **链接标记**: - `&lt;A&gt;`:创建超链接,`href`属性定义链接...

    字体图形库分享

    这是一个HTML(超文本标记语言)演示文件,展示了字体图形在实际网页环境中的应用和效果。通过查看和分析这个文件,用户可以学习如何在自己的网页中集成和使用提供的字体图形。 4. **demo-external-svg.html**: ...

    HTML语言教程精品.exe

    9. **实例分析与实践**:通过实际的网页项目,指导学习者如何将理论知识应用到实践中。 这个“HTML语言教程精品.exe”可能包含以上所有或部分知识点的详细讲解,提供互动练习和示例代码,帮助学习者逐步提升HTML...

    HTML语言授课教学幻灯片.rar

    这份“HTML语言授课教学幻灯片”可能会包含以下内容:HTML基础语法、HTML元素和属性、HTML5的新特性、页面布局、样式控制、交互元素、以及一些实战案例分析。通过系统的阅读和实践,学习者能够逐步掌握HTML语言,并...

    html语言制作的爱心代码

    在这个"html语言制作的爱心代码"中,我们可以探索如何利用HTML元素和属性来构造一个爱心形状,这在网页设计或个性化表达中非常常见。这个压缩包可能包含了实现这一效果的源代码文件,名为"李峋同款爱心代码",这可能...

    flash数据统计图形

    Flash数据统计图形是早期常用的技术之一,它通过图形化的方式来展示数据,包括柱状图、饼状图和折线图等,使得数据分析更加易于理解和交流。 首先,柱状图是一种最常见的数据表示方式,它通过不同长度的柱子来展示...

    HTML5+SVG实现饼状图形进度条特效源码.zip

    HTML5是一种先进的网页标记语言,它在Web开发领域中扮演着重要的角色,特别是在创建动态、交互性和富媒体内容方面。SVG(Scalable Vector Graphics)是另一种关键的技术,它是用于在网页上绘制清晰、可缩放的矢量...

    多维数据的图形化展示

    首先,HTML(超文本标记语言)是网页的基础结构,它定义了页面的基本元素和布局。在数据图形化中,HTML用于创建图形的容器,如div元素,为图表提供一个放置的区域。例如,你可以创建一个id为"chart"的div,之后用...

    019 大数据可视化系统数据分析通用模版(Html模板、大数据模板、大屏echarts模板).zip

    "Html模板"是构建可视化界面的基础,HTML(超文本标记语言)是网页内容的结构化表示,结合CSS(层叠样式表)和JavaScript,可以实现丰富的视觉效果和交互功能。在大数据可视化中,HTML用于搭建页面框架,定义元素...

    基于HTML5的油田地质图形数据可视化方法研究.pdf

    HTML5 作为 Web 前端开发的新标准超文本标记语言,为开放 Web 平台及跨平台的 Web 应用提供了强有力的技术支持。它具有本地存储、图形绘制、离线应用、地理坐标定位、图像处理等特性。HTML5 主要有 2 个 2D 图形技术...

    earth地球html源码

    HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言,它构成了互联网的基础。在"earth地球html源码"这个主题中,我们主要关注的是如何使用HTML来构建一个与地球相关的网页。这个压缩包可能包含了一...

Global site tag (gtag.js) - Google Analytics