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

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

myzbx 2025-03-13 18:16 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> <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/4437.html" title="怎么恢复7z文件 7z文件删除了怎么恢复" class="f-black" target="_blank">怎么恢复7z文件 7z文件删除了怎么恢复</a></dt> <dd class="news-txt"> <p class="f-gray f-13">7z是一种压缩格式的文件，它运用LZMA压缩算法，该压缩算法的输出稍后被算数编码进行处理以便后续进一步压缩，压缩比十分高。我们可以将文件压缩成这种格式，便于传输，保存，占空间少。了解更多7z文件知识...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/4436.html" title="郎酒让消费者喝得明明白白 算术题里有答案" class="f-black" target="_blank">郎酒让消费者喝得明明白白 算术题里有答案</a></dt> <dd class="news-txt"> <p class="f-gray f-13">日前，『郎酒酱香产品企业内控准则』颁布，郎酒首次公开酱香产品生产全过程，公布酱香产品产能、储能及投放计划。随后，郎酒官微向消费者发出「品控算术题」有奖问答。郎酒亮出家底，消费者踊跃留言。8天后，谜底揭...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/4435.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/4434.html" title="参加CSP-J信奥赛需要掌握数学知识" class="f-black" target="_blank">参加CSP-J信奥赛需要掌握数学知识</a></dt> <dd class="news-txt"> <p class="f-gray f-13">在C++语法的学习中需要储备的数学知识如下①数据类型：需要知道整数、正整数、负整数、小数、判断对错②算术运算符：加法、减法、乘法、除法、取模运算③关系表达式：大于、大于等于、小于、小...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/4433.html" title="1g米饭能做多少深蹲?今天我们来算一算" class="f-black" target="_blank">1g米饭能做多少深蹲?今天我们来算一算</a></dt> <dd class="news-txt"> <p class="f-gray f-13">减重我们都知道3分在练，7分在吃，吃这件事情上，真的是每一口都算数。今天我们来算一笔账，1粒米饭可以做多少事情？本着认真负责的态度，今天在食物秤上称了1g米饭，是16粒。根据能量换算：100g米饭是4...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/4432.html" title="web 自动化测试，一定得掌握的 8 个核心知识点" class="f-black" target="_blank">web 自动化测试，一定得掌握的 8 个核心知识点</a></dt> <dd class="news-txt"> <p class="f-gray f-13">使用cypress进行端对端测试，和其他的一些框架有一个显著不同的地方，它使用JavaScript作为编程语言。传统主流的selenium框架是支持多语言的，大多数QA会的pytho...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/4431.html" title="大话C语言:赋值运算符（c语言中赋值运算符是什么）" class="f-black" target="_blank">大话C语言:赋值运算符（c语言中赋值运算符是什么）</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/4430.html" title="Vue进阶(幺幺伍):js 将字符串转换为boolean" class="f-black" target="_blank">Vue进阶(幺幺伍):js 将字符串转换为boolean</a></dt> <dd class="news-txt"> <p class="f-gray f-13">Boolean();参数为0、null和无参数返回false，有参数返回true。Boolean("");//输出为：falseBoolean(null);//输出为...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/4429.html" title="mongodb查询的语法(大于，小于，大于或等于，小于或等于等等)" class="f-black" target="_blank">mongodb查询的语法(大于，小于，大于或等于，小于或等于等等)</a></dt> <dd class="news-txt"> <p class="f-gray f-13">1).大于，小于，大于或等于，小于或等于$gt:大于$lt:小于$gte:大于或等于$lte:小于或等于例子：db.collection.find({"field":{$gt:valu...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/4428.html" title="Python学不会来打我(21)python表达式知识点汇总" class="f-black" target="_blank">Python学不会来打我(21)python表达式知识点汇总</a></dt> <dd class="news-txt"> <p class="f-gray f-13">在Python中，表达式是由变量、运算符、函数调用等组合而成的语句，用于产生值或执行特定操作。以下是对Python中常见表达式的详细讲解：1.1算术表达式涉及数学运算的表达式。例如：a=5b...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/4427.html" title="C|数据存储地址与字节偏移、数据索引" class="f-black" target="_blank">C|数据存储地址与字节偏移、数据索引</a></dt> <dd class="news-txt"> <p class="f-gray f-13">话说C是面向内存的编程语言。数据要能存得进去，取得出来，且要考虑效率。不管是顺序存储还是链式存储，其寻址方式总是很重要。顺序存储是连续存储。同质结构的数组通过其索引表示位置偏移，异质结构的结构体通过其...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/4426.html" title="下班后累懵?4 个 JS 手写题帮你搞定前端面试高频考点" class="f-black" target="_blank">下班后累懵?4 个 JS 手写题帮你搞定前端面试高频考点</a></dt> <dd class="news-txt"> <p class="f-gray f-13">打工人下班后最痛苦的事，莫过于拖着疲惫的身子还要啃前端面试题吧？看着那些密密麻麻的JS代码，脑子都快转不动了！别担心，今天咱就用轻松的方式，带你吃透4道高频手写题，让你在面试时自信满满，再也不...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/4425.html" title="嵌入式数据库sqlite3【进阶篇】-子句和函数的使用，小白一文入门" class="f-black" target="_blank">嵌入式数据库sqlite3【进阶篇】-子句和函数的使用，小白一文入门</a></dt> <dd class="news-txt"> <p class="f-gray f-13">sqlite在《嵌入式数据库sqlite3命令操作基础篇-增删改查，小白一文入门》一文中讲解了如何实现sqlite3的基本操作增删改查，本文介绍一些其他复杂一点的操作。比如where、orderby...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/4424.html" title="前缀表达式与后缀表达式（前缀表达式后缀表达式中缀表达式计算）" class="f-black" target="_blank">前缀表达式与后缀表达式（前缀表达式后缀表达式中缀表达式计算）</a></dt> <dd class="news-txt"> <p class="f-gray f-13">昨天晚上和儿子一起学习了前缀表达式和后缀表达式。这应该是字符串算式如何被计算机识别并计算的2种方法。本来是想先给他讲一个逆波兰式（后缀表达式），以后再讲前缀表达式。没想到他还挺聪明，很快就把2个都掌握...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/4423.html" title="Python快速入门教程1:基本语法、数据类型、运算符、数字字符串" class="f-black" target="_blank">Python快速入门教程1:基本语法、数据类型、运算符、数字字符串</a></dt> <dd class="news-txt"> <p class="f-gray f-13">Python3的基础教程，涵盖了基本语法、数据类型、类型转换、解释器、注释、运算符、数字和字符串等内容，并附有使用实例场景。Python3的基础教程，涵盖了基本语法、数据类型、类型转换、解释器、注释、...</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/3075.html" title="移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）" target="_blank"> <h2 class="f-15">移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）</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/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/3066.html" title="这么牛逼的cursor功能，赶紧用起来" target="_blank"> <h2 class="f-15">这么牛逼的cursor功能，赶紧用起来</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/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="怎么恢复7z文件 7z文件删除了怎么恢复" href="http://www.myzbx.com/post/4437.html">怎么恢复7z文件 7z文件删除了怎么恢复</a></li> <li><a title="郎酒让消费者喝得明明白白 算术题里有答案" href="http://www.myzbx.com/post/4436.html">郎酒让消费者喝得明明白白 算术题里有答案</a></li> <li><a title="学龄前，比识字、算术更重要的是这三件事" href="http://www.myzbx.com/post/4435.html">学龄前，比识字、算术更重要的是这三件事</a></li> <li><a title="参加CSP-J信奥赛需要掌握数学知识" href="http://www.myzbx.com/post/4434.html">参加CSP-J信奥赛需要掌握数学知识</a></li> <li><a title="1g米饭能做多少深蹲?今天我们来算一算" href="http://www.myzbx.com/post/4433.html">1g米饭能做多少深蹲?今天我们来算一算</a></li> <li><a title="web 自动化测试，一定得掌握的 8 个核心知识点" href="http://www.myzbx.com/post/4432.html">web 自动化测试，一定得掌握的 8 个核心知识点</a></li> <li><a title="大话C语言:赋值运算符（c语言中赋值运算符是什么）" href="http://www.myzbx.com/post/4431.html">大话C语言:赋值运算符（c语言中赋值运算符是什么）</a></li> <li><a title="Vue进阶(幺幺伍):js 将字符串转换为boolean" href="http://www.myzbx.com/post/4430.html">Vue进阶(幺幺伍):js 将字符串转换为boolean</a></li> <li><a title="mongodb查询的语法(大于，小于，大于或等于，小于或等于等等)" href="http://www.myzbx.com/post/4429.html">mongodb查询的语法(大于，小于，大于或等于，小于或等于等等)</a></li> <li><a title="Python学不会来打我(21)python表达式知识点汇总" href="http://www.myzbx.com/post/4428.html">Python学不会来打我(21)python表达式知识点汇总</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-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-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> <li><a title="时钟启动" href="http://www.myzbx.com/tags-307.html">时钟启动<span class="tag-count"> (33)</span></a></li> <li><a title="HTML 游戏" href="http://www.myzbx.com/tags-308.html">HTML 游戏<span class="tag-count"> (34)</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=2025-04-20"></script> </body> </html><!--114.27 ms , 13 queries , 3610kb memory , 0 error-->