当前位置： 移动技术网 > IT编程>网页制作>CSS > Head内常用标签

Head内常用标签

2018年02月07日  | 移动技术网IT编程  | 我要评论

一、标签分类

　　1.1 自闭和标签

　　自闭和标签只有开头没有结尾，自动闭合：　　

<meta> 标签
<link> 标签

　　1.2主动闭合标签

　　有开头也有结尾，是主动闭合的，称为主动闭合标签，我们用到的大部分都是主动闭合标签

<html>...</html>
<head>...</head>
等

　　

二、Head标签　

2.1 meta 标签

　　<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。

       <meta>标签位于文档的头部，不包含任何内容。

　　<meta>提供的信息是用户不可见的

　　(1)http-equiv属性:相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

　　设置页面编码

<meta charset="UTF-8">  
 
<meta http-equiv="content-type" content="text/html;charset=utf-8">

　　刷新和调整

<meta http-equiv="Refresh" content="3">  # 每隔3秒自动刷新
 
<meta http-equiv="Refresh" content="3; Url=https://www.baidu.com">  # 每隔3秒自动跳转到百度

　　(2)name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

　　关键字：搜索引擎搜索

<meta name="keywords" content="Html学习,meta学习,head学习">

　　描述：说明网站做什么的

<meta name="description" content="前端知识学习">

　　(3)X-UA-Compatible

　　微软的IE6是通过XP、win2003等操作系统发布出来，作为占统治地位的桌面系统，也使得IE占据了统治地位，许多网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码调整后，才能够正常运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准都抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在IE版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版的错误、文字重叠、显示不全等各种兼容性错误。

　　与任何早期浏览器版本相比，IE8对行业标准提供了更加紧密的支持。因此，针对旧版本的浏览器设计的站点可能不会按预期显示。为了帮助减轻任何问题，IE8 引入了文档兼容性的概念，从而允许您指定站点所有支持IE的版本。文档兼容性在IE8中添加新的模式，这些模式将告诉浏览器如何解释和呈现网站。如果您的站点在IE8中无法中无法正确的显示，则可以更新改站点以支持最新的WEB的标准(首选方式)，也可以强制IE8按照就版本的浏览器中查看站点方式来显示内容。通过使用meta 元素将X-UA-Compatible 标头添加到网页中，可以实现这一点。

　　当IE8 遇到未包含X-UA-Compatible 标头的网页时，它将使用指令来确定如何显示网页。如果该指令丢失或未指定基于标准的文档类型，则IE8将以IE5模式（Quicks模式）显示该网页。　

 <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge; IE=IE11; chrome=1">

# 多个浏览器可以用；隔开

2.2 Title标签

　　网页头部标签　

<title>总有刁明想害朕</title>

　　 

2.3 Link 标签

　　1.图标

<link rel="icon" href="http://www.jd.com/favicon.ico">

或

<link rel="icon" href="images/favicon.ico">

　　2.加载css样式文件

<head>
    <meta charset="UTF-8">
    <title>一起嗨起来</title>
    <!--<link rel="icon" href="http://www.jd.com/favicon.ico">-->
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/common.css">
</head>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网