HTML _ HTML head

HTML head

HTML <head> 元素

head元素是所有头部类型元素的容器，head元素和body元素都在html元素内，但是head元素在body元素前。<head>标签内的元素主要是CSS样式表、JS脚本以及其他一些原信息。<head>标签内一般可包括如下标签：<title>、<style>、<meta>、<link>、<script>以及<base>。

HTML <title> 元素

<title>元素是用来定义文档的标题，在所有的HTML/XHTML文档中这都是必要的。 <title>元素： * 定义的标题会显示在浏览器的选项卡上 * 该页面被搜索引擎收录后，搜索引擎显示结果中的页面名称也就是来源title元素的内容 * 文档的标题即该页面被用户收藏在收藏夹中显示的名称

<!DOCTYPE html>
<html>

<head>
  <title>页面标题</title>
</head>

<body>
该网页文档的具体内容 bla bla bla ...
</body>

</html>

运行一下

HTML <style> 元素

<style>元素是用来定义具体的CSS样式表的。这里大致理解即可，具体在CSS教程中会学到。

<style>
  p {
    color:Tomato;
     }
 </style>

运行一下

HTML <link> 元素

<link>元素是用来定义外部CSS样式表，href属性即外部CSS样式表的链接地址。

<link rel="stylesheet" href="/static/css/bootstrap.min.css">

运行一下

HTML <meta> 元素

<meta>元素被用于定义元数据信息的，该元素是不会显示在页面内容里，其主要是在进行一种信息的声明。

大多情况下，meta元素可用来声明页面的描述、关键词、文档作者、文档主要语言以及其他元数据。浏览器、搜索引擎等程序会获取meta元素以进行进一步操作。

如下所示，使用meta声明文档编码格式为UTF-8格式：

<meta charset="UTF-8">

如下所示，声明对网页内容的描述：

<meta name="description" content="学习魔教功法">

如下所示，声明网页的关键词，方便搜索引擎索引：

<meta name="keywords" content="葵花宝典,吸星大法,化功大法,九阴白骨爪">

如下所示，声明网页的作者：

<meta name="author" content="邪王">

如下所示，声明文档每30秒自动刷新：

<meta http-equiv="refresh" content="30">

将上述综合起来，如下例所示：

<meta charset="UTF-8">
<meta name="description" content="学习魔教功法">
<meta name="keywords" content="葵花宝典,吸星大法,化功大法,九阴白骨爪">
<meta name="author" content="邪王">

运行一下

通过meta设置viewport

在做移动端自适应网站时，可利用meta来设置viewport（用户视窗部分的特性声明）。浏览器可以根据viewport这种元数据信息做出相应显示特性，width=device-width代表视窗大小就是设备宽度；initial-scale=1.0代表初始大小就是正常大小，不放大也不缩小；user-scalable=no就是代表不让用户缩小页面。

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
maximum-scale=1.0, user-scalable=no">

HTML响应式设计里说了这问题，同时也可以参考这篇文章。

HTML <script> 元素

<script>元素是被用来定义JavaScript脚本的，在前面的HTML JS章节已经说过了，这里就不展开而论了。备注：<head>标签里可以直接通过script元素来放js脚本，但是更多情况是用script元素来引入外部js脚本。

HTML <base> 元素

<base>元素是用来定义所有相对路径的url地址是相对哪个绝对路径的，以及还可以设置默认的target属性。

<base href="https://logo.zhuanfou.com/" target="_blank">

运行一下

<html> <head> <body> 缺失会怎样？

当然是不会怎么样！根据HTML5的标准，<html>，<head>，<body>丢失并不会影响浏览器对html代码的解析显示。如下例所示：

<title>页面标题</title>
<h1>H1标题</h1>
<p>段落</p>

运行一下

在专否沙盒的案例代码中，专否经常把<html> <head> <body>等元素省略，但是在正常编写html文档时专否绝对不推荐省略，专否之所以省略，只是为了突出案例要点。

总结一下

标签	描述
`<head>`	定义该文档相关信息
`<title>`	定义文档标题
`<base>`	定义默认所有对象链接的绝对路径和target属性
`<link>`	定义CSS外部样式表
`<meta>`	定义html文档相关的元数据信息
`<script>`	定义客户端JavaScript脚本
`<style>`	定义CSS内部样式表

HTML head

推广