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. Laravel一些常用命令整理

    自动创建项目 laravel new || laravel new xxx || composer create-project --prefer-dist laravel/laravel blogc ...

  2. Machine learning吴恩达第三周 Logistic Regression

    1. Sigmoid function function g = sigmoid(z) %SIGMOID Compute sigmoid function % g = SIGMOID(z) compu ...

  3. Linux安装Elasticsearch-head插件

    首先需要下载以下内容: 我试验的对应版本:ES:elasticsearch-6.6.1.tar.gz  Node:node-v10.15.3-linux-x64.tar  JDK:jdk-8u201- ...

  4. mysql 2006 go away 错误

    https://blog.csdn.net/yypsober/article/details/71330673 原文地址.

  5. ACM-素数专题（持续更新）

    埃拉托斯特尼筛法,或者叫埃氏筛法(听上去似乎很高大上的样子) #include<bits/stdc++.h> using namespace std; typedef long long ...

  6. Locust HTTP client

    Http client 默认是以安全模式运行的,任何由于连接错误.超时或者类似错误引起的异常,都会返回一个空的Response对象,这个请求将会再locust统计中标记为failure,返回的虚拟对象 ...

  7. 1.使用frp穿透内网

    1.前因后果 1.1弃用ngrok 为节约服务器成本,花了500多块买了一个华为云得1G 1核心 5M得云服务器.然后用ngrok来穿透内网.一直用得还  但是今天在弄nginx得时候发现 ngrok ...

  8. 基于python实现Oracle数据库连接查询操作

    使用python语言连接Oracle数据库配置 #coding:utf-8 import cx_Oracle as oracle db=oracle.connect('root/123456@192. ...

  9. javascrpit sort()数组对象中排序

    /*ionic 调用 * @param attr 排序的属性 如number属性 * @param rev true表示升序排列,false降序排序 * */ commonSortMethod(att ...

  10. IONIC 打包安卓apk详细过程

    参照以下链接: https://blog.csdn.net/qq_20264891/article/details/79319408 当 cordova 项目安装的 android 平台版本 与 系统 ...