制作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此HTML提供了一系列的标签，这些标签通常都写在head标签内，因此被称为头部相关标签。本节将具体介绍常用的头部标签。
1.设置页面标题标签
</p><p data-track='3'><title>标签用于定义HTML页面的标题，即给网页取一个名字，该标签必须位于<head>标签之内。一个HTML文档只能包含一对<title>标签，之间的内容将显示在浏览器窗口的标题栏中。例如将页面标题设置为“轻松学习HTML5”，具体代码如下：轻松学习HTML5
上述代码对应的页面标题效果如图1所示。
图 1设置页面标题标签
</p></div><p data-track='7'>2.定义页面元信息标签<meta /></p><p data-track='8'><meta />标签用于定义页面的元信息（元信息不会显示在页面中），可重复出现在<head>头部标签中。在HTML中，<meta />标签是一个单标签，本身不包含任何内容，仅仅表示网页的相关信息。通过<meta />标签的两组属性，可以定义页面的相关参数。例如为搜索引擎提供网页的关键字、作者姓名、内容描述，以及定义网页的刷新时间等。下面介绍<meta />标签常用的几组设置，具体如下。</p><p data-track='9'>1）<meta name='名称' /></p><p data-track='10'>在<meta />标签中使用name和content属性可以为搜索引擎提供信息，其中name属性用于提供搜索内容的名称，content属性提供对应的搜索内容值，具体应用如下。</p><p data-track='11'>●设置网页关键字，例如某图片网站的关键字设置：</p><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><meta name='keywords' /></code></pre><p data-track='13'>其中name属性的值为keywords，用于定义搜索内容名称为网页关键字，content属性的值用于定义关键字的具体内容，多个关键字内容之间可以用“,”分隔。</p><p data-track='14'>●设置网页描述，例如某图片网站的描述信息设置：</p><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><meta name='description' /></code></pre><p data-track='16'>其中name属性的值为description，用于定义搜索内容名称为网页描述，content属性的值用于定义描述的具体内容。需要注意的是网页描述的文字不必过多，能够描述清晰即可。</p><p data-track='17'>●设置网页作者，例如可以为网站增加作者信息：</p><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><meta name='author' /></code></pre><p data-track='19'>其中name属性的值为author，用于定义搜索内容名称为网页作者，content属性的值用于定义具体的作者信息。</p><p data-track='20'>2）<meta http-equiv='名称' /></p><p data-track='21'>在<meta />标签中使用http-equiv和content属性可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数标准。其中，http-equiv属性提供参数类型，content属性提供对应的参数值。默认会发送<meta http-equiv='Content-Type' />，通知浏览器发送的文件类型是HTML。具体应用如下：</p><p data-track='22'>●设置字符集，例如某图片官网字符集的设置：</p><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><meta http-equiv='Content-Type' /></code></pre><p data-track='24'>其中http-equiv属性的值为Content-Type，content属性的值为text/html和charset=gbk，两个属性值中间用“;”隔开。这段代码用于说明当前文档类型为HTML，字符集为gbk(中文编码)。目前最常用的国际化字符集编码格式是utf-8，常用的国内中文字符集编码格式主要是gbk和gb2312。当用户使用的字符集编码不匹配当前浏览器时，网页内容就会出现乱码。<br>值得一提的是，在HTML5中，简化了字符集的写法，变为如下所示代码。</p><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><meta></code></pre><p data-track='26'>●设置页面自动刷新与跳转，例如定义某个页面10秒后跳转至百度：</p><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><meta http-equiv='refresh' /></code></pre><p data-track='28'>其中http-equiv属性的值为refresh，content属性的值为数值和url地址，中间用“;”隔开，用于指定在特定的时间后跳转至目标页面，该时间默认以秒为单位。</p> </div>
<div class="imoney logbot">
</div>
<fieldset class="ainfo">
<legend align="center">点击这里复制本文地址</legend>
<div class="social-share" data-disabled="diandian"></div> <input type="text" value="http://www.gslnedu.com/post/3629.html" id="aurl">
<i class="fa fa-thumb-tack"></i>以上内容由<a href="http://www.gslnedu.com/" class="mlight">朽木教程网</a>整理呈现，请务必在转载分享时注明本文地址！如对内容有疑问，请联系我们，谢谢！ </fieldset>
<link rel="stylesheet" href="http://www.gslnedu.com/zb_users/theme/CmsDown/css/share.min.css">
<script src="http://www.gslnedu.com/zb_users/theme/CmsDown/script/jquery.share.min.js"></script>
<div class="tags"><a href="http://www.gslnedu.com/tags-236.html" target="_blank">html中文乱码</a></div>
<div class="nextlog">
<div class="prev"><span>上一篇：</span><a href="http://www.gslnedu.com/post/3628.html">每个开发人员都应该知道的 10 个有用的 CSS 提示和技巧</a></div> <div class="next"><span>下一篇：</span><a href="http://www.gslnedu.com/post/3630.html">踩坑日记(十一):微服务间 OpenFeign 传递Header返回值乱码</a></div> </div>
<div class="link-box">
<h3>相关文章</h3>
<ul class="rexlist">
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4391.html" title="治愈焦虑!清晨两道 CSS 面试题，轻松开启元气学习日">治愈焦虑!清晨两道 CSS 面试题，轻松开启元气学习日</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4390.html" title="lol十月幸运召唤师网址 英雄联盟10月幸运召唤师最新地址">lol十月幸运召唤师网址 英雄联盟10月幸运召唤师最新地址</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4389.html" title="《原神》「风物之歌」交流平台限时开启">《原神》「风物之歌」交流平台限时开启</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4388.html" title="苹果手机的浏览器在哪里打开">苹果手机的浏览器在哪里打开</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4387.html" title="刷剧这里看，白嫖真的香">刷剧这里看，白嫖真的香</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4386.html" title="不花一分钱!提升网站访问速度">不花一分钱!提升网站访问速度</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4385.html" title="Day1 网络世界入门:从打开浏览器到数据抵达的全过程">Day1 网络世界入门:从打开浏览器到数据抵达的全过程</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4384.html" title="英特尔 Evo 认证 PC 对决 M1 Macbook:x86 生态加持，Evo 更省心">英特尔 Evo 认证 PC 对决 M1 Macbook:x86 生态加持，Evo 更省心</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4383.html" title="为什么我们有时打开网页会慢，这三种原因你必须知道">为什么我们有时打开网页会慢，这三种原因你必须知道</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4382.html" title="网站打开慢，如何提升网站打开速度?">网站打开慢，如何提升网站打开速度?</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footerbar">
<div class="wrap">
<img src="http://www.gslnedu.com/zb_users/theme/CmsDown/images/qrcode.png" class="ft-qrcode" alt="qrcode"> <p class="ftp"><a href="http://www.gslnedu.com/">朽木教程网</a> ©<script>document.write(new Date().getFullYear());</script> All Rights Reserved. <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2024111239号-8
</a><br /><span class="fta"></span></p>
</div>
</div>
<link rel="stylesheet" href="http://www.gslnedu.com/zb_users/theme/CmsDown/css/lightgallery.min.css">
<script src="http://www.gslnedu.com/zb_users/theme/CmsDown/script/lightgallery-all.min.js"></script>
<script>
$(function(){
$(".logcon img:not([src*='.php'])").each(function(){
var path = $(this).attr("src"), width = $(this).width();
if(width >= 200 && !$(this).parent("a").length){
$(this).wrap('<a href="'+path+'" class="lightgallery"></a>');
}
});
setTimeout(function () {
$(".logcon").lightGallery({
thumbnail: false,
selector: '.lightgallery'
});
}, 800);
});
</script>
<div class="backtop"><span class="fa fa-angle-up"></span></div>
</body>
</html><!--68.25 ms , 11 queries , 2918kb memory , 0 error-->