• 技术文章 >web前端 >html教程

    HTML5的WEB界面中meta实列详解

    php中世界最好的语言php中世界最好的语言2018-01-17 09:41:19原创859
    这次给大家带来HTML5的WEB界面中meta实列详解,使用HTML5的WEB界面中meta的注意事项有哪些,下面就是实战案例,一起来看一下。

    简介

    meta标签是HTML语言HEAD区的一个辅助性标签。

    meta常用于定义页面的说明,关键字,最后修改日期,和其它的元数据。这些元数据将服务于浏览器(如何布局或重载页面),搜索引擎和其它网络服务。

    mata 标签包含全局属性

    charset

    声明网页的字符编码:

    <meta charset="UTF-8">

    content

    content属性的内容是 htp-equiv或 name属性的值,具体取决于你用哪一个。

    http-equiv

    该属性可以包含HTTP头的名称,属性的英文全称为 http-equivalent。它定义了可以改变 server和 user-agent行为的指令。该指令的值在content属性内定义,可以是以下之一:

    content-language(已过时)

    定义页面的默认语言。它可以被任何元素上的lang属性所覆盖。

    Pragma

    禁止浏览器从本地计算机的缓存中访问页面内容。如:

    <meta http-equiv="Pragma" content="no-cache">

    expires

    可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。

    cache-control

    指定请求和响应遵循的缓存机制。共有以下几种用法:

    no-cache: 先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。
    no-store: 不允许缓存,每次都要去服务器上,下载完整的响应。(安全措施)
    public : 缓存所有响应,但并非必须。因为max-age也可以做到相同效果
    private : 只为单个用户缓存,因此不允许任何中继进行缓存。(比如说CDN就不允许缓存private的响应)
    max-age : 表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。例如:max-age=60表示响应可以再缓存和重用 60 秒。

    content-security-policy

    允许页面作者定义当前页面的内容策略。内容策略主要指定允许的服务器地址和脚本端点,这有助于防止 cross-site scripting 攻击。

    CSP 的实质就是白名单制度,开发者明确告诉客户端,哪些外部资源可以加载和执行,等同于提供白名单。它的实现和执行全部由浏览器完成,开发者只需提供配置。

    CSP 大大增强了网页的安全性。攻击者即使发现了漏洞,也没法注入脚本,除非还控制了一台列入了白名单的可信主机。 两种方法可以启用 CSP。一种是通过 HTTP 头信息的 Content-Security-Policy的字段。

    Content-Security-Policy: script-src 'self'; object-src 'none';

    style-src cdn.example.org third-party.org;child-src https:


    <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">


    上面代码中,CSP 做了如下配置:

    脚本:只信任当前域名
    标签:不信任任何URL,即不加载任何资源
    样式表:只信任 cdn.example.org和 third-party.org
    框架(frame):必须使用HTTPS协议加载
    其他资源:没有限制
    启用后,不符合 CSP 的外部资源就会被阻止加载。

    更多介绍可见:Content Security Policy 入门教程

    content-type(已过时)

    定义文档的MIME类型,后跟其字符编码。

    不要使用这个值,因为它已经过时了。推荐使用元素上的charset属性。
    由于无法在XHTML或HTML5的XHTML序列化中更改文档类型,因此不要使用将MIME类型设置为 XHTML MIME类型。
    refresh

    该指令指定:

    如果content属性只包含一个正整数,则表示该页面重新加载的秒数。
    如果content属性包含一个正整数,后跟字符串'; url =',那么表示当前页面XX秒后重定向到另一个有效的URL。

    robots

    robots用来告诉爬虫哪些页面需要索引,哪些页面不需要索引。



    Used By


    index 允许robot索引本页面(默认) All

    noindex 不允许robot索引本页面 All

    follow 允许搜索引擎继续通过此网页的链接索引搜索其它的网页(默认) All

    nofollow 搜索引擎不继续通过此网页的链接索引搜索其它的网页 All

    none 相当于noindex,nofollow Google

    noodp 禁止使用Open Directory Project描述(如果有的话)作为搜索引擎结果中的页面描述。 Google, Yahoo, Bing

    noarchive 要求搜索引擎不缓存页面内容 Google, Yahoo, Bing

    nosnippet 禁止在搜索引擎结果中显示该页面的任何描述。 Google, Bing

    noimageindex 要求此页面不作为引用页面的索引图像的显示。 Google

    nocache 和noarchive同义 Bing

    viewport

    提供了关于viewport初始大小的大小的提示。仅供移动设备使用。

    相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    相关阅读:

    怎样在HTML网页中插入视频

    怎样做出HTML文本框只读效果

    怎样让前端界面自动清理js、css文件的缓存

    以上就是HTML5的WEB界面中meta实列详解的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:HTML5 meta web
    上一篇:HTML的meta标签应该如何使用 下一篇:HTML的基础控件有哪些
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• ExtJs教程11• 为什页面总是在分?中显示_html/css_WEB-ITnose• div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox)_html/css_WEB-ITnose• 求助网页切图后替换的问题_html/css_WEB-ITnose• bootstrap问题 高手在哪里?_html/css_WEB-ITnose
    1/1

    PHP中文网