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. Hive优化-大表join大表优化

    Hive优化-大表join大表优化 5.大表join大表优化 如果Hive优化实战2中mapjoin中小表dim_seller很大呢?比如超过了1GB大小?这种就是大表join大表的问题.首先引入一个 ...

  2. [原]SuperMap GIS（JavaScript） 拉框放大和缩小功能实现

    版权声明:本文为博主原创文章,未经博主允许不得转载. var ZoomControl; /* * 拉框缩小 */ function ZoomOut(){ if(ZoomControl==null||Z ...

  3. gRPC GoLang Test

    gRPC是Google开源的一个高性能.跨语言的RPC框架,基于HTTP2协议,基于protobuf 3.x,基于Netty 4.x +. gRPC与thrift.avro-rpc.WCF等其实在总体 ...

  4. 《Crafting Rails 4 Applications》的笔记-第28页

    进行邮件测试,你需要在dummy目录下的虚拟程序添加一个配置 In your config/enviroments/test.rb, by default you should have the li ...

  5. log4j的PatternLayout参数含义

    参数 说明 例子 %c 列出logger名字空间的全称,如果加上{<层数>}表示列出从最内层算起的指定层数的名字空间 log4j配置文件参数举例 输出显示媒介 假设当前logger名字空间 ...

  6. [PY3]——创建多值映射字典？/defaultdict默认字典/setdefault()

    Defaultdict 默认字典 collections 模块中的 defaultdict(默认字典),可以用来构造“一个键映射多个值”这样的字典 如果你想保持元素的插入顺序就应该使用list, 如果 ...

  7. BNU27937——Soft Kitty——————【扩展前缀和】

    Soft Kitty Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Java class n ...

  8. 移动端rem适配屏幕

    九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...

  9. liunx下在线升级python到2.7版本

    因开发nodejs中间用到了node-gyp模块,此模块需2.X最新版本,所以升级服务器python版本 亲测成功 python 升级步骤#1.which python 查询python的位置/usr ...

  10. Go在windows10 64位上安装

    一.安装 1.下载安装包http://www.golangtc.com/download,这是国内的地址,也直接去官网下载. 2.选择适合自己的版本,这里我选择安64位装版go1.9.2.window ...