html中的mata标签的作用

最新推荐文章于 2024-08-21 11:23:23 发布

原创最新推荐文章于 2024-08-21 11:23:23 发布 · 1.6k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#meta标签

前端专栏收录该内容

23 篇文章

订阅专栏

本文深入解析HTML中的元信息标签，包括DOCTYPE、html、meta等标签的详细用途与属性，如charset、name、content、http-equiv等，以及它们如何影响页面显示、搜索引擎优化和移动端适配。

标签介绍

首先是页面最上方的<!DOCTYPE html>标签。
<!DOCTYPE html>标签不属于html标签，是一种对web浏览器声明。作用是指示web浏览器页面使用了哪个html版本
<html lang="en"> or <html lang="zh-CN"> html标签中的lang表示页面使用的语言，en为英语，zh-CN为中文
<meta>标签详情
首先<mata>标签有四种属性:
1. charset
2. name
3. content
4. 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">

--------------------- 
作者：荷花微笑 
来源：优快云 
原文：https://blog.youkuaiyun.com/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"＞用来防止别人在框架里调用自己的页面。