html中的mata标签的作用
标签介绍
- 首先是页面最上方的
<!DOCTYPE html>
标签。
<!DOCTYPE html>
标签不属于html标签,是一种对web浏览器声明。作用是指示web浏览器页面使用了哪个html版本 <html lang="en"> or <html lang="zh-CN">
html标签中的lang表示页面使用的语言,en
为英语,zh-CN
为中文<meta>
标签详情
首先<mata>
标签有四种属性:charset
name
content
http-equiv
相关属性
- charset:
<meta charset="UTF-8">
页面中的必须标签,说明页面是UTF-8格式,防止乱码。 - name:
<meta name="属性" content="属性值">
name属性主要用于描述网页,content中为属性对应的属性值,content中的属性值主要是便于搜索引擎机器人查找信息和分类信息用的。
name的属性参数主要有:Keywords(关键字)
说明:keywords为搜索引擎提供网站的关键字
eg:<meta name="keywords" content="视频,视频分享,视频搜索,视频播放,优酷视频">
视频,视频分享,视频搜索,视频播放,优酷视频都为关键字
description(网站内容描述)
说明:description为搜索引擎提供网站主要内容。
eg:<meta name="description" content="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享">
author(作者)
说明:标注网页的作者
eg:<meta name="author" content="Dodomun">
application-name(应用程序名称)
说明:定义 应用程序 在网站中运行的的名称。
eg:<meta name="application-name" content="Application Name">
renderer(指定双核浏览器)
说明:默认以何种方式渲染页面。
eg:
<meta name="renderer" content="webkit">
//默认webkit内核
<meta name="renderer" content="ie-comp">
//默认IE兼容模式
<meta name="renderer" content="ie-stand">
//默认IE标准模式
<meta name="renderer" content="always">
//csdn这么写的
viewport(用于移动端页面控制)
说明:指定页面控制及缩放比例。
content中内容如下:
width | 设置layout viewport 的宽度,为一个正整数,或字符串"width-device" |
initial-scale | 设置页面的初始缩放值,为一个数字,可以带小数,通常为1.0 |
minimum-scale | 允许用户的最小缩放值,为一个数字,可以带小数 |
maximum-scale | 允许用户的最大缩放值,为一个数字,可以带小数 |
height | 设置layout viewport: 的高度,这个属性对我们并不重要,很少使用 |
user-scalable | 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许 |
target-densitydpi | 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个,此属性只有安卓设备支持,安卓已经逐渐放弃次属性 |
eg:<meta name="viewport" content="width=device-width, initial-scale=1.0">
name的一些其他属性参数:
<!-- 控制搜索引擎爬行和索引的行为 -->
<meta name="robots" content="index,follow,noodp"><!-- 所有搜索引擎 -->
<meta name="googlebot" content="index,follow"><!-- 谷歌 --><!-- 告诉谷歌搜索框不显示链接 -->
<meta name="google" content="nositelinkssearchbox"><!-- 告诉谷歌不要翻译这个页面 -->
<meta name="google" content="notranslate"><!-- Google网站管理员工具的特定元标记,核实对谷歌搜索控制台所有权 -->
<meta name="google-site-verification" content="verification_token"><!-- 说明用什么软件构建生成的网站,(例如,WordPress,Dreamweaver) -->
<meta name="generator" content="program"><!-- 简短描述你的网站的主题 -->
<meta name="subject" content="your website's subject"><!-- 很短(10个词以内)描述。主要学术论文 -->
<meta name="abstract" content=""><!-- 完整的域名或网址 -->
<meta name="url" content="https://example.com/"><meta name="directory" content="submission"><!-- 对当前页面一个等级衡量,告诉蜘蛛当前页面在整个网站中的权重到底是多少。General是一般页面,Mature是比较成熟的页面,Restricted代表受限制的。 -->
<meta name="rating" content="General"><!-- 隐藏发送请求时请求头表示来源的referrer字段。 -->
<meta name="referrer" content="no-referrer"><!-- 禁用自动检测和格式的电话号码 -->
<meta name="format-detection" content="telephone=no">---------------------
作者:荷花微笑
来源:CSDN
原文:https://blog.csdn.net/qq_35432904/article/details/81808358
版权声明:本文为博主原创文章,转载请附上博文链接!<hr/>
3. http-equiv :
<meta http-equiv="X-UA-Compatible" content="ie=edge">
http-equiv作用与http协议头文件相似,主要属性参数有:
content-Type(显示字符集的设定)
说明:设定页面使用的字符集。
eg:<meta http-equiv="content-Type" content="text/html;charset=utf-8">
Expires(期限)
说明:设定网站的到期时间。一旦网页过期,必须到服务器上重新传输。
eg:<meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT">
注意:必须使用GMT的时间格式。
Pragma(cache模式)
说明:禁止浏览器从本地计算机的缓存中访问页面内容。
用法:<meta http-equiv="Pragma" content="no-cache">这样设定,访问者将无法脱机浏览。
Refresh(刷新)
说明:自动刷新并指向新页面。
用法:<meta http-equiv="Refresh" content="2; URL=http://www.root.net">
注意:其中的2是指停留2秒钟后自动刷新到URL网址。
Set-Cookie(cookie设定)
说明:设置cookie, 如果网页过期,那么存盘的cookie将被删除。
用法:<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT; path=/">
注意:必须使用GMT的时间格式。
Window-target(显示窗口的设定)
说明:强制页面在当前窗口以独立页面显示。
用法:<meta http-equiv="Window-target" content="_top">
用来防止别人在框架里调用自己的页面。
其他:
除了上述讲到的meta属性外,还有一些网站自己设定(我看不懂的)的属性。
如 git官网 中:
完了
html中的mata标签的作用相关推荐
- html中的mata标签详解
总是有很多朋友问我<meta name="author" content"xxxxx"><meta http-equiv="xx&q ...
- MyBatis中动态SQL标签及作用
注意:动态 SQL 主要是来解决查询条件不确定的情况,在程序运行期间,根据提交的条件动态的完成查询. 1.<if> 标签 if 是为了判断传入的值是否符合某种规则,可以让我们有选择的加入 ...
- latex中的\label标签的作用
\label可以给一个公式,一个章节,一个图片,一个表格打上标签,然后使用\ref进行引用,不过引用的是一个数字标号. 看个例子. \documentclass{article}\begin{docu ...
- html语言head的作用,html中的head标签在哪里找?head标签的作用总结
本篇文章主要的介绍了关于HTML中的head标签的作用及元素介绍,还说明了HTML中的head标签在哪里能查看到,接下来就让我们一起来看文章吧 首先我们先了解HTML中的head标签在哪里找? hea ...
- html打开新窗口设置窗口属性,HTML之:让网页中的a标签属性统一设置-如‘新窗口打开’...
在开发过程中,我们往往想在页面中,给设置一个统一的默认格式,例如我们想让链接:"在新窗口打开",我们就可以使用标签 在网页中添加这段代码: [注解] 标签为页面上的所有链接规定默认 ...
- java中写html标签,java写html剔出标签
java写html剔出标签 [2021-02-04 19:54:11] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace("/ ...
- java输出中写html标签,java 输出html标签
java 输出html标签 [2021-02-01 07:37:44] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace("/ ...
- 浅析SEO优化中标签的作用?
目前,已经有很多企业网站有专门的优化人员来进行SEO优化,在网站SEO优化的过程中会使用到很多标签来利于搜索引擎的读取,提升网站的排名和权重.就以大连网龙科技旗下产品云霸屏为例来讲,云霸屏作为一款全网 ...
- HTML5中常用的标签(及标签的属性和作用)
1.标签:<!DOCTYPE> 作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html> 作用:此元素可告知浏览器其自身是一个HTML文档. ...
最新文章
- 六种方式,教你在SpringBoot初始化时搞点事情!
- ElasticSearch大数据分布式弹性搜索引擎使用
- chrome 浏览器自保留端口、安全端口有哪些?chrome不能访问某个端口的环境网址,但是其它的浏览器可以访问原因及解决办法
- label美化css,表单label美化代码
- 3高并发服务器:多路IO之epoll
- el-table中合并行加入图标
- if/else双分支(JS)
- 工具的使用——谷歌浏览器(chrome)
- OpenvSwitch readme faq
- python newbie——PE No.3
- 移动**21*设置无法接通_手机通话质量不好?你可能只差一步设置!
- 惠普136a芯片清零_怎么把惠普打印机芯片清零
- 对联广告php代码,JS实现很实用的对联广告代码(可自适应高度)
- 安装脚本实现百度云播放视频加速
- 钟道隆逆向英语学习法—乐在英语中
- android 控件发光_Android自定义View之边框文字、闪烁发光文字
- ckplayer html5 添加广告,ewebeditor下利用ckplayer增加html5 (mp4)全平台的支持
- Windows下的JavaFX桌面应用程序打包ABC
- [译] 开发者(也就是我)与Rx Observable 类的对话 [ Android RxJava2 ] ( 这到底是什么?) 第五部分...
- 心理学实验学习pygame编程-贪吃蛇(2)