第一是布局，第二是嵌套，第三是样式
1、布局这个很好理解，尽量用div+css布局，不要用table，尤其是输出循环内容的时候，用table弱爆了。相信现在很少有人用table布局了吧。
2、嵌套太多，确实会造成代码冗余。现在有很多html框架，帮开发人员节省了开发时间，但毫无疑问，也带来了一些容器嵌套。如果对自己的开发能力ok，可以不用那些框架，如：bootstrap、layui等。
3、有不少人写样式的时候，喜欢用内联比如<div style="text-align:centerfont-size:12px" 之类的这种写法每一个容器都得写，无疑会造成代码冗余。
基本上就这些吧。
怎样精简HTML代码在编辑网页过程中，由于网页过于复杂，或是在网页上过度频繁地移动文本、图片或者其它对象，或是反复设置文字、表格或图片的属性，都会不可避免地产生多余而冗长的HTML代码。不必要的代码会影响网页的下载速度和网页的兼容性。所以，在编辑完网页后，我们可以寻找并清除这些代码，使整个网页更精简，在浏览时速度更快。
选择“Commands”菜单下的“Clean Up Html”命令，打开“Clean Up Html…” 对话框，在“Remove”栏中有五个选择来清除不需要的代码：
图1 打开“Clean Up Html…” 对话框
Empty Tags：用于清除没有包含任何内容空标签。
比如，会删除“<font size=2></font>”，但是不会删除“<font size=2>Goldhuman</font>”。
Redundant Nested Tags：用于清除多余的嵌套标签。
例如，对“<b>金洪恩<b>电脑</b>有限公司</b>”语句，内部的<b></b>标记会被删除，变为“<b>金洪恩电脑有限公司</b>”。
Non-Dreamweaver HTML Comments：用于删除所有非Dreamweaver自动生成的注释信息。Dreamweaver自动生成的注释之前都有一段说明，表明该注释由Dreamweaver所添加，Dreamweaver就是根据这个特征来区分哪些注释是由它自动生成，而哪些注释不是由它生成的，并进行删除。
Dreamweaver HTML Comments：用于清除由Dreamweaver产生的注释；
在Specific Tag(s) （特定标记）输入框中，我们可以指定要清除的标签。我们可以在右面的文本框中输入要清除的标签名。这一项主要用于删除哪些由其他可视化编辑器生成的标记、自定义标记，或那些不希望放置到站点上的标记，如blink。
下面我们再看一下“Option”（选项）区域。
Combine Nested <font>Tags When Possible（尽可能合并嵌套的<font>标记）：选中这一项，会对文档中的嵌套<font>标记进行重新组合或合并。
比如，语句“<font size="2"><font color="#A3C06D ">洪恩在线</font></font>”，会被融合成“<font size="2" color="#A3C06D ">洪恩在线</font>”
Show Log on Completion（完成后显示提示）：选中这一项，会在精简代码 *** 作完成后，显示相关的提示信息。
比如我们选中头两项，然后点“OK”，系统会d出一个对话框，告诉我们一共清除了几个空标签。
如果网页是由Word文件另存成HTML文件的，那我们可以选“Commands”菜单下的“Clean Up Word Html…”命令，会专门清除一些由Word文件转换所产生的多余标签和其他废代码。
<!DOCTYPE html><html>
<head>
<meta charset=utf-8>
<title>test</title>
<style>
a {
cursor: pointer
font-size: 14px
text-decoration: none
}
#GG {
width: 400px
height: 200px
border: 1px solid black
padding: 18px
display: none
}
</style>
<script>
window.onload = function() {
CC.onclick = function() {
var dis = GG.currentStyle ? GG.currentStyle.display : getComputedStyle(GG, false).display
GG.style.display = dis != "none" ? "none" : "block"
}
var as = GG.getElementsByTagName("a")
for (var i = 0 i < as.length i++) {
as[i].onclick = function() {
CC.innerHTML = this.innerHTML
GG.style.display = "none"
}
}
}
</script>
</head>
<body>
<button id="CC">DD</button>
<div id="GG"> <a href="###">
罗湖区
</a>
<a href="###">
福田区
</a>
<a href="###">
南山区
</a>
<a href="###">
宝安区
</a>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）