head标签是HTML文档中最基本的必须元素之一（body：对，还有我）：

<html>

<head>

  <title>文档的标题</title>

</head>

<body>

  文档的内容... ...

</body>

</html>

<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表（link）、提供元信息（meta）等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

<head>可以包含6个元素小伙伴：<title><meta><link><style><script>和<base>。其中<title>是和它同生共死的挚友，它是 head 部分中唯一必需的元素。也就是一个HTML文档必须包含标题。

—— * —— * —— * —— * —— * ——

下面分别介绍一下这六个标签元素，包括定义、属性和用法：

铁杆儿小伙伴1: <title> 可定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

属性（全部不常用）：dir／lang／xml:lang

用法：

<html>

  <head>

    <title>XHTML Tag Reference</title>

  </head>

  <body>

    The content of the document......

  </body>

</html>

小伙伴2:<base> 为页面上的所有链接规定默认地址或默认目标。通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用<base>标签指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

属性：href：URL  规定页面中所有相对链接的基准 URL

　　　target：_blank/_parent/_self/_top/framename 在何处打开页面中所有的链接

用法：

<head>

　　<base href="http://www.w3school.com.cn/i/" />

　　<base target="_blank" />

</head>

<body>

　　<img src="eg_smile.gif" />

　　<a href="http://www.w3school.com.cn">W3School</a>

</body>

小伙伴3:<meta> 提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。位于文档的头部，不包含任何内容。其属性定义了与文档相关联的名称（http-equiv/name）/值（content）对。

属性：content（必需）：some_text 定义与 http-equiv 或 name 属性相关的元信息

　　　name：author/description/keywords/generator/revised（修订）/others 把 content 属性关联到一个名称

name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：

<meta name="keywords" content="HTML,ASP,PHP,SQL">

如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

http-equiv：content-type/expires/refresh/set-cookie 把 content 属性关联到 HTTP 头部

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

<meta http-equiv="charset" content="iso-8859-1">

<meta http-equiv="expires" content="31 Dec 2008">

这样发送到浏览器的头部就应该包含：

content-type: text/html

charset:iso-8859-1

expires:31 Dec 2008

当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

　　content：提供了名称/值对中的值。该值可以是任何有效的字符串。始终要和 name 属性或 http-equiv 属性一起使用。

　　scheme：用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。

小伙伴4:<link> 定义文档与外部资源的关系。最常见的用途是链接样式表。

属性：rel：stylesheet...  规定当前文档与被链接文档之间的关系

　　　type：MIME_type  规定被链接文档的 MIME 类型

　　　href：URL  规定被链接文档的位置

用法：

<head>

<link rel="stylesheet" type="text/css" href="theme.css" />

</head>

小伙伴5:<style>  用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。style 元素位于 head 部分中。

属性：type：text/css 规定样式表的 MIME 类型

　　　media：为样式表规定不同的媒介类型

<html>

<head>

<style type="text/css">

　　h1 {color:red}

　　p {color:blue}

</style>

</head>

<body>

　　<h1>Header 1</h1>

　　<p>A paragraph.</p>

</body>

</html>

小伙伴6:<script> 用于定义客户端脚本，比如 JavaScript。既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。

属性：type（必需）：text/javascript 指示脚本的 MIME 类型

　　　src：URL 规定外部脚本文件的 URL

<script type="text/javascript">

    document.write("Hello World!")

</script>

以上就是head标签和它的小伙伴们～经常见到用到却经常被我们忽略，有时一些问题可能不是出在文档的内容上，而是在head部分没有设置好。

参考：http://www.w3school.com.cn/tags/tag_head.asp

<head>标签和它的小伙伴们的更多相关文章

  1. Mac下载器Folx的标签功能怎么使用

    当大家使用Folx下载软件的时候,会发现,下载好的文件或者视频,会被Folx自动打上标签,进行归类,这其实就是Folx自带的智能标签功能,它能智能识别图片.视频.应用程序并分类.但很多时候,智能标签并 ...

  2. BuautifulSoup4库详解

    1.BeautifulSoup4库简介 What is beautifulsoup ? 答:一个可以用来从HTML 和 XML中提取数据的网页解析库,支持多种解析器(代替正则的复杂用法) 2.安装 p ...

  3. 手把手教你玩转Git

    文章已托管到GitHub,大家可以去GitHub查看下载!并搜索关注微信公众号 码出Offer 领取各种学习资料! 微信公众号码出Offer Git应用 一.初识Git 1.1 Git的简史 同生活中 ...

  4. Maven一定要会的这几个知识！

    一.Maven概念 Maven是一个项目管理和整合工具.Maven为开发者提供了一套完整的构建生命周期框架.开发团队几乎不用花多少时间就能够自动完成工程的基础构建配置,因为Maven使用了一个标准的目 ...

  5. 关于ubuntu16.4 中安装最新的eclipse或者是STS出现页面特卡，且新建项目没有提示，preference选项中点击左侧标签右侧没反应的解决办法，参照google， 排版不太好，希望对一些小伙伴有所帮助

    up vote21down votefavorite 12 Eclipse was working as good as anything on 14.04. I did a clean instal ...

  6. HTML5笔记2——HTML5音/视频标签详解

    音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...

  7. 记一次与a标签相遇的小事

    最近做的一个项目,按钮使用的是a标签做的,样子还不错.不过正是这个a标签把我坑死了,有一个场景是点击a标签去调后台服务,为了防止用户频繁点击按钮提交,在去请求后台服务的时候肯定要先把按钮的事件给禁止掉 ...

  8. html5标签知多少

    此文为前段时间团队研究会出品,与小伙伴兮兮圆一起研究的成果,意外地上了公司km的今日推荐,今日挪过来,为新开张的博客先暖暖场吧. 一.常用标签 <header>.<footer> ...

  9. [Java] JSP笔记 - 自定义标签

    自定义标签的创建步骤: 自定义标签的四大功能: 自定义标签的类结构: 在 1.0 中呢, 可以将 <body-content> 的值设置为 JSP, 2.0中则不允许在自定义标签体中出现j ...

随机推荐

  1. vue关闭令人抓狂的ESlint 语法检测配置方法

    随便改个vue 一堆报错 其实我并不反对这些语法检测,但是像许多反个人意愿的那就真的不得不吐槽了,比如vue-cli脚手架创建的默认eslint规则: 代码末尾不能加分号 ; 代码中不能存在多行空行 ...

  2. CF1067D. Computer Game（斜率优化＋倍增＋矩阵乘法）

    题目链接 https://codeforces.com/contest/1067/problem/D 题解 首先,如果我们获得了一次升级机会,我们一定希望升级 \(b_i \times p_i\) 最 ...

  3. 数组合并去重Array.from

    function uniqArr(){ if(arguments.length == 0) return []; var arr = arguments[0]; for(var i=1;i<ar ...

  4. 第九次 Scrum Meeting

    第九次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/4/14 19:00 60min 新主楼F座2F 附Github仓库:WEDO 例会照片 工作情况总结(4.14) ...

  5. oracle12c之三 控制PDB中CPU 资源使用

      CPU资源隔离 数据库中,不同的PDB对主机CPU资源使用要求不同,那么我们就可以使用CDB resourceplans来管理不同pdb对CPU资源的使用. CDB Resource Plans ...

  6. grunt 实例构建（四）

    相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...

  7. java中比较两个日期的大小

    String beginTime=new String("2014-08-15 10:22:22"); String endTime=new String("2014-0 ...

  8. (转)Apache和Nginx运行原理解析

    Apache和Nginx运行原理解析 原文:https://www.server110.com/nginx/201402/6543.html Web服务器 Web服务器也称为WWW(WORLD WID ...

  9. putty访问虚拟机

    从宿主机中用putty连接虚拟机中的Ubuntu Server. putty默认使用ssh方式连接,这需要在Ubuntu Server中安装ssh服务.使用命令sudo apt-get install ...

  10. CentOS下安装官方RPM包的MySQL后找不到my.cnf

    PS:昨天一同事问我说他用MySQL 5.5官方的rpm包安装了,但是在/etc/下面没有my.cnf配置文件.官方rpm包安装的mysql默认确实是没有/etc/my.cnf. 为什么没有这个文件而 ...