优秀的编程知识分享平台

网站首页 > 技术文章 正文

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

nanyue 2025-03-25 16:02:45 技术文章 17 ℃

制作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此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 class="info-share-box clearfix"> <div class="fl"> <p class="tags"><strong>Tags：</strong><a href="http://www.nanyuegpt.com/tags-988.html" title="查看更多有关于“html5新增标签有哪些”的内容" rel="tag" target="_blank">html5新增标签有哪些</a></p> </div> <div class="fr"> <div class="info-share"> <div class="social-share" data-initialized="true"> <a href="#" class="social-share-icon iconfont icon-weibo"></a> <a href="#" class="social-share-icon iconfont icon-qq"></a> <a href="#" class="social-share-icon iconfont icon-wechat"></a> <a href="#" class="social-share-icon iconfont icon-qzone"></a> </div> </div> <script src="http://www.nanyuegpt.com/zb_users/theme/txcms2/script/social-share.min.js"></script> </div> </div> </div> <div class="sx mb15"> <ul> <li class="fl">上一篇： <a href="http://www.nanyuegpt.com/post/25255.html" title="HTML5 零基础完全教程-2-HTML5 基础标签">HTML5 零基础完全教程-2-HTML5 基础标签</a> </li> <li class="fr ziyou">下一篇： <a href="http://www.nanyuegpt.com/post/25257.html" title="HTML5教程从入门到精通，随堂笔记(二)H5的form标签">HTML5教程从入门到精通，随堂笔记(二)H5的form标签</a> </li> <div class="clear"></div> </ul> </div> <div class="xg"> <h2 class="ybbt">猜你喜欢</h2> <ul> <li><span class="">2025-03-25</span><i class="fa fa-caret-right"></i> <a href="http://www.nanyuegpt.com/post/25266.html" title="HTML5中video标签如何使用（html中video标签添加属性）">HTML5中video标签如何使用（html中video标签添加属性）</a></li> <li><span class="">2025-03-25</span><i class="fa fa-caret-right"></i> <a href="http://www.nanyuegpt.com/post/25265.html" title="Web前端干货!30道Web前端面试题精选，你会几个?">Web前端干货!30道Web前端面试题精选，你会几个?</a></li> <li><span class="">2025-03-25</span><i class="fa fa-caret-right"></i> <a href="http://www.nanyuegpt.com/post/25264.html" title="HTML5 header标签的定义与规定（html中header标签的作用）">HTML5 header标签的定义与规定（html中header标签的作用）</a></li> <li><span class="">2025-03-25</span><i class="fa fa-caret-right"></i> <a href="http://www.nanyuegpt.com/post/25263.html" title="HTML面试题:HTML5 有哪些新特性（html5的八大特性）">HTML面试题:HTML5 有哪些新特性（html5的八大特性）</a></li> <li><span class="">2025-03-25</span><i class="fa fa-caret-right"></i> <a href="http://www.nanyuegpt.com/post/25262.html" title="HTML5 零基础完全教程-7-HTML5 语义化标签">HTML5 零基础完全教程-7-HTML5 语义化标签</a></li> <li><span class="">2025-03-25</span><i class="fa fa-caret-right"></i> <a href="http://www.nanyuegpt.com/post/25261.html" title="HTML5学习笔记三:HTML5语法规则（html5语言基础）">HTML5学习笔记三:HTML5语法规则（html5语言基础）</a></li> <li><span class="">2025-03-25</span><i class="fa fa-caret-right"></i> <a href="http://www.nanyuegpt.com/post/25260.html" title="广州新嘉华学:html5中的nav、article等标签用处">广州新嘉华学:html5中的nav、article等标签用处</a></li> <li><span class="">2025-03-25</span><i class="fa fa-caret-right"></i> <a href="http://www.nanyuegpt.com/post/25259.html" title="html5学得好不好，看掌握多少标签">html5学得好不好，看掌握多少标签</a></li> <li><span class="">2025-03-25</span><i class="fa fa-caret-right"></i> <a href="http://www.nanyuegpt.com/post/25258.html" title="html5简介、选项输入框、表单元素分组、input新增属性及属性值">html5简介、选项输入框、表单元素分组、input新增属性及属性值</a></li> <li><span class="">2025-03-25</span><i class="fa fa-caret-right"></i> <a href="http://www.nanyuegpt.com/post/25257.html" title="HTML5教程从入门到精通，随堂笔记(二)H5的form标签">HTML5教程从入门到精通，随堂笔记(二)H5的form标签</a></li> </ul> </div> </div> </div> <div class="right fr sjwu"> <dl class="wupd"> <div class="notice"> <div class="tab-hd"> <ul class="tab-nav"> <li class="on"><a href="javascript:;">最新文章</a></li> <li><a href="javascript:;">热门文章</a></li> <li><a href="javascript:;" class="wux">推荐文章</a></li> </ul> </div> <div class="tab-bd"> <div class="tab-pal" style="display:block"> <ul> <li><span class="fr zuo10">06-18</span><a href="http://www.nanyuegpt.com/post/27205.html" title="[THE VIEW]下周最受期待十大上线测试新游速递(8月1日-8月5日)" target="_blank">[THE VIEW]下周最受期待十大上线测试新游速递(8月1日-8月5日)</a></li> <li><span class="fr zuo10">06-18</span><a href="http://www.nanyuegpt.com/post/27204.html" title="wing带你玩转自定义view系列(1) 仿360内存清理效果" target="_blank">wing带你玩转自定义view系列(1) 仿360内存清理效果</a></li> <li><span class="fr zuo10">06-18</span><a href="http://www.nanyuegpt.com/post/27203.html" title="(1图)美军:对作战环境的整体视角(Holistic View)" target="_blank">(1图)美军:对作战环境的整体视角(Holistic View)</a></li> <li><span class="fr zuo10">06-18</span><a href="http://www.nanyuegpt.com/post/27202.html" title="三星海外推出4K激光超短焦投影仪 支持触摸交互功能" target="_blank">三星海外推出4K激光超短焦投影仪 支持触摸交互功能</a></li> <li><span class="fr zuo10">06-18</span><a href="http://www.nanyuegpt.com/post/27201.html" title="瑶光CDM的智能语音交互功能可以实现哪些对话?" target="_blank">瑶光CDM的智能语音交互功能可以实现哪些对话?</a></li> <li><span class="fr zuo10">06-18</span><a href="http://www.nanyuegpt.com/post/27200.html" title="《龙之影》交互功能有哪些（龙之影5个角色怎么选）" target="_blank">《龙之影》交互功能有哪些（龙之影5个角色怎么选）</a></li> <li><span class="fr zuo10">06-18</span><a href="http://www.nanyuegpt.com/post/27199.html" title="坦克700 Hi4-T首次OTA升级 新增交互功能/优化车机显示" target="_blank">坦克700 Hi4-T首次OTA升级 新增交互功能/优化车机显示</a></li> <li><span class="fr zuo10">06-18</span><a href="http://www.nanyuegpt.com/post/27198.html" title="长安汽车申请新专利 功能竟包括情侣劝和服务" target="_blank">长安汽车申请新专利 功能竟包括情侣劝和服务</a></li> </ul> </div> <div class="tab-pal"> <ul> <li><span class="fr zuo10">1505℃</span><a href="http://www.nanyuegpt.com/post/23583.html" title="桌面软件开发新体验!用 Blazor Hybrid 打造简洁高效的视频处理工具" target="_blank">桌面软件开发新体验!用 Blazor Hybrid 打造简洁高效的视频处理工具</a></li> <li><span class="fr zuo10">479℃</span><a href="http://www.nanyuegpt.com/post/17717.html" title="MySQL service启动脚本浅析(r12笔记第59天)" target="_blank">MySQL service启动脚本浅析(r12笔记第59天)</a></li> <li><span class="fr zuo10">459℃</span><a href="http://www.nanyuegpt.com/post/17699.html" title="启用MySQL查询缓存（mysql8.0查询缓存）" target="_blank">启用MySQL查询缓存（mysql8.0查询缓存）</a></li> <li><span class="fr zuo10">454℃</span><a href="http://www.nanyuegpt.com/post/17660.html" title="服务器异常重启，导致mysql启动失败，问题解决过程记录" target="_blank">服务器异常重启，导致mysql启动失败，问题解决过程记录</a></li> <li><span class="fr zuo10">440℃</span><a href="http://www.nanyuegpt.com/post/17694.html" title="「赵强老师」MySQL的闪回（赵强iso是哪个大学毕业的）" target="_blank">「赵强老师」MySQL的闪回（赵强iso是哪个大学毕业的）</a></li> <li><span class="fr zuo10">415℃</span><a href="http://www.nanyuegpt.com/post/17647.html" title="MySQL server PID file could not be found!失败" target="_blank">MySQL server PID file could not be found!失败</a></li> <li><span class="fr zuo10">404℃</span><a href="http://www.nanyuegpt.com/post/17697.html" title="2021最新MySQL安装配置教程，mysql数据库安装常见问题汇总" target="_blank">2021最新MySQL安装配置教程，mysql数据库安装常见问题汇总</a></li> <li><span class="fr zuo10">397℃</span><a href="http://www.nanyuegpt.com/post/17656.html" title="mysql服务怎么启动和关闭?（mysql服务怎么启动和关闭）" target="_blank">mysql服务怎么启动和关闭?（mysql服务怎么启动和关闭）</a></li> </ul> </div> <div class="tab-pal"> <ul> <li><span class="fr zuo10">19℃</span><a href="http://www.nanyuegpt.com/post/27205.html" title="[THE VIEW]下周最受期待十大上线测试新游速递(8月1日-8月5日)" target="_blank">[THE VIEW]下周最受期待十大上线测试新游速递(8月1日-8月5日)</a></li> </ul> </div> </div> </div> </dl> <dl class="function" id="divPrevious"> <dt class="function_t">最近发表</dt><dd class="function_c"> <ul><li><a title="[THE VIEW]下周最受期待十大上线测试新游速递(8月1日-8月5日)" href="http://www.nanyuegpt.com/post/27205.html">[THE VIEW]下周最受期待十大上线测试新游速递(8月1日-8月5日)</a></li> <li><a title="wing带你玩转自定义view系列(1) 仿360内存清理效果" href="http://www.nanyuegpt.com/post/27204.html">wing带你玩转自定义view系列(1) 仿360内存清理效果</a></li> <li><a title="(1图)美军:对作战环境的整体视角(Holistic View)" href="http://www.nanyuegpt.com/post/27203.html">(1图)美军:对作战环境的整体视角(Holistic View)</a></li> <li><a title="三星海外推出4K激光超短焦投影仪 支持触摸交互功能" href="http://www.nanyuegpt.com/post/27202.html">三星海外推出4K激光超短焦投影仪 支持触摸交互功能</a></li> <li><a title="瑶光CDM的智能语音交互功能可以实现哪些对话?" href="http://www.nanyuegpt.com/post/27201.html">瑶光CDM的智能语音交互功能可以实现哪些对话?</a></li> <li><a title="《龙之影》交互功能有哪些（龙之影5个角色怎么选）" href="http://www.nanyuegpt.com/post/27200.html">《龙之影》交互功能有哪些（龙之影5个角色怎么选）</a></li> <li><a title="坦克700 Hi4-T首次OTA升级 新增交互功能/优化车机显示" href="http://www.nanyuegpt.com/post/27199.html">坦克700 Hi4-T首次OTA升级 新增交互功能/优化车机显示</a></li> <li><a title="长安汽车申请新专利 功能竟包括情侣劝和服务" href="http://www.nanyuegpt.com/post/27198.html">长安汽车申请新专利 功能竟包括情侣劝和服务</a></li> <li><a title="抖音智能指环专利获授权 可实现多种交互功能" href="http://www.nanyuegpt.com/post/27197.html">抖音智能指环专利获授权 可实现多种交互功能</a></li> <li><a title="Win10手机版将迎来分屏及应用标题栏悬浮交互功能" href="http://www.nanyuegpt.com/post/27196.html">Win10手机版将迎来分屏及应用标题栏悬浮交互功能</a></li> </ul> </dd> </dl> <dl class="function" id="divTags"> <dt class="function_t">标签列表</dt><dd class="function_c"> <ul><li><a title="cmd/c" href="http://www.nanyuegpt.com/tags-1.html">cmd/c<span class="tag-count"> (64)</span></a></li> <li><a title="c++中::是什么意思" href="http://www.nanyuegpt.com/tags-18.html">c++中::是什么意思<span class="tag-count"> (83)</span></a></li> <li><a title="标签用于" href="http://www.nanyuegpt.com/tags-20.html">标签用于<span class="tag-count"> (65)</span></a></li> <li><a title="主键只能有一个吗" href="http://www.nanyuegpt.com/tags-22.html">主键只能有一个吗<span class="tag-count"> (66)</span></a></li> <li><a title="c#console.writeline不显示" href="http://www.nanyuegpt.com/tags-26.html">c#console.writeline不显示<span class="tag-count"> (75)</span></a></li> <li><a title="pythoncase语句" href="http://www.nanyuegpt.com/tags-38.html">pythoncase语句<span class="tag-count"> (81)</span></a></li> <li><a title="es6includes" href="http://www.nanyuegpt.com/tags-39.html">es6includes<span class="tag-count"> (73)</span></a></li> <li><a title="sqlset" href="http://www.nanyuegpt.com/tags-40.html">sqlset<span class="tag-count"> (64)</span></a></li> <li><a title="windowsscripthost" href="http://www.nanyuegpt.com/tags-41.html">windowsscripthost<span class="tag-count"> (67)</span></a></li> <li><a title="apt-getinstall-y" href="http://www.nanyuegpt.com/tags-48.html">apt-getinstall-y<span class="tag-count"> (86)</span></a></li> <li><a title="node_modules怎么生成" href="http://www.nanyuegpt.com/tags-54.html">node_modules怎么生成<span class="tag-count"> (76)</span></a></li> <li><a title="chromepost" href="http://www.nanyuegpt.com/tags-60.html">chromepost<span class="tag-count"> (65)</span></a></li> <li><a title="c++int转char" href="http://www.nanyuegpt.com/tags-65.html">c++int转char<span class="tag-count"> (75)</span></a></li> <li><a title="static函数和普通函数" href="http://www.nanyuegpt.com/tags-84.html">static函数和普通函数<span class="tag-count"> (76)</span></a></li> <li><a title="el-date-picker开始日期早于结束日期" href="http://www.nanyuegpt.com/tags-85.html">el-date-picker开始日期早于结束日期<span class="tag-count"> (70)</span></a></li> <li><a title="localstorage.removeitem" href="http://www.nanyuegpt.com/tags-237.html">localstorage.removeitem<span class="tag-count"> (74)</span></a></li> <li><a title="vector线程安全吗" href="http://www.nanyuegpt.com/tags-252.html">vector线程安全吗<span class="tag-count"> (70)</span></a></li> <li><a title="&" href="http://www.nanyuegpt.com/tags-296.html">&<span class="tag-count"> (66)</span></a></li> <li><a title="java" href="http://www.nanyuegpt.com/tags-297.html">java<span class="tag-count"> (73)</span></a></li> <li><a title="js数组插入" href="http://www.nanyuegpt.com/tags-468.html">js数组插入<span class="tag-count"> (83)</span></a></li> <li><a title="linux删除一个文件夹" href="http://www.nanyuegpt.com/tags-484.html">linux删除一个文件夹<span class="tag-count"> (65)</span></a></li> <li><a title="mac安装java" href="http://www.nanyuegpt.com/tags-578.html">mac安装java<span class="tag-count"> (72)</span></a></li> <li><a title="eacces" href="http://www.nanyuegpt.com/tags-659.html">eacces<span class="tag-count"> (67)</span></a></li> <li><a title="查看mysql是否启动" href="http://www.nanyuegpt.com/tags-680.html">查看mysql是否启动<span class="tag-count"> (70)</span></a></li> <li><a title="无效的列索引" href="http://www.nanyuegpt.com/tags-711.html">无效的列索引<span class="tag-count"> (74)</span></a></li> </ul> </dd> </dl> </div> <div class="clear"></div> </div> <div class="footer"> <div class="zh"> </div> </div> <div class="fixed-right"> <a href="javascript:;" class="gotop bgb" title="回到顶部"><i class="fa fa-chevron-up"></i></a> </div> <script src="http://www.nanyuegpt.com/zb_users/theme/txcms2/script/txcstx.min.js?v=2025-04-27"></script> </body> </html><!--208.99 ms , 15 queries , 3463kb memory , 0 error-->