head 元素

Love The Way You Lie 2022-05-27 09:35 128阅读 0赞

# `` #

*  [HTML meta 标签总结与属性使用介绍][HTML meta]
 *  [MDN中meta讲解][MDN_meta]  
    
 *  [移动端重构系列2——新建空白页面][2]

# `可用于<head>元素内的元素有: <title>, <base>, <link>, <style>, <meta>, <script>, <noscript>, <command>` #

# `<head>`元素用于定义网页的常规信息和元数据，虽然在网页中不可见，但是也是非常的重要。 #

总得来说其里面的子元素大概分为三类，分别是：描述网页基本信息的，指向渲染网页需要其他文件链接的，各大厂商根据自己需要定制的。

## 网页基本信息 ##

一个网页，首先得有个标题，就跟人有名字一样。除此之外，还可以根据实际需要补充一些基本信息。

*  文档标题（浏览器标签中显示的文本）：`<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">`

## 其他文件链接 ##

一个完整的网页光有 HTML 结构是非常简陋的，就如一个毛坯房。有了结构之后，我们还需要加入样式与行为为网页增添色彩。

*  CSS 文件：`<link rel="stylesheet" type="text/css" href="style.css">`
 *  JavaScript 文件：`<script src=“script.js"></script>`

## 厂商定制 ##

比喻开启双核浏览器先河的360浏览器就定制了一个默认使用哪个内核来渲染页面，可以设置为webkit内核、IE标准，IE兼容三种模式。代码分别为：

同样分享页面到QQ的聊天窗口，有些页面直接就是一个链接，但是有些页面有标题，图片，还有文字介绍。为什么区别这么明显呢？其实就是看有没有设置下面这三个内容（具体参阅：[腾讯移动WEB开发平台][WEB]）。

还有IOS也定制了一些移动开发设置如下：

[HTML meta]: https://segmentfault.com/a/1190000004279791
[MDN_meta]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta
[2]: https://www.w3cplus.com/mobile/mobile-terminal-refactoring-create-page.html
[WEB]: https://open.mobile.qq.com/api/mqq/index