Html的头部标签meta怎么用
admin
2023-02-12 09:20:06
0

本文以Html的头部标签meta为例,为大家分析meta标签的属性以及meta标签的使用,阅读完整文相信大家对Html的头部标签meta有了一定的认识。

meta元素有4个属性:name、http-equiv、content、charset.meta标签通过name属性来表述页面文档的元信息,通过http-equiv属性设置http请求指令,通过charset设置页面的字符编码。按照属性设置分类,meta可以分为三类:

name属性和content属性组合,构成名称/值对,用于描述网站信息.

标准的meta名称包括application-name、author、description、generator等。 示例代码:

其中keywords和description这两个名称的使用率最高,是搜索引擎优化的主要手段之一,推荐读者使用。

http-equiv属性和content属性组合,设置特定的http指令;

其中content-type、default-style和refresh已经确定,content-language和set-cookie还未正式确定.

此类型meta应该谨慎使用。不推荐使用,某些搜索引擎遇到此meta时会停止解析 页面剩余的部分。在实际的场景中很少使用

charset属性,设置页面字符编码。

此属性提供了保存和传输文档的编码格式。

等价于

但是第一种形式更简洁好记,并且得到了所有主流浏览器的支持,所有不存在浏览器兼容问题。为 了让浏览器能准确识别编码格式,务必在标签之前设置charset,保证标题能正确显示。</p><blockquote><p>除了W3C定义的规范中定义的这些meta之外,还有大量的自定义meta类型。这些meta类型主要是由互联网公司或者浏览器厂商为了实现特定的功能而定制的。这些自定义的meta不能通过W3C提供的标准校验,但并不是说这些meta不标准。介绍一些常用的meta</p></blockquote><p><strong>设置IE浏览器的兼容模式</strong></p><p>从IE8浏览器开始支持一种设置页面兼容模式的meta类型</p><p>根据html规范,浏览器是按照页面开头定义的文档类型来解析页面的。例如,使用html5的文档类型声明:</p><pre><code><!DOCTYPE html></code></pre><p>IE就会以标准模式解析HTML文档。但是某些已有页面由于各种原因不能在最新标准模式下正确显示,只支持特定的标准。针对这种情况,IE浏览器提供了一种兼容的方案,通过设置X-UA-Compatible指定页面在IE浏览器中渲染时执行的标准。</p><p>此外还有一种很常见的设置值,即:</p><pre><code><meta http-equiv="X-UA-Compatible" content="chrome=1"/></code></pre><p>IE定义的meta为什么会出现chrome呢?其实设置为chrome=1时,则会在IE9及以下浏览器中激活Chrome Frame,强制IE使用Chrome Frame渲染页面。</p><p>看完上述内容,你们对<span >Html的头部标签meta</span>有进一步的了解吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读。</p><p> </p> <!--end::Text--> </div> <!--end::Description--> <div class="mt-5"> <!--关键词搜索--> </div> <div class="mt-5"> <p class="fc-show-prev-next"> <strong>上一篇:</strong><a href="/kaifa/show-104043.html">cocos2dx中的核心类是什么</a><br> </p> <p class="fc-show-prev-next"> <strong>下一篇:</strong><a href="/kaifa/show-104045.html">web前端入门到实战:CSS的文本格式化样式总汇</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="/news/show-14531604.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">据凤凰卫视报道,日本政府7月24日正式决定设立国家情报局,计划于31日召开首次国家情报会议。这是日本...</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('/uploadfile/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEXy8vJkA4prAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/show-14531603.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">据“新福建”客户端消息,7月24日,福建省十四届人大常委会第二十三次会议闭幕。会议表决通过了有关人事...</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('/uploadfile/[db:缩略图]')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/weixiu/show-14531602.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">滚筒洗衣机脱水转不起来:1、洗衣机顶盖的安全开关损坏。洗衣机在脱水的过程属于高速运作的机械运动。在脱...</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('/uploadfile/[db:缩略图]')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/weixiu/show-14531601.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">洗衣机甩干桶嗡嗡响转不起来1、可能是洗衣机甩干桶下面的相关轴承长时间使用,缺乏润滑油导致的。2、可能...</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('/uploadfile/[db:缩略图]')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/weixiu/show-14531600.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('/uploadfile/[db:缩略图]')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/weixiu/show-14531599.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">1、有可能是因为洗衣机的内筒当中所放置的衣物过多了导致的。2、还有可能是因为电压不正常导致的。3、也...</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('/uploadfile/[db:缩略图]')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/weixiu/show-14531598.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="/news/show-14531597.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="/news/show-14531596.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">(来源:机器之心) 编辑|杜伟、山辉 当地时间 7 月 23 日 12 点,费城宾夕法尼亚会议中心 ...</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="/news/show-14531595.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">《成都声明》勾勒亚太数智合作新蓝图 7月23日,参会代表在2026年亚太经合组织(APEC)数字和...</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.yexian114.com/">叶县生活网</a> <a href="https://www.wxx86.cn/">编程知识网</a> <a href="http://www.kcwzh.com/">开创游戏网</a> <a href="https://www.caiding5.net">菜丁网</a><a href="http://cn.office369.com">奥飞商务网</a> <a href="http://www.zlnznjj.com/">众乐知识网</a><a href="http://www.lhjia.com/">乐活家</a><a href="http://www.nengyuan100.com/">能源100网</a> <a href="http://it.tdroid.net/">泰达科技</a><a href="http://cn.tdroid.net/">太卓开发网</a><a href="http://cn.yuansudz.com/">元素科技网</a><a href="http://www.80hlw.com/">八零商务网</a><a href="http://game.tdroid.net/">土豆游戏网</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="/jishu" target="_blank" class="menu-link px-2">技术分享</a> </li> <li class="menu-item"> <a href="/kaifa" target="_blank" class="menu-link px-2">程序开发</a> </li> <li class="menu-item"> <a href="/weixiu" 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>