百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML5 支持CSS 谷歌字体HTML URL 编码
当前位置：网站首页 > 技术文章 > 正文

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

myzbx 2025-03-13 18:16 9 浏览

制作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此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="clearfix mb10"> <div class="share fr"> <div class="social-share mb20 ta-c" 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> <script src="http://www.myzbx.com/zb_users/theme/tx_hao/script/social-share.min.js"></script> </div> <div class="info-tag"> <a href="http://www.myzbx.com/tags-180.html" title="查看更多CSS 用户界面内容" rel="tag" target="_blank">CSS 用户界面</a> </div> </div> <div class="info-next"> <ul class="row"> <li class="col-12 col-m-24 mb10">上一篇：<a href="http://www.myzbx.com/post/2827.html" title="前端如何优雅通知用户刷新页面?">前端如何优雅通知用户刷新页面?</a></li> <li class="col-12 col-m-24 ta-r mb10">下一篇：<a href="http://www.myzbx.com/post/2829.html" title="Textual:为 Python 增加漂亮的文本用户界面(TUI)">Textual:为 Python 增加漂亮的文本用户界面(TUI)</a></li> </ul> </div> </div> <h2 class="tx-title">相关推荐</h2> <div class="home-news"> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3536.html" title="一键生成高颜值图表!让你的文字瞬间有画面感，职场人必备!" class="f-black" target="_blank">一键生成高颜值图表!让你的文字瞬间有画面感，职场人必备!</a></dt> <dd class="news-txt"> <p class="f-gray f-13">哈喽，打工人们！忙碌的周中，大熊又来给你们带来一个超实用的效率神器啦！这次的宝藏网站绝对是那种用过就离不开的"真香"型产品！假设你明天就要做重要汇报，可面对一大堆密密麻麻的文字材料，你...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3535.html" title="批量将 Word 转换为 PDF/Excel/Txt/图片等多种格式" class="f-black" target="_blank">批量将 Word 转换为 PDF/Excel/Txt/图片等多种格式</a></dt> <dd class="news-txt"> <p class="f-gray f-13">Word文档是我们工作中经常会打交道的一种文档格式，我们也经常会有需要对Word文档进行格式转换的需求，比如将Word格式转换为PDF、将Word文档转换为Excel、将Word...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3534.html" title="绝了!一键用AI生成高颜值动态PPT(附详细步骤+Prompt)" class="f-black" target="_blank">绝了!一键用AI生成高颜值动态PPT(附详细步骤+Prompt)</a></dt> <dd class="news-txt"> <p class="f-gray f-13">大家好，我是一名酷爱研究AI的产品经理，最近我有个新发现：那些花了你3天做出来的PPT，现在用AI可以1小时搞定！而且颜值还高！为什么AI做PPT比传统方式效率高10倍？我用一张图就能告诉你：AI生成...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3533.html" title="ztext - 简单几行代码创建酷炫3D特效文字的开源JS库" class="f-black" target="_blank">ztext - 简单几行代码创建酷炫3D特效文字的开源JS库</a></dt> <dd class="news-txt"> <p class="f-gray f-13">把网页上的文字变成酷炫的3D风格，还能制作旋转动效，有了ztext.js，只需要几行代码。ztext能做什么ztext.js是一个能把常规的平面文字变成3D样式的前端开源代码库，让开发者...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3532.html" title="文字内插入小图片，也太可爱了吧（文字中怎么插图片）" class="f-black" target="_blank">文字内插入小图片，也太可爱了吧（文字中怎么插图片）</a></dt> <dd class="news-txt"> <p class="f-gray f-13">图文排版H5手机版秀米有小伙伴留言问添加图片的时候可不可以把图片添加到文字之间比如下面这句话中的小贴纸图片后面可以接着输入文字其实吧这就是咱们的『文字内插入小图片』功能嘛可以用来在文字内加个表情包又...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3531.html" title="Linux环境下C++代码性能分析方法（linux怎么写c++代码）" class="f-black" target="_blank">Linux环境下C++代码性能分析方法（linux怎么写c++代码）</a></dt> <dd class="news-txt"> <p class="f-gray f-13">技术背景在开发C++应用程序时，找出代码中运行缓慢的部分是进行性能优化的关键。在Linux系统上，有多种工具和方法可用于对C++代码进行性能分析，每种方法都有其特点和适用场景。实现步骤手动中断调试法在...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3530.html" title="SVG互动图文，让你的文章更有趣!教你4种简单易学的黑科技玩法!" class="f-black" target="_blank">SVG互动图文，让你的文章更有趣!教你4种简单易学的黑科技玩法!</a></dt> <dd class="news-txt"> <p class="f-gray f-13">如果你是一个公众号创作者，那么你一定想知道如何让你的文章更加吸引人，更加有趣，更加有创意。你可能已经尝试过各种图文排版技巧，但是你是否知道，有一种黑科技可以让你的文章变得更加酷炫，更加互动，更加爆款？...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3529.html" title="Videoscribe怎么实现实心中文汉字的手绘制作" class="f-black" target="_blank">Videoscribe怎么实现实心中文汉字的手绘制作</a></dt> <dd class="news-txt"> <p class="f-gray f-13">很多朋友在制作手绘视频的时候，不知道怎么输入实心的中文汉字，之前我们已经给大家分享了怎么输入汉字的方法，但是有一点遗憾的是输出的汉字是空心的手绘展示，在视觉上并不是非常的美观。经过大家不断的探索，终于...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3528.html" title="一款用于将文本转化成图表的现代化脚本语言" class="f-black" target="_blank">一款用于将文本转化成图表的现代化脚本语言</a></dt> <dd class="news-txt"> <p class="f-gray f-13">大家好，又见面了，我是GitHub精选君！今天要给大家推荐一个GitHub开源项目terrastruct/d2，该项目在GitHub有超过10.3kStar，用一句话介绍该项目就是：...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3527.html" title="探秘 Web 水印技术（制作水印网站）" class="f-black" target="_blank">探秘 Web 水印技术（制作水印网站）</a></dt> <dd class="news-txt"> <p class="f-gray f-13">作者：fransli，腾讯PCG前端开发工程师Web水印技术在信息安全和版权保护等领域有着广泛的应用，对防止信息泄露或知识产品被侵犯有重要意义。水印根据可见性可分为可见水印和不可见水印（盲水印）...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3526.html" title="不忍心卸载的五款神仙工具（不忍心卸载的五款神仙工具是什么）" class="f-black" target="_blank">不忍心卸载的五款神仙工具（不忍心卸载的五款神仙工具是什么）</a></dt> <dd class="news-txt"> <p class="f-gray f-13">001.效率工具uTools-装机必备的生产力工具集uTools是一款非常强大的可以装下几乎所有效率工具的电脑生产力工具集，目前拥有Windows、Mac和Linux三个版本。软件界面...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3525.html" title="「SVG」飞花令!这份最高检工作报告“超有料”" class="f-black" target="_blank">「SVG」飞花令!这份最高检工作报告“超有料”</a></dt> <dd class="news-txt"> <p class="f-gray f-13">原标题：【SVG】飞花令！这份最高检工作报告“超有料”栏目主编：秦红文字编辑：沈佳灵来源：作者：最高人民检察院...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3524.html" title="svg|2025政府工作报告，有没有你关心的数据?" class="f-black" target="_blank">svg|2025政府工作报告，有没有你关心的数据?</a></dt> <dd class="news-txt"> <p class="f-gray f-13">··<setattributeName="visibility"begin="click+0s"dur="1ms"fill="freeze"restart="never"to="hi...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3523.html" title="videoscribe只能输入英文，如何输入中文文本?" class="f-black" target="_blank">videoscribe只能输入英文，如何输入中文文本?</a></dt> <dd class="news-txt"> <p class="f-gray f-13">videoscribe只能输入英文，如何输入中文文本？打开VideoScribe软件，打开要添加中文字体的位置。打开Photoshop并在文件中创建一个新的透明背景图层。注意：必须是透明背景层。...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3522.html" title="五个流行的SVG在线编辑器（svg编辑工具）" class="f-black" target="_blank">五个流行的SVG在线编辑器（svg编辑工具）</a></dt> <dd class="news-txt"> <p class="f-gray f-13">随着响应网络的发展，越来越多的高质量的SVG在线编辑器被公众所熟知。SVG矢量图形也越来越受欢迎，以便在任何设备上呈现图像，甚至一些易于使用的SVG在线编辑器，可以替代PS，本文总结了五种流行的SVG...</p> </dd> </dl> </div> </div> <div class="side-box col-6 col-m-24 col2-"> <dl class="side-hot"> <dt>一周热门</dt> <dd> <ul> <li> <a href="http://www.myzbx.com/post/3065.html" title="使用VSCode模板提高Vue开发效率（vscode开发vue3）" target="_blank"> <h2 class="f-15">使用VSCode模板提高Vue开发效率（vscode开发vue3）</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/3070.html" title="吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】" target="_blank"> <h2 class="f-15">吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/3066.html" title="这么牛逼的cursor功能，赶紧用起来" target="_blank"> <h2 class="f-15">这么牛逼的cursor功能，赶紧用起来</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/3073.html" title="用上Vue3，你真的变了吗?（vue3 key）" target="_blank"> <h2 class="f-15">用上Vue3，你真的变了吗?（vue3 key）</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/3074.html" title="8.7k star，一款超炫酷的动态可视化大屏项目" target="_blank"> <h2 class="f-15">8.7k star，一款超炫酷的动态可视化大屏项目</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/3064.html" title="说下你的vue项目的目录结构，该怎么划分?" target="_blank"> <h2 class="f-15">说下你的vue项目的目录结构，该怎么划分?</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/3075.html" title="移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）" target="_blank"> <h2 class="f-15">移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/971.html" title="20个免费音乐音效下载网站，无版权素材商业影片也可用" target="_blank"> <h2 class="f-15">20个免费音乐音效下载网站，无版权素材商业影片也可用</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/2398.html" title="什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331" target="_blank"> <h2 class="f-15">什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331</h2> </a> </li> <li> <a href="http://www.myzbx.com/post/2170.html" title="谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」" target="_blank"> <h2 class="f-15">谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」</h2> </a> </li> </ul> </dd> </dl> <dl class="function" id="divPrevious"> <dt class="function_t">最近发表</dt><dd class="function_c"> <ul><li><a title="一键生成高颜值图表!让你的文字瞬间有画面感，职场人必备!" href="http://www.myzbx.com/post/3536.html">一键生成高颜值图表!让你的文字瞬间有画面感，职场人必备!</a></li> <li><a title="批量将 Word 转换为 PDF/Excel/Txt/图片等多种格式" href="http://www.myzbx.com/post/3535.html">批量将 Word 转换为 PDF/Excel/Txt/图片等多种格式</a></li> <li><a title="绝了!一键用AI生成高颜值动态PPT(附详细步骤+Prompt)" href="http://www.myzbx.com/post/3534.html">绝了!一键用AI生成高颜值动态PPT(附详细步骤+Prompt)</a></li> <li><a title="ztext - 简单几行代码创建酷炫3D特效文字的开源JS库" href="http://www.myzbx.com/post/3533.html">ztext - 简单几行代码创建酷炫3D特效文字的开源JS库</a></li> <li><a title="文字内插入小图片，也太可爱了吧（文字中怎么插图片）" href="http://www.myzbx.com/post/3532.html">文字内插入小图片，也太可爱了吧（文字中怎么插图片）</a></li> <li><a title="Linux环境下C++代码性能分析方法（linux怎么写c++代码）" href="http://www.myzbx.com/post/3531.html">Linux环境下C++代码性能分析方法（linux怎么写c++代码）</a></li> <li><a title="SVG互动图文，让你的文章更有趣!教你4种简单易学的黑科技玩法!" href="http://www.myzbx.com/post/3530.html">SVG互动图文，让你的文章更有趣!教你4种简单易学的黑科技玩法!</a></li> <li><a title="Videoscribe怎么实现实心中文汉字的手绘制作" href="http://www.myzbx.com/post/3529.html">Videoscribe怎么实现实心中文汉字的手绘制作</a></li> <li><a title="一款用于将文本转化成图表的现代化脚本语言" href="http://www.myzbx.com/post/3528.html">一款用于将文本转化成图表的现代化脚本语言</a></li> <li><a title="探秘 Web 水印技术（制作水印网站）" href="http://www.myzbx.com/post/3527.html">探秘 Web 水印技术（制作水印网站）</a></li> </ul> </dd> </dl> <dl class="function" id="divTags"> <dt class="function_t">标签列表</dt><dd class="function_c"> <ul><li><a title="HTML 简介" href="http://www.myzbx.com/tags-3.html">HTML 简介<span class="tag-count"> (30)</span></a></li> <li><a title="HTML 响应式设计" href="http://www.myzbx.com/tags-28.html">HTML 响应式设计<span class="tag-count"> (31)</span></a></li> <li><a title="HTML URL 编码" href="http://www.myzbx.com/tags-39.html">HTML URL 编码<span class="tag-count"> (32)</span></a></li> <li><a title="HTML Web 服务器" href="http://www.myzbx.com/tags-40.html">HTML Web 服务器<span class="tag-count"> (31)</span></a></li> <li><a title="HTML 表单属性" href="http://www.myzbx.com/tags-48.html">HTML 表单属性<span class="tag-count"> (32)</span></a></li> <li><a title="HTML 音频" href="http://www.myzbx.com/tags-59.html">HTML 音频<span class="tag-count"> (31)</span></a></li> <li><a title="HTML5 支持" href="http://www.myzbx.com/tags-63.html">HTML5 支持<span class="tag-count"> (33)</span></a></li> <li><a title="HTML API" href="http://www.myzbx.com/tags-66.html">HTML API<span class="tag-count"> (36)</span></a></li> <li><a title="HTML 总结" href="http://www.myzbx.com/tags-76.html">HTML 总结<span class="tag-count"> (32)</span></a></li> <li><a title="HTML 全局属性" href="http://www.myzbx.com/tags-81.html">HTML 全局属性<span class="tag-count"> (32)</span></a></li> <li><a title="HTML 事件" href="http://www.myzbx.com/tags-82.html">HTML 事件<span class="tag-count"> (31)</span></a></li> <li><a title="HTML 画布" href="http://www.myzbx.com/tags-83.html">HTML 画布<span class="tag-count"> (32)</span></a></li> <li><a title="HTTP 方法" href="http://www.myzbx.com/tags-88.html">HTTP 方法<span class="tag-count"> (30)</span></a></li> <li><a title="键盘快捷键" href="http://www.myzbx.com/tags-89.html">键盘快捷键<span class="tag-count"> (30)</span></a></li> <li><a title="CSS 语法" href="http://www.myzbx.com/tags-93.html">CSS 语法<span class="tag-count"> (35)</span></a></li> <li><a title="CSS 选择器" href="http://www.myzbx.com/tags-94.html">CSS 选择器<span class="tag-count"> (30)</span></a></li> <li><a title="CSS 轮廓" href="http://www.myzbx.com/tags-117.html">CSS 轮廓<span class="tag-count"> (30)</span></a></li> <li><a title="CSS 轮廓宽度" href="http://www.myzbx.com/tags-118.html">CSS 轮廓宽度<span class="tag-count"> (31)</span></a></li> <li><a title="CSS 谷歌字体" href="http://www.myzbx.com/tags-131.html">CSS 谷歌字体<span class="tag-count"> (33)</span></a></li> <li><a title="CSS 链接" href="http://www.myzbx.com/tags-134.html">CSS 链接<span class="tag-count"> (31)</span></a></li> <li><a title="CSS 中级教程" href="http://www.myzbx.com/tags-137.html">CSS 中级教程<span class="tag-count"> (30)</span></a></li> <li><a title="CSS 定位" href="http://www.myzbx.com/tags-140.html">CSS 定位<span class="tag-count"> (31)</span></a></li> <li><a title="CSS 图片库" href="http://www.myzbx.com/tags-155.html">CSS 图片库<span class="tag-count"> (32)</span></a></li> <li><a title="CSS 图像精灵" href="http://www.myzbx.com/tags-156.html">CSS 图像精灵<span class="tag-count"> (31)</span></a></li> <li><a title="SVG 文本" href="http://www.myzbx.com/tags-281.html">SVG 文本<span class="tag-count"> (32)</span></a></li> </ul> </dd> </dl> </div> </div> </div> </div> <div class="footer"> <div class="wide ta-c f-12"> </div> </div> <div class="fixed-box "> <ul> <li class="pchide wapflex"><a href="http://www.myzbx.com/"><i class="fa fa-home"></i> 首页</a></li> <li><a href="http://www.myzbx.com/shoulu.html" title="收录申请" target="_blank"><i class="fa fa-chain-broken mr5"></i>收录</a></li> <li><span class="gotop"><i class="fa fa-caret-up mr5"></i> 顶部</span></li> </ul> </div> <script src="http://www.myzbx.com/zb_users/theme/tx_hao/script/txcstx.min.js?v=2024-12-04"></script> </body> </html><!--118.71 ms , 13 queries , 3646kb memory , 0 error-->