当前位置:首页 > 前端技术 > HTML图像、背景、颜色

HTML图像、背景、颜色

2022年08月06日 06:02:17前端技术4

HTML 图像

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

<img src="url />

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

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

实例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
来源链接:https://blog.csdn.net/thigdo/article/details/6611897

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/18420.html

分享给朋友:

“HTML图像、背景、颜色” 的相关文章

Markdown中使用html标签

有时候,我们会在笔记中使用一些HTML标签,但是Markdown中直接使用html标签会被解析为格式.该怎么书写,可以直接显示为html的标签呢. <h1>这是一个标题</h1> //其中的<h1&g...

模板引擎 Thymeleaf  动态渲染 HTML

模板引擎 Thymeleaf 动态渲染 HTML

1、添加依赖 <!-- Thymeleaf 模板引擎 --> <dependency> <groupId>org.thymeleaf</gro...

HTML5 速查列表

HTML 速查列表 HTML 速查列表. 你可以打印它,以备日常使用。 HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题<...

script标签的属性

script标签的属性

共六个,language废弃,charset不常用。 async:异步加载脚本,且不保证加载顺序(下载时不影响页面解析,但解析时会暂停页面渲染) defer:立即下载,延迟执行(遇到</html>标签时执行),有顺序 type:默认type='tex...

HTML框架结构标签(frameset)

HTML框架结构标签(frameset)

第一次了解到竟然还有HTML框架结构标签()。为此小编在实例中应用了一下,但是在搭建框架之初就遇到 了问题。为此总结本博客,以便大家能及时解决问题。 什么是HTML框架结构标签(<frameset>)...

HTML5 自动聚焦autofocus属性

原文:https://davidwalsh.name/autofocus 翻译:http://blog.csdn.net/renfufei/article/details/9797419   HTML5 推出了一大堆精彩的东西给我们。 过去我们要...

html标签汇总

html标签汇总

文章目录 段落处理 图像标签 超链接 注释 特殊字符 表格 列表标签 无序列表 有序列表 自定义列表...

HTML中的Style标签media属性控制打印内容样式

最近项目用到Web页面打印报表的功能,因为我们的项目采用的是HTML的Table方式实现的表格,所以符合javascript中的window.print,了解了下window.print()函数的使用方式。 window.print():用来打印window.documen...

HTML表单标签常用属性及其常见子标签

表单标签 通过form来定义 <form> //1.input类型 //2.select类型 //3.textarea类型 </form> 常用属性 ​ action:提交路径,默认是当...

v-html 解析并插入 html 标签

v-html 解析并插入 html 标签

1. 双大括号会将数据解释为普通文本,而非 HTML 代码。 <div id="app"> <p id="a">Using mustaches: { { rawHtml }}</p> <p >Using v-ht...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。