HTML之魂-HEAD元素

17-08-16 来源：[db:作者]

收藏我要投稿

看过小说的朋友，人的元神分为七魂六魄，常常忽略的也就是一个人的魂，HTML之魂正是聚集元数据的HEAD元素。形容的比较夸张，接下具体讲解下HEAD元素。

HEAD元素通常包含三位一体既(网页基本信息，其它外链信息，厂商定制)。

先来看看一个基本HTML格式

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<body>   
</body>
</html>

网页的基本信息，其信息包含了这个页面所需要告诉观看代码或者搜索引擎爬取程序这个页面是什么，大致含有什么内容。

举个栗子

head里面可以包含如下元素： meta元素， title 元素 , link元素， script元素

页面基本信息主要有 title 和 meta

tite元素 :

<title> 你好在这里填写整个文档的核心标题 < /title>

meta元素:

编码格式 --- <meta charset="utf-8"> 表示这个页面应该用什么形式转码，通常建议用utf-8 

搜索引擎相关 ---  <meta name="description" content=“这里的内容可以理解为摘要信息”>   <meta name="keywords" content=“这里告诉搜索主要是根据什么来扩展的内容”>

IE版本相关渲染  ---  <meta http-equiv="X-UA-Compatible" content="ie=edge">   这里告诉如果是IE浏览器访问，会建议用最新的edge来打开网页 ，避免IE浏览器的各种兼容问题

视窗设置 --- viewport 适口 <meta name="viewport" content="width=device-width, initial-scale=1.0">  窗口设置  宽度等同于设备宽度  缩放大小比例为1

其它外链信息

link元素和script元素：我们把HTML看成一个房子，如果单纯的是HTML文件的话也只能称为一个房子的框架，而没有JS和CSS等其它文件引入，顶多算是一个清水毛胚罢了。那么要拎包入住还需要搬入家具和电器，好好装修(渲染)下才行。

<script src=“这里是引用JS的文件名.js"></script> （网站的家具和家电，网站的交互，全靠JS来负责）  
<link rel="stylesheet" type="text/css" href="这里是引用CSS的文件名.css">   --- 定义风格 （好比定义网站由什么色彩风格地板砖和墙壁）

厂商定制

现在越来越多的浏览器称为双核，当然这个不是CPU的双核，而是拥有两种不同渲染机制规则而已。打个比方我们打开“搜狗浏览器” “360浏览器” “QQ浏览器” “猎豹浏览器”等国内比较优秀的浏览器打开网页会有极速模式，兼容模式等等。其也是代表用什么机制来渲染页面而已，为了就是满足不同用户的体验。

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

说说关于不同内核私有属性：

内核不是那么神秘，说说主流的各家浏览器用的什么浏览器内核(网页渲染引擎)。而我们经常在代码会看到各种不同的浏览器私有属性写法，这也是考虑兼容的问题

 background: -moz-linear-gradient( top,#ccc,#000);

-moz- 代表firefox浏览器私有属性

-ms- 代表IE浏览器私有属性

-webkit- 代表chrome、safari私有属性

-o- 代表Opera私有属性

pritce:

1、 head元素里主要包含了哪三块内容?

2、外链元素是放在哪个标签里的?

3、厂商定制的大概有哪一些模式?

4、能否简单说下视窗设置代表什么意义?

点击复制链接与好友分享!回本站首页