HTML背景颜色和背景图片
html常用背景颜色代码
标记或参数定义<A>连结标记<ADDRESS>地址标记（斜体效果）<AREA>连结区域标记（设定各连结区域）alink点击连结时的样式。
例：alink="#FF0000"水平方向摆放位置。
例：align="center"alignalternate来回走动，例：behavior=alternatealt在连结中插入文字说明。
例：alt="绿叶园"<B>字体加粗标记（产生字体加粗的效果）<BODY>正文标记（设计文件格式及内文所在）<BR>换行标记（令文字、图片等显示在下一行）<BIG>字体加大标记（令字体稍为加大）<BLINK>闪烁文字标记（令文字产生闪烁效果）<BGSOUND>背景声音标记（于背景播放声音或音乐）<BASE>连结基准标记（可将网页中所有的相对路径转换成绝对路径）<BASEFONT>基准字形标记（设定所有字的字形、大小、颜色）<BLOCKQUOTE>引述文字区块、令文字在表格的上下左右留有一定的空间background背景墙纸。
例：background=01.JPGbgcolor背景颜色。
例：bgcolor="#ff0000"bgproperties固定背景墙纸。
例：bgproperties="fixed"border边框。
例：border=10bordercolor边框颜色。
例：bordercolor="#000080"bordercolorlight边框向光部分的颜色。
例：bordercolorlight="#000000" bordercolordark边框背光部分的颜色。
例：bordercolordark="#ffffff"bottom置于底端。
html手写代码[整理版]
![html手写代码[整理版]](https://img.taocdn.com/s3/m/d441b470f4335a8102d276a20029bd64783e62d5.png)
html手写代码<body text=""> 设置非链接文字（普通文字）的颜色bgproperties="fixed" 文字滚动背景不动；；；颜色属性:1 2 位（红色）3 4位（绿色）5 6位（蓝色）bgcolor="背景颜色" background="网页背景" ../网页的上层文件<p>标签的属性 align="下一段中的文字对齐方向"<b></b>和<strong></strong>以粗体显示<i></i>,<cite></cite>,<em></em>,<var></var>,<dfn></dfn>以斜体显示 <u></u>加下滑线 <address>斜体加换行</address><hr> noshade属性（取消水平线的立体属性“阴影”）<center>要居中的内容</center><strike>要加上删除线的文字</strike> <big>要加大的文字</big><small>要缩小的文字</small> sub下标 sup上标<ol><li></li></ol>有序排列 type属性="排序方式" start="3"排序从三开始<li>的属性 type="排序类型" value="开始的值"<ul><li></li></ul>无序排列<table> cellspcing 表格之间的距离 cellpadding文字与边框的距离 bgcolor背景颜色<td>valign垂直对齐 top顶 middle居中对齐 bottom底端对齐</td><img src="" hspace="水平方向空白" vspace="垂直方向空白"><a href="链接网站" >图片链接<a><img="" src="" usemap="map(代表有热点区域片)" /></a><map name="" id="map"><area shape="热点形状：rect矩形circle 圆形poly不规则图像" coords="左上角和右下角的坐标"/></map><frameset rows=（框架横向的划分） cols="框架的垂直划分（12，*）" framespacing="两个边框的距离" frameborder="有无边框（值有1,0，yes，no）">框架标签<frame src="网页 id="" name="框架名字" scrolling="(yes和no)框架是否有滚动条"（框窗"<frameset><noframes><body></body></noframes> 当浏览器不支持框架时显示<body>和</body>之间的文字<iframe src="">当浏览器不支持iframe标签时显示的文字</iframe><marquee>width和height属性限制文字滚动的宽度和高度behavior属性决定文字滚动的方式scrollamount滚动速度 loop滚动次数元标签<meta name="description" content="描述信息"><meta name="keywords" contect="关键字">特殊符号在代码中的显示用指定的代码显示CSS行内样式 style= "border:#ffffff 10px solid(实线)"dotted虚线style="font-style:italic(斜体字)" font-size字体大小style="font-variant:small-caps" 将文字变成小型大写style="font-weght:{bold(粗体相当于把值设为700)，bolder（比normal粗一点)，lighter(比正常要细)}"style="font-family:"字体"" 一种字体不加引号或单引号多种加双引号style="text-decoration:underline(下划线),overline(上划线),line-through（中线）"style="text-align:文本对齐方式"style="letter-spacing:文字间的间隔像素"style="color:#颜色属性"background:可以设置多种属性如颜色背景图片background-color:设置背景颜色background:url() background-image:url()设置背景图片background-repeat:背景图片是否重复有no-repeat（不重复）repeat-x（横向重复）repeat-y（纵向重复）background-position:center（水平位置）center（垂直位置）; 控制图片的位置也可精确的控制图片的位置ru：background-position:*px或*% *px或*% 此处的px可省略也可特定设置水平和垂直的位置background-position-x（或y）margin（外空白）[余量]style="margin:*px"设置图片与border的空白style="margin-{left||right||bottom||top}:*px"设置单方的空白style="margin:*(上下空白) *（左右空白）"style="margin:*(left) *(right) *(bottom) *(left)"padding(内空白)[填充]usage and margin（用法与margin一样）css内联样式标签样式<style type="text/css"><!--a:link{}/*超链接未连接的时候*/a:hover{}/*当鼠标经过的时候*/a:active{}/*当单击超链接的时候*/a:visiited{}/*当访问过之后的样式*/这四个是伪类；；；；--></style>类样式<style type="text/css"><!--.* a:link--></style>在需要应用超链接css处添加代码 class="*"选择符组p,b{指定两个标签的相同样式}类选择符b.reg其中b是标签名reg是css类样式名When application[应用] in b labels[标签] add code in class ="reg" to register[登记][应用时在b标签中添加代码class="reg"]Class lable if added before the tag name only to the corresponding[应用] lables such effective[有效] [类标签前要是添加了标签名则该类只对对应的标签有效]ID选择符#ID（id号）When using in the tag[标签] to join id=""【当使用时在标签中加入id=""】td#one(标签#one)限定ID的作用标签包含标签td p（标签标签） {css样式}此css作用于td中的p标签与上面的.* a:link用法差不多伪类和类的结合 a.red:link method of use[使用方法]class=red；这种方法限制了此css只能在a标签中使用.red a:link 这种方法不限制css所应用的标签;;外部链接<link rel="stylesheet" （使用指定的样式表格式）type="text/css"(指定使用的文件是样式表文件) href="css/文件名"（css文件路径）>设为首页样式代码<a style="behavior:url(#default#homepage)"onclick="this.style.behavior='url(#default#homepage)';this. sethomepage(‘填入要设的网页’);return(false);" href=#>文字</a><a onclick="window.external.addfavorite('要收藏的网页','网站名称')" href=#>文字</a>例子（主页和收藏）<html><head><title>made of luye</title></head><body><a href=# style="behavior:url(#default#homepage)"onclick="this.style.behavior='url(#default#homepage)';this. sethomepage('')">homepage</a><p>111</p><a href=#onclick="window.external.addfavorite('' ,'qwer')">favorite</a></body></html>margin和padding的区别margin是标签与标签之间的空白padding 是标签之内的空白；。
html常用背景颜色代码
标记或参数
定义
<A>
连结标记
<ADDRESS>
地址标记（斜体效果）
<AREA>
连结区域标记（设定各连结区域）
alink
点击连结时的样式。例：alink="#FF0000"
align
水平方向摆放位置。例：align="center"
alternate
<DIV> <DFN> <DIR> <DL>
区域标记 述语定义标记（斜体效果） 目录清单标记（清单项目将以圆点排列，如<UL>） 定义清单标记（清单分两层出现）
<DT> <DD> direction <EM> <EMBED>
<MENU> <META> <MAP> <MARQUEE> middle marginwidth marginhight
网页文件标题标记 表格标记
加重语气标记（产生字体加粗 Bold 的效果） 字体缩细标记（令字体稍为缩细） 划删除线标记（为字体加一删除线） 范例标记（字体稍为加宽如） 下标字标记 上标字标记 样式表标记 自订标记（独立使用或与样式表同用） 选择标记（建立 pop-up 走动清单） 引用脚本标记 大小。例：size="7" 来源。例：src="logo.gif"
闪烁文字标记（令文字产生闪烁效果）
<BGSOUND>
html插入图片背景
html插⼊图⽚背景<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>个⼈资料</title><style>body {/* 加载背景图 */background-image: url("D:\\PHP\\实验⼀\\-1c200609dff5b573.jpg");/* 背景图垂直、⽔平均居中 */background-position: center center;/* 背景图不平铺 */background-repeat: no-repeat;/* 当内容⾼度⼤于图⽚⾼度时，背景图像的位置相对于viewport固定 */background-attachment: fixed;/* 让背景图基于容器⼤⼩伸缩 */background-size: cover;/* 设置背景颜⾊，背景图加载过程中会显⽰背景⾊ */background-color: #464646;}</style></head><table ><tr><td colspan="2" align="center" ><h2>⾃我介绍</h2> </td></tr><tr><td width="97">姓名：</td><td width="391" >王⾬琪</td></tr><tr><td>年龄：</td><td >20</td></tr><tr><td>班级：</td><td >信2005-1</td></tr><tr><td height="32">专业：</td><td class="">软件⼯程</td></tr><tr ><td colspan="2" >⾃我评价：⽆</td></tr></table></body></html>。
html中background的用法
HTML中background的用法1.背景颜色在H TM L中，可以使用`ba ck gr ou nd-c ol o r`属性来设置元素的背景颜色，例如：```<b od ys ty le="ba ckg r ou nd-c ol or:#f1f1f1;"><h1>欢迎来到我的网站！</h1></bo dy>```2.背景图片除了设置背景颜色，H T ML还可以使用`ba c kg ro un d-im ag e`属性来设置元素的背景图片，例如：```<b od ys ty le="ba ckg r ou nd-i ma ge:u rl('bg.j pg');"><h1>欢迎来到我的网站！</h1></bo dy>```3.背景重复当背景图片的尺寸小于元素大小时，可以使用`b ac kg ro un d-r e pe at`属性来设置背景图片的重复方式。
常用的取值有：-`re pe at`：默认值，背景图片在水平和垂直方向上都重复；-`re pe at-x`：只在水平方向上重复；-`re pe at-y`：只在垂直方向上重复；-`no-r ep ea t`：不重复，背景图片只显示一次。
例如：```<b od ys ty le="ba ckg r ou nd-i ma ge:u rl('bg.j pg');b ac kgr o un d-r e pe at:n o-re pe at;"><h1>欢迎来到我的网站！</h1></bo dy>```4.背景定位通过设置`b ac kg ro un d-p os it io n`属性，可以调整背景图片在元素中的位置。
该属性的值可以使用关键词或百分比来表示。
解读html中background-image的属性设置
解读html中background-image的属性设置解读html中background-image的属性设置对于图片，首先我们先想到是背景图片。
因为我们许许多的装饰都是用背景图片来实现的。
既然这样，那么就从CSS控制背景图片讲起吧。
定义和用法background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
1.CSS控制背景图片：对于一个网页，我们开始设计的时候，可能没有过多的去想背景图到底是什么，因为大多都是设计背景色就可以了，原因吗，我想也很简单，因为它与前景音乐一样，对于网页的打开，速度会有一定的影响。
不过对于一般的个人网站，或者个人博客而言，它对展现自己的个性，当然是不可或缺的了，当然什么都不会太过完美，有好就有坏，也就是当图像不可用但CSS可用的时候，替换内容就不会显示出来，因此，并不建议在导航按钮文本或类似的情况中使用CSS背景图片。
控制背景图片的CSS属性有很多，只要与图片的相关的，大多都会用的上。
(1)、背景图片的导入：当然大家最熟悉的当然是background与background-image了。
为网页设计背景图片的代码是：body {background:url("d:images4.jpg")}或者body {background-image:url("d:images4.jpg")}这样的话，我们就能将想要作背景的图片导进网页里了。
(2)、背景图片的显示方式：当然，只用上面的代码，是无法表达出自己想要的效果的。
因为，图片小了，就会以平铺的方式，如果是大了，为显示它，就是会出现滚动条，这样多不好。
因此，我们还得多其进行显示控制，也就是要用到background-repeat，它是取值：repeat : 默认值。
背景图像在纵向和横向上平铺no-repeat : 背景图像不平铺repeat-x : 背景图像仅在横向上平铺repeat-y : 背景图像仅在纵向上平铺而代码，我想只要懂一点CSS的都知道，如下：body {background:url("d:images4.jpg");background-repeat:no-repeat}这样的话，它就是以原图像大小显示了。
Web前端开发智慧树知到答案章节测试2023年浙江广厦建设职业技术大学
第一章测试1.在HTML中,表示页面背景的是（）。
A:﹤body color=﹥B:﹤body agcolor=﹥C:﹤body bgcolor=﹥D:﹤body bkcolor=﹥答案:C2.HTML 中﹤body text=red﹥,表示（）。
A:可链接文字的色彩是红色B:正在点击文字的色彩是红色C:已链接文字的色彩是红色D:非可链接文字的色彩是红色答案:D3.下列选项中，用来定义粗体字符的属性值是（）。
A:700B:normalC:400D:bold答案:AD4.下列选项中，属于line-height常用的属性值单位的是（）A:pxB:%C:pdD:em答案:ABD5.word-spacing属性用于定义英文单词之间的间距，对中文字符无效。
（）A:对B:错答案:A第二章测试1.下面哪个标签是单标签（）。
A:B:C:D:答案:C2.在给一个元素同时设置背景颜色和背景图片时，下面的说法正确的是（）。
A:只能看到背景图片B:背景颜色和背景图片都能显示，当图片不重复显示时能同时看到颜色和图片，如果没有设置不重复，则用户只能看到背景图片，背景图片总是显示在背景颜色上方C:显示背景颜色还是背景图片要看设置的顺序，如果背景图片设置在后则显示背景图片，反之显示背景颜色D:只能看到背景颜色答案:B3.关于RGB代码的表示方法，下列选项正确的是（）。
A:rgb(255,0,0)B:rgb(100%,0,0)C:rgb(100,0,0)D:rgb(100%,0%,0%)答案:ACD4.关于无序列表的描述，下列说法正确的是（）A:无序列表使用标记表示B:无序列表的各个列表项之间没有顺序级别之分C:无序列表使用标记表示D:无序列表使用标记表示答案:AB5.在超链接中“href”属性用于指定链接页面的打开方式。
（）A:对B:错答案:B第三章测试1.下列选项中，属于表单标记的用途的是（）。
A:解决了以往通过Flash等进行视频的一些展示B:专门用于菜单导航、链接导航的标记C:主要用于功能性的内容表达D:用来对页面结构进行划分答案:C2.在表格中，用于设置表格的边框的属性是（）。
js点击更换背景颜色或图片的实例代码
js点击更换背景颜⾊或图⽚的实例代码1，按钮样式复制代码代码如下:<script>org_Color=document.bgColor.substring(1.10)</script><form><input type="button" value="淡黄⾊背景"onClick="document.bgColor='#feffc6'"><input type="button" value="浅蓝⾊背景"onClick="document.bgColor='#c6fffe'"><input type="button" value="粉红⾊背景"onClick="document.bgColor='#ffc9c6'"><input type="button" value="墨绿⾊背景"onClick="document.bgColor='#508b7d'"><input type="button" value="天蓝⾊背景"onClick="document.bgColor='#7BC7FF'"><input type="button" value="⽶⽩⾊背景"onClick="document.bgColor='#f0f0f0'"></form>2，下拉样式复制代码代码如下:<selectonChange="document.bgColor=this.options[this.selectedIndex].value"><option value="#C0C0C0">灰⾊的<option value="BLACK">⿊的⾊<option value="d2c6ff">淡紫蓝<option value="feefc7">太阳黄<option value="ffd2c6">淡红橘<option value="c7fed8">苹果绿<option value="80ff80">草原绿<option value="#C1BC59">橄榄⾊<option value="#7BC7FF">天空蓝<option value="#AEDFD3">蓝绿⾊<option value="#508B7D">墨绿⾊<option value="#F0F0F0">⽶⽩⾊</select>3，触碰样式复制代码代码如下:<scriptlanguage="Javascript"><!--function backcolor(form){temp = ""for (var i = 0; i < 16; i++) {temp = form.color[i].valueif (form.color[i].checked){ document.bgColor = temp }}}function randombackground(){document.bgColor = getColor()}function getColor(){currentdate = new Date()backgroundcolor = currentdate.getSeconds()if (backgroundcolor > 44)backgroundcolor = backgroundcolor - 45else if (backgroundcolor > 29)backgroundcolor = backgroundcolor - 30else if (backgroundcolor > 15)backgroundcolor = backgroundcolor - 16if (backgroundcolor == 0 )return "olive";else if (backgroundcolor == 1 )return "teal";else if (backgroundcolor == 2 )return "red";else if (backgroundcolor == 3 )return "blue";else if (backgroundcolor == 4 )return "maroon";else if (backgroundcolor == 5 )return "navy";else if (backgroundcolor == 6 )return "lime";else if (backgroundcolor == 7 )return "fuschia";else if (backgroundcolor == 8 )return "green";else if (backgroundcolor == 9 )return "purple";else if (backgroundcolor == 10 )return "gray";else if (backgroundcolor == 11 )return "yellow";else if (backgroundcolor == 12 )return "aqua";else if (backgroundcolor == 13 )return "black";else if (backgroundcolor == 14 )return "white";else if (backgroundcolor == 15 )return "silver";}// --></script><body onload="document.bgColor='lime'; returntrue;"><a href="javascript:void(0);"onmouseover="randombackground()"><fontsize="5" face="宋体">碰我改变背景颜⾊</font></a>点击更换背景图⽚：复制代码代码如下:<div style="float:right;margin-right:20px;"><ahref="javascript:void(0);"><imgclass="button1"onClick="javascript:document.body.style.background='url(images/bg/1.jpg)'"></a><ahref="javascript:void(0);"><imgclass="button2"onClick="javascript:document.body.style.background='url(images/bg/2.jpg)'"></a><ahref="javascript:void(0);"><imgclass="button3"onClick="javascript:document.body.style.background='url(images/bg/3.jpg)'"></a><ahref="javascript:void(0);"><imgclass="button4"onClick="javascript:document.body.style.background='url(images/bg/4.jpg)'"></a><ahref="javascript:void(0);"><imgclass="button5"onClick="javascript:document.body.style.background='url(images/bg/5.jpg)'"></a><ahref="javascript:void(0);"><imgclass="button6"onClick="javascript:document.body.style.background='url(images/bg/6.jpg)'"></a></div>IE6不能⽤的解决⽅法：复制代码代码如下:<imgonClick="javascript:document.body.style.background='url(images/bg/1.jpg)';returnfalse;">。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML背景颜色和背景图片
HTML的<body>有两个关于背景的属性，一个是bgcolor,是设置背景颜色的；另一个是background,是设置背景图片的。
bgcolor属性:
bgcolor属性用来设置HTML网页背景颜色:
<body bgcolor=颜色的英文或者颜色代码>
<body bgcolor="yellow">
<h1>这个背景是黄色的<h1>
Bockground属性：
Background属性用来设置HTML网页的背景和图片。
Background属性值就是背景图片的路径和文件名：
示例
<body background="图片的路径">
<body background="文件的路径">
如果背景图片小于网页显示窗口，那么这个背景图片会自动重复。
<body background="go.gif">
<h3>这个网页有背景图片哦！</h3>
建议：
bgcolor和background这两个<body>的属性，在新的HTML标准(HTML 4 and XHTML)里已不建议使用，而建议用CSS设置背景颜色和图片。
为保证浏览器载入网页的速度，建议尽量不要使用字节过大的图片作为背景图片。