站长资源网页制作
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="/3g/1/76861.html" title="网页前端开发小细节">网页前端开发小细节</a></p>
<p>下一篇：<a href="/3g/1/76863.html" title="让你的网站IE8浏览自动用IE7兼容模式 ">让你的网站IE8浏览自动用IE7兼容模式 </a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li><a href="/3g/1/610491.html" title="群星.1998-琼瑶98年度主题曲精选大碟【上">群星.1998-琼瑶98年度主题曲精选大碟【上</a></li>
<li><a href="/3g/1/610490.html" title="胡鸿钧.2023-我们在结束时开始新曲+精丫T">胡鸿钧.2023-我们在结束时开始新曲+精丫T</a></li>
<li><a href="/3g/1/610489.html" title="任洁玲.1995-我们有没有爱过【飞碟】【WA">任洁玲.1995-我们有没有爱过【飞碟】【WA</a></li>
<li><a href="/3g/1/610488.html" title="海来阿木《西楼情歌》1:1母版直刻[320K/M">海来阿木《西楼情歌》1:1母版直刻[320K/M</a></li>
<li><a href="/3g/1/610487.html" title="海来阿木《西楼情歌》1：1母版直刻[FLAC/分">海来阿木《西楼情歌》1：1母版直刻[FLAC/分</a></li>
<li><a href="/3g/1/610486.html" title="群星《影视剧 群星闪耀时 影视原声带》[3">群星《影视剧 群星闪耀时 影视原声带》[3</a></li>
<li><a href="/3g/1/610485.html" title="姜育恒.1998-成名金曲（马来西亚瑞华金碟珍">姜育恒.1998-成名金曲（马来西亚瑞华金碟珍</a></li>
<li><a href="/3g/1/610484.html" title="水木年华.2006-生命狂想曲特别版2CD【水木">水木年华.2006-生命狂想曲特别版2CD【水木</a></li>
<li><a href="/3g/1/610483.html" title="卢庚戌.2000-未来的未来【喜洋洋】【WAV+">卢庚戌.2000-未来的未来【喜洋洋】【WAV+</a></li>
<li><a href="/3g/1/610482.html" title="钟汉良.1997-亲热【艺能动音】【WAV+CUE】">钟汉良.1997-亲热【艺能动音】【WAV+CUE】</a></li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="cloud"><h2 class="hometitle">一句话新闻</h2><a href="/3G/1/604673.html"><ul>高通与谷歌联手！首款骁龙PC优化Chrome浏览器发布<br><br>高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。<br>在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。<br>预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。<br>谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。</ul></a></div>
<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>
<div class="sidebar">
友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a>
</div>
</article>
<footer>
<p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="/">http://m.ddrfans.com</a></p>
</footer>
<script src="/images3g/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>