一个网页，首先得有个标题，就跟人有名字一样。除此之外，还可以根据实际需要补充一些基本信息。
- 文档标题（浏览器标签中显示的文本）：
<title>深入了解 head 元素</title> - 编码格式：
<meta charset="utf-8">（你可能还看到gb2312格式，不过不建议使用），如果你的页面出现乱码，那一般就是编码格式不对 - 视窗设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 搜索引擎优化相关内容：
<meta name="description" content=“帮助你深层次了解HTML文档结构”> - IE浏览器版本渲染设置：
<meta http-equiv="X-UA-Compatible" content="ie=edge"> -
<meta name="keywords" content="CJ,博客园，理科生，前端"> -
<meta name="description" content="CJ，热爱前端与编程。这是我的前端博客"> -
<meta name="robots" content="none"> //禁止搜索引擎爬虫，默认为all -
<meta name="author" content="CJ,[email protected]"> -
<meta name="generator" content="Sublime Text3"> //网页制作软件 -
<meta name="copyright" content="CJ"> //代表该网站为Lxxyx个人版权所有 -
<meta name="revisit-after" content="7 days" > //搜索引擎爬虫访问时间 -
<meta http-equiv="Cache-Control" content="no-siteapp" /> //禁止移动端自动转码 -
<meta http-equiv="refresh" content="2；URL=http://www.baidu.com/"> //意思是2秒后跳转向百度
一个完整的网页光有 HTML 结构是非常简陋的，就如一个毛坯房。有了结构之后，我们还需要加入样式与行为为网页增添色彩。
- CSS 文件：
<link rel="stylesheet" type="text/css" href="style.css"> - JavaScript 文件：
<script src=“script.js"></script>
厂商定制
比喻开启双核浏览器先河的360浏览器就定制了一个默认使用哪个内核来渲染页面，可以设置为webkit内核、IE标准，IE兼容三种模式。代码分别为：
<meta name="renderer" content="webkit"> <!-- 默认webkit内核 --> <meta name="renderer" content="ie-stand"> <!-- 默认IE标准模式 --> <meta name="renderer" content="ie-comp"> <!-- 默认IE兼容模式 --> 同样分享页面到QQ的聊天窗口，有些页面直接就是一个链接，但是有些页面有标题，图片，还有文字介绍。为什么区别这么明显呢？其实就是看有没有设置下面这三个内容（具体参阅：腾讯移动WEB开发平台）。
<meta itemprop="name" content="这是分享的标题"/> <meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" /> <meta name="description" itemprop="description" content="这是要分享的内容" /> 还有IOS也定制了一些移动开发设置如下：
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-startup-image" href="/startup.png">
参考资料