制作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此HTML提供了一系列的标签，这些标签通常都写在head标签内，因此被称为头部相关标签。本节将具体介绍常用的头部标签。
1.设置页面标题标签
</p><p data-track="3"><title>标签用于定义HTML页面的标题，即给网页取一个名字，该标签必须位于<head>标签之内。一个HTML文档只能包含一对<title>标签，
之间的内容将显示在浏览器窗口的标题栏中。例如将页面标题设置为“轻松学习HTML5”，具体代码如下：
轻松学习HTML5
上述代码对应的页面标题效果如图1所示。
图 1设置页面标题标签
</p><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="名称" content="值" /></p><p data-track="10">在<meta />标签中使用name和content属性可以为搜索引擎提供信息，其中name属性用于提供搜索内容的名称，content属性提供对应的搜索内容值，具体应用如下。</p><p data-track="11">●设置网页关键字，例如某图片网站的关键字设置：</p><pre><code><meta name="keywords" content="千图网,免费素材下载,千图网免费素材图库,矢量图,矢量图库,图片素材,网页素材,免费素材,PS素材,网站素材,设计模板,设计素材， 网页模板免费下载,千图,素材中国,素材,免费设计,图片" /></code></pre><p data-track="13">其中name属性的值为keywords，用于定义搜索内容名称为网页关键字，content属性的值用于定义关键字的具体内容，多个关键字内容之间可以用“,”分隔。</p><p data-track="14">●设置网页描述，例如某图片网站的描述信息设置：</p><pre><code><meta name="description" content="专注免费设计素材下载的网站！提供矢量图素材,矢量背景图片,矢量图库,还有psd素材,PS素材,设计模板,设计素材,PPT素材,以及网页素材,网站素材,网页图标免费下载" /></code></pre><p data-track="16">其中name属性的值为description，用于定义搜索内容名称为网页描述，content属性的值用于定义描述的具体内容。需要注意的是网页描述的文字不必过多，能够描述清晰即可。</p><p data-track="17">●设置网页作者，例如可以为网站增加作者信息：</p><pre><code><meta name="author" content="网络部" /></code></pre><p data-track="19">其中name属性的值为author，用于定义搜索内容名称为网页作者，content属性的值用于定义具体的作者信息。</p><p data-track="20">2）<meta http-equiv="名称" content="值" / ></p><p data-track="21">在<meta />标签中使用http-equiv和content属性可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数标准。其中，http-equiv属性提供参数类型，content属性提供对应的参数值。默认会发送<meta http-equiv="Content-Type" content="text/html" / >，通知浏览器发送的文件类型是HTML。具体应用如下：</p><p data-track="22">●设置字符集，例如某图片官网字符集的设置：</p><pre><code><meta http-equiv="Content-Type" content="text/html; charset=gbk" /></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><code><meta charset="utf-8"></code></pre><p data-track="26">●设置页面自动刷新与跳转，例如定义某个页面10秒后跳转至百度：</p><pre><code><meta http-equiv="refresh" content="10; url= https://www.baidu.com/" /></code></pre><p data-track="28">其中http-equiv属性的值为refresh，content属性的值为数值和url地址，中间用“;”隔开，用于指定在特定的时间后跳转至目标页面，该时间默认以秒为单位。</p> <!--end::Text-->
</div>
<!--end::Description-->
<div class="mt-5">
<!--关键词搜索-->
<a href="/search/news/keyword-%E6%A0%87%E7%AD%BE5%E5%B1%9E%E6%80%A75%E9%A1%B5%E9%9D%A25%E7%B4%A0%E6%9D%905%E7%BD%91%E9%A1%B5.html" class="badge badge-light-primary fw-bold my-2" target="_blank">标签5属性5页面5素材5网页</a>
</div>
<div class="mt-5">
<p class="fc-show-prev-next">
<strong>上一篇：</strong><a href="/yingxiao/87399.html">如何提升自身的能量，十个小技巧让你自信满满，朝气阳光 </a><br>
</p>
<p class="fc-show-prev-next">
<strong>下一篇：</strong><a href="/yingxiao/87401.html">VBA网抓之关键词抓取 </a> </p>
</div>
<!--begin::Block-->
<div class="d-flex flex-stack mb-2 mt-10">
<!--begin::Title-->
<h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3>
<!--end::Title-->
</div>
<div class="separator separator-dashed mb-9"></div>
<!--end::Block-->
<div class="row g-10">
</div>
</div>
<!--end::Table widget 14-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-xl-4 mt-0">
<!--begin::Chart Widget 35-->
<div class="card card-flush h-md-100">
<!--begin::Header-->
<div class="card-header pt-5 ">
<!--begin::Title-->
<h3 class="card-title align-items-start flex-column">
<!--begin::Statistics-->
<div class="d-flex align-items-center mb-2">
<!--begin::Currency-->
<span class="fs-5 fw-bold text-gray-800 ">热门资讯</span>
<!--end::Currency-->
</div>
<!--end::Statistics-->
</h3>
<!--end::Title-->
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body pt-3">
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242674.html" class="text-dark fw-bold text-hover-primary fs-6">“人工智能应用正超越人类思维”...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242673.html" class="text-dark fw-bold text-hover-primary fs-6">百度首席技术官王海峰：人工智能...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242672.html" class="text-dark fw-bold text-hover-primary fs-6">尤瓦尔最新演讲：人工智能对我们...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242671.html" class="text-dark fw-bold text-hover-primary fs-6">通用人工智能时代已经来临？听他...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242670.html" class="text-dark fw-bold text-hover-primary fs-6">人工智能赋能中国式现代化：发展...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242669.html" class="text-dark fw-bold text-hover-primary fs-6">人工智能亟待构筑“主动免疫”安...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242668.html" class="text-dark fw-bold text-hover-primary fs-6">人工智能越来越强大 专家：永远...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242667.html" class="text-dark fw-bold text-hover-primary fs-6">避雷指南+干货分享，为什么你的...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242666.html" class="text-dark fw-bold text-hover-primary fs-6">TOOM软文推广的十个品牌营销...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242665.html" class="text-dark fw-bold text-hover-primary fs-6">优化营销策略：TOOM软文推广...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242651.html" class="text-dark fw-bold text-hover-primary fs-6">明雪轩：浅析如何运营软文推广 </a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242650.html" class="text-dark fw-bold text-hover-primary fs-6">新零售模式：共享购模式，打造新...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242649.html" class="text-dark fw-bold text-hover-primary fs-6">“线上+线下”的新零售模式，将...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242648.html" class="text-dark fw-bold text-hover-primary fs-6">新零售商城：线上线下融合的零售...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242647.html" class="text-dark fw-bold text-hover-primary fs-6">浅谈新零售模式转型路径及转型后...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242646.html" class="text-dark fw-bold text-hover-primary fs-6">社区新零售的营销模式有哪些？ </a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242645.html" class="text-dark fw-bold text-hover-primary fs-6">商铺价值评估模型设计：新零售商...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242644.html" class="text-dark fw-bold text-hover-primary fs-6">强烈建议收藏，2023图解【私...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242643.html" class="text-dark fw-bold text-hover-primary fs-6">私域流量:打造独特而稳定的粉丝...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/yingxiao/242634.html" class="text-dark fw-bold text-hover-primary fs-6">如何运营自己的头条号？听我来给...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span>
</div>
<!--end::Title-->
</div>
</div>
<!--end::Body-->
</div>
<!--end::Chart Widget 35-->
</div>
<!--end::Col-->
</div>
</div>
<!--end::Content container-->
</div>
<!--end::Content-->
</div>
<!--end::Content wrapper-->
<!--begin::Footer-->
<div id="kt_app_footer" class="app-footer">
<!--begin::Footer container-->
<div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
<!--begin::Copyright-->
<div class="text-dark order-2 order-md-1">
<span class="text-muted fw-semibold me-1">2026 ©</span>
华商生活网<a href="http://www.caiding5.cn">财丁网</a> <a href="http://ask.kcwzh.com">开创问答网</a><a href="http://www.bitekongjian.com">比特空间</a><a href="http://tousu.huashangw.com/">商务投诉</a><a href="http://www.huashangw.com/">华商网</a><a href="http://www.bgjj.cc/">布谷家居网</a><a href="http://www.kthtea.cn/">太和茶叶网</a><a href="http://jiaju.yuansudz.com/">玉安家居网</a><a href="http://news.dingtaide.cn/">鼎泰资讯</a><a href="http://www.dcglq.cn/">电池功率网</a><a href="http://www.aushin.cn/">澳新网</a> </div>
<!--end::Copyright-->
<!--begin::Menu-->
<ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
<li class="menu-item">
<a href="/news/" target="_blank" class="menu-link px-2">资讯</a>
</li>
<li class="menu-item">
<a href="/yingxiao/" target="_blank" class="menu-link px-2">营销</a>
</li>
<li class="menu-item">
<a href="/zhishi/" target="_blank" class="menu-link px-2">知识</a>
</li>
<li class="menu-item">
<a href="/shenghuo/" target="_blank" class="menu-link px-2">生活</a>
</li>
</ul>
<!--end::Menu-->
</div>
<!--end::Footer container-->
</div>
<!--end::Footer-->
</div>
<!--end:::Main-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Page-->
</div>
<!--end::App-->
<div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg-->
<span class="svg-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect>
<path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path>
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--begin::Javascript-->
<script>var hostUrl = "/static/default/pc/";</script>
<!--begin::Global Javascript Bundle(mandatory for all pages)-->
<script src="/static/default/pc/plugins/global/plugins.bundle.js"></script>
<script src="/static/default/pc/js/scripts.bundle.js"></script>
<!--end::Global Javascript Bundle-->
<!--end::Javascript-->
</body>
<!--end::Body-->
</html> 
