head 元素

可用于<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兼容三种模式。代码分别为:

<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">   
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值