深入了解 head 元素

5人阅读 评论(0) 收藏 举报
分类:


<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">   
查看评论

深入理解数组

数组是一种引用类型数组,数组引用变量只是一个引用,数组元素和数组变量在内存中是分开存放的。一、内存中的数组 数组引用变量只是一个引用,这个引用变量可以指向任何有效的内存,只有当该引用指向有效...
  • OREO_GO
  • OREO_GO
  • 2016-05-13 14:18:05
  • 301

《深入了解.NET框架》

深入了解.net框架(一)理解受管理的执行(managed excution)    在受管理的执行过程的第一步是设计源程序。如果你想你的应用程序受益于common language runtime(...
  • benben1hao
  • benben1hao
  • 2001-06-19 11:46:00
  • 1268

网络——深入了解Http

一、Http网络请求的原理 Http是通过TCP实现的可靠的网络传输。(需要了解的知识TCP/UDP编程) 那么Http是如何过度到TCP实现客户端与服务器的交互的呢? ①、当客户端执行网络请求的时候...
  • chen19960724
  • chen19960724
  • 2016-08-22 15:17:21
  • 457

深入了解cookie

会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端...
  • justdoithai
  • justdoithai
  • 2016-05-24 10:45:32
  • 462

深入了解MySQL的索引(一)

(一)关于存储引擎               创建合适的索引是SQL性能调优中最重要的技术之一。在学习创建索引之前,要先了解MySql的架构细节,包括在硬盘上面如何组织的,索引和内存用法和操作方式,...
  • qq_27291877
  • qq_27291877
  • 2015-05-06 21:42:06
  • 799

深入了解英语文化的点滴

2006-06-23 14:44:23 深入了解英语文化的点滴深入了解英语文化的点滴看英文片容易误解的10个词组 1.dude(老兄,老哥)开始时我把它误解为“花花公子, 纨绔子弟...
  • mybirdsky
  • mybirdsky
  • 2008-01-17 16:40:00
  • 301

深入了解JSF

JavaServer Faces (JSF) 是一种用于构建 Web 应用程序的标准 Java 框架。它的目的是简化WEB应用程序的开发。它基于组件技术,并提供了以此为中心来开发 Java Web 用...
  • mty
  • mty
  • 2007-06-22 15:26:00
  • 372

dubbo深入理解(1)

dubbo学习,分布式服务架构,国内最好的一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案...
  • maybe_fly
  • maybe_fly
  • 2017-09-11 14:18:44
  • 558

深入理解LTE-A

  • 2016年01月08日 17:35
  • 21.91MB
  • 下载

jdk深入了解

JDK目录结构和文件作用介绍 要想深入了解Java必须对JDK的组成, 本文对JDK6里的目录做了基本的介绍,主要还是讲解 了下JDK里的各种可执行程序或工具的用途 Java(TM) 有两个平台 ...
  • zsp151296
  • zsp151296
  • 2017-03-24 18:27:20
  • 148
    个人资料
    持之以恒
    等级:
    访问量: 9543
    积分: 491
    排名: 10万+
    博客专栏
    最新评论