head内元素的三种主要作用

head元素主要有以下几种作用

描述网页基本信息

    网页标题<title>
    设置编码格式:<meta charset="utf-8/GBK/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">

指向渲染网页所需的其他文件链接

CSS 文件:

 <link rel="stylesheet" type="text/css" href="style.css">

JavaScript 文件:

<script src=“script.js"></script>

各大厂商根据自己的具体使用情况定制

360浏览器就定制了一个meta头,来设置默认使用何种内核来渲染页面,可以设置为webkit内核、IE标准,IE兼容三种模式。代码分别为:

<meta name="renderer" content="webkit"> <!-- 默认webkit内核 -->
<meta name="renderer" content="ie-stand"> <!-- 默认IE标准模式 -->
<meta name="renderer" content="ie-comp"> <!-- 默认IE兼容模式 -->

分享到QQ聊天窗口的网页,如果加入下面三行,就可以预读出内容

<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">