Html代码大杂烩

Html代码大杂烩

将经常用到的Htm代码收集，以方便查看。适合对Html和CSS有一定了解的朋友参考：
文字中划线：<strike></strike>
换行:<br/>
空格：&nbsp;
文字加粗：<strong></strong>
网页转向：<meta equiv="refresh" content="1;URL= http://www.xxxxxx.com ">
页内链接：<a href="http://XXXXXX#test" title="Test">页内链接</a><a name="test"></a>
左括号： &lt;
右括号： &gt;
引用：<code></code>
引用（插入代码用）：<textarea></textarea>
引用：<blockquote></blockquote>
javascript调用：<script language="JavaScript" type="text/javascript" src=" xxxxx.js"></script>
字体：<span style="font-weight: bold;font:Verdana, Arial, Helvetica, sans-serif;text-align: left;text-decoration:underline;z-index: 10;">
实线边：<span style="border:1px solid #EFEFEF; ">
虚线边：<span style="border:1px dotted #EFEFEF; ">
背景：background: #D9D8D9 url("http://www.xxxxxx.com/xxxxxx.gif") 0 100% no-repeat;
间隔：padding: 0 0 10px 0;margin:0 0 10px 0;
宽高：width: 760px;height: 1px;
显示：display: block;display: inline;display: none;display: hidden;
绝对定位：position:absolute;background-position: 0 -100px;
相对定位：position: relative;background-position: 0 -100px;
隐藏：visibility:hidden;
对象浮动与消除：<div style="float: left;"></div> <div style="clear: both;"></div>
间隔线：<hr>
图片的CSS：.img {background: transparent url(http://www.xxxxxx.com/xxxxxx.png) left no-repeat; padding-left:20px; text-decoration: none;}

一个文章排版样式：
在一篇文章中，怎么让一段引用的文字有一个独立的区块，好让排版效果更美观呢？下面就是示例：

文章排版示例；
从 BLogger Buzz看到的效果；
借鉴一下；
有兴趣就试一下。

方法也不难，就在文章的CSS样式中加入下面代码，然后每次在写文章时，将引用文字放在<blockquote></blockquote>之间
.post blockquote {margin:1em 20px;padding-left:8px;border-left:3px solid #cff5ff;background:#e6e6e6;}

在文章中插入代码：

在模版添加CSS样式：CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}
然后将要加入代码的地方放在<code></code>中间（在html编辑模式下）
部分内容引用自： [筆記]在文章裡顯示優質的程式碼區
这种方法好像有个问题，就是要替换括号，左括号用 &lt;，右括号用 &gt;，这样的话，只适合插入括号不多的代码。如果要插入的代码是一大段，有很多括号的话，可以下下面的方法，完全不用有任何改动，就可以直接在网页插入代码。但就是在发表时，要选择强行发表，多按两下鼠标。

插入代码排版：
想在一篇文章中插入一些htm代码，只要将代码放在textarea中间就行了（注意要在Html模式下），如下：
<textarea>在此插入代码</textarea>
当然，要让其版式漂亮点，还要在模版的CSS样式中加入下面代码：
textarea {margin:1em 20px;padding-left:8px;border-style: solid; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(153,153, 153); border-width: 1px 1px 1px 8px; margin: 1px; padding: 3px; background: rgb(244, 244, 244) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(0, 0, 0); font-family: Verdana,Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 13px; line-height: normal; font-size-adjust: none; font-stretch: normal;}

小小地实例：
ul li样式的横排和竖排效果，及代码。效果如下：

• ul和li测试1
• ul和li测试2
• ul和li测试3

• ul和li测试4
• ul和li测试5
• ul和li测试6

将如下的style样式代码放在head中间，做好相关的链接：
<style type="text/css">#test1 li {display: inline;line-height: 200%;list-style: none;text-align: center;}#test2 li {display: table;line-height: 200%;list-style: none;text-align: center;}</style>

在文章中加入视频文件：
想在自己的博客中加入视频文件，很简单，只要将下面代码拷贝，并将其中路径"http://xxxxxx"改成自己的视频文件路径:
<embed style="width: 400px; height: 326px;" id="VideoPlayback" type="application/x-shockwave-flash" src=" http://xxxxxx" flashvars="">

在文章中加入MP3文件：
<object height="40" width="290"><param name="movie" value=" http://www.blogthissong.com/player.swf?soundFile=http://xxxxxx"><param name="wmode" value="transparent"><br /><embed src=" http://www.blogthissong.com/player.swf?soundFile=http://xxxxxx" type="application/x-shockwave-flash" wmode="transparent" height="40" width="290"></object>


在文章中加入Flash文件：
<object type="application/x-shockwave-flash" data="style/flash/001.swf" width="400" height="400">

几种页面插入方法：
在静态的网页中插入页面，有以下几种方法：
1、Object形式，这种就类似在网页中插入图片，比较直观，但没有垂直条和水平条；
2、IFrame形式，与单页效果类似，有垂直条和水平条，但容易给一些网页拦截器过滤；
<object height="40" width="290"></object><iframe src="http: www.YourDomain.com" marginwidth="0" marginheight="0" frameborder="0" height="30" scrolling="no" width="100%"></iframe>