html技术之（html5标签实战）

html5标签，纠结了这么长时间还是整出来了，下面是html代码分享下！

遇到一个问题就是删掉html5.J之后jquery写的一个简单的下拉就好了，说明IE真的落伍了！微软你要顶住！

<!DOCTYPEHTML>

<html>

<head>

<metacharset="utf-8">

<title>html5标签的具体应用-37℃</title>

<metaname="application-name"content=""/>

<metaname="msapplication-tooltip"content=""/>

<metaname="keywords"content=""/>

<metaname="description"content=""/>

<metaname="author"content="">

<linkhref="css/reset.css"rel="stylesheet"type="text/css"/>

<!--[ifltIE9]>

<scripttype="text/javascript">

/*@cc_on(function(h,a){functionl(a){for(varb=-1;++b<m;)a.createElement(i[b])}functionn(a,b){if(!a.length)return"";for(varf=-1,d=a.length,e,c=[];++f<d;)e=a[f],(b=e.media||b)!="screen"&&c.push(n(e.imports,b),e.cssText);returnc.join("")}varc=a.createElement("div");c.innerHTML="<z>i</z>";if(c.childNodes.length!==1){vari="abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video".split("|"),m=i.length,r=RegExp("(^|\\s)(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)","gi"),s=RegExp("<(/*)(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)","gi"),t=RegExp("(^|[^\\n]*?\\s)(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)([^\\n]*)({[\\n\\w\\W]*?})","gi"),o=a.createDocumentFragment(),j=a.documentElement;c=j.firstChild;varg=a.createElement("body"),k=a.createElement("style"),e;l(a);l(o);c.insertBefore(k,c.firstChild);k.media="print";varp=function(){varc=-1,b=n(a.styleSheets,"all"),f=[],d;for(e=e||a.body;(d=t.exec(b))!=null;)f.push((d[1]+d[2]+d[3]).replace(r,"$1.iepp_$2")+d[4]);for(k.styleSheet.cssText=f.join("\n");++c<m;){b=a.getElementsByTagName(i[c]);f=b.length;for(d=-1;++d<f;)b[d].className.indexOf("iepp_")<0&&(b[d].className+="iepp_"+i[c])}o.appendChild(e);j.appendChild(g);g.className=e.className;g.innerHTML=e.innerHTML.replace(s,"<$1font");h.detachEvent("onbeforeprint",p)};h.attachEvent("onbeforeprint",p);varq=function(){g.innerHTML="";j.removeChild(g);j.appendChild(e);k.styleSheet.cssText="";h.detachEvent("onafterprint",q)};h.attachEvent("onafterprint",q)}})(this,document);;@*/

</script>

<![endif]-->

<style>

@charset"utf-8";

◇Ver:2011.04.25_10:00

◇Manage:37℃

◇Editor:37℃

/*-HtmlTagsReset-*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,figure{padding:0;margin:0;}

body{font:12px/1.5Arial,Tahoma,Helvetica,simsun,sans-serif;color:#555;}

abbr,article,aside,bb,datagrid,datalist,details,dialog,eventsource,figure,figcaption,footer,header,mark,menu,meter,nav,output,progress,section,time{display:block;height:auto;}

table{border-collapse:collapse;border-spacing:0;}

ol,ul{list-style:noneoutside;}

h1,h2,h3,h4,h5,h6{font-size:100%;}

fieldset,img{border:0none;vertical-align:middle;}

a{color:#555;text-decoration:none;}

a:hover{color:#39C;text-decoration:underline;}

em{font-style:normal;}

input,textarea{padding:2px;}

textarea{overflow-y:auto;}

input,select,textarea{font:12pxArial,Tahoma,simsun;}

button{overflow:visible;padding:0;vertical-align:middle;}

button,label{cursor:pointer;}

.clearfix:after{content:".";height:0;visibility:hidden;display:block;clear:both;font-size:0;line-height:0;}

.clearfix{display:inline-block;}

.clearfix{display:block;}

.header,.main-page,.footer{width:980px;margin:0auto;overflow:hidden;display:block;}

</style>

<body>

<headerclass="header">

<articleclass="top-header">

<figureclass="logo">

<ahref="#"><imgwidth="173"height="78"title="www.1000li.com,上海**电子商务科技有限公司"alt="上海**电子商务科技有限公司"src="images/logo.jpg"></a>

</figure>

<ul>

<li>企业客服热线：400-000-1000</li>

</ul>

</article>

<navclass="navigation">

<ul>

</ul>

<divclass="search">

<inputtype="text"class="search-text"autocomplete="off"autofocus="true"name=""id=""accesskey="">

<selectname="">

<optionvalue="">搜产品</option>

</select>

<buttonclass="search-submit"type="submit">搜索</button>

</div>

</nav>

</header>

<sectionclass="main-page">

<asideclass="category-wrap">

<dl>

<dd>

<ul>

</ul>

</dd>

<dd>

<ul>

</ul>

</dd>

</dl>

<dl>

<dd>

<ul>

</ul>

</dd>

</dl>

</aside>

<articleclass="product-list">

<p>尊敬的上海公司,上午好!欢迎来到**营销系统!如果您在使用中遇到任何问题，请及时拨打客服热线：400-000-1000。</p>

<divclass="warpper-banner">

<ul>

</ul>

</div>

<divclass="wrap-news">

<ul>

<li><ahref="#">***营销系统上线...</a></li>

<li><ahref="#">**营销系统上线...</a></li>

</ul>

</div>

<sectionclass="guide-content">

<navclass="recommend-products">

<ul>

</ul>

</nav>

<articleclass="hot-sale-content">

<ul>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

<P>

<span><ahref="#">易威斯堡运动</a></span>

</P>

</li>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

<P>

<span><ahref="#">易威斯堡运动</a></span>

</P>

</li>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

<P>

<span><ahref="#">易威斯堡运动</a></span>

</P>

</li>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

<P>

<span><ahref="#">易威斯堡运动</a></span>

</P>

</li>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

<P>

<span><ahref="#">易威斯堡运动</a></span>

</P>

</li>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

<P>

<span><ahref="#">易威斯堡运动</a></span>

</P>

</li>

</ul>

</article>

</section>

<sectionclass="guide-content">

<navclass="recommend-products">

</nav>

<articleclass="hot-sale-content">

<ul>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

</li>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

</li>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

</li>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

</li>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

</li>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

</li>

</ul>

</article>

</section>

<sectionclass="guide-content">

<navclass="recommend-products">

</nav>

<articleclass="hot-sale-content">

<ul>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

</li>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

</li>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

</li>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

</li>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

</li>

<li>

<ahref="#"><imgwidth="170"height="170"title=""alt=""src="images/bann.jpg"></a>

</li>

</ul>

</article>

</section>

<sectionclass="guide-content">

<divclass="join-information">

<p>这里是邀请加盟信息这里是邀请加盟信息</p>

</div>

<divclass="tips">

<p>这里是小技巧这里是小技巧</p>

</div>

</section>

</article>

</section>

<footerclass="footer">

<divclass="footer-nav"><ahref="#">关于千礼</a><ahref="#">联系我们</a><ahref="#">招聘英才</a><ahref="#">企业官网</a></div>

<p>增值电信业务经营许可证：沪ICP备1000号</p></footer>

</body>

</html>

html技术之（html5标签实战）

相关推荐