HTML5文档头部相关标签怎样使用?（html 头部标签）-前端教程-前军教程网

制作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此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> <p class="post-tags">标签：<a href="http://www.whsf66.com/tags-24.html" target="_blank">html删除线标签</a> </p> <p class="post-footer"> 作者:whsf66 , 分类:前端教程 , 浏览:2 , 评论:0 </p> </div> <label id="AjaxCommentBegin"></label>   <div class="pagebar commentpagebar"> </div> <label id="AjaxCommentEnd"></label>  <div class="post" id="divCommentPost"> <p><a name="comment">发表评论:</a><a rel="nofollow" id="cancel-reply" href="#divCommentPost" style="display:none;"><small>取消回复</small></a></p> <form id="frmSumbit" target="_self" method="post" action="http://www.whsf66.com/zb_system/cmd.php?act=cmt&postid=7828&key=a5167ba5e7e29a76bc8b6a1c5db69e3a" > <input type="hidden" name="inpId" id="inpId" value="7828" /> <input type="hidden" name="inpRevID" id="inpRevID" value="0" /> <p><label for="inpName"><input type="text" name="inpName" id="inpName" class="text" value="访客" size="28" tabindex="1" /> 名称(*)</label></p> <p><label for="inpEmail"><input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="28" tabindex="2" /> 邮箱</label></p> <p><label for="inpHomePage"><input type="text" name="inpHomePage" id="inpHomePage" class="text" value="" size="28" tabindex="3" /> 网址</label></p> <p><textarea name="txaArticle" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" ></textarea></p> <p><input name="sumbit" type="submit" tabindex="6" value="提交" onclick="return zbp.comment.post()" class="button" /></p> </form> </div> </div> <div id="divSidebar"> <dl class="function" id="divContorPanel"> <dt class="function_t">控制面板</dt><dd class="function_c"> <div><span class="cp-hello">您好，欢迎到访网站！</span><br/><span class="cp-login"><a href="http://www.whsf66.com/zb_system/cmd.php?act=login">登录后台</a></span> <span class="cp-vrs"><a href="http://www.whsf66.com/zb_system/cmd.php?act=misc&type=vrs">查看权限</a></span></div> </dd> </dl> <dl class="function" id="divCatalog"> <dt class="function_t">网站分类</dt><dd class="function_c"> <ul><li><a title="前端教程" href="http://www.whsf66.com/category-1.html">前端教程</a></li> </ul> </dd> </dl> <dl class="function" id="divComments"> <dt class="function_t">最新留言</dt><dd class="function_c"> <ul></ul> </dd> </dl> </div> <div id="divBottom">  <p id="BlogCopyRight"></p> </div><div class="clear"></div> </div><div class="clear"></div> </div><div class="clear"></div> </div> </body> </html>

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

HTML5文档头部相关标签怎样使用?（html 头部标签）