在线HTML格式化工具和在线CSS样式格式化工具的工作原理是什么啊？

html-css022

在线HTML格式化工具和在线CSS样式格式化工具的工作原理是什么啊？,第1张

本质就是根据一套设定的规则用编程语言(js、asp、php、ruby..)来判断处理字符串

格式前：

<html><body></body></html>

格式后：

<html>

<body></body>

</html>

只说一种大致原理，具体实现有很多算法：

规则：根据html里<>是一个元素开始，</>是一个元素结束来查找元素

程序读到第一个<html>就去找与之对应的</html>

然后又去找<html></html>之间有无能配对的<></>，没有的话则不处理

有子元素的话，就需要插入换行把子元素和父级分开(同时处理细节，如父子标签之间多余的空格、插入tab缩进等)

然后又去找<body></body>里面有没有配对的<></>，没有则不处理，有的话则向前面几步一样循环往复的查找、处理

------------------------------------------------------

css格式化的大概规则：

body{color:red}.myclass{font-size:12px}#myid span{width:100pxcolor:yellow}

找配对的{}，里面的玩意根据为结尾的规则换行：

{

width:100px

color:yellow(最后一句可以不写这个“”所以这种情况也要考虑)

}

加点tab缩进：

{

width:100px

color:yellow

}

还有就是判断一对{...}外面那些字符，加入换行：

body{}

.myclass{}

#myid span{}

最后你看到的就是：

body{

color:red

}

.myclass{

font-size:12px

}

#myid span{

width:100px

color:yellow

}

具体实现中，上面的还有很多情况也是要考虑的，比如写代码的人忘了写</html>，程序找到<html>后找不到配对的</html>，这时怎么处理？是忽略、提示错误、还是另外弄套更复杂的规则去智能的补写一个</html>上去？反正很多细节，写程序的人要尽量先想到可能的各类情况。

其他什么玩意格式化也是这个原理，只是查找的规则不一样而已。

反过来，有很多压缩js、css、html代码的东西，是为了节约字节减少服务器压力，把文件里面的无用空格、换行都删除掉，就是把这些步骤反过来。

另外处理字符串，你可以百度下：正则表达式

第一步：需要掌握css的缩写技巧

参考下面的文章即可

CSS缩写优化CSS文件的体积

CSS常用属性缩写实例[推荐]

第二步：用css在线格式化与压缩工具

第三步：测试，看看经过压缩后的css文件，会不会导致页面变形等问题，一般情况下不会，不排除特殊情况。别忘了备份样式文件啊。