导读：这种模板很多的，百度打开一个网页右键源代码就能找到了。
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="{dede:globalcfg_templets_skin/}/images/apple-touch-icon-57png" sizes="57x57" rel="apple-touch-icon">
<link href="{dede:globalcfg_templets_skin/}/images/apple-touch-icon-72png" sizes="72x72" rel="apple-touch-icon">
<link href="{dede:globalcfg_templets_skin/}/images/apple-touch-icon-114png" sizes="114x114" rel="apple-touch-icon">
<title>{dede:globalcfg_webname/}</title>
<meta name="keywords" content="{dede:globalcfg_keywords/}">
<meta name="description" content="{dede:globalcfg_description/}">
<link href="{dede:globalcfg_templets_skin/}/style/stylecss" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{dede:globalcfg_templets_skin/}/style/jquery-191js"></script>
<script type="text/javascript" src="{dede:globalcfg_templets_skin/}/style/theme_trustjs"></script>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
}
iw_poi_title {
color: #CC5522;
font-size: 14px;
font-weight: bold;
overflow: hidden;
padding-right: 13px;
white-space: nowrap
}
iw_poi_content {
font: 12px arial, sans-serif;
overflow: visible;
padding-top: 4px;
white-space: -moz-pre-wrap;
word-wrap: break-word
}
</style>
<script type="text/javascript" src="{dede:globalcfg_templets_skin/}/mainjs"></script>
<script>
jQuery(document)ready(function() {
jQuery('#openSidebar')click(function() {
jQuery('wrapper')toggleClass('openNav');
});
jQuery('#menu a')click(function() {
jQuery('wrapper')removeClass('openNav');
});
});
</script>
<script type="text/javascript" src="{dede:globalcfg_templets_skin/}/api"></script><script type="text/javascript" src="{dede:globalcfg_templets_skin/}/getscript"></script><link rel="stylesheet" type="text/css" href="{dede:globalcfg_templets_skin/}/bmapcss">
<style type="text/css">
html,
body,
wrapper {
height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<div class="clearfix k1120">
<div class="navBox" id="openSidebar">
<a href="javascript:void(0)" class="navOpen"></a>
</div>
<div id="menu">
<ul class="clearfix">
<li><a href="#home" class="nav_home current"><span>首页<br /><b>Home</b></span></a>
</li>
<li><a href="#services" class="nav_services"><span>服务范围<br /><b>Services</b></span></a>
</li>
<li><a href="#case" class="nav_case"><span>案例展示<br /><b>Case</b></span></a>
</li>
<li><a href="#about" class="nav_about"><span>关于我们<br /><b>About us</b></span></a>
</li>
<li><a href="#news" class="nav_news"><span>新闻动态<br /><b>News</b></span></a>
</li>
<li><a href="#contact" class="nav_contact"><span>联系我们<br /><b>Contact us</b></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="pageMain">
<div id="header">
<div class="k1120 clearfix"><a href="{dede:globalcfg_basehost/}" id="logo">logo</a>
</div>
</div>
<div id="home" class="scrol-page">
<div class="banner">
<div class="b_1" style="background-position: 50% 0px;">
<div class="k1120 clearfix">
<div class="b_pic">
<div class="mac" style="margin-top: 0px; opacity: 1;"><img src="{dede:globalcfg_templets_skin/}/images/macpng">
</div>
<div class="iphone" style="margin-top: 0px; opacity: 1;"><img src="{dede:globalcfg_templets_skin/}/images/iphonepng">
</div>
<div class="ipad" style="margin-top: 0px; opacity: 1;"><img src="{dede:globalcfg_templets_skin/}/images/ipadpng">
</div>
</div>
<div class="b_text" style="margin-top: 0px; opacity: 1;">
{dede:globalcfg_ggg/}
</div>
</div>
</div>
</div>
<div class="banner">
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，
看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演
着类似HTML的角色的XML，所以，本质上说， XHTML是一个过渡技术，结
合了XML(有几分)的强大功能及HTML(大多数)的简单特性。 XHTML是一种为
适应XML而重新改造的HTML。当 XML越来越成为一种趋势，就出现了这样一
个问题:如果我们有了XML，我们是否依然需要HTML为了回答这个问题，1998
年5月我们在旧金山开了两天的工作会议，会议的结论是:需要。我们依然需要使
用HTML。因为大量的人们已经习惯使用HTML来作为他们的设计语言，而且，
已经有数以百万计的页面是采用HTML编写的。 XHTML解决HTML语言所存在的
严重制约其发展的问题。 HTML发展到今天存在三个主要缺点:不能适应现在越多
的 *** 设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML;由
于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML;数
据与表现混杂，这样你的页面要改变显示，就必须重新 *** HTML。因此HTML需
要发展才能解决这个问题，于是W3C又制定了XHTML，XHTML是HTML向XML过
度的一个桥梁。 简单点说DHTML可以让网页上的内容移动、变化、消失、出现……，
总之DHTML是很一直被认为是网页设计中比较酷的东西。 DHTML 是Dynamic
HTML的缩写，意思就是动态的HTML。它并不是某一门独立的语言，事实上任何
可以实现页面动态改变的 *** 都可以称为DHTML。 Javascript、DOM和DHTML
是比较容易混淆的。通常来说，DHTML实际实际上是Javascript、HTML DOM、
CSS以及HTML/XHTML的结合应用。而HTML DOM和Javascript则是分别独立的。
学习DHTML的建议 学习DHTML更好的办法就是阅读别人的代码。在阅读这些
DHTML之前您更好已经掌握了HTML/XHTML、CSS，有一定的Javascript基础和
HTML DOM基础。
良好的HTML代码是一个漂亮网站的基础。当我教别人CSS的时候， 我总是首先告诉他们： 良好的CSS只存在于良好的HTML标记基础上。这就好像一间房子需要一个坚固的地基一样，对不？ 整洁、语义化的HTML标记具有很多的优势，但却还是有很多网站使用着并不友好的标记写法。
让我们来看一些写得并不友好的HTML标记， 并针对这些问题进行讨论，从而学习如何书写整洁规范的HTML标记。
注： Chris Cyier在这里使用了两个文档来进行本文的代码说明： bad code 和 good code 。大家学习的时候请参考着这两个文件。
1 严格的 DOCTYPE
我们要做到这一点，只需要按正确的步骤来做即可。 没必要去讨论是否使用HTML 401或 XHTML 10，两者都对我们书写正确的代码提出了严格的要求。
但无论如何我们的代码不应该使用任何Tables表格来进行布局， 所以也就没必要使用Transitional DOCTYPE
注： 所谓的DTD就是文档类型声明，简单来说，就是对特定文档所定义的一些规则，这些规则包括一系列的元素和实体的声明。XHTML文档类型有三种： STRICT（严格类型）， TRANSITIONAL（过渡类型）和 FRAMESET（框架类型）。目前，我们使用最多的是TRANSITIONAL，比如本站目前也是使用 XHTML 10 TRANSITIONAL。如果你的HTML代码书写的还算良好，那把现有的TRANSITIONAL 转为STRICT还是比较方便的。反之，也不用太急着转，个人觉得，STRICT更严谨，但用TRANSITIONAL也并没有太大影响。
2 Character set & encoding characters
在我们的 《head》 部份， 之一件事情就是声明字符集。 我们使用了UTF-8， 但是把它放到了 《title》后面。 让我们把字符集声明移动到最上面，因为我们要让浏览器在阅读任何内容之前就应该知道以何种字符集来进行处理。
除了字符集声明的位置外，《title》中出现的奇怪字符也是需要注意的问题，比如最常用的”&“字符，我们应该使用字符实体”&“来替换它。
3 适当的缩进
在书写代码的时候，缩进并不会影响网页的外观，但使用适当的缩进能使代码更具可读性，标准的缩进 *** 是当你开始一个新的元素时缩进一个Tab位（或几个空格）。另外，记得，关闭元素的标签与开始标签对齐。
注： 一些朋友会嫌书写代码的时候缩进比较麻烦，如果仅仅是你一个人阅读这份代码，那可能没什么问题，你自己觉得OK就好。但如果是协作或你的作品是公开发布分享的，那书写漂亮的可读化性更高的代码就很有必要了。
4 使用外部CSS 和 JavaScript
我们有一些CSS代码已经延伸到我们的《head》部分。这是一个严重的犯规，因为它它只能适用于单一的HTML网页。保持独立的CSS文件意味着未来的网页可以链接到它们，并使用相同的代码。Javascript也是同样的道理。
注： 当然，这个问题或许也并不是那么严重。比如作为WordPress主题来说，写在《head》里面的代码也就作用于所有WordPress页面。但把CSS写在《head》里面仍然是个非常不好的习惯。
