HTML图像、背景、颜色

最新推荐文章于 2024-03-07 16:48:22 发布

thigdo

最新推荐文章于 2024-03-07 16:48:22 发布

阅读量4.1k

点赞数 1

分类专栏： HTML 文章标签： html 跨平台 xhtml 浏览器 web border

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML 图像

图像标签<img;>: 空标签，只包含属性，没有闭合标签
源属性<Src;>：图像的URL地址

替换文本属性<Alt>: 为图像定义一串预备的可替换的文本。值是用户定义的。

实例1. 背景图像

<html>
<body background="/i/eg_background.jpg">
</body>
</html>

实例2. 排列图片

<html>
<body>
<h2>Without align:</h2>
<p>Image <img src="/i/eg_cute.gif"> in the text</p>

<h2> With align: </h2>
<p>Image <img src="/i/eg_cute.gif" align="bottom"> in the text</p>
<p>Image <img src="/i/eg_cute.gif" align="middle"> in the text</p>
<p>Image <img src="/i/eg_cute.gif" align="top"> in the text</p>
<p>bottom是默认的对齐方式</p>

</body>
</html>

实例3. 浮动图像

<p>
<img src="/i/eg_cute.gif" align="left">
带有图像的一个段落。图像的align属性设置为"left", 图像将浮动到文本的左侧
</p>

<p>
<img src="/i/eg_cute.gif" align="right">
...右侧
</p>

实例4. 调整图像的尺寸

<img src="/i/eg_mouse.jpg" width="50" height="50">
<br />
<img src="/i/eg_mouse.jpg" width="100" height="100">
<br />
<img src="/i/eg_mouse.jpg" width="200" height="200">

实例5. 制作图像链接

<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>

实例6. 创建图像映射

<p>请点击图像上的星球，把它们放大。</p>

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

实例7. 把图像转换为图像映射

<p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化</p>
<p>
<a href="/examp/html/html_ismap.html">
<img src="/i/eg_planets.jpg" ismap />
</a>
</p>

HTML 背景

背景颜色（bgcolor）

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

背景（background)

<body background="clouds.gif"> （相对地址）
<body backgroudn="http://www.w3school.com.cn/clouds.gif">（绝对地址）
使用背景图片时注意
- 图像文件不应超过10k
- 背景图片是否与页面中的其他图像搭配良好
- 是否与文字颜色搭配良好
- 平铺后看上去怎样
- 对文字的注意力被背景图像喧宾夺主了吗？

注意：

<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。

应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

HTML 颜色

1. 颜色值：

Color	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

2. 颜色名：

大多数的浏览器都支持颜色名集合。

提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。

如果需要使用其它的颜色，需要使用十六进制的颜色值。

Color	Color HEX	Color Name
	#F0F8FF	AliceBlue
	#FAEBD7	AntiqueWhite
	#7FFFD4	Aquamarine
	#000000	Black
	#0000FF	Blue
	#8A2BE2	BlueViolet
	#A52A2A	Brown

3. Web安全色

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。

216 跨平台色

最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

thigdo

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML图像、背景、颜色

HTML 图像图像标签: 空标签，只包含属性，没有闭合标签源属性：图像的URL地址替换文本属性: 为图像定义一串预备的可替换的文本。值是用户定义的。实例1. 背景图像实例2. 排列图片Without align:Image in the text With al
复制链接

扫一扫

专栏目录