前端正规排版

1.第一种先排版布完局后, 再加载样式, 显示是最终的排版样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!-- 视口标签： 禁止浏览器伸缩--><meta name="viewport" content="width=device-width, initial-scale=1">或者<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /><title>标题</title>        <link rel="stylesheet" href="??????">...<link rel="stylesheet" href="??????"><script src="???????"></script>...<script src="???????"></script><script type="text/javascript">//进来就执行jQuery(function($) {function a(){}b();});function b(){}</script><style>.?{}#?{}</style></head><body><div></div>...</body>
</html>

简化:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><title>标题</title><link rel="stylesheet" href="??????"><script src="???????"></script><script type="text/javascript">//进来就执行jQuery(function($) {function a(){}b();});function b(){}</script><style>.?{}#?{}</style></head><body><div></div></body></html>

2.第二种加载时,先把样式加载再布局, 适合用于需要先显示样式的需求

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!-- 视口标签： 禁止浏览器伸缩--><meta name="viewport" content="width=device-width, initial-scale=1">或者<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /><title>标题</title>        <link rel="stylesheet" href="??????">...<link rel="stylesheet" href="??????"><style>.?{}#?{}</style></head><body><div></div>...<script src="???????"></script>...<script src="???????"></script><script type="text/javascript">//进来就执行jQuery(function($) {function a(){}b();});function b(){}</script></body>
</html>

简写:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!-- 视口标签： 禁止浏览器伸缩--><meta name="viewport" content="width=device-width, initial-scale=1">        <title>标题</title><link rel="stylesheet" href="??????"><style>.?{}</style></head><body><div></div><script src="???????"></script><script type="text/javascript"></script></body>
</html>