一.CSS基本语法
主页添加图片<img src="你图片地址" border="0"> 分享外站链接（也可以用于友情链接） <A HREF=网站资源地址> 网址介绍 </A> 分类字体颜色<font color= Green > 分类名 </font> 主页添加非链接文字</A> <b>增加文字</b> 主页添加分割线<hr>文字不写也没事</hr> 分类名背景栏<button> 分类名 </button>
1、文本标签(命令) <pre></pre> 创建预格式化文本
<h1></h1> 创建最大的标题
<h6></h6> 创建最小的标题
<b></b> 创建黑体字
<i></i> 创建斜体字
<tt></tt> 创建打字机风格的字体
<cite></cite> 创建一个引用,通常是斜体
<em></em> 加重一个单词（通常是斜体加黑体） <strong></strong> 加重一个单词（通常是斜体加黑体） <font size=?></font> 设置字体大小，从 1 到 7 <font color=?></font> 设置字体的颜色,使用名字或十六进制值
2、图形(命令) <img src="name"> 添加一个图像
<img src="name" align=?> 排列对齐一个图像:左中右或上中下
<img src="name" border=?> 设置围绕一个图像的边框的大小
<hr> 加入一条水平线
<hr size=?> 设置水平线的大小（高度） <hr width=?> 设置水平线的宽度（百分比或绝对像素点） <hr noshade> 创建一个没有阴影的水平线
3、链接(命令) <a href="URL"></a>创建一个超链接
<a href="mailto:EMAIL"></a> 创建一个自动发送电子邮件的链接 <a name="NAME"></a> 创建一个位于文档内部的靶位 <a href="#NAME"></a> 创建一个指向位于文档内部靶位的链接
4、格式排版(命令) <p> 创建一个新的段落
<p align=?> 将段落按左、 中、 右对齐
<br> 插入一个回车换行符
<blockquote></blockquote> 从两边缩进文本
<dl></dl> 创建一个定义列表
<dt> 放在每个定义术语词之前
<dd> 放在每个定义之前
<ol></ol> 创建一个标有数字的列表
<li> 放在每个数字列表项之前，并加上一个数字
<ul></ul> 创建一个标有圆点的列表
<li> 放在每个圆点列表项之前，并加上一个圆点
<div align=?> 一个用来排版大块HTML 段落的标签，也用于格式化表
二、HTML基本语法
文件格式<html></html>(文件的开头与结尾) 主题<title></title>(放在文件的开头) 文头区段<head></head>(描述文件的信息) 内文区段<body></body>(放此文件的内容) 标题<h?></h>(?=1~6,改变标题字的大小) 标题对齐<h align=right,left,center></h> 字加大<big></big> 字变小<small></small>粗体字<b></b> 斜体字<i></i> 底线字<u></u> 上标字<sup></sup> 下标字<sub></sub> 居中<center></center> 居左<left> </left> 居右<right> </right> 基本字体大小<basefont size>(取值范围从1到7，默认值为3) 改变字体大小<font size=?></font>(?=1~7) 字体颜色<font color=#rrggbb></font>(RGB色码) 指定字型<font face=?></font>(?=宋体，楷体等) 网址链结<a href="URL"></a> 设定锚点<a name="?"></a>(?以容易记为原则)链结到锚点<a href="#?"></a>(同一份文件) <a href="URL#?"></A>(锚点不同文件) 显示图形<img src="URL"></a> 图形位置<img src="URL" align=top,bottom,middle,left,right>(分别为上、下、中、左、右的位置) 图形取代文字<img src="URL"alt=?>(无法显示图形时用) 图形尺寸<img src="URL" width=? height=?>(?以像素为单位) 连结图形边线<img src="URL"border=?>(?以像素为单位) 图形四周留白<img src="URL"hspace=? vspace=?>(?以像素为单位) 段落<p></p> 断行<br></br> 横线<hr> 横线厚度<hr size=?>(?以像素为单位) 横线长度<hr width=?>(?以像素为单位) 横线长度<hr width=?%>(?与页宽相比较) 实横线<hr noshade>(无立体效果) 背景图案<body background=图形文件名>(图形文件格式为gif和jpg) 背景颜色<body bgcolor=#rrggbb>(RGB色码) 背景文字颜色<body text=#rrggbb>(RGB色码) 未链结点颜色<body link=#rrggbb>(RGB色码) 已链结点颜色<body vlink=#rrggbb>(RGB色码) 正在链结点颜色<body alink=#rrggbb(RGB色码)
三、具体在做html文件前,我们还有哪些需要做的：
1、网页图象一般有什么要求？ 受网络传输速度制约，图象要尽量小。一般每幅最大不要20K。 图象格式一般为gif和jpg两种。通常单调的可以考虑使用gif压缩。用jpg处理照片比较合适，因为里面包含许多色彩的缓和变化。不管是哪种，做好后都应压缩以给图片减肥，但不要压得太多而失真。压缩可用JPEG Optimizer或Image Optimizer两种工具，若用photoshop5.5做的图象，保存时直接用Save For Web可进行压缩。另外，Gif格式可作成动画。
2、选择图片的网络存储空间
建议各位卖家们事先可以找一个稳定的空间来存放你的图片，以确保你的买家随时可以看到精美漂亮的商品。注意：不要把图片存放在免费相册里，因为这些相册的路径一般都是虚拟的，每一次浏览的URL都会改变，这对我们卖家来说是非常不好的。 另外要注意的一点是：有一些买家反映看到的卖家商品的图片是小叉叉，这是因为一些卖家在用HTML粘贴图片的时候把自己电脑中C盘或者D盘(也就是本地路径)的图片的路径直接直接复制在命令中，这样就会造成卖家自己可以看到这些图片而你的买家们看到的则是叉叉！所以卖家们在用HTML制作图片的时候一定要注意不要用本地路径直接粘贴图片！
四、练习的例子：（红色字体部分即可修改成你自己的自定义）
第一：用HTML来插入一个图片，<img src="
http://www.cyberhome.cn/images /girl/PLMM_A.jpg">
Key:
第二：用HTML来插入一个URL， <a href="
http://www.cyberhome.cn /images/girl/PLMM_F.jpg">点击我进入</a>
Key:点击我进入
第三：插入url的同时，插入图片，点击图片就可以进入这个url，如做一个插入网园淘艺坊的图片链接代码： <a href="
http://taobao.cyberhome.cn/"><img src="
http://www.cyberhome.cn/images /girl/PLMM_C.jpg"></a>
Key:
第四：插入一段音乐
高山流水：<embed src="
http://www.cyberhome.cn/images /hill-water.mid" width="72" height="25" autostart="false" loop="1" align="absmiddle" controls="smallconsole/playbutton/pausebutton/stopbutton"></embed>
Key:
何日君再来：<a href="
http://202.108.23.172 /m?ct=134217728&tn=baidumt, 何日君再来 &word=mp3,
http://lib.jiutai.org/longresdemo /fWJjZGVmZ2hhYmVlbWhpbjE$.mp3,, [%BA%CE%C8%D5%BE%FD%D4%D9%C0%B4]&si = %BA%CE%C8%D5%BE%FD%D4%D9%C0%B4;; %B5%CB%C0%F6%BE%FD&lm = 16777216">何日君再来</a> Key: 何日君再来
body { background-color:green;[网页背景色为绿] color: red;[默认字颜色为红] text-align: center;[文字居中，居左用left居右用right] font-size:120%;或9px;[字体尺寸为默认的120%或小字体] font-weight: bold[字体样式为粗体]; line-height: 18px[文字行距]; background-image: url(/down/20121124/44582/a.jpg)[我的磨图片的地址,上传后复制该图片下载地址,截取down后面部分即可] width:340px;height:580px;[图片显示大小] background-color:transparent[背景颜色透明];}span {background-color:white[扩展名及“首页上页下页末页”一带背景色为白色];color:orange[位置同上，文字颜色]; border-style: groove; border-color:red[位置同上，文字外框架颜色]; border-width: 1px 1px[位置同上，文字外框架大小,第一个为横框架，第二个为竖框架，过大会导致外框架色完全覆盖该区域];} a { border-style: solid;border-width:1px 1px[链接文字的外框架大小，第一个是横框架的，第二个是竖框架的];border-color: blue[同上位置，外框架颜色];color:gold[同上位置,文字颜色为金色];} form{background-color:#000011[评论区域背景颜色];color:red[评论区域字体颜色];} .file_list{color:brown[扩展名字体颜色,＊若前面已用了span部分修改将优先显示span部分];} div {border-style: groove; border-color: #ff5566[上框条色]#446600[右框条色]#0033ff[下框条色]#1122ff[左框条色]; border-width: 4px 1px[框条粗细,第一个是横框架的，第二个是竖框架的];} [网页框架] p {background-color:white[＂首页上页下页末页＂区域背景颜色];color:red[＂首页上页下页末页＂字体颜色];} CSS颜色对照网址
http://www.rapidtables.com /web/color/Web_Safe.htm
下面是用于分类名中的代码： 注意：下面这些是用于分类中，不是CSS里
换行
<br/> 主页添加图片
<img src="图片地址" border="0"> 添加主页右下角图片
#whole_body{background:url(图片地址)no-repeat 100% 100% scroll; }主页添加背景音乐
<embed src="音乐地址" autostart="true" hidden="true" loop="true"></embed> 分享外站链接（也可以用于友情链接） <A HREF=网站资源地址> 网址介绍 </A> 分类字体颜色和大小
<font face="字体名称"size="字体大小"color="字体颜色">被设置的字体格式的内容</font> 主页添加非链接文字
</A> <b>增加文字</b> 主页添加分割线
<hr>文字不写也没事</hr> 分类名背景栏
<button> 分类名 </button> 文字背景加边框
<div style="border:1px//边框厚度// solid red//边框颜色//;background-color:red//文字背景色//;">这里为文字</div>
首页快速留言代码： <a><form method="POST" action="
http://s.wodemo.com/"> <input type="hidden" name="act" value="file_talk"> <input type="hidden" name="fid" value="这里填留言版地址后面的几个数字，比如我的是50028，其它不要修改"><textarea name="content" cols="20" rows="2">飘过～</textarea><input type="submit"value="留言"></a>
首页SOSO搜索代码，不要修改，直接复制到分类里： <a><input type="text" id="t" /> <input type="button" value="SOSO搜索" onclick="location.href='
http://wap.soso.com /sweb/search.jsp?key='+document.getElementById('t').value+' site: wodemo.com';" /></a>
首页谷歌搜索代码，不要修改，直接复制到分类里： <a><form action="
http://www.google.com.hk/search" method="get"> <input type="hidden" name="sitesearch" value=" wodemo.com" /> <input type="search" name="as_q" /> <input type="submit" value="谷歌搜索" /></a>
当前时间代码
<a>当前时间 <script language="javascript">function time_get(){now = new Date();h="0"+now.getHours();m="0"+now.getMinutes();if(h>9){h=now.getHours()}if(m>9){m=now.getMinutes()}document.write(""+h+":"+m+"");}</script><script>time_get()</script></a>
年月日星期代码
<a><script type="text/javascript">var d = new Date();document.write(d.getFullYear()+'年'+(d.getMonth()+1)+'月'+d.getDate()+'日');document.write(' 星期'+'日一二三四五六'.charAt(new Date().getDay()));</script></a>
下面一些`实用CSS小汇集`转载于◇笑忘书◇
http://35230.wodemo.com以下可用于我的磨的美化，用于CSS中。
注意：复制代码时注意带上该段的开头部分与结尾（如body{ 和}），颜色代码（如red和#000000）（本磨有）自行更换，说明仅供参考，欢迎各位提供纠正完善，谢谢。 body { 【网页背景色为绿】 background-color:green; 【默认字颜色为红】color: red; 【文字居中,居左用left,居右用right】 text-align: center; 【字体尺寸为默认的120%,小字体用9px】 font-size:120%; 【字体浓淡为粗体】 font-weight: bold; 【文字行距】 line-height: 18px; 【背景图片】 background-image: url(图片地址); 【背景图片重复属性. 这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。 repeat-x 背景图片横向重复
repeat-y 背景图片竖向重复
no-repeat 背景图片不重复】 background-repeat:repeat-y; 【背景图片显示大小】 width:340px;height:580px; } span { 【扩展名和"首页上页下页末页"区域背景色】 background-color:white; 【位置同上,文字颜色】 color:orange; 【边框样式为槽线式】 border-style: groove; 【位置同上,文字边框颜色】 border-color:red; 【位置同上,文字边框粗细,左为横框,右为竖框】 border-width: 1px 1px; } a { 【边框样式为直线式】 border-style: solid; 【链接文字的边框粗细,左为横框,右为竖框】 border-width:1px 1px; 【同上位置,边框颜色】 border-color: blue; 【同上位置,文字颜色】 color:gold; 【链接文字的背景颜色】 background-color:gold; } form{ 【评论区域背景颜色】 background-color:#000011; 【评论区域字体颜色】 color:red; } .file_list{ 【文件列表区域背景颜色为白】 background-color:white; 【扩展名字体颜色,＊若前面已用了span部分修改将优先显示span部分】 color:#556688; 【文件列表区域的文字尺寸为小字体】font-size:9px; } 【网站边框大小和居中】 body { width: 93%; text-align: center; } div { 【默认字颜色】 color:red; 【边框样式为双线式】 border-style: double; 【网页边框颜色,分别为上右下左框】 border-color: #ff5566#446600#0033ff#1122ff; 【网页边框粗细,左为横框,右为竖框】 border-width: 4px 1px; 【文字与网页边框的距离】 padding:3px; 【网页边框内的颜色，如果与body{background-color:red;}同时存在，则网页边框外为红色，边框内为绿色】 background-color:green; } p { 【"首页上页下页末页"区域背景色】 background-color:white; 【"首页上页下页末页"区域字体颜色】 color:red; }