HTML5入门

转自

html5将成为HTML、XHTML以及HTML DOM的新标准html5仍然处于完善之中。然而现在大部分浏览器已经剧本了大部分html5特性的支持。

新特性

• 用于绘画的canvas元素
• 用于媒体播放的video和audio元素
• 对本地离线存储的更好支持
• 新的特殊内容元素，如：article、footer、header、nav、section
• 新的表单控件，如：calendar、date、time、email、url、search

支持HTML的浏览器：最新版本的safari、Chrome、Firefox、Opera、以及IE9已经全面支持HTML5

让所有IE支持HTML5的解决方案在页面head元素内调用html5.js

定义注释。



定义文档类型。



定义超链接。



定义缩写。



HTML 5 中不支持。定义首字母缩写。



定义地址元素。



HTML 5 中不支持。定义 applet。



定义图像映射中的区域。


       new
定义 article。


        new
定义页面内容之外的内容。


        new
定义声音内容。



定义粗体文本。



定义页面中所有链接的基准 URL。



HTML 5 中不支持。请使用 CSS 代替。


           new
定义文本的文本方向，使其脱离其周围文本的方向设置。



定义文本显示的方向。



HTML 5 中不支持。定义大号文本。



定义长的引用。



定义 body 元素。



插入换行符。



定义按钮。


     new
定义图形。



定义表格标题。



HTML 5 中不支持。定义居中的文本。



定义引用。



定义计算机代码文本。



定义表格列的属性。



定义表格列的分组。


 new
定义命令按钮。


    new
定义下拉列表。



定义定义的描述。



定义删除文本。



定义元素的细节。



定义定义项目。



HTML 5 中不支持。定义目录列表。



定义文档中的一个部分。



定义定义列表。



定义定义的项目。



定义强调文本。


      new
定义外部交互内容或插件。



定义 fieldset。


 new
定义 figure 元素的标题。


       new
定义媒介内容的分组，以及它们的标题。



HTML 5 中不支持。


      new
定义 section 或 page 的页脚。



定义表单。



HTML 5 中不支持。定义子窗口（框架）。



HTML 5 中不支持。定义框架的集。


 to 
定义标题 1 到标题 6。



定义关于文档的信息。


    new
定义 section 或 page 的页眉。



定义有关文档中的 section 的信息。



定义水平线。



定义 html 文档。



定义斜体文本。


</span></td>
<td>定义行内的子窗口（框架）。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><img></span></td>
<td>定义图像。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><input></span></td>
<td>定义输入域。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><ins></span></td>
<td>定义插入文本。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><keygen>&nbsp;</span>&nbsp;&nbsp; <span style="color: #0000ff;">new</span></td>
<td>定义生成密钥。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><isindex></span></td>
<td>HTML 5 中不支持。定义单行的输入域。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><kbd></span></td>
<td>定义键盘文本。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><label></span></td>
<td>定义表单控件的标注。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><legend></span></td>
<td>定义 fieldset 中的标题。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><li><br></li></span><br></td>
<td>定义列表的项目。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><link></span></td>
<td>定义资源引用。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><map></span></td>
<td>定义图像映射。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><mark>&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0000ff;"> new</span></td>
<td>定义有记号的文本。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><menu></span></td>
<td>定义菜单列表。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><meta></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: #0000ff;">new</span></td>
<td>定义元信息。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><meter></span></td>
<td>定义预定义范围内的度量。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><nav>&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: #0000ff;">new</span></td>
<td>定义导航链接。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><noframes></span></td>
<td>HTML 5 中不支持。定义 noframe 部分。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><noscript></span></td>
<td>定义 noscript 部分。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><object></span></td>
<td>定义嵌入对象。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><ol></span></td>
<td>定义有序列表。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><optgroup></span></td>
<td>定义选项组。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><option></span></td>
<td>定义下拉列表中的选项。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><output></span>&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: #0000ff;">new</span></td>
<td>定义输出的一些类型。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><p></p></span><br></td>
<td>定义段落。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><param></span></td>
<td>为对象定义参数。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><pre></span></td>
<td>定义预格式化文本。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><progress></span>&nbsp; <span style="color: #0000ff;">new</span></td>
<td>定义任何类型的任务的进度。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><q></span></td>
<td>定义短的引用。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><rp>&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: #0000ff;">new</span></td>
<td>定义若浏览器不支持 ruby 元素显示的内容。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><rt>&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: #0000ff;">new</span></td>
<td>定义 ruby 注释的解释。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><ruby>&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: #0000ff;">new</span></td>
<td>定义 ruby 注释。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><s></span></td>
<td>HTML 5 中不支持。定义加删除线的文本。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><samp></span></td>
<td>定义样本计算机代码。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><script></span></td>
<td>定义脚本。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><section></span></td>
<td>定义 section。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><select></span></td>
<td>定义可选列表。</td>
</tr>
<tr>
<td><small></td>
<td>将旁注 (side comments) 呈现为小型文本。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><source>&nbsp;</span>&nbsp;&nbsp;&nbsp; <span style="color: #0000ff;">new</span></td>
<td>定义媒介源。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><span></span></span><br></td>
<td>定义文档中的 section。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><strike></span></td>
<td>HTML 5 中不支持。定义加删除线的文本。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><strong></strong></span><br></td>
<td>定义强调文本。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><style></span></td>
<td>定义样式定义。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><sub></span></td>
<td>定义下标文本。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><summary></span> <span style="color: #0000ff;">new</span></td>
<td>定义 details 元素的标题。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><sup></span></td>
<td>定义上标文本。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><table></span></td>
<td>定义表格。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"></span><br></td></tr></tbody><tbody>
<tr><td>定义表格的主体。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"></span><br></td><td><br></td>
<td>定义表格单元。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><textarea></span></td>
<td>定义 textarea。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><tfoot></span></td>
<td>定义表格的脚注。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"></span><br></td><th>
<br></th><td>定义表头。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><thead></span></td>
<td>定义表头。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><time></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: #0000ff;">new</span></td>
<td>定义日期/时间。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><title></span></td>
<td>定义文档的标题。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"></span><br></td></tr><tr>
<td>定义表格行。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><track>&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0000ff;"> new</span></td>
<td>定义用在媒体播放器中的文本轨道。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><tt></span></td>
<td>HTML 5 中不支持。定义打字机文本。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><u></span></td>
<td>HTML 5 中不支持。定义下划线文本。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><ul></ul></span><br></td>
<td>定义无序列表。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><var></span></td>
<td>定义变量。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><video></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: #0000ff;">new</span></td>
<td>定义视频。</td>
</tr>
<tr>
<td><span style="color: #ff0000;"><xmp></span></td>
<td>HTML 5 中不支持。定义预格式文本。</td></tr></tbody></table><br>                                   </div>
            <!-- <div class="Blog_con3_1">管理员在2009年8月13日编辑了该文章文章。</div> -->
            <div class="Blog_con2_1 Blog_con3_2">
              <div>
			  <!--<img src="/image/default/tu_8.png">-->
			  <!-- JiaThis Button BEGIN -->
				<div class="bdsharebuttonbox"><A class=bds_more href="#" data-cmd="more"></A><A class=bds_qzone title=分享到QQ空间 href="#" data-cmd="qzone"></A><A class=bds_tsina title=分享到新浪微博 href="#" data-cmd="tsina"></A><A class=bds_tqq title=分享到腾讯微博 href="#" data-cmd="tqq"></A><A class=bds_renren title=分享到人人网 href="#" data-cmd="renren"></A><A class=bds_weixin title=分享到微信 href="#" data-cmd="weixin"></A></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
				<!-- JiaThis Button END -->
			  </div>
              阅读(3903) | 评论(0) | 转发(0) |
			                <div class="HT_line3"></div>
            </div>
            
            <div class="Blog_con3_3">
              <div><span id='digg_num'>0</span><a href="javascript:void(0)" id='digg' bid='3210910' url='/blog/digg.html' ></a></div>
              <p>上一篇：<a href="/uid-20774942-id-3193055.html">centos6.2下cacti详细安装过程</a></p>
              <p>下一篇：<a href="/uid-20774942-id-3994400.html">Eclipse快捷键大全</a></p>    
            </div>
            
          </div>
          		  <!--
          <div class="Blog_con3_4 Blog_con3_5">
            <div class="Blog_tit2 Blog_tit7">热门推荐</div>
            <ul>
			              <li><a href="" title="" target='blank' ></a></li>
			            </ul>
          </div>
		  -->
        </div>
      </div>
      <div class="Blog_right1_7" id='replyList'>
		<div class="Blog_tit3">给主人留下些什么吧！~~</div>
				<!--暂无内容-->
				<!-- 评论分页-->
		<div class="Blog_right1_6 Blog_right1_12">
        		</div>
		<!-- 评论分页-->
        <div class="Blog_right1_10" style="display:none">
          <div class="Blog_tit3">评论热议</div>
		  		 <!--未登录 -->
        <div class="Blog_right1_8">
          <div class="nologin_con1"> 请登录后评论。
            <p><a href="http://account.chinaunix.net/login"  onclick="link(this)">登录</a> <a href="http://account.chinaunix.net/register?url=http%3a%2f%2fblog.chinaunix.net">注册</a></p>
          </div>
        </div>
       
		
        </div>
        <div style="text-align:center;margin-top:10px;">
            <script type="text/javascript" smua="d=p&s=b&u=u3118759&w=960&h=90" src="//www.nkscdn.com/smu0/o.js"></script>
        </div>
      </div>
    </div>
  </div>
  <input type='hidden' id='report_url' value='/blog/ViewReport.html' />

<script type="text/javascript">
  	//测试字符串的长度 一个汉字算2个字节
	function mb_strlen(str)
	{
		var len=str.length;
		var totalCount=0;
		for(var i=0;i<len;i++)
		{
			var c = str.charCodeAt(i);
			if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
				totalCount++;
			}else{
				totalCount+=2;
			}
		}
		return totalCount;
	}
	/*
	var Util = {};
	Util.calWbText = function (text, max){
		if(max === undefined)
			max = 500;
		var cLen=0;
		var matcher = text.match(/[^\x00-\xff]/g),
			wlen  = (matcher && matcher.length) || 0;
		//匹配url链接正则 http://***
		var pattern = /http:\/\/([\w-]+\.)+[\w-]+(\/*[\w-\.\/\?%&=][^\s^\u4e00-\u9fa5]*)?/gi;
		//匹配的数据存入数组
		var arrPt = new Array();
		var i = 0;
		while((result = pattern.exec(text)) != null){
			arrPt[i] = result[0];
			i++;
		}
		//替换掉原文本中的链接
		for(var j = 0;j<arrPt.length;j++){
			text = text.replace(arrPt[j],"");
		}
		//减掉链接所占的长度
		return Math.floor((max*2 - text.length - wlen)/2 - 12*i);
	};
	*/
	var allowComment = '0';
	
	//举报弹出层
	function showJuBao(url, cid){
		
			$.cover(false);
			asyncbox.open({
				id  : 'report_thickbox',
				url : url,
				title : '举报违规',
				width : 378,
				height : 240,
				scroll : 'no',
				data : {
					'cid'	 : cid,
					'idtype' : 2 ,
                                        'blogurl' : window.location.href
				},
				callback : function(action){
					if(action == 'close'){
						$.cover(false);
					}
				}
			});
	}

	$(function(){

		//创建管理员删除的弹出层
		$('#admin_article_del').click(function(){
			$.cover(false);
			asyncbox.open({
				id : 'class_thickbox',
				html : '<div class="HT_layer3_1"><ul><li class="HT_li1">操作原因：<select class="HT_sel7" id="del_type" name="del_type"><option value="广告文章">广告文章</option><option value="违规内容">违规内容</option><option value="标题不明">标题不明</option><option value="文不对题">文不对题</option></select></li><li class="HT_li1" ><input class="HT_btn4" id="admin_delete"  type="button" /></li></ul></div>',
				title : '选择类型',
				width : 300,
				height : 150,
				scroll : 'no',
				callback : function(action){
					if(action == 'close'){
						$.cover(false);
					}
				}
			});
		});
		$('#admin_delete').live('click' , function(){
			///blog/logicdel/id/3480184/url/%252Fblog%252Findex.html.html
			var type = $('#del_type').val();
			var url = '/blog/logicdel/id/3210910/url/%252Fuid%252F20774942.html.html';
			window.location.href= url + '?type=' + type;
		});


		//顶  js中暂未添加&过滤 
		$('#digg').live('click' , function(){

			if(isOnLine == '' )
			{
				//showErrorMsg('登录之后才能进行此操作' , '消息提示');
				showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login');
				return false;
			}

			var bid = $('#digg').attr('bid');
			var url = $('#digg').attr('url');

			var digg_str = $.cookie('digg_id');
			if(digg_str != null)
			{
				var arr= new Array(); //定义一数组

				arr = digg_str.split(","); //字符分割     
				for( i=0 ; i < arr.length ; i++ )   
				{   
					if(bid == arr[i])
					{
						showErrorMsg('已经赞过该文章', '消息提示'); 
						return false;
					}
				} 
			}
			$.ajax({
				type:"POST",
				url:url,	
				data: {
					'bid' : bid 
				},
				dataType: 'json',
				success:function(msg){
					if(msg.error == 0)
					{
						var num = parseInt($('#digg_num').html(),10);
						num += 1;
						$('#digg_num').html(num);
						$('#digg').die();

						if(digg_str == null)
						{
							$.cookie('digg_id', bid, {expires: 30 , path: '/'});
						}
						else
						{
							$.cookie('digg_id', digg_str + ',' + bid, {expires: 30 , path: '/'});
						}
						showSucceedMsg('谢谢' , '消息提示');
					}
					else if(msg.error == 1)
					{
						//showErrorMsg(msg.error_content , '消息提示'); 
						showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login');
					}
					else if(msg.error == 2)
					{
						showErrorMsg(msg.error_content , '消息提示'); 
					}
				}
			});
		});
		//举报弹出层
		/*$('.box_report').live('click' , function(){
			if(isOnLine == '' )
			{
				//showErrorMsg('登录之后才能进行此操作' , '消息提示');
				showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login');
				return false;
			}
			var url = $('#report_url').val();
			var cid = $(this).attr('cid');
			$.cover(false);
			asyncbox.open({
				id  : 'report_thickbox',
				url : url,
				title : '举报违规',
				width : 378,
				height : 240,
				scroll : 'no',
				data : {
					'cid'	 : cid,
					'idtype' : 2 
				},
				callback : function(action){
					if(action == 'close'){
						$.cover(false);
					}
				}
			});
		});*/


		//评论相关代码
		
		//点击回复显示评论框
		$('.Blog_a10').live('click' , function(){
			if(isOnLine == '' )
			{
				//showErrorMsg('登录之后才能进行此操作' , '消息提示');
				showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login');
				return false;
			}

			if(allowComment == 1)
			{
				showErrorMsg('该博文不允许评论' , '消息提示'); 
				return false;
			}
			var tid = $(this).attr('toid');//留言作者id
			var bid = $(this).attr('bid');//blogid
			var cid = $(this).attr('cid');//留言id
			var tname = $(this).attr('tname');
                         			var tpl  = '<div class="Blog_right1_9">';
				tpl +=	 '<div class="div2">';
				tpl +=     '<textarea name="" cols="" rows="" class="Blog_ar1_1" id="rmsg">文明上网，理性发言...</textarea>';
				tpl +=	 '</div>';
				tpl +=   '<div class="div3">';
				tpl +=		'<div class="div3_2"><a href="javascript:void(0);" class="Blog_a11" id="quota_sbumit" url="/Comment/PostComment.html" tid="'+tid+'" bid="'+bid+'" cid="'+cid+'" tname="'+tname+'" ></a><a href="javascript:void(0)" id="qx_comment" class="Blog_a12"></a></div>';
				tpl +=		'<div class="div3_1"><a href="javascript:void(0);" id="mface"><span></span>表情</a></div>';
				tpl +=		'<div class="clear"></div>';
				tpl +=	 '</div>';
				tpl +=  '</div>';
                                 			$('.z_move_comment').html('');
			$(this).parents('.Blog_right1_8').find('.z_move_comment').html(tpl).show();
		});
		//引用的评论提交
		$('#quota_sbumit').live('click' , function(){

			if(isOnLine == '' )
			{
				//showErrorMsg('登录之后才能进行此操作' , '消息提示');
				showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login');
				return false;
			}

			var bid   = $(this).attr('bid');
			var tid   = $(this).attr('tid');//被引用人的id
			var qid   = $(this).attr('cid');//引用的id
			var url = $(this).attr('url');
			var text = $('#rmsg').val();
			var tname = $(this).attr('tname');
			if(text == '' || text=='文明上网，理性发言...')
			{
				showErrorMsg('评论内容不能为空！' , '消息提示'); 
				return false;
			}
			else
			{
				if(mb_strlen(text) > 1000){
					showErrorMsg('评论内容不能超过500个汉字' , '消息提示'); 
					return false;
				}
			}
		    $.ajax({
		        type: "post",
			    url: url ,
			    data: {'bid': bid , 'to' : tid , 'qid' : qid , 'text': text , 'tname' : tname },
				dataType: 'json',
			    success: function(data){
				    if(data.code == 1){
						var tpl =  '<div class="Blog_right1_8">';
							tpl+=     '<div class="Blog_right_img1"><a href="' +data.info.url+ '" >' + data.info.header + '</a></div>';
							tpl+=     '<div class="Blog_right_font1">';
							tpl+=         '<p class="Blog_p5"><span><a href="' +data.info.url+ '" >' + data.info.username + '</a></span>' + data.info.dateline + '</p>';
							tpl+=         '<p class="Blog_p7"><a href="' + data.info.quota.url + '">' + data.info.quota.username + '</a>：'+ data.info.quota.content + '</p>';
							tpl+=         '<p class="Blog_p8">' + data.info.content + '</p><span class="span_text1"><a href="javascript:void(0);" class="Blog_a10" toid=' + data.info.fuid + ' bid=' + data.info.bid + ' cid=' + data.info.cid + '  tname = ' + data.info.username + ' >回复</a> | 　<a class="comment_del_mark" style="cursor:pointer" url="' + data.info.delurl + '" >删除</a>　| 　<a href="javascript:showJuBao(\'/blog/ViewReport.html\','+data.info.cid+')" class="box_report" cid="' + data.info.cid + '" >举报</a></span></div>';
							tpl+=         '<div class="z_move_comment" style="display:none"></div>';
							tpl+=	      '<div class="Blog_line1"></div></div>';
							$('#replyList .Blog_right1_8:first').before(tpl);
							$('.z_move_comment').html('').hide();
				    }
					else if(data.code == -1){
						//showErrorMsg(data.info , '消息提示'); 
						showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login');
			        }
                },
			    error: function(){//请求出错处理
                        
                }
			});
		});
		//底部发表评论
		$('#submitmsg').click(function(){
			if(allowComment == 1)
			{
				showErrorMsg('该博文不允许评论' , '消息提示'); 
				return false;
			}
			var bid   = $(this).attr('bid');
			var toid  = $(this).attr('toid');
			var text = $('#reply').val();
			var url = $(this).attr('url');
			if(text == '' || text=='文明上网，理性发言...')
			{
				showErrorMsg('评论内容不能为空！' , '消息提示'); 
				return false;
			}
			else
			{
				if(mb_strlen(text) > 1000){
					showErrorMsg('评论内容不能超过500个汉字' , '消息提示'); 
					return false;
				}
			}
		    $.ajax({
		        type: "post",
			    url: url ,
			    data: {'bid': bid , 'to' : toid ,'text': text},
				dataType: 'json',
			    success: function(data){
				    if(data.code == 1)
					{
						var tpl   = '<div class="Blog_right1_8">';
							tpl  +=   '<div class="Blog_right_img1"><a href="' +data.info.url+ '" >' + data.info.header + '</a></div>';
							tpl  +=	  '<div class="Blog_right_font1">';
							tpl  +=       '<p class="Blog_p5"><span><a href="' +data.info.url+ '" >' + data.info.username + '</a></span>' + data.info.dateline + '</p>';
							tpl  +=       '<p class="Blog_p6">' + data.info.content + '</p>';
							tpl  +=		  '<div class="div1"><a href="javascript:void(0);" class="Blog_a10"  toid=' + data.info.fuid + ' bid=' + data.info.bid + ' cid=' + data.info.cid + '>回复</a> | 　<a class="comment_del_mark" style="cursor:pointer" url="' + data.info.delurl + '">删除</a>　| 　<a href="javascript:showJuBao(\'/blog/ViewReport.html\','+data.info.cid+')" class="box_report" cid="' + data.info.cid + '">举报</a></div>';
							tpl  +=		  '<div class="z_move_comment" style="display:none"></div>';
							tpl  +=    '</div><div class="Blog_line1"></div></div>';
							$('.Blog_tit3:first').after(tpl);
							$('#reply').val('文明上网，理性发言...');
					}
					else if(data.code == -1)
					{
						showErrorMsg(data.info , '消息提示'); 
			        }
                },
			    error: function(){//请求出错处理
                        
                }
		    });
			
		});
		//底部评论重置
		$('#reset_comment').click(function(){
			$('#reply').val('文明上网，理性发言...');
		});
		//取消回复
		$('#qx_comment').live('click' , function(){
			$('.z_move_comment').html('').hide();
		});


		$('#rmsg, #reply').live({
		    focus:function(){
			    if($(this).val() == '文明上网，理性发言...'){
			        $(this).val('');
			    }
			},
			blur:function(){
		        if($(this).val() == ''){
			        $(this).val('文明上网，理性发言...');
			    }
			}
		});
		//删除留言确认
		$('.comment_del_mark').live('click' , function(){
			var url = $(this).attr('url');
			asyncbox.confirm('删除留言','确认', function(action){
				if(action == 'ok')
				{
					location.href = url;
				}
			});
		});
		//删除时间确认
		$('.del_article_id').click(function(){
			var delurl = $(this).attr('delurl');
			asyncbox.confirm('删除文章','确认', function(action){
				if(action == 'ok')
				{
					location.href = delurl;
				}
			});
		});
		/*
		//字数限制
		$('#rmsg, #reply').live('keyup', function(){
			var id = $(this).attr('id');
			var left = Util.calWbText($(this).val(), 500);
			var eid = '#errmsg';
			
			if(id == 'reply') eid =  '#rerrmsg';
			if (left >= 0)
		        $(eid).html('您还可以输入<span>' + left + '</span>字');
		    else
		        $(eid).html('<font color="red">您已超出<span>' + Math.abs(left) + '</span>字 </font>');
		});
		*/
		//加载表情
	    $('#face').qqFace({id : 'facebox1', assign : 'reply', path : '/image/qqface/'});
	    $('#mface').qqFace({id : 'facebox', assign : 'rmsg', path:'/image/qqface/'});
	    
		/*
		$('#class_one_id').change(function(){
			alert(123213);
			var id = parseInt($(this).val() , 10);
			if(id == 0) return false;
			$('.hidden_son_class span').each(function( index , dom ){
				if( dom.attr('cid')  == id )
				{
				}
			});
		});
		*/
		//转载文章
		var turn_url = "/blog/viewClassPart.html";
		$('#repost_bar').click(function(){
			if(isOnLine == '' )
			{
				//showErrorMsg('登录之后才能进行此操作' , '消息提示');
				showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login');
				return false;
			}
			var id = $(this).attr('bid');
			asyncbox.open({
				id  : 'turn_class_thickbox',
				url : turn_url,
				title : '转载文章',
				width : 330,
				height : 131,
				scroll : 'no',
				data : {
					'id'	 : id
				},
				callback : function(action){
					if(action == 'close'){
						$.cover(false);
					}
				}
			});
		});
		/*
	    //转发文章
	    $('#repost_bar').live('click' , function(){
			if(isOnLine == '' )
			{
				//showErrorMsg('登录之后才能进行此操作' , '消息提示');
				showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login');
				return false;
			}
	    	var bid  = $(this).attr('bid');
	    	var url  = $(this).attr('url');
	    	asyncbox.confirm('转载文章','确认', function(action){
	    	  if(action == 'ok'){
	    	    $.ajax({
				type:"POST",
				url:url,	
				data: {
					'bid' : bid 
				},
				dataType: 'json',
				success:function(msg){
				  if(msg.error == 0){
				    showSucceedMsg('转发成功！', '消息提示');
				  }else if(msg.error == 1){
				    //location.href = '/index.php?r=site/login';
					showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login');
				  }else{
				    showErrorMsg(msg.error_content, '消息提示');
			      }
				}
			  });
	    	  }
	    	});

		});
		*/

	});
</script>
<!--该部分应该放在输出代码块的后面才起作用 -->
<script type="text/javascript">

SyntaxHighlighter.autoloader(
	'applescript			/highlight/scripts/shBrushAppleScript.js',
	'actionscript3 as3		/highlight/scripts/shBrushAS3.js',
	'bash shell				/highlight/scripts/shBrushBash.js',
	'coldfusion cf			/highlight/scripts/shBrushColdFusion.js',
	'cpp c					/highlight/scripts/shBrushCpp.js',
	'c# c-sharp csharp		/highlight/scripts/shBrushCSharp.js',
	'css					/highlight/scripts/shBrushCss.js',
	'delphi pascal			/highlight/scripts/shBrushDelphi.js',
	'diff patch pas			/highlight/scripts/shBrushDiff.js',
	'erl erlang				/highlight/scripts/shBrushErlang.js',
	'groovy					/highlight/scripts/shBrushGroovy.js',
	'java					/highlight/scripts/shBrushJava.js',
	'jfx javafx				/highlight/scripts/shBrushJavaFX.js',
	'js jscript javascript	/highlight/scripts/shBrushJScript.js',
	'perl pl				/highlight/scripts/shBrushPerl.js',
	'php					/highlight/scripts/shBrushPhp.js',
	'text plain				/highlight/scripts/shBrushPlain.js',
	'py python				/highlight/scripts/shBrushPython.js',
	'ruby rails ror rb		/highlight/scripts/shBrushRuby.js',
	'scala					/highlight/scripts/shBrushScala.js',
	'sql					/highlight/scripts/shBrushSql.js',
	'vb vbnet				/highlight/scripts/shBrushVb.js',
	'xml xhtml xslt html	/highlight/scripts/shBrushXml.js'
);
SyntaxHighlighter.all();


function code_hide(id){
	var code = document.getElementById(id).style.display;
	if(code == 'none'){
		document.getElementById(id).style.display = 'block';
	}else{
		document.getElementById(id).style.display = 'none';
	}
}
</script>
<!--回顶部js2011.12.30-->
<script language="javascript">
 lastScrollY=0;
 function heartBeat(){
 var diffY;
 if (document.documentElement && document.documentElement.scrollTop)
     diffY = document.documentElement.scrollTop;
 else if (document.body)
     diffY = document.body.scrollTop
 else
     {/*Netscape stuff*/}
 percent=.1*(diffY-lastScrollY);
 if(percent>0)percent=Math.ceil(percent);
 else percent=Math.floor(percent);
 document.getElementById("full").style.top=parseInt(document.getElementById("full").style.top)+percent+"px";
 lastScrollY=lastScrollY+percent;
 if(lastScrollY<200)
 {
 document.getElementById("full").style.display="none";
 }
 else
 {
 document.getElementById("full").style.display="block";
 }
 }
 var gkuan=document.body.clientWidth;
 var ks=(gkuan-960)/2-30;
 suspendcode="<div id=\"full\" style='right:-30px;POSITION:absolute;TOP:500px;z-index:100;width:26px; height:86px;cursor:pointer;'><a href=\"javascript:void(0)\" onclick=\"window.scrollTo(0,0);\"><img src=\"\/image\/top.png\" /></a></div>"
 document.write(suspendcode);
 window.setInterval("heartBeat()",1);
 </script>
  <!-- footer -->
  <div class="Blog_footer" style='clear:both'>
    <div><a href="http://www.chinaunix.net/about/index.shtml" target="_blank" rel="nofollow">关于我们</a> | <a href="http://www.it168.com/bottomfile/it168.shtml" target="_blank" rel="nofollow">关于IT168</a> | <a href="http://www.chinaunix.net/about/connect.html" target="_blank" rel="nofollow">联系方式</a> | <a href="http://www.chinaunix.net/about/service.html" target="_blank" rel="nofollow">广告合作</a> | <a href="http://www.it168.com//bottomfile/flgw/fl.htm" target="_blank" rel="nofollow">法律声明</a> | <a href="http://account.chinaunix.net/register?url=http%3a%2f%2fblog.chinaunix.net" target="_blank" rel="nofollow">免费注册</a>
      <p>Copyright  2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有 </p>
      <div>感谢所有关心和支持过ChinaUnix的朋友们
        <p><a href="http://beian.miit.gov.cn/">16024965号-6 </a></p>
      </div>
    </div>
  </div>
</div>
<script language="javascript">

//全局错误提示弹出框
function showErrorMsg(content, title, url){
	var url = url || '';
	var title = title || '消息提示';
	var html = '';
	html += '<div class="HT_layer3_1 HT_layer3_2"><ul><li><p><span class="login_span1"></span>' + content + '</p></li>';
	if(url == '' || url.length == 0){
		html += '<li class="HT_li1"><input type="button" class="HT_btn2"  onclick=\'close_windows("error_msg")\'></li>';
	} else {
		html += '<li class="HT_li1"><input type="button" class="login_btn1" onclick="location.href=\'' + url + '\'"></li>';
	}
	html += '</ul></div>';
	$.cover(true);
	   asyncbox.open({
		 id: 'error_msg',
		 title : title,
		 html : html,
		 'callback' : function(action){
			 if(action == 'close'){
				 $.cover(false);
			 }
		 }
	});
}

//全局正确提示
function showSucceedMsg(content, title , url ){
	var url = url || '';
	var title = title || '消息提示';
	var html = '';
	html += '<div class="HT_layer3_1 HT_layer3_2"><ul><li><p><span class="login_span2"></span>' + content + '</p></li>';
	if(url == '' || url.length == 0){
		html += '<li class="HT_li1"><input type="button" class="HT_btn2"  onclick=\'close_windows("error_msg")\'></li>';
	} else {
		html += '<li class="HT_li1"><input type="button" class="HT_btn2" onclick="location.href=\'' + url + '\'"></li>';
	}
	html += '</ul></div>';
	$.cover(true);
	asyncbox.open({
		 id: 'error_msg',
		 title : title,
		 html : html,
		 'callback' : function(action){
			 if(action == 'close'){
				 $.cover(false);
			 }
		 }
	});
}

//关闭指定id的窗口
function close_windows(id){
	$.cover(false);
	$.close(id);
}


//公告
var tID;
var tn;                        // 高度
var nStopTime = 5000;        // 不同行间滚动时间隔的时间，值越小，移动越快
var nSpeed = 50;            // 滚动时，向上移动一像素间隔的时间，值越小，移动越快
var isMove = true;
var nHeight = 25;
var nS = 0;
var nNewsCount = 3;

/**
 * n 用于表示是否为第一次运行
 **/
function moveT(n)
{
    clearTimeout(tID)
    var noticev2 = document.getElementById("noticev2")
    nS = nSpeed;

    // 只在第一次调用时运行，初始化环境（有没有参数）
    if (n)
    {
        // 设置行高
        noticev2.style.lineHeight = nHeight + "px";
        // 初始化显示位置
        tn = 0;
        // 刚进入时在第一行停止时间
        nS = nStopTime;
    }

    // 判断鼠标是否指向层
    if (isMove)
    {
        // 向上移动一像素
        tn--;
        // 如果移动到最下面一行了，则移到顶行
        if (Math.abs(tn) == nNewsCount * nHeight)
        {
            tn = 0;
        }
        // 设置位置
        noticev2.style.marginTop = tn + "px";
        // 完整显示一行时，停止一段时间
        if (tn % nHeight == 0)
        {
            nS = nStopTime;
        }
    }

    tID = setTimeout("moveT()", nS);
}
moveT(1);    // 此处可以传入任何参数
</script>
<script type="text/javascript">
//  var _gaq = _gaq || [];
//  _gaq.push(['_setAccount', 'UA-20237423-2']);
//  _gaq.push(['_setDomainName', '.chinaunix.net']);
//  _gaq.push(['_trackPageview']);
//
//  (function() {
//    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
//    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
//    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
//  })();

</script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F0ee5e8cdc4d43389b3d1bfd76e83216b' type='text/javascript'%3E%3C/script%3E"));

function link(t){
     var href= $(t).attr('href');
     href+="?url="+encodeURIComponent(location.href);
     $(t).attr('href',href);
    //setCookie("returnOutUrl", location.href, 60, "/");
}
</script>
<script type="text/javascript" src="/js/jquery.qqFace.js"></script>
</body>
</html>