HTML文档头部的title标签和meta有什么作用

HTML文档头部的title标签和meta有什么作用？

作网页时，经常需要设置网页的基本信息，如网页的标题、作者等。为此，HTML提供了一系列设置网页信息的标签，这些标签通常都写在

<head>标签内，也被称为HTML.文档头部相关标签。下面将介绍常用的HTML文档头部标签中的<title>和<meta>标签。

(1)<title>标签

<title>标签用于设置HTML页面的标题，也就是为网页取一个名称。在网页结构中，<title>标签必须位于<head>标签内。一个HTML.文档只能含有一个<title>标签，<title></title>标签之间的内容将显示在浏览器窗口的标题栏中。例如，将某个页面标题设置为“轻松学习HTML.5”，示例代码如下：

<title>轻松学习HIML.5</title>

上述代码对应的页面效果如下图：

(2)<meta>标签

<meta>标签用于定义页面的元信息(元信息不会显示在最终的页面效果中)，可重复出现在标签中。在HTML中,<meta>标签是一个单标签，本身不包含任何内容，仅表示网页的相关信息。通过标签的属性，可以定义页面的相关参数。

例如，为搜索引擎提供网页的关键字、作者姓名、内容描述，以及定义网页的刷新时间等。下面介绍<meta/>标签常用的几组设置，具体如下。

设置网页关键字，如某图像网站的关键字设置，示例代码如下：

    <meta name=“keywoxds”content=“千图网，免费素材下载，千图网免费素材图库，矢量图，矢量图库，图像素材，网页素材，
免费素材，PS素材，网站素材，设计模板，设计素材，网页模板免费下载，千图，素材中国，素材，免费设计，图像”/>

在上述示例代码中，nare属性的属性值为"keywonds”，该属性值用于定义搜索内容名称为网页关键字;content 属性的属性值用于定义关键字的具体内容，多个关键字内容之间可以用“，”分隔。

设置网页描述，如某图像网站的描述信息设置，示例代码如下：

    <meta name=”description”content=”专注免费设计素材下裁的网站！提供矢量图素材，矢量青景图像，矢量图库，还有
psd素材，PS素材，设计模板，设计素材，PPT素材，以及网页素材，网站素材，网页图标免费下载”/>

在上述示例代码中，name属性的属性值为“deseription”，该属性值用于定义搜索内容名称为网页描述;comtent 属性的属性值用于定义描述的具体内容。网页描述的文字不必过多，能够描述清晰即可。

设置网页作者，如可以为网站增加作者信息，示例代码如下：

<meta name-"author" content="网络部"/>

在上述示例代码中，name属性的属性值为”author”，该属性值用于定义搜索内容名称为网页作者;content属性的属性值用于定义具体的作者信息。

<meta http-equiva"Content-Type" content="text/html; charset=gbk"/>

在上述示例代码中，hitp-epuiv属性的属性值为“Content-Type”.content属性的属性值为“test/html”和“charset=gbk”，两个属性值之间用“：”隔开。其中，“text/html”用于说明当前文档类型为HIML“charset=gbk”用于说明文档字符集为GBK(中文编码)。

目前最常用的国际化字符集编码格式是UTF-8，常用的中文字符集编码格式主要是GBK和GB2312。当用户使用的字符集编码格式与当前浏览器不匹配时，网页内容就会出现乱码。新版本的HTML.5简化了字符集的写法，示例代码如下：

<meta charset="utf-g">

设置页面自动刷新与跳转，如定义某个页面10秒后跳转至百度首页，示例代码如下：

<meta http-equiv""refresh" content="10; url- httpa://sww.baidu.com/"/>

在上述示例代码中，http-equiv属性的属性值为“refresh”，content属性的属性值为数值和URL。两个属性值之间用“：”隔开，分别用于指定跳转时间和目标页面的URL。跳转时间默认以秒为单位。

管现代Web开发更加依赖于各种MVC框架，但是开发者仍然需要对HTML和DOM有基本的了解。然而，即使对有多年经验的前端开发人员来说，也会遇到一些不知道的情况。

HTML头部元素描述

HTML<head>元素用作元数据（关于数据的数据）的容器。它用在<html>标签和<body>标签之间。

HTML文档的头部内容在页面加载时不会显示在浏览器中。它仅包含有关HTML文档的元数据。

元数据定义HTML文档的标题，字符集，样式，链接，脚本和其他元信息。

HTML头部可以包含很多元数据信息，也可以很少或没有信息，这取决于我们的需求。但是头部对HTML文档至关重要。

HTML<head>元素

<head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）,样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为:<title>,<style>,<meta>,<link>,<script>,<noscript>和<base>。

HTML<title>元素

HTML<title>元素用于定义文档的标题。它在所有HTML/XHTML文档中使用。<title>元素必须放在<head>元素之间，并且一个文档只能有一个title元素。

<title>元素作用

它定义了浏览器选项卡中的标题。

当用户将页面添加到收藏夹时，它为页面提供标题。

它在搜索引擎结果中显示页面的标题。

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文档标题</title>
    </head>
    <body>文档内容......</body>
</html>12345678复制代码类型：[html]

HTML<base>元素

<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.runoon.com/images/" target="_blank">
</head>123复制代码类型：[html]

HTML<link>元素

HTML<link>元素用于将外部样式表链接到您的网页。<link>元素包含两个主要属性，即“rel”和“href”。rel属性表示它是一个样式表，href给出该外部文件的路径。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>123复制代码类型：[html]

HTML<style>元素

HTML<style>元素用于为HTML页面设置样式。<style>元素只影响当前页面HTML页面的CSS属性。如果要对多个页面应用CSS，则应使用单独的CSS文件。

<head>
    <style type="text/css">body {background-color:yellow} p {color:blue}</style>
</head>123复制代码类型：[html]

HTML<meta>元素

HTML<meta>元素用于指定网页上的字符集，页面描述，关键字，作者和其他元数据。

搜索引擎和其他Web服务使用元数据来更好地对网页进行排名。

<meta>标签定义字符集：

<meta charset="UTF-8">  1复制代码类型：[html]

charset属性指定字符编码。在此示例中，我们将其设置为“UTF-8”，这意味着它可以显示任何语言。

<meta>标签定义搜索引擎关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">1复制代码类型：[html]

<meta>标签定义网页描述内容:

<meta name="description" content="免费 Web & 编程 教程">1复制代码类型：[html]

<meta>标签定义网页作者:

<meta name="author" content="Runoon">1复制代码类型：[html]

<meta>标签定义每30秒钟刷新页面:

<meta http-equiv="refresh" content="30">1复制代码类型：[html]

元刷新用于向浏览器提供指令，以在给定的时间间隔后自动刷新页面。如上例所示，它将在30秒后自动刷新。

<meta http-equiv="refresh" content="10; url=https://www.javatpoint.com/html>1复制代码类型：[html]

如果添加了URL，则在指定时间结束后重定向到该页面。

<meta>标签定义设备尺寸

HTML5中引入了此方法，以通过使用<meta>标签来控制视窗大小。视窗是用户在网页上的可见区域。它随设备的不同而变化，在手机上的显示尺寸明显小于计算机屏幕。

<meta name="viewport" content="width=device-width, initial-scale=1.0">  1复制代码类型：[html]

width=device-width是用来设置页面的宽度将与设备的屏幕宽度保持一致。

当最初由浏览器加载页面时，initial-scale=1.0用于设置初始缩放级别。

HTML<script>元素

HTMLhead元素

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

「链接」

以为头部区域填加的元素标签有<title><style><meta><link><script><noscript><base>

定义HTML文档的标题

<base>定义了所有链接的URL

<title>元素

定义不同文档的标题

在HTML中，是必须填写

定义了浏览器工具栏的标题，

当网页添加收藏夹时，显示在收藏夹中的标题

显示搜索引擎结果页面的标题

<link>元素

标签定义了文档与外部资源之间的关系

标签通常用于链接到样式表

<head>

</head>

<base>

标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有链接标签的默认链接

<head>

</head>

<style>

标签定义了HTML文档样式文件引用地址

也可以直接添加样式渲染HTML文档

<meta>

描述一些基本的元数据

提供了元数据；元数据也不显示在页面上，但会被浏览器解析

META元素通常用于指定网页的描述、关键词、文档的最后修改时间，作者和其它元数据

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其它web服务；

HTML<script>元素

用于加载脚本文件，如JAVASCRIPT

在线咨询

上一篇：Python Web 框架之 Tornado
下一篇：CSS tab-size 属性

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。