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

制作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此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> <div class="pages"> <a href="http://www.yumo666.com/category-1.html" class="backlist">返回列表</a> <p>上一篇：<a href="http://www.yumo666.com/post/287.html" class="single-prev">浪漫编程，七夕程序员表白Html代码、烟花特效、相册动画等40款</a></p> <p>下一篇：<a href="http://www.yumo666.com/post/289.html" class="single-next">纯代码给WordPress侧边栏小工具添加幻灯片功能</a></p> </div> </div> <div class="block"> <div class="posttitle"><h4>相关文章</h4></div> <div class="relatecon"> <div class="relate"><div class="relateinfo"> <h3><a href="http://www.yumo666.com/post/289.html" title="纯代码给WordPress侧边栏小工具添加幻灯片功能">纯代码给WordPress侧边栏小工具添加幻灯片功能</a></h3> <p>WordPress主题大多数都自带有幻灯片功能，不过很少看到有在WordPress侧边栏实现幻灯片功能的。今天，我们就以Nana主题为例说明纯代码如何给WordPress侧边栏小工具添加幻灯片功能。W...</p></div> </div><div class="relate"><div class="relateinfo"> <h3><a href="http://www.yumo666.com/post/290.html" title="站在巨人的肩膀上——制作酷炫web幻灯片">站在巨人的肩膀上——制作酷炫web幻灯片</a></h3> <p>你是否还在用ppt做一些毫无意思的幻灯片？你是否在做ppt的时候绞尽脑汁想把效果做的吸引大家？你是否想通过一次ppt吸引领导的注意？那好吧！来学学怎么制作一款炫酷的web幻灯片~ps：如果看到这里还不...</p></div> </div><div class="relate"><div class="relateinfo"> <h3><a href="http://www.yumo666.com/post/292.html" title="Python笔记第四回——Pyecharts与PPT的联动">Python笔记第四回——Pyecharts与PPT的联动</a></h3> <p>PPT调用Pyecharts生成的图表上一回已用Pyecharts成功生成的HTML动态图表现用PPT直接调用此动态图表，非超链接PPT端的准备开发工具，可在文件--选项--自定义功能区信任中心启用A...</p></div> </div><div class="relate"><div class="relateinfo"> <h3><a href="http://www.yumo666.com/post/293.html" title="全栈工程师的百宝箱:黑魔法之文档篇">全栈工程师的百宝箱:黑魔法之文档篇</a></h3> <p>今天收集Session数据的时候收集到了这样的一条，就是“全栈工程师的工具箱”。星期一又想不到什么可以写的内容，就来这样的一篇好了。以下的内容都是压箱底的，找个地方好好收藏。这篇是文档相关篇，介绍一些...</p></div> </div><div class="relate"><div class="relateinfo"> <h3><a href="http://www.yumo666.com/post/294.html" title="不会做ppt?Reveal.js让你复制粘贴另类拉风，简洁优雅又低调">不会做ppt?Reveal.js让你复制粘贴另类拉风，简洁优雅又低调</a></h3> <p>要了解一个新知识我们可以从三个方面入手：是什么，有什么用，怎么用。下面我们就从这三个方面进行讲解Reveal.jsReveal.js是什么它是一个专门用来做 HTML 演示文稿的框架，通俗的讲它是网页...</p></div> </div> </div> </div> </div> <div class="sidebar fixed"> <dl id="divCatalog" class="sidebox"> <dt class="sidetitle">网站分类</dt> <dd> <ul><li><a title="技术文章" href="http://www.yumo666.com/category-1.html">技术文章</a></li> </ul> </dd> </dl><dl id="divTags" class="sidebox"> <dt class="sidetitle">标签列表</dt> <dd> <ul><li><a title="java的三大特性和四大特征" href="http://www.yumo666.com/tags-8.html">java的三大特性和四大特征<span class="tag-count"> (27)</span></a></li> <li><a title="java动画代码" href="http://www.yumo666.com/tags-10.html">java动画代码<span class="tag-count"> (27)</span></a></li> <li><a title="java写一个小游戏" href="http://www.yumo666.com/tags-12.html">java写一个小游戏<span class="tag-count"> (22)</span></a></li> <li><a title="幂函数是什么" href="http://www.yumo666.com/tags-15.html">幂函数是什么<span class="tag-count"> (32)</span></a></li> <li><a title="高中数学幂函数公式" href="http://www.yumo666.com/tags-16.html">高中数学幂函数公式<span class="tag-count"> (27)</span></a></li> <li><a title="幂函数的图像与性质表格" href="http://www.yumo666.com/tags-18.html">幂函数的图像与性质表格<span class="tag-count"> (28)</span></a></li> <li><a title="网站系统错误怎么办" href="http://www.yumo666.com/tags-26.html">网站系统错误怎么办<span class="tag-count"> (33)</span></a></li> <li><a title="建立数据库的流程" href="http://www.yumo666.com/tags-27.html">建立数据库的流程<span class="tag-count"> (23)</span></a></li> <li><a title="sql怎么下载" href="http://www.yumo666.com/tags-36.html">sql怎么下载<span class="tag-count"> (29)</span></a></li> <li><a title="数据库删除的数据如何恢复" href="http://www.yumo666.com/tags-38.html">数据库删除的数据如何恢复<span class="tag-count"> (31)</span></a></li> <li><a title="mysql数据库迁移到另一台服务器" href="http://www.yumo666.com/tags-39.html">mysql数据库迁移到另一台服务器<span class="tag-count"> (28)</span></a></li> <li><a title="mysql数据库自动备份" href="http://www.yumo666.com/tags-41.html">mysql数据库自动备份<span class="tag-count"> (31)</span></a></li> <li><a title="sql面试问题大全及答案大全" href="http://www.yumo666.com/tags-42.html">sql面试问题大全及答案大全<span class="tag-count"> (24)</span></a></li> <li><a title="一次函数经典例题" href="http://www.yumo666.com/tags-45.html">一次函数经典例题<span class="tag-count"> (33)</span></a></li> <li><a title="round是向上还是向下取整" href="http://www.yumo666.com/tags-60.html">round是向上还是向下取整<span class="tag-count"> (26)</span></a></li> <li><a title="四舍五入的函数公式" href="http://www.yumo666.com/tags-61.html">四舍五入的函数公式<span class="tag-count"> (25)</span></a></li> <li><a title="web数据库管理工具" href="http://www.yumo666.com/tags-66.html">web数据库管理工具<span class="tag-count"> (26)</span></a></li> <li><a title="网页设计文字滚动代码" href="http://www.yumo666.com/tags-73.html">网页设计文字滚动代码<span class="tag-count"> (26)</span></a></li> <li><a title="html如何让整个body居中" href="http://www.yumo666.com/tags-80.html">html如何让整个body居中<span class="tag-count"> (34)</span></a></li> <li><a title="html text" href="http://www.yumo666.com/tags-81.html">html text<span class="tag-count"> (30)</span></a></li> <li><a title="html表单文本域" href="http://www.yumo666.com/tags-82.html">html表单文本域<span class="tag-count"> (30)</span></a></li> <li><a title="html表单设置手机号码" href="http://www.yumo666.com/tags-83.html">html表单设置手机号码<span class="tag-count"> (31)</span></a></li> <li><a title="html如何播放视频" href="http://www.yumo666.com/tags-84.html">html如何播放视频<span class="tag-count"> (30)</span></a></li> <li><a title="html中的颜色代码" href="http://www.yumo666.com/tags-85.html">html中的颜色代码<span class="tag-count"> (23)</span></a></li> <li><a title="条件统计函数countif怎么用" href="http://www.yumo666.com/tags-87.html">条件统计函数countif怎么用<span class="tag-count"> (35)</span></a></li> </ul> </dd> </dl><dl id="divComments" class="sidebox"> <dt class="sidetitle">最新留言</dt> <dd> <ul></ul> </dd> </dl></div> </div> </div> </div> </div> <div class="footer"> <div class="fademask"></div> <div class="wrap"> <h3><a href="https://beian.miit.gov.cn/" target="_blank">滇ICP备2024046894号-16</a></h3>  </div> </div> <div class="edgebar"> </div></body> </html>

雨墨芝士网

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