站长资源网页制作
HTML页面输出应该遵循的几点原则小结
简介1、不能少了DOCTYPE，浏览器根据你申明的DOCTYPE决定页面渲染规则，如果不声明，不同的浏览器显示效果可能不一样。 2、在之前加上<meta>标签说明页面所用的编码。否则可能导致部分浏览器显示的页面标题为乱码。 3、<style>应该放在<head>标签内。否则会导致页面在下载</div>
<div class="news_infos"><div id="MyContent"><p>1、不能少了DOCTYPE，浏览器根据你申明的DOCTYPE决定页面渲染规则，如果不声明，不同的浏览器显示效果可能不一样。 <br>2、在<title>之前加上<meta>标签说明页面所用的编码。否则可能导致部分浏览器显示的页面标题为乱码。 <br>3、<style>应该放在<head>标签内。否则会导致页面在下载完成之前不美观，而且在下载完<style>的内容以后浏览器还要对页面重新进行渲染，会影响用户体验。 <br>4、CSS中尽量避免使用表达式。否则在每次页面内容改变(比如javascript动态添加或删除元素，改变浏览器窗口大小)时，浏览器都会重新计算表达式的值。一种可以替代的方法是用javascript在window.onload中动态判断并确认样式。用户端的资源我们也应该珍惜。 <br>5、在使用javascript改变页面元互的显示效果时，尽量用className属性更改。应该尽量避免用element.style.color = "#ff0000"之类的语句，尤其是在一次更改多次属性的时候。这样做有两个理由：方便维护和节约客户端资源。使用className改更的时候，页面只需要重新渲染一次，而且style属性更改时，每次都要重新渲染，这比开销是很大的。 <br>6、<script />标签应该紧靠在</body>标签之前。浏览器在下载<script>中的内容时，不会同时下载其它内容(图片、flash、<script>后面的html文档等)，如果使用了较多的外部script文件，有可能导致用户失支继续等待页面显示的耐心。 <br>一个简单的例子： <br><br><u>复制代码</u>代码如下: <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><title>示范</title> <br><meta name="keywords" content="test,示范" /> <br><link rel="Stylesheet" type="text/css" href="common.css" /> <br><style type="text/css"> <br>.test{border:1px solid #ff0000;} <br>.dom{width:200px;height:100px;} <br>.notdom{width:202px;height:102px;} <br></style> <br></head> <br><body> <br><div id="main" class="test"></div> <br><script type="text/javascript" src="/UploadFiles/2021-03-30/jquery.js"><script type="text/javascript"> <br>$(function(){ <br>if($.support.boxModel){ <br>$("#main").addClass("dom"); <br>}else{ <br>$("#main").addClass("notdom"); <br>} <br>}); <br></script> <br></body> <br></html> <br><br>简单补充：<br>html写的挺好，符合标准。 <br>建议使用utf-8编码。 <br>http://zh.wikipedia.org/zh-cn/Gb2312 <br>gb2312只包含6000多个汉字，不包含“镕”字。 <br>windows记事本是gbk编码的，包含2万多个汉字。 <br>utf-8包含全球10字。 <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </p></div>
</div>
</div>
<div class="share"> </div>
<div class="nextinfo">
<p>上一篇：<a href="http://m.nnzcdc.com/show/1/76861.html" title="网页前端开发小细节">网页前端开发小细节</a></p>
<p>下一篇：<a href="http://m.nnzcdc.com/show/1/76863.html" title="让你的网站IE8浏览自动用IE7兼容模式 ">让你的网站IE8浏览自动用IE7兼容模式 </a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/614268.html" one-link-mark="yes" title="前《地狱潜者2》首席编剧：最初它并不是实时服务游戏"><span>前《地狱潜者2》首席编剧：最初它并不是实时服务</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/614267.html" one-link-mark="yes" title="《生化危机》官推庆祝母亲节：视频中母爱扑面而来"><span>《生化危机》官推庆祝母亲节：视频中母爱扑面而来</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/614266.html" one-link-mark="yes" title="网友扒出《黑神话》本地化翻译人员 已支持12种语言"><span>网友扒出《黑神话》本地化翻译人员 已支持12种语</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/614265.html" one-link-mark="yes" title="任家萱.2011-重作一个梦（EP）【华研】【WAV+CUE】"><span>任家萱.2011-重作一个梦（EP）【华研】【WAV+CUE】</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/614264.html" one-link-mark="yes" title="赵一豪.1996-直接爱恨【友善的狗】【WAV+CUE】"><span>赵一豪.1996-直接爱恨【友善的狗】【WAV+CUE】</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/614263.html" one-link-mark="yes" title="群星.2006-失而复得2辑【新艺宝】【WAV+CUE】"><span>群星.2006-失而复得2辑【新艺宝】【WAV+CUE】</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/614262.html" one-link-mark="yes" title="《张震岳6CD合集》1993-2000全套[WAV+CUE][3.1G]"><span>《张震岳6CD合集》1993-2000全套[WAV+CUE][3.1G</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/614261.html" one-link-mark="yes" title="周华健《粤语精选+国语精选》日本母带 [WAV+CUE][1.2G]"><span>周华健《粤语精选+国语精选》日本母带 [WAV+CUE</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/614260.html" one-link-mark="yes" title="《陈楚生6CD合集》[WAV+CUE][2.2G]"><span>《陈楚生6CD合集》[WAV+CUE][2.2G]</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/614259.html" one-link-mark="yes" title="dnf经验胶囊快速获得"><span>dnf经验胶囊快速获得</span></a>
</li>
</ul>
</div>
</div>
<div class="sidebar">
</div>
</article>
<footer>
<p>Design by <a href="http://m.nnzcdc.com">兴国资源网</a> <a href="/">http://m.nnzcdc.com</a></p>
</footer>
<script src="/images/nav.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var elm = jQuery('#left_flow2');
var startPos = jQuery(elm).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');
jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
});
});
</script>
</body>
</html>