站长资源网页制作
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.sccsvx.com/show/1/76861.html" title="网页前端开发小细节">网页前端开发小细节</a></p>
<p>下一篇：<a href="http://m.sccsvx.com/show/1/76863.html" title="让你的网站IE8浏览自动用IE7兼容模式 ">让你的网站IE8浏览自动用IE7兼容模式 </a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li><a href="/show/1/625646.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨][518.8">群星《奔赴！万人现场 第2期》[FLAC/分轨][518.8</a></li>
<li><a href="/show/1/625645.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[32">群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[32</a></li>
<li><a href="/show/1/625644.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[FL">群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[FL</a></li>
<li><a href="/show/1/625643.html" title="【古典音乐】詹姆斯·高威《季节》1993[WAV+CUE]">【古典音乐】詹姆斯·高威《季节》1993[WAV+CUE]</a></li>
<li><a href="/show/1/625642.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li>
<li><a href="/show/1/625641.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]</a></li>
<li><a href="/show/1/625640.html" title="群星《欢迎来到我身边 电影原声专辑》[320K/MP3">群星《欢迎来到我身边 电影原声专辑》[320K/MP3</a></li>
<li><a href="/show/1/625639.html" title="群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨">群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨</a></li>
<li><a href="/show/1/625638.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓</a></li>
<li><a href="/show/1/625637.html" title="群星《2024好听新歌42》AI调整音效【WAV分轨】">群星《2024好听新歌42》AI调整音效【WAV分轨】</a></li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="cloud"><h2 class="hometitle">一句话新闻</h2><a href="/3G/1/604623.html"><ul>一文看懂荣耀MagicBook Pro 16<br><br>荣耀猎人回归！七大亮点看懂不只是轻薄本，更是游戏本的MagicBook Pro 16.<br>人们对于笔记本电脑有一个固有印象：要么轻薄但性能一般，要么性能强劲但笨重臃肿。然而，今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上，荣耀宣布猎人游戏本正式回归，称其继承了荣耀 HUNTER 基因，并自信地为其打出“轻薄本，更是游戏本”的口号。<br>众所周知，寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验，而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起，我们不禁对它产生了强烈的好奇：作为代表荣耀猎人游戏本的跨界新物种，它究竟做了哪些平衡以兼顾不同人群的各类需求呢？</ul></a></div>
</div>
</article>
<footer>
<p>友情链接:<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="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap.xml">SiteMap</a></p>
<p>Design by <a href="http://m.sccsvx.com">神水资源网</a> <a href="/">http://m.sccsvx.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>