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

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

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

制作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此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/3380.html" title="Django零基础速成指南:快速打造带用户系统的博客平台" class="f-black" target="_blank">Django零基础速成指南:快速打造带用户系统的博客平台</a></dt> <dd class="news-txt"> <p class="f-gray f-13">#python##服务器##API##编程##学习#不是所有教程都值得你花时间！这篇实战指南将用5分钟带你解锁Django核心技能，手把手教你从零搭建一个具备用户注册登录、文章管理功能的完整...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3379.html" title="iOS 17.0 Bootstrap 1.2.9 半越狱来啦!更新两点" class="f-black" target="_blank">iOS 17.0 Bootstrap 1.2.9 半越狱来啦!更新两点</a></dt> <dd class="news-txt"> <p class="f-gray f-13">这款Bootstrap半越狱工具终于更新，离上一次更新已相隔很久，现在推出1.2.9版本，主要为内置两点功能进行更新，也是提升半越狱的稳定性。如果你正在使用这款半越狱工具的，建议你更新。注意！...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3378.html" title="iOS 16.x Bootstrap 1.2.3 发布，支持运行清理工具" class="f-black" target="_blank">iOS 16.x Bootstrap 1.2.3 发布，支持运行清理工具</a></dt> <dd class="news-txt"> <p class="f-gray f-13">本文主要讲Bootstrap半越狱工具更新相关内容。如果你是iOS16.0至16.6.1和17.0系统的，想体验半越狱的果粉，请继续往下看。--知识点科普--Bootstrap...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3377.html" title="SpringBoot整合工作流引擎Acticiti系统，适用于ERP、OA系统" class="f-black" target="_blank">SpringBoot整合工作流引擎Acticiti系统，适用于ERP、OA系统</a></dt> <dd class="news-txt"> <p class="f-gray f-13">今日推荐：SpringBoot整合工作流引擎Acticiti的源码推荐理由：1、SpringBoot整合工作流引擎Acticiti系统2、实现了三级权限结构3、持久层使用了mybatis框架4、流程包...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3376.html" title="SpringCloud自定义Bootstrap配置指南" class="f-black" target="_blank">SpringCloud自定义Bootstrap配置指南</a></dt> <dd class="news-txt"> <p class="f-gray f-13">在SpringCloud中自定义Bootstrap配置需要以下步骤，以确保在应用启动的早期阶段加载自定义配置：1.添加依赖（针对新版本SpringCloud）从SpringCloud2020...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3375.html" title="Python使用Dash开发网页应用(三)（python网页开发教程）" class="f-black" target="_blank">Python使用Dash开发网页应用(三)（python网页开发教程）</a></dt> <dd class="news-txt"> <p class="f-gray f-13">PlotlyDash开发Web应用示例一个好的网页设计通常都需要编写css甚至js来定制前端内容，例如非常流行的bootstrap框架。我们既然想使用Dash来搭建web应用，很大的一个原因是不熟悉...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3374.html" title="Oxygen XML Editor 27.1 中的新功能" class="f-black" target="_blank">Oxygen XML Editor 27.1 中的新功能</a></dt> <dd class="news-txt"> <p class="f-gray f-13">OxygenXMLEditor27.1版是面向内容作者、开发者、合作者和出版商的行业领先工具包的增量版本。在27.1版本中，AIPositronAssistant得到了增强，包括用于...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3373.html" title="【LLM-多模态】Mini-Gemini:挖掘多模态视觉语言模型的潜力" class="f-black" target="_blank">【LLM-多模态】Mini-Gemini:挖掘多模态视觉语言模型的潜力</a></dt> <dd class="news-txt"> <p class="f-gray f-13">一、结论写在前面论文提出了Mini-Gemini，一个精简而强大的多模态VLM框架。Mini-Gemini的本质在于通过战略性框架设计、丰富的数据质量和扩展的功能范围，发掘VLM的潜在能力。其核心是补...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3372.html" title="谐云课堂 | 一文详解分布式改造理论与实战" class="f-black" target="_blank">谐云课堂 | 一文详解分布式改造理论与实战</a></dt> <dd class="news-txt"> <p class="f-gray f-13">01微服务与分布式什么是分布式？首先，我们对上图提到的部分关键词进行讲解。单体，是指一个进程完成全部的后端处理；水平拆分，是同一个后端多环境部署，他们都处理相同的内容，使用反向代理来均衡负载，这种也叫...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3371.html" title="基于Abaqus的手动挡换挡机构可靠性仿真" class="f-black" target="_blank">基于Abaqus的手动挡换挡机构可靠性仿真</a></dt> <dd class="news-txt"> <p class="f-gray f-13">手动挡，也称手动变速器，英文全称为Manualtransmission，简称MT，即用手拨动换挡操纵总成才能改变变速器内的齿轮啮合位置，改变传动比，从而达到变速的目的。家用轿车主要采用软轴连接的换挡...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3370.html" title="【pytorch】目标检测:彻底搞懂YOLOv5详解" class="f-black" target="_blank">【pytorch】目标检测:彻底搞懂YOLOv5详解</a></dt> <dd class="news-txt"> <p class="f-gray f-13">YOLOv5是GlennJocher等人研发，它是Ultralytics公司的开源项目。YOLOv5根据参数量分为了n、s、m、l、x五种类型，其参数量依次上升，当然了其效果也是越来越好。从2020...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3369.html" title="超实用!50个非常实用的PS快捷键命令大全分享" class="f-black" target="_blank">超实用!50个非常实用的PS快捷键命令大全分享</a></dt> <dd class="news-txt"> <p class="f-gray f-13">今天，给大家介绍50个非常实用的快捷键命令大全，大家伙都是设计师，关于软件使用那是越快越好啊。一、常用的热键组合1、图层混合模式快捷键：正常(Shift+Option+N)，正片叠底(Shif...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3368.html" title="Pohtoshop中深藏不露的小技巧（科目一考试技巧记忆口诀看完必过）" class="f-black" target="_blank">Pohtoshop中深藏不露的小技巧（科目一考试技巧记忆口诀看完必过）</a></dt> <dd class="news-txt"> <p class="f-gray f-13">邢帅教育ps教程为大家总结了一些Pohtoshop中深藏不露的小技巧，可以帮助到大家在设计时减少不必要的麻烦，提高工作效率哦~~~1.设置网格线保持像素完美不在1:1分辨率下也能保持像素完美，可以...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3367.html" title="Ganglia监控安装总结（监控安装工作总结）" class="f-black" target="_blank">Ganglia监控安装总结（监控安装工作总结）</a></dt> <dd class="news-txt"> <p class="f-gray f-13">一、ganglia简介：Ganglia是一个跨平台可扩展的，高性能计算系统下的分布式监控系统，如集群和网格。它是基于分层设计，它使用广泛的技术，如XML数据代表，便携数据传输，RRDtool用于数据...</p> </dd> </dl> <dl class="news-box clearfix pd20 "> <dt class="f-18 mb10"><a href="http://www.myzbx.com/post/3366.html" title="谁说Adobe XD做不出好看的设计?那是你没搞懂这些功能" class="f-black" target="_blank">谁说Adobe XD做不出好看的设计?那是你没搞懂这些功能</a></dt> <dd class="news-txt"> <p class="f-gray f-13">AdobeXD的美化栏具有将设计视图美化的功能，它能使界面设计和原型设计更漂亮、更吸引眼球。美化栏的7个功能包括竖线布局设计、横线布局设计、重复网格、图形大小和位置设置、响应式调整大小、文字美化以及...</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/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/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/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="Django零基础速成指南:快速打造带用户系统的博客平台" href="http://www.myzbx.com/post/3380.html">Django零基础速成指南:快速打造带用户系统的博客平台</a></li> <li><a title="iOS 17.0 Bootstrap 1.2.9 半越狱来啦!更新两点" href="http://www.myzbx.com/post/3379.html">iOS 17.0 Bootstrap 1.2.9 半越狱来啦!更新两点</a></li> <li><a title="iOS 16.x Bootstrap 1.2.3 发布，支持运行清理工具" href="http://www.myzbx.com/post/3378.html">iOS 16.x Bootstrap 1.2.3 发布，支持运行清理工具</a></li> <li><a title="SpringBoot整合工作流引擎Acticiti系统，适用于ERP、OA系统" href="http://www.myzbx.com/post/3377.html">SpringBoot整合工作流引擎Acticiti系统，适用于ERP、OA系统</a></li> <li><a title="SpringCloud自定义Bootstrap配置指南" href="http://www.myzbx.com/post/3376.html">SpringCloud自定义Bootstrap配置指南</a></li> <li><a title="Python使用Dash开发网页应用(三)（python网页开发教程）" href="http://www.myzbx.com/post/3375.html">Python使用Dash开发网页应用(三)（python网页开发教程）</a></li> <li><a title="Oxygen XML Editor 27.1 中的新功能" href="http://www.myzbx.com/post/3374.html">Oxygen XML Editor 27.1 中的新功能</a></li> <li><a title="【LLM-多模态】Mini-Gemini:挖掘多模态视觉语言模型的潜力" href="http://www.myzbx.com/post/3373.html">【LLM-多模态】Mini-Gemini:挖掘多模态视觉语言模型的潜力</a></li> <li><a title="谐云课堂 | 一文详解分布式改造理论与实战" href="http://www.myzbx.com/post/3372.html">谐云课堂 | 一文详解分布式改造理论与实战</a></li> <li><a title="基于Abaqus的手动挡换挡机构可靠性仿真" href="http://www.myzbx.com/post/3371.html">基于Abaqus的手动挡换挡机构可靠性仿真</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-1.html">HTML 基础教程<span class="tag-count"> (29)</span></a></li> <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> </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><!--113.51 ms , 13 queries , 3703kb memory , 0 error-->