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. MAC系统从零开始

    刚从ubuntu转过来,使用mac多有不习惯的地方,下面记录一些使用中遇到的问题,与解决方法. 1.关于应用程序菜单 在mac中的应用程序菜单,不是在应用程序自身,而是在桌面的桌面的顶部栏上,这个栏会 ...

  2. HTML-★★★格式与布局fixed/absolute/relative/z-index/float★★★

    很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

  3. Hacking Lambda Expressions in Java

    Hacking Lambda Expressions in Javahttps://dzone.com/articles/hacking-lambda-expressions-in-java At t ...

  4. 简述Dubbo

    目前处于实习期间,白天工作,网上自主学习.最近没事逛了一下当前招聘网上的招聘要求,其中dubbo这个关键字出现的比较多,因此花了点时间学习了一番,在这写写自己的理解. 说起Dubbo,得先聊聊RPC, ...

  5. [CQOI2015]标识设计

    Luogu3170 128MB过不去 LOJ2099 256MB能卡过 BZOJ3934 512MB怎么都过的去 求在\(30*30\)的方格上放\(3\)个\(L\)的方案 , 有障碍 拓展这条路的 ...

  6. 2019.4.18 HTML + CSS相关整理

    目录 标签 块标签 行标签 行块转化 嵌套规则 css引入方式 行间样式 内部引入 外部引入 选择器 基础选择器 组合选择器 盒模型 css样式 字体属性 设置字体的大小 设置字体的粗细 设置字体的风 ...

  7. ajax session timeout

    授权过期后AJAX操作跳转到登录页的一种全局处理方式 菜鸟程序员之Asp.net MVC Session过期异常的处理 基于WebImage的图片上传工具类

  8. elasticsearch-7.0.0-windows 安装

    一.安装 1.下载压缩包   elasticsearch-7.0.0-windows-x86_64.zip 2.解压到   E:\env\elasticsearch-7.0.0     3.启动:进入 ...

  9. Angular  CLI

    简介 ng  官方命令行 Angular  CLI 自己的官方文档 https://github.com/angular/angular-cli/wiki/new 常用代码   临时代码 ng new ...

  10. DP Intro - poj 1947 Rebuilding Roads

    算法: dp[i][j]表示以i为根的子树要变成有j个节点的状态需要减掉的边数. 考虑状态转移的时候不考虑i的父亲节点,就当不存在.最后统计最少减去边数的 时候+1. 考虑一个节点时,有两种选择,要么 ...