站长资源网页制作
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.paidiu.com/show/1/76861.html" title="网页前端开发小细节">网页前端开发小细节</a></p>
<p>下一篇：<a href="http://m.paidiu.com/show/1/76863.html" title="让你的网站IE8浏览自动用IE7兼容模式 ">让你的网站IE8浏览自动用IE7兼容模式 </a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li><a href="/show/1/618580.html" title="田震《真的田震精品集》头版限量编号24K金">田震《真的田震精品集》头版限量编号24K金</a></li>
<li><a href="/show/1/618579.html" title="林俊杰《伟大的渺小》华纳[WAV+CUE][1G]">林俊杰《伟大的渺小》华纳[WAV+CUE][1G]</a></li>
<li><a href="/show/1/618578.html" title="谭艳《遗憾DSD》2023 [WAV+CUE][1G]">谭艳《遗憾DSD》2023 [WAV+CUE][1G]</a></li>
<li><a href="/show/1/618577.html" title="Beyond2024《真的见证》头版限量编号MQA-">Beyond2024《真的见证》头版限量编号MQA-</a></li>
<li><a href="/show/1/618576.html" title="瑞鸣唱片2024-《荒城之月》SACD传统民谣[">瑞鸣唱片2024-《荒城之月》SACD传统民谣[</a></li>
<li><a href="/show/1/618575.html" title="好薇2024《兵哥哥》1：124K黄金母盘[WAV+C">好薇2024《兵哥哥》1：124K黄金母盘[WAV+C</a></li>
<li><a href="/show/1/618574.html" title="胡歌.2006-珍惜（EP）【步升大风】【FLAC分">胡歌.2006-珍惜（EP）【步升大风】【FLAC分</a></li>
<li><a href="/show/1/618573.html" title="洪荣宏.2014-拼乎自己看【华特】【WAV+CU">洪荣宏.2014-拼乎自己看【华特】【WAV+CU</a></li>
<li><a href="/show/1/618572.html" title="伊能静.1999-从脆弱到勇敢1987-1996精选2">伊能静.1999-从脆弱到勇敢1987-1996精选2</a></li>
<li><a href="/show/1/618571.html" title="刘亮鹭《汽车DJ玩主》[WAV+CUE][1.1G]">刘亮鹭《汽车DJ玩主》[WAV+CUE][1.1G]</a></li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="cloud"><h2 class="hometitle">标签云</h2><ul><a href="/search.asp?key=1080P高清&m=1">1080P高清<span>(5)</span></a><a href="/search.asp?key=高清电影&m=1">高清电影<span>(5)</span></a><a href="/search.asp?key=百度云盘&m=1">百度云盘<span>(5)</span></a><a href="/search.asp?key=网盘下载&m=1">网盘下载<span>(4)</span></a><a href="/search.asp?key=破解软件&m=1">破解软件<span>(4)</span></a><a href="/search.asp?key=绿色软件&m=1">绿色软件<span>(4)</span></a><a href="/search.asp?key=磁力链接&m=1">磁力链接<span>(3)</span></a><a href="/search.asp?key=强度天梯&m=1">强度天梯<span>(3)</span></a><a href="/search.asp?key=福利资源&m=1">福利资源<span>(2)</span></a><a href="/search.asp?key=王者荣耀&m=1">王者荣耀<span>(2)</span></a><a href="/search.asp?key=黑钻活动&m=1">黑钻活动<span>(2)</span></a><a href="/search.asp?key=WPS会员&m=1">WPS会员<span>(2)</span></a><a href="/search.asp?key=刷图排行&m=1">刷图排行<span>(1)</span></a><a href="/search.asp?key=网盘限速&m=1">网盘限速<span>(1)</span></a><a href="/search.asp?key=鬼灭之刃&m=1">鬼灭之刃<span>(1)</span></a><a href="/search.asp?key=免费韩国漫画&m=1">免费韩国漫画<span>(1)</span></a><a href="/search.asp?key=宫本重做&m=1">宫本重做<span>(1)</span></a><a href="/search.asp?key=免费动漫&m=1">免费动漫<span>(1)</span></a></ul></div>
</div>
</article>
<footer>
<p style="font-size: 14px;">友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="http://www.ddrfans.com/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a></p>
<p>Design by <a href="http://m.paidiu.com">黑松山资源网</a> <a href="/">http://m.paidiu.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>