最近，看《Mastering Integrated HTML and CSS》时，在"为适应搜索引擎而调整网站"一节简要介绍了meta>标签。不过，介绍比较粗略。...Meta标签放在每个网页的......Name主要用于描述网页, 对应于content, 以便于搜索引擎查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找Meta值来给你的网页分类）。...Http-equiv 顾名思义相当于http文件头的作用，可以直接影响网页的传输。...，这个功能即Frontpage98,2000的format/page transition.不过注意所加网页不能是一个frame页; 3、强制网页不被存入cache中 meta http-equiv
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局...），用户可以通过平移和缩放来看网页的不同部分。...移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。...Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： meta name="viewport" content="width=device-width..., initial-scale=1, maximum-scale=1"> width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度
Meta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。...我现将前端页面开发经常用到的meta标签内容整理成文，加入了移动端web开发meta信息，供需要时查阅。 ?...utf-8" /> 该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ，就是万国码。...--指示IE以目前可用的最高模式显示内容--> 3、SEO优化相关 页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。...meta name="description" content="不超过150个字符" /> 页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字。
Meta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。...我现将前端页面开发经常用到的meta标签内容整理成文，加入了移动端web开发meta信息，供需要时查阅。...-8"> 该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ，就是万国码。...3、SEO优化相关 meta name="description" content="不超过150个字符"> 页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。...meta http-equiv="Expires" contect="Mon,12 May 2016 00:20:00 GMT"> 设定网页的到期时间，一旦过期则必须到服务器上重新调用，需要注意的是必须使用
到Safari偏好设置里-高级-菜单栏里勾选开发选项就可以了 3.png ️：可以在搜索框里快速找到要修改的标签元素。 4.png ️：上演示效果 效果预览.gif
二、meta 视口标签参数详解 - 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例 / 最大缩放比例 ---- 在如下的 meta 标签中 : meta name="viewport...网页宽度 为 980 像素 , 所有的标签元素都是在 980 像素宽度的网页中显示 ; 推荐视口标签写法 : 所有的手机端网页都设置如下样式 ; meta name="viewport" content...视口标签代码示例 ---- 1、不设置 meta 视口标签代码示例 如果 不设置 meta 视口标签 , 在移动端 默认的 网页宽度 为 980 像素 , 所有的标签元素都是在 980 像素宽度的网页中显示...980 像素宽度的网页中显示 ; body 中的文本 会缩小到很小的大小 ; 2、设置 meta 视口标签代码示例 设置 meta 视口标签 , 在移动端 默认的 网页宽度 为 设备宽度 ,...是理想视口 ; body 中的文本 显示正常 ; 推荐视口标签写法 : 所有的手机端网页都设置如下样式 ; meta name="viewport" content="width=device-width
页面中常用的meat标签总结 字符编码：声明文档使用的字符编码 相对于这种方式，更推荐你（推荐使用HTML5的声明方式）。...(cookie设定） 如果网页过期，那么存盘的cookie将被删除。...meta http-equiv="window-target" content="_top"/> Keywords（关键字） 用来告诉搜索引擎你网页的关键字是什么(这个关键字的设定对于整个页面的SEO...一般来说我们会根据当前页面所展示的内容来设定一组关键词语，这样用户在网上进行搜索的时候，搜索引擎会把拥有或者靠近相关关键词的页面呈现给用户，以达到产品推广的作用(当然这个需要长期的SEO/SEM等运营推广才会让自己的网页在搜索出的结果中靠前..." content="10 days"/> 声明网页的作者信息 meta name="author" content="zhangxiaohuan@qq.com"/>
移动端网页在用户双击屏幕时会变大，导致整个页面的布局错误，非常 影响最终效果，下面介绍一种通过html的meta标签来阻止该现象发生的办法。...二、解决办法和原理 1.首先设置网页的DOCTYPE 1 2 3 .... 4 2.在网页的 head 之中添加 viewport meta 标签，如下所示： 1 meta name="viewport...initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。 user-scalable=no在移动设备浏览器上可以禁用其缩放（zooming）功能。 ...这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。 三、总结 这样设置完成以后，我们就完成了阻止移动设备上双击导致网页放大以致网页布局错乱的问题，有木有很开心？
大家好，又见面了，我是你们的朋友全栈君。 META标签用来描述一个HTML网页文档的属性 META标签可分为两大部分：HTTP-EQUIV和NAME变量。...需要注意的是必须使用GMT时间格式； 4、meta http-equiv=”Pragma”content=”no-cache”>是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从...，而网站的限制级别就是通过meta属性来设置的； 7、强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个...，这个功能即FrontPage中的“格式/网页过渡“，不过所加的页面不能够是一个frame页面。...HTTP-EQUIV其实并不仅仅只有说明网页的字符编码这一个作用，常用的HTTP-EQUIV类型还包括：网页到期时间、默认的脚本语言、默认的风格页语言、网页自动刷新时间等。
--> meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">meta标签须放在head标签最前面;其它head内容放在其后面，如link标签--> 的放在文档 --> 标签的内容 --> 的代码片段的一部分。...-- 地理标签 --> meta name="ICBM" content="latitude, longitude"> meta name="geo.position" content="latitude
5.网页加载慢导致CSS文件还未加载时（没有CSS），页面仍然清晰、可读、好看。 语义化标签有啥缺陷 兼容性差 meta viewport 是做什么用的，怎么写？...该meta标签的作用是让当前viewport的宽度等于设备的宽度 meta name="viewport" content="width=device-width,initial-scale=1">...meta viewport 的6个属性： width设置layout viewport的宽度，为一个正整数，或字符串"width-device" initial-scale设置页面的最大缩放值，为一个数字...，从而去计算出每个节点在屏幕中的位置 painting 绘制 reflow 回流 repaint 重绘 改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变...，屏幕的一部分要重画，但是元素的几何尺寸没有变。
同时，还可以使用meta标签来指定布局视口的大小和缩放比例，例如：meta name="viewport" content="width=device-width, initial-scale=1.0..."> , 该标签的作用是告诉浏览器，网页的宽度应该等于设备的宽度，并且初始缩放比例应该为1.0。...下图中 , 在下面的 视觉视口 中 , 网页只能被看到一部分区域 ; 3、理想视口 ( 网页大小 = 设备大小 ) 理想视口 - Ideal Viewport 指的是指在浏览器中，使 网页布局 和 显示最佳的视口大小...为了设置理想视口，可以 使用 meta 标签来指定视口大小和缩放比例， 例如 : 设置 meta name="viewport" content="width=device-width, initial-scale...通过设置正确的 meta 标签，可以使网页在不同设备上具有相同的理想视口大小和布局。
meta 标签知多少 meta 标签提供该页面的一些信息，比如针对搜索引擎和更新频度的描述和关键词，它还可以控制页面缓冲、响应式窗口等，定义 meta 标签有利于网站 SEO（有利于搜索引擎访问），对于响应式窗口也起着作用...，因此 meta 标签是 HTML 中很重要的一个标签。...在生成默认的 HTML 文档结构时，通常会有两个 meta 标签： meta charset="UTF-8"> meta name="viewport" content...="width=device-width, initial-scale=1.0"> 通过上面可以看到，meta 元素不用闭合，有一个开始标签就可以了，因为 meta 并不在网页上展示内容...用了Meta Property=og标签，就是你同意了网页内容可以被其他社会化网站引用等，目前这种协议被 SNS 网站（社交网站）如 Fackbook、renren 采用。
现代网页开发中， 标签是一个非常重要的工具。允许我们在一个网页中嵌入另一个网页，对于展示外部内容、应用嵌套或实现复杂的布局设计都非常有用。...一、了解 标签 标签是 HTML5 中的一部分，用于嵌入另一个 HTML 页面到当前页面中。...DOCTYPE html> meta charset="UTF-8"> meta name="viewport" content="width...DOCTYPE html> meta charset="UTF-8"> meta name="viewport" content="width...DOCTYPE html> meta charset="UTF-8"> meta name="viewport" content="width
1.meta标签的定义 meta标签是head部的一个辅助性标签，提供关于 HTML 文档的元数据。它并不会显示在页面上，但对于机器是可读的。... 2.meta标签的作用 meta标签里的数据是供机器解读的，其主要作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价...，控制网页显示的窗口等等。... 3.meta标签的可选属性（带(#)的为 HTML5 中的新属性） 属性 值 描述 charset(#) character_set 定义文档的字符编码。...-- 定义网页搜索引擎索引方式 --> meta name="robots" content="index,follow"/> <!
format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有以下几个设置： meta name...="format-detection" content="telephone=no" meta name="format-detection" content="email=no" meta name=...=no,adress=no" 下面具体说下每个设置的作用： 一、telephone 你明明写的一串数字没加链接样式，而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！...这时我们的meta又该大显神通了，代码如下： telephone=no就禁止了把数字转化为拨号链接！...adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启！
-- 注释内容 --> 注意：注释内容不会显示在浏览器中，但是作为 HTML文档内容的一部分，注释标签可以被用户看见，所以在注释中一定要写正能量的内容 为什么使用单标签？...而单标签本身就可以描述一个功能，不需要选择。 1.2.2 标签的关系 在网页中会存在多种标签，各标签之间都具有一定的关系。标签的关系主要是嵌套关系和并列关系。...2.2 标题标签（h1~h6） 为了是网页具有语义化，我们经常会在页面中用到标题标签。HTML 提供了6个等级的网页标题标签，即~，每个标签的重要性依次递减。...网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接. 影响.
正文 一、meta标签的总结 keywords,description(经常用到的两个) 页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’逗号隔开 meta name="keywords..." content="HTML,CSS,JAVASCRIPT,PHP"> meta name="description" content="html meta标签大全,整理一下加强记忆"> Content-Type...简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的...这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。...http-equiv="refresh" content="5;url=https://www.wujiabk.com"/> full-screen 全屏显示网页(部分移动端浏览器的专有属性) meta
图片 1.6 利用锚文本提升网站的收录 图片 1.7 网站高阶栏目打造 图片 1.8 网站描述的书写规格 图片 2 Meta标签优化 Meta description标签会给搜索引擎提供关于当前网页的描述...Type 此标签用于声明网页字符编码，不会影响排名和点击率（CTR）,推荐放到最前面。...-- 每隔30s自动刷新,跳转其他网页 --> meta name="refresh" content="30", url="" /> 2.7 内核控制标签 renderer 内核...2.11 Cache-Control 主要用于控制网页发送给服务器的referrer信息，可以告诉服务器端用户是从哪个页面来到当前网页的。 的不识别viewport的浏览器，比如黑莓 --> meta name="HandheldFriendly" content="true"> <!
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
