0

0

HTML5的WEB界面中meta实列详解

php中世界最好的语言

php中世界最好的语言

发布时间:2018-01-17 09:41:19

|

2049人浏览过

|

来源于php中文网

原创

这次给大家带来html5的web界面中meta实列详解,使用html5的web界面中meta的注意事项有哪些,下面就是实战案例,一起来看一下。

简介

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

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

mata 标签包含全局属性

立即学习前端免费学习笔记(深入)”;

charset

声明网页的字符编码:

content

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

http-equiv

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

content-language(已过时)

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

Pragma

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

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:

   

亿众购物系统
亿众购物系统

一套设计完善、高效的web商城解决方案,独有SQL注入防范、对非法操作者锁定IP及记录功能,完整详细的记录了非法操作情况,管理员可以随时查看网站安全日志以及解除系统自动锁定的IP等前台简介:  1)系统为会员制购物,无限会员级别。  2)会员自动升级、相应级别所享有的折扣不同。  3)产品可在缺货时自动隐藏。  4)自动统计所有分类中商品数量,并在商品分类后面显示。  5)邮件列表功能,可在线订阅

下载

上面代码中,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文件的缓存

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

520

2023.10.23

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

446

2024.03.06

html5从入门到精通汇总
html5从入门到精通汇总

想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

144

2025.12.30

html5新老标签汇总
html5新老标签汇总

HTML5在2026年持续优化网页语义化与交互体验,不仅引入了如<header>、<nav>、<article>、<section>、<aside>、<footer>等结构化标签,还新增了<video>、<audio>、<canvas>、<figure>、<time>、<mark>等增强多媒体与

170

2025.12.30

html5空格代码怎么写
html5空格代码怎么写

在HTML5中,空格不能直接通过键盘空格键实现,需使用特定代码。本合集详解常用空格写法:&nbsp;(不间断空格)、&ensp;(半个中文空格)、&emsp;(一个中文空格)及CSS的white-space属性等方法,帮助开发者精准控制页面排版,避免因空格失效导致布局错乱,适用于新手入门与实战参考。

92

2025.12.30

html5怎么做网站教程
html5怎么做网站教程

想从零开始学做网站?这份《HTML5怎么做网站教程》合集专为新手打造!涵盖HTML5基础语法、页面结构搭建、表单与多媒体嵌入、响应式布局及与CSS3/JavaScript协同开发等核心内容。无需编程基础,手把手教你用纯HTML5创建美观、兼容、移动端友好的现代网页。附实战案例+代码模板,快速上手,轻松迈出Web开发第一步!

164

2025.12.31

HTML5建模教程
HTML5建模教程

想快速掌握HTML5模板搭建?本合集汇集实用HTML5建模教程,从零基础入门到实战开发全覆盖!内容涵盖响应式布局、语义化标签、Canvas绘图、表单验证及移动端适配等核心技能,提供可直接复用的模板结构与代码示例。无需复杂配置,助你高效构建现代网页,轻松上手前端开发!

36

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

54

2025.12.31

包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法
包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法

本专题汇总了包子漫画官网和网页版入口,提供最新章节抢先看方法、正版免费阅读指南,以及稳定访问方式,帮助用户快速直达包子漫画页面,无广告畅享全集漫画内容。

50

2026.02.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
HTML5/CSS3/JavaScript/ES6入门课程
HTML5/CSS3/JavaScript/ES6入门课程

共102课时 | 7万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 10.8万人学习

前端开发(基础+实战项目合集)
前端开发(基础+实战项目合集)

共60课时 | 4.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号