下载文档原格式
标记或参数定义<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手写代码[整理版]](https://uimg.taocdn.com/d441b470f4335a8102d276a20029bd64783e62d5.webp)
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插⼊图⽚背景<!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的用法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的属性设置对于图片，首先我们先想到是背景图片。
因为我们许许多的装饰都是用背景图片来实现的。
既然这样，那么就从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}这样的话，它就是以原图像大小显示了。
第一章测试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点击更换背景颜⾊或图⽚的实例代码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;">。
背景颜色设置background 简写属性，作用是将背景属性设置在一个声明中。
可依次设置背景颜色，图像背景及是否重复填充background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
scroll 默认值。
/fixed 当页面的其余部分滚动时，背景图像不会移动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
如果要用H:\ascii码表.gif的路径的话，应该：body{background-image:url(file:///H|/ascii码表.gif);}background-position 设置背景图像的起始位置。
left/right/center/bottom/top这几个属性值可以两两组合使用，如果只规定了一个关键词，那么第二个值将是"center"。
x% y% 第一个值是水平位置，第二个值是垂直位置;左上角是0% 0%。
右下角是100% 100%;如果仅规定了一个值，另一个值将是50%。
x y 左上角是0 0。
单位是像素(0px 0px) 或任何其他的CSS 单位。
如果仅规定了一个值，另一个值将是50%。
background-repeat 设置背景图像是否及如何重复。
repeat/repeat-x/repeat-y/no-repeat background-size 规定背景图片的尺寸。
像素/百分比设置宽高cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域background-clip 规定背景的绘制区域。
border-box 背景被裁剪到边框盒padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
background-origin 规定背景图片的定位区域。
HTML 常用标签属性汇总<body> 标签 (1)<a> 标签 (2)1.可选的属性 (2)2.标准属性 (3)键盘属性 (4)<p> 标签 (4)1.可选的属性 (4)2.标准属性 (4)<a> 标签 (5)1.可选的属性 (5)2.标准属性 (6)键盘属性 (7)<img> 标签 (7)1.必需的属性 (7)2.可选的属性 (7)3.标准属性 (8)<table> 标签 (9)1.可选的属性 (9)2.标准属性 (10)<input> 标签 (11)1.可选的属性 (11)2.标准属性 (12)注：表示颜色的有三种方式； (13)<body> 标签1.背景属性:包括：bgcolor,background<body background-color:black> 背景颜色<body background-image : url(image/bg.gif)> 背景图片<body background-attachment : fixed> 固定背景<body background-repeat : repeat> 重复排列-网页预设<body background-repeat : no-repeat> 不重复排列<body background-repeat : repeat-x> 在x轴重复排列<body background-repeat : repeat-y> 在y轴重复排列<body background-position : 90% ,90%> 背景图片x与y轴的位置2,文字属性：包括：text,link,alink,vlink,<body text="red">字体颜色<body link="green">可链接文字的色彩<body alink="red">正被点击的可链接文字的色彩<body vlink="yello">已经点击(访问)过的可链接文字的色彩3,留白属性：其中分为：leftmargin,topmargin<body leftmargin="value">页面左侧的留白距离.<body topmargin="value">页面顶部的留白距离注：value为长度值为数字色彩是用16 进制的红－绿－蓝(red-green-blue, RGB) 值来表示。
HTML+CSS常⽤代码（笔记）注释标签：对代码进⾏说明<!-- 单⾏注释,也可以对多⾏⽂字进⾏注释 -->常⽤格式标签<b>加粗</b><i>斜体</i><u>下划线</u><s>删除线</s><p>段落标签</p><hr>：分割线<br>：换⾏<sup>上标</sup><sub>下标</sub><pre>保留当前格式样式</pre><strong>(粗字体)强调⽂本</strong>../：返回上⼀级（⽗级）⽬录标题标签<h1>我是⼀级标题标签(最⼤)</h1><h2>我是⼆级标题标签</h2><h3>我是三级标题标签</h3><h4>我是四级标题标签</h4><h5>我是五级标题标签</h5><h6>我是六级标题标签(最⼩)</h6>列表标签⽆序列表：<ul type="disc"> <!--disc:圆点；circle：圆圈；square：⽅块--><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul>有序列表：<ol type="1"> <!--1，a/A，i/I--><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol>⾃定义列表：图⽂混排<dl><dt>标题，图⽚</dt><dd>描述</dd></dl>CSS样式 内嵌样式:放在<head>标签之间语法：<style type="text/css">选择器名 {属性名:属性值;}</style>所有标签（*）* {padding:0px; /*清除默认内边距*/margin:0px; /*清除默认外边距*/}⽂本属性line-height:20px; /*⾏⾼*/text-align:center; /*对齐：Left|right|center|justify*/text-decoration:none; /*⽂本修饰None：默认|underline：定义⽂本下的⼀条线|overline：定义⽂本上的⼀条线|line-through：定义穿过⽂本下的⼀条线*/ Letter-spacing:5px; /*字母之间的间距*/Text-indent:40px; /*⾸⾏的缩进⽅式：px/%*/字体标签及属性<font>字体标签</font><!--字体CSS属性--><style type="text/css">font-size:字体⼤⼩（常⽤单位：px/%/em...）;color:颜⾊;font-style:字体样式;font-family:字体系列;font-weight:字体粗细;</style>例：<font size="6" color="#FF0000" face="微软雅⿊">我是字体标签</font>背景相关的属性background-color: red; /*设置背景颜⾊*/background-image: url(图⽚路径); /*设置背景图⽚（图⽚路径没有引号包裹）*/background-repeat: no-repeat; /*设置背景的平铺⽅式：Repeat-x、repeat-y、no-repeat*/Background-attachment: Fixed; /*设置滚动：Scroll、Fixed*/background-position: center; /*设置背景的坐标，偏移量,如left、right、center、button*/background-position:100px -100px;/*第⼀值：左右偏移量，正：向右偏移，负：向左偏移；第⼆值：上下偏移量，正：向下偏移，负：向上偏移*//*可以为px、%、cover、continuecover: 不会造成图⽚失真，会铺满整个标签。
CSS背景颜⾊、背景图⽚、平铺、定位、固定CSS背景颜⾊设置
background-color:red;如设置背景颜⾊为红⾊；
背景颜⾊设置⽀持3种写法：
颜⾊名
16进制
rgb
CSS背景图⽚颜⾊设置
background-image:url(图⽚地址);如设置背景图⽚
路径不在说明了!
CSS背景图⽚平铺设置（如果不设置图⽚默认设置为x轴y轴同时平铺即值为repeat）
background-repeat:repeat-x;如设置x轴平铺；
background-repeat:no-repeat如设置不平铺；
CSS背景图⽚定位设置
background-position:right top;
CSS背景图⽚固定：
标签定义及使⽤说明
background-attachment设置背景图像是否固定或者随着页⾯的其余部分滚动。
默认值:scroll
继承:no
版本:CSS1
JavaScript 语法:object object.style.backgroundAttachment="fixed"
属性值
值说明
scroll背景图⽚随页⾯的其余部分滚动。
这是默认
fixed背景图像是固定的
inherit指定background-attachment的设置应该从⽗元素继承。
CSS背景颜色背景图片居中重复固定样式background经验篇Background CSS背景图片与CSS背景颜色样式技术经验篇我们使用CSS Background样式属性，可以设置网页背景单一颜色、网页背景为图片、网页背景图片居中于网页、网页背景图片网页固定位置、网页背景图片中网页中重复平铺等css背景样式介绍与案例讲解。
扩展阅读：CSS背景Background基础：/rumen/r125.shtml背景颜色背景图片目录一、CSS背景background图片1、背景图片语法background-image:url() 引入背景图片background-repeat:no-repeat 设置背景图片是否重复平铺background-position:left top 设置图片的css背景定位，left代表靠左，top代表靠上简写背景图片语法：background:url(图片地址) no-repeat left top2、背景图片设置Body{background:url(/img201301/divcss5-logo-2013. gif) no-repeat 0 0 }这里设置了图片“/img201301/divcss5-logo-2013.gif”作为网页背景不重复并靠上靠左显示。
，3、CSS背景图居中横向居中：background:url(图片地址) no-repeat center top纵向居中：background:url(图片地址) no-repeat left 50%这里50%是随意设置考上为50%距离，细节具体上下垂直居中需要再通过百分比均衡设置。
4、背景图片一般案例Body设置网页背景css代码body{background:url(/img201301/divcss5-logo-2013. gif) no-repeat 0 0}CSS图片背景案例截图不重复也不平铺图片背景截图5、div css背景图片居中Css背景图片居中代码：body{background:url(/img201301/divcss5-logo-2013. gif) no-repeat center 0}这里我们用了“center ”居中属性，更多详情可进入css 背景了解基础居中截图背景图片居中于网页截图6、背景图片横向平铺CSS背景X横向平铺代码：body{background:url(/img201301/divcss5-logo-2013. gif) repeat-x}案例截图：Y轴横向平铺图片背景截图7、背景图片纵向平铺CSS背景Y纵向平铺代码：body{background:url(/img201301/divcss5-logo-2013.gif)repeat-y}平铺重复图片背景效果截图：纵向Y轴方向垂直平铺图片背景截图8、全网页背景图片重复平铺图片背景全屏网页重复平铺关键代码：body{background:url(/img201301/divcss5-logo-2013. gif)}截图：图片作为背景全屏平铺显示截图说明：这里没有设置是否重复，是否居左居右，只设置背景引入图片即可简便地实现图片自然全屏平铺二、CSS背景颜色1、background背景颜色语法background:#FFF.divcss5{background:#FFF}设置了divcss5对象背景为白色2、背景颜色案例假如我们设置网页背景全部为白色，文字颜色为白色1）、对应背景颜色CSS代码与HTML源代码：2）、背景颜色与文字颜色案例截图CSS设置背景颜色与CSS字体颜色如果想了解CSS背景颜色与CSS图片背景同时设置background基础进入：/rumen/r125.shtml三、背景为颜色与为图片总结我们使用css background设置图片为网页背景，图片为网页背景各种样式，包括了是否背景图片居中，是否背景图片重复平铺显示、是否固定背景图片位置等背景样式，以上知识点与案例点希望大家自己复制以上代码实践观察即可掌握。
CSS常⽤样式–背景属性⼀、背景颜⾊ background-color属性名：background-color作⽤：在盒⼦区域添加背景颜⾊的修饰加载区域：在 border 及以内加载背景颜⾊属性值：颜⾊名、颜⾊值<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;padding: 30px;border: 5px dashed red;margin: 20px;background-color: slateblue;}</style></head><body><div class="box"> 背景颜⾊ </div></body></html>⼆、背景图⽚ background-image属性名：background-image作⽤：给盒⼦添加图⽚的背景修饰加载范围：默认的加载到边框及以内部分。
后期如果图⽚不重复加载，加载从 border 以内开始属性值：url(图⽚路径)url：uniform resource locator，统⼀资源定位符，⼩括号内部书写查找图⽚的路径.box {width: 200px;height: 200px;padding: 30px;border: 5px dashed red;margin: 20px;/* background-color: slateblue; 背景颜⾊ */background-image: url(images/lagouwang.jpg);}如果图⽚不重复，从 border 以内开始加载背景图和背景颜⾊可以同时设置，背景图会压盖背景颜⾊，没有背景图的区域会显⽰背景颜⾊三、背景重复 background-repeat属性名：background-repeat作⽤：设置添加的背景图是否要在盒⼦中重复进⾏加载根据属性值不同，有四种重复加载⽅式| 属性值 | 作⽤ || repeat | 重复，默认属性值，表⽰会使⽤背景图⽚重复加载填满整个盒⼦背景区域 || no-r epeat | 不重复，不论背景图是否⼤于盒⼦范围，都只加载⼀次图⽚ || repeat--x | ⽔平重复，使⽤背景图⽚⽔平重复加载铺满第⼀⾏，垂直⽅向不重复 || repeat--y | 垂直重复，使⽤背景图⽚垂直重复加载铺满第⼀列，⽔平⽅向不重复 |.box {width: 200px;height: 200px;padding: 30px;border: 5px dashed red;margin: 20px;/* background-color: slateblue; 背景颜⾊ */background-image: url(images/lagou_small.jpg);/* background-repeat: repeat; *//* background-repeat: no-repeat; *//* background-repeat: repeat-x; */background-repeat: repeat-y;}四、背景定位 background-position属性名：background-position作⽤：主要⽤于设置不重复的图⽚在背景区域的加载开始位置属性值：分为三种写法，单词表⽰法、像素表⽰法、百分⽐表⽰法。
html代码大全太Low了，网页居然还用这么老掉牙的特效！弄个粗体字，下划线就是突出重点了？真是一股浓浓的乡村风扑面而来；弄个图在页面飘来飘去就是动画效果了，你要这么认为的话那我只能保持沉默了。
在HTML5占领着整个互联网之时，想透过网页抓住所有人的眼球，因循守旧是行不通的。
因此，有你不能不知道的HTML常用代码。
只有熟悉掌握了常用的HTML 代码，你才能在编写网页的时候做到行云流水，用处处流露着细腻和创意的动效细节打动所有人。
html代码大全：结构性定义文件类型<HTML></HTML> （放在档案的开头与结尾）文件主题<TITLE></TITLE> （必须放在「文头」区块内）文头<HEAD></HEAD> （描述性资料，像是「主题」）文体<BODY></BODY> （文件本体）标题<H?></H?> （从1到6，有六层选择）标题的对齐 <H?ALIGN=LEFT|CENTER|RIGHT></H?>区分<DIV></DIV>区分的对齐<DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>引文区块<BLOCKQUOTE></BLOCKQUOTE> （通常会内缩）强调<EM></EM> （通常会以斜体显示）特别强调<STRONG></STRONG> （通常会以加粗显示）引文<CITE></CITE> （通常会以斜体显示）码<CODE></CODE> （显示原始码之用）样本<SAMP></SAMP>键盘输入<KBD></KBD>变数<VAR></VAR>定义<DFN></DFN> （有些浏览器不提供）地址 <ADDRESS></ADDRESS>大字<BIG></BIG>小字<SMALL></SMALL>与外观相关的标签（自订的表现方式）加粗<B></B>斜体<I></I>底线<U></U> （尚有些浏览器不提供）删除线<S></S> （尚有些浏览器不提供）下标<SUB></SUB>上标<SUP></SUP>打字机体<TT></TT> （用单空格字型显示）预定格式<PRE></PRE> （保留文件中空格的大小）预定格式的宽度<PRE WIDTH=?></PRE>（以字元计算）向中看齐<CENTER></CENTER> （文字与图片都可以）闪耀<BLINK></BLINK> （有史以来最被嘲弄的标签）字体大小 <FONTSIZE=?></FONT>（从1到7）改变字体大小 <FONTSIZE=+|-?></FONT>基本字体大小 <BASEFONTSIZE=?> （从1到7; 内定为3）字体颜色 <FONTCOLOR="#$$"></FONT>（$$为颜色代码）html代码大全：修改页面的实用性HTML代码1)贴图：<img src="图片地址">2)加入连接：<a href="所要连接的相关地址">写上你想写的字</a>3)在新窗口打开连接：<a href="相关地址"target="_blank">写上要写的字</a>4)移动字体(走马灯)：<marquee>写上你想写的字</marquee>5)字体加粗：<b>写上你想写的字</b>6)字体斜体：<i>写上你想写的字</i>7)字体下划线: <u>写上你想写的字</u>8)字体删除线: <s>写上你想写的字</s>9)字体加大: <big>写上你想写的字</big>10)字体控制大小：<h1>写上你想写的字</h1> (其中字体大小可从h1-h5,h1最大，h5最小)11)更改字体颜色：<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间12)消除连接的下划线：<a href="相关地址"style="text-decoration:none">写上你想写的字</a>13)贴音乐：<embed src="音乐地址" width="宽度" height="高度" autostart=false>14)贴flash: <embed src="flash地址" width="宽度" height="高度">15)贴影视文件：<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>16)换行：<br>17)段落：<p>段落</p>18)原始文字样式：<pre>正文</pre>19)换帖子背景：<body background="背景图片地址">20)固定帖子背景不随滚动条滚动：<body background="背景图片地址" bodybgproperties=fixed>21)定制帖子背景颜色：<body bgcolor="#value">(value 值见10)22)帖子背景音乐：<bgsound="背景音乐地址"loop=infinite>23)贴网页：<iframe. src="相关地址" width="宽度" height="高度"></iframe>html代码大全：常常会遇到的问题点击关闭窗口<ahref="javascript.:top.window.close();">点击关闭窗口</a>！请问如何去掉主页右面的滚动条？<bodyscroll="no"><body style="overflow-y:hidden">如何做到让一个网页自动关闭.<html><head><OBJECTid=closes type="application/x-oleobject"classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"><param name="Command"value="Close"></object></head><body >这个窗口会在10秒过后自动关闭,而且不会出现提示. </body>如何在不刷新页面的情况下刷新css?<style>button{ color:;}</style><buttonnclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>点击按钮直接修改style标签里button 选择符使按钮改为红色</button>请问如何让网页自动刷新？在head部记入<META. HTTP-EQUIV="Refresh" c>其中20为20秒后自动刷新，你可以更改为任意值。
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设置背景颜色和图片。
为保证浏览器载入网页的速度，建议尽量不要使用字节过大的图片作为背景图片。
