<Linux之新手村攻略正则表达式实例解析>

如何用正确的姿势写HTML

#### 前言
所谓正确的姿势，就是符合标准，性能良好，结构合理。如果觉得太长不看，也可以先用<a href="https://validator.w3.org/" title="https://validator.w3.org/" target="_blank" rel="nofollow">https://validator.w3.org/</a>简单验证一下你的HTML是否合理，更多了解可向下看。

以本页面的简单结构为例：
```html
<!DOCTYPE html>
<html lang="zh">
<head lang="cmn-Hans">
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>万金油之正则表达式</title>
    <meta name="description" content="万金油之正则表达式" />
    <meta name="keywords" content="万金油之正则表达式,cifer,万金油，正则表达式，js正则表达式，JavaScript正则表达式" />
    <link rel="stylesheet" href="http://res.boatsky.com/dist/css/common/global.css"/>
    <link rel="stylesheet" href="http://res.boatsky.com/external/editormd/css/editormd.min.css" />
    <link rel="stylesheet" href="http://res.boatsky.com/dist/css/blog/blog_detail.css">
    <script>
        var globalMess = {};
    </script>
</head>
<body>
    <header class="header"></header>
    <section class="main-wrap" id="mainWrap">
        <section class="mod-inner">
            <h1></h1>
            <div class="detail" id="detail">
        </div>
    </section>
    <footer id="footer"></footer>
    <script src="http://res.boatsky.com/external/mixed/static.js"></script>
    <script src="http://res.boatsky.com/dist/js/common/common.js"></script>
    <script src="http://res.boatsky.com/external/editormd/editormd.js"></script>
    <script src="http://res.boatsky.com/dist/js/blog/blog_detail.js"></script>
    <script>
        var _hmt = _hmt || [];//略百度统计代码
    </script>
</body>
</html>
```
##### DOCTYPE
DOCTYPE虽然不是head一部分，也不是html标签，却是最最重要的：告诉浏览器用html5规范。
不过，你在项目中还可能接触到别的doctype，不过，已经比较少见了
```html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
```
为毛这么多规范？如果简单了解一下它们的关系，那便一目了然了。

首先SGML（标准通用标记语言，Standard Generalized Markup language），是1986年国际标准化组织出版发布的一个信息管理方面的国际标准， 定义电子文档结构和描述其内容的国际标准语言。

而HTML（超级文本标记语言，HyperText Markup Language，又名htm）是1993是互联网工程工作小组（IETF）的草案（之后1.0 版本太多，充满争议）。 历经html 2.0 (1995),html 3.2(1997，w3c标准),html 4.0(1997),html 4.01 (1999)，最后才到万众瞩目的html5（2014-10-28），所以说html只是SGML下的一个应用， 或说一个专为web显示而设计的特殊的标准，因为万维网被众所周知。

因为html 4.01 不区别大小写，高容错率，不符和w3c处女座的习惯，于是2000提出xhtml 1.0，不容错模式（比如标签必须小写，必须有结束标签），不过最后还是类似于ES4，不得而终， 最后的结果大家都知道了，xhtml 2.0被html5取代。

可能大家还用过shtml（Server Side Include，又叫shtm）,其实就是加入服务器的一些包括命令，如，在页面中包含另一个页面，类似php,asp,aspx,jsp引入其他页面等。

说到html,当然不得不说xml,xml（可扩展标记语言，Extensible Markup Language）是SGML子集（相当于简化版，只有其规范的十分之一），当时因为SGML过于复杂，而html过于局限，w3c于1998制定，对html进行补充，用来传输与存储数据。

不过，后来json（轻量级的数据交换格式，JavaScript Object Notation，1999）横空出世，独领风骚。
#####   空间，语言及编码
xmlns="http://www.w3.org/1999/xhtml"， xmlns是指xml命名空间（XML Namespaces）,用来处理xml的同名标签不同类型冲突，http://www.w3.org/1999/xhtml 指使用这命名空间标签下的内容都遵循xhtml。 对于xhtml是必须的（不加也会默认加上），而html5则无需加上，加与不加都表现一致。
lang="cmn-Hans"指定页面语言，比如，zh-cmn-Hans简体中文，zh-cmn-Hant繁体中文，en泛英语，en-gb英式英语，en-us美式英语，fr-fr法语，de-de德语，it-it意大利语，ja-jp日语。
meta用键值对的方式指定页面元信息，其中有项是编码方式，但是在HTML还没解析的时候，meta编码没有拿到，整个HTML是如何编码的呢？（参考<a href="http://w3c.github.io/html/syntax.html#determining-the-character-encoding" target="_blank" rel="nofollow">http://w3c.github.io/html/syntax.html#determining-the-character-encoding</a> ）
1.html解析之前，按用户指定编码（比如浏览器指定的编码）
2.按BOM默认编码（早期网络的字符编码是 ASCII 码，HTML2-HTML4是ISO-8859-1 ，HTML5是UTF-8）HTTP响应头编码
3.浏览器编码算法，得出一项预解析，找到页面编码meta后按其编码

以上都是预编码，逐一进行，前者成功，后者则不再查找，如果不能快速的找到meta编码方式，则使用浏览器自动编码(它需要时间)，有的浏览器会暂停后续的页面渲染，直到找到字符集，而有的则是用默认编码渲染后，又在页面后面找到meta编码方式，两者如果不同，页面还要重新渲染。

所以说，定义字符集是一个简单而重要的事，何乐而不为？例子中charset="UTF-8"指定编码方式为UTF-8。像之前还有gbk bg2312。有兴趣的同学可以了解一下它们的区别：
<a href="http://www.cnblogs.com/xiaomia/archive/2010/11/28/1890072.html" target="_blank" rel="nofollow">http://www.cnblogs.com/xiaomia/archive/2010/11/28/1890072.html</a>
##### 常见浏览器内核
|   内核|   简介|   浏览器|
| ------------ | ------------ | ------------ |
|   webkit|   WebKit 是一个开源项目，包含的 WebCore 排版引擎和 JSCore 引擎来自于 K Desktop Environment (KDE) 的 KHTML 和 KJS，chrome1 2008开始使用|   Chrome,Safari,Opera15+|
|   Trident|   MSHTML，是微软开发的一种排版引擎,1997年10月与IE4一起诞生|   ie4-11|
|   Gecko|   套开放原始码的、以C++编写的网页排版引擎，Netscape 6，2000启用|   Mozilla Firefox|
|   Presto|   Opera Software开发的浏览器页面渲染引擎，Opera7 2003年启用|   Opera14-(挪威,1995创立)|

显然，现在webkit的天下，而Trident则有很多兼容性问题（比如IE6已经被多数网站放弃，并开始放弃IE7的兼容），gecko依然坚挺，而presto也被Opera放弃。
　　为了更好显示HTML效果（其实更多的是CSS），我们会优先用webkit或gecko，不过国内有些浏览器会同时引入以上多个内核，则content="webkit"则会告诉浏览使用webkit内核渲染。
　　content="IE=Edge,chrome=1"表示使用最新的Trident版本，如果有用户已经安装了插件Google Chrome Frame(谷歌内嵌浏览器框架GCF)，则在ie上使用webkit内核。
#####   SEO与语义化
　　严格来说，SEO是由运营的内容以及竞价决定的，然而前端的优化也不可忽视。meta的description描述这个网站，keywords则是引擎关键字，如果全页面能有仅只有一个h1的内容与description一致，且内容全名独一无二，则在该关键字搜索下排名会靠前。
　　所谓语义化，就是什么内容就用什么标签。如果一个页面把样式与js都去掉，显示出来还是排列有序、不算难看，那说明语义化做的好。
　　比如HTML5发布后，加入了 header,footer,section,nav,article,code,aside等一批语义化的签，也有语义化的考虑，为了方便浏览器解析，搜索引擎分析，人类理解，团队协作以及世界和平，写的HTML语义化是很有必要的。
##### HTML结构
除了EDM，现在人们几乎不会使用table作页面布局了。
讲结构之前，首页我们来线析一下打开一个网页的过程：

1.用户请求一个域名，DNS域名服务器把该域名解析成ip，请求对应的主机
2.浏览器接收http response的html文档，然后用它在内存中解析成DOM（Document Object Model）
3.解析dom树过程中，浏览器会维持html中css和js的顺序，css必须在内嵌的JS执行前先加载、解析完，所以样式必须放在内嵌js之前。
4.浏览器为了有稳定的dom，会进行js阻塞（如果解析好dom，js再修改dom,那么之前的修改就失去意义）
5.若解析到有外部链接，比如外部css,js,img，那么会再发出相应的request去加载相关的css,js,img。
6.如果是外部css,img请求，则浏览器无需等待相应的返回结果，继续向下解析，等返回成功，再插入相应位置即可。
7.如果是外部js，,则浏览会停止解析，直到js数据返回，执行完js后，再向下解析（js阻塞）
8.解析成的dom树与css树，会构建一个渲染树（render tree），浏览器是一边解析一边渲染

再回看上述demo，应该就明白啦。

##### 静态CDN加速，减少请求数，增加请求并发，减小文件大小
　　首先，为了减小核心服务器压力，去除请求静态资源时无用cookie以及方面cdn加速，静态资源一般会有静态资源服务器群，理想状态比如：
图片 img1.boatsky.com img2.boatsky.com……
css css1.boatsky.com css2.boatsky.com……
js  js1.boatsky.com js2.boatsky.com……
　　http 1.1限制是同一时间同一域名只能两个连续并发，后来浏览器的发展，部分已支持到4-8个，如果有自己的静态资源服务器群，则可以在同一时间增加请求并发。
　　当然为了加快静态资源的加载速度，一般会有内容分发网络，去最近的服务器请求资源。http请求数与文件大小是最影响前端性能的因数之一，不过这些优化也只是近些年才被重视的，你可以看到很多中小网站都是没有做好这一块的。

减少请求的方法示例：
　　js   模块化开发，最后按照依赖打包压缩成一个js，这个并不是越少越好，但更少可以减小请求，相关的可以用requirejs,seajs,commonjs等
　　css 使用css编程工具，如sass/less，开组件化开发样式，最后可以自动压缩生成一个css
　　icon 使用sprite进行规划，各个图标取其对应位置，推荐
　　不在a,img中使用空href src属性，会增加无意义的请求

减小文件大小，狭义上来说，就是压缩文件，广义上来看，多余的文件结构也是文件大小的的源由（在开发中不必要的html 结构，以及迭代中无用的结构、注释真不少见）。
　　其中压缩，除了前端文件的压缩，服务器也应该启用压缩，比如启用gzip压缩
　　http 1.1引入accept-encoding 可以表明是请求是否被压缩过，雅虎性能统计，约可以减小70%左右的响应大小
　　然而，为了减少资源请求，进行资源合并，并不是越少越好，像一些几乎不修改的资源，单独的请求从面让浏览器缓存下来反而更佳，这就需要前端开发用经验权衡了。
#####    减少回流（重排）、重绘
　　当DOM树中的元素的一些外观变化（如background），浏览器会把元素的dom tree与style重组成reder tree，重新绘制，即重绘(repaints)。而如果是元素更大的变化，则会在重绘的之前进行一次回流(reflows)，那哪些情况会造成回流呢？
  
1、添加或者删除可见的DOM元素；
2、元素位置改变；
3、元素尺寸改变——边距、填充、边框、宽度和高度
4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
5、页面渲染初始化；
6、浏览器窗口尺寸改变——resize事件发生时；

总的来说，回流的代价远大于重绘，回流的之后必然会重绘，而重绘不一定会造成回流。浏览器回流重绘时会尽可能的减小影响范围，在body内最前面加一个元素，则该元素之后的元素都要重绘，即整个body都需要重绘，而在body内的最后面加入，则只重绘该元素本身。其中,display: none的元素，不会重绘，所以这也是一个暗门。
  
　　减小回流重绘，是性能提升的关键点：
1、不要用table进行页面布局的原因有很多，重绘是其中一个，如果table中有一行有相关变化，整个table都需要重绘，代码过高。
2、如果必须要重绘时，可以把相关变化改在class 上，然后改成该class，一次绘制
3、js中使用html模板，原理与2是一样的，不仅可以结构分离，还可以减小重绘。
4、图片一定要定义宽高，否则浏览器会给图片留一片区域，等图片下载完毕才知道图片的宽高后再重绘一次，实在是没有必要。

更多可以参考<a href="http://www.css88.com/archives/4996" target="_blank" rel="nofollow">http://www.css88.com/archives/4996</a>
##### 静态缓存
静态缓存，是不得不面对的问题。
一旦css,img,js等静态资源有更新,浏览器常常是看到的基本是更新之前的结果，因为是缓存的原因。缓存主要有两处可控制：一处是在服务器定义http缓存机制。别一处则是在浏览器meta定义。两者位置不同，效果一样。
例子：
Cache-Control:max-age=2592000
Connection:keep-alive
Date:Sat, 25 Jun 2016 08:21:44 GMT
ETag:"575bcf63-c3a"
Expires:Mon, 25 Jul 2016 08:21:44 GMT
Last-Modified:Sat, 11 Jun 2016 08:44:19 GMT
Server:nginx

缓存则是由Cache-Control ,ETag,Expires,Last-Modified决定的。
Cache-Control，缓存类型，如private、no-cache、max-age、must-revalidate
Expires，控制过期时间
ETag，服务器根据该样式索引，大小，最后修改时间生成的唯一标识
Last-Modified，上次修改时间
为了方便理解，这里引用两张图：
浏览器第一次请求样式：
![第一次请求](https://www.boatsky.com/static/upload/blog/2_1.png "第一次请求")
之后的请求：
![之后的请求](https://www.boatsky.com/static/upload/blog/2_2.png "之后的请求")

清除缓存最简单的方式就是ctrl+F5以及关闭缓存。

可我们无法要求用户的形为，也不能简单把缓存关闭来处理上述问题，所以问题变成：”如果保证缓存的基础上，但我们有修改时，更新缓存？“
其实，有人通过改文件名的方式，这时又带来一个问题，怎么把页面的引入改回新文件名？

为了简单化，本处是在样式后面直接加一个时间戳来解决。人工维护这些时间戳并不方便，所以我们使用类似于服务器的include方式，作为中介，引入我们要引入的样式，而本中介其实就是简单一个页面片，我们使用自动更新时间戳的工具进行更新。

更多缓存知识参考这两个链接：
<a href="http://www.cnblogs.com/skynet/archive/2012/11/28/2792503.html" target="_blank" rel="nofollow">http://www.cnblogs.com/skynet/archive/2012/11/28/2792503.html</a>
<a href="http://baike.baidu.com/link?url=Wf8dMqT1n2PkYRZ34Wn_ALwfVddWuh2EQxQd80eHuZ19Dsqoas4JC-kcc2AxMGCBU1mGThBQkPxMAOi7dT4Ou_" target="_blank" rel="nofollow">http://baike.baidu.com/link?url=Wf8dMqT1n2PkYRZ34Wn_ALwfVddWuh2EQxQd80eHuZ19Dsqoas4JC-kcc2AxMGCBU1mGThBQkPxMAOi7dT4Ou_</a>

如果觉得有帮忙，您可以在本页底部留言。

如何用正确的姿势写HTML

全部留言

我要留言