Html-5的meta标签

已于 2022-03-28 16:02:39 修改
阅读量478 收藏
点赞数
文章标签： node.js
于 2022-03-28 15:14:19 首次发布
whqbg
本文链接：https://blog.csdn.net/heiyanmin/article/details/123795875
版权 
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- 声明文档使用的字符编码 -->
        <meta charset="utf-8">
        <title>html5的meta</title> 
    </head>
    <body>
        <div>
            <em>斜体（语义）：（em）</em><br>
            <strong>加粗（语义）：（strong）</strong><br>
            <i>斜体字（i）</i><br>
            <b>粗体字（b）</b><br>
            <u>下划线（u）</u><br>
        </div>
        <div>
            <h3>meta是什么</h3>
            <p>用于描述数据的数据。它不会显示在页面上，但是机器却可以识别</p>
            <p>meta常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务</p>
            <p>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词</p>
            <p>除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。</p>

            <h3>meta的必须属性和可选属性</h3>
            <p>必须属性是content，当然并不是说meta标签里一定要有content，而是当有”http-equiv“或者“name”的时候，一定要有content属性进行说明</p>
            <h4>name属性</h4>
            <h5>name属性,页面关键词,规定一个逗号分隔的关键词列表 - 相关的网页（告诉搜索引擎页面是与什么相关的）。</h5>
            <meta name="keywords" content="个人活动发布，会办app，活动管理，会议管理，社群管">
            <h5>name属性,页面描述,规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。</h5>
            <meta name="description" content="发布个人会议，发布公司会议，w我们都可以帮你找到合适的会议地点和参会观众">
            <h5>name属性,作者,	规定文档的作者的名字。</h5>
            <meta name="author" content="WeiHuiQiang,weihuiqiang@csii.com.cn">
            <h5>name属性,禁止百度转码。百度是会自动进行转码的</h5>
            <meta name="Cache-Control" content=no-siteapp>
            <h5>name属性,禁止谷歌自动提示翻译。</h5>
            <meta name="google" value=“notranslate”>
            <h5>name属性,影响移动端页面布局。</h5>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">


            <h4>http-equiv属性</h4>
            <h5>页面重定向和刷新,每三秒刷新</h5>
            <meta http-equiv="Refresh" content="3"/>
            <h5>页面重定向和刷新,三秒后跳入百度</h5>
            <!-- <meta http-equiv="Refresh" content="3;url=http://baidu.com"/> -->
            <h5>声明文档使用的字符编码,效果与上面等同</h5>
            <!-- <meta http-equiv="content-type" content="text.html;charset=utf-8"/> -->

            <h2>各浏览器平台</h2>
            <h3>Google Chome</h3>
            <h4>优先使用最新的Chome版本</h4>
            <!-- <meta http-equiv="X-UA-Compatible" content="chrome=1"/> -->
            <h4>禁止谷歌自动提示翻译。</h4>
            <!-- <meta name="google" value=“notranslate”> -->
            <h3>360浏览器</h3>
            <h4>选择浏览器内核进行解析</h4>
            <!-- <meta name="renderer" content="webkit|ie-comp|ie-stand"> -->
            <h3>UC手机浏览器</h3>
            <h4>将屏幕锁定在特定的方向</h4>
            <!-- <meta name="screen-orientation" content="landscape/ portrait"> -->
            <h4>全屏显示页面</h4>
            <!-- <meta name="full-screen" content="yes"> -->
            <h4>强制图片显示，即使是"text mode"</h4>
            <!-- <meta name="imagemode" content="force"> -->
            <h4>应用模式，默认将全屏，禁止长按菜单，禁止手势，标准排版，强制图片显示。</h4>
            <!-- <meta name="browsermode" content="application"> -->
            <h4>禁止夜间模式显示</h4>
            <!-- <meta name="nightmode" content="disable"> -->
            <h4>使用适屏模式显示</h4>
            <!-- <meta name="layoutmode " content="fitscreen" > -->
            <h4>当页面有太多文字时禁止缩放</h4>
            <!-- <meta name="wap-font-scale" content="no" > -->
            <h3>QQ手机浏览器</h3>
            <h4>将屏幕锁定在特定的方向</h4>
            <!-- <meta name="x5-orientation" content="landscape/portrait"> -->
            <h4>全屏显示页面</h4>
            <meta name= "x5-fullscreen" content="true">
            <h4>页面将以应用模式显示</h4>
            <!-- <meta name="x5-page-mode" content="app"> -->
            <h1>移动端常用的meta</h1>
            <h4>删除苹果默认的工具栏和菜单栏</h4>
            <!-- <meta name="apple-mobile-web-app-capable" content="yes" /> -->
            <h4>忽略页面中的数字识别为电话，忽略email识别</h4>
            <!-- <meta name="format-detection" content="telphone=no,email=no"/> -->
            <h4>设置苹果工具栏额色</h4>
            <!-- <meta name="apple-mobile-web-app-status-bar-style" content="black" />  -->
            <h4>启用360浏览器的极速模式(webkit)</h4>
            <!-- <meta name="renderer" content="webkit">  -->
            <h4>避免IE使用兼容模式</h4>
            <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">  -->
        </div>
        
    </body>
</html>

补充
1.name属性补充
name属性补充
2.viewport属性补充
在这里插入图片描述
在这里插入图片描述

滑稽的
关注
H5之meta介绍
qq_20411471的博客
01-05 2940
一、什么是H5 是因为现代浏览器支持H5，所以HTML页面可以使用H5独特的元素标签，然后这个页面就是H5页面。 二、meta元素 <meta> 标签是 HTML 语言头部的一个辅助性标签，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等！ 2.1、viewport 说到移动平台meta标签，那就不得不说一下viewport了，那么什么是viewport呢? viewport即可视区域，对于桌面浏览器而言，viewport指的就是除去所有工具
h5 meta标签大全
付博瀚
06-24 2105
&lt;!DOCTYPE html&gt; H5标准声明，使用 HTML5 doctype，不区分大小写 &lt;head lang=”en”&gt; 标准的 lang 属性写法 &lt;meta charset=’utf-8′&gt; 声明文档使用的字符编码 &lt;meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=...
html5手机页面的那些meta
最新发布
m0_69296336的博客
07-19 985
link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />Retina iPad，144x144 像素，可以没有，推荐大家使用。DOCTYPE> 指令确定如何呈现内容。设置状态栏的背景颜色。
H5页面的meta标签
Owen的博客
01-21 379
&lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimal
HTML5 之 Meta 标签
黄某人的爬坑之路
02-03 1886
mtea元素用于指定页面的信息和部分行为。通常用于指定网页的描述，关键字等。可以被使用浏览器、搜索引擎或其他 Web 服务调用。
HTML5 meta详解
AndrewNeo
05-19 569
meta指元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> <!-- 优先使用 IE 最新版本和 Chrome --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <!-- 页面描述 --
前端基础-HTML(meta标签)
01-08
meta标签 1.编码 示意图 这种情况就是乱码，是因为我们输入的中文，往计算机中保存的时候，最终都要转成2进制的数据形式，也就是说有一个编码的过程，在保存文件的时候默认使用的是ANSI编码格式，浏览器...
html-meta-tags-hero:HTML Meta标签完整列表的摘要，使您的网站排名第一
05-12
HTML Meta标签完整列表的摘要，使您的网站排名第一 用法 只需输入meta的名称即可生成代码示例：为meta视口生成代码 < meta name = " viewport " content = " width = device-width " > 你需要写视口 基本...
移动端html5 meta标签的神奇功效
12-14
在移动端HTML5开发中，Meta标签扮演着至关重要的角色，它们可以帮助优化网页在移动设备上的显示效果，提高用户体验，同时也有利于搜索引擎优化（SEO）。本文将深入探讨移动平台的Meta标签，尤其是viewport、format-...
详解vue-meta如何让你更优雅的管理头部标签
01-19
在 Vue SPA 应用中，如果想要修改HTML的头部标签，或许，你会在...// 修改meta信息，或者给html标签添加属性... // 此处省略一大坨代码... 今天给大家介绍一种更优雅的方式，去管理头部标签 vue-meta vue-meta介绍 Man
前端的学习之路：初级HTML---meta标签
weixin_44647555的博客
02-01 796
meta标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>meta标签</title> </head> <body> <!--
Html5 meta标签用法总结
liuqi332922337的专栏
01-12 1882
最近测试html5页面，发现默认都允许用户缩放页面，或者在屏幕双击放大或缩小。即相当于这样设置 <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes"/> 如果要禁止此情形，修改相应参数即可。 <meta content="width=device-width, initial-s
关于h5中meta标签的简单认识(1)
qq_29422319的博客
03-03 411
以京东为例: meta主要用于设置网页的元数据,所谓的元数据,就是给机器看的,不是给用户阅读的. charset = "utf-8" 表示网页的字符集翻译,utf-8 可以理解为世界通用字符标准
HTML H5页面中那些meta 属性
前端的路上
08-02 4460
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;!DOCTYPE&gt; 声明必须是 HTML 文档的第一行，位于 &lt;html&gt; 标签之前。 &lt;!DOCTYPE...
整理 H5 meta 标签的详解
一直专注于互联网
03-21 324
 持续会添加一些新的内容： &lt;meta charset="UTF-8"&gt; &lt;!-- 设置 H5 的编码格式 charset 是字符集的意思 设置 UTF-8 编码 需要使用 charset 为网页提供了一种编码方式，否则页面很可能出现乱码。 UTF-8 是一种字符编码，除此之外在国内网站常用的还有GB2312和GBK。 GB2312 和 GBK 主要用于汉字编...
html5中的meta标签用法详解
专注企业级视频应用，企业视频直播、MR虚拟直播、教育培训连麦直播
02-21 3207
移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。html5中的meta标签主要用于描述网页的元数据，它可以用于描述网页的标题、关键词、描述、作者、版权等信息，还可以用于设置网页的字符集、设置网页的刷新时间、设置网页的跳转页面等。
HTML5 ＜meta＞ 标签
thgj0006的博客
04-15 738
元数据（Metadata）是数据的数据信息。 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，当时会被浏览器解析。META元素通常用于指定网页的描述，关键词，的文件的最后修改，作者，和其他元数据。元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
h5手机网页的meta标签
vcxiaohan的博客
06-21 791
http://blog.csdn.net/cui55/article/details/41822339 习惯的格式： test * {margin: 0; padding: 0;} body, html { width: 100%; heig
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值