meta标签、利用媒体查询 link不同的CSS文件

利用媒体查询 link不同的CSS文件:<link rel="stylesheet" media="screen and (min-width:1px) and (max-width:500px)" href="/css/d1.css" /><link rel="stylesheet" media="screen and (min-width:500px)" href="/css/d2.css" />
 meta标签:<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" />

meta是html语言head区的一个辅助性标签。meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等。meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性。1、name属性 

A、Keywords(关键字)  

说明:keywords用来告诉搜索引擎你网页的关键字是什么。 

举例:<metaname="keywords"content="信息参数"> 

B、description(网站内容描述) 

说明:description用来告诉搜索引擎你的网站主要内容。 

举例:<metaname="description"content="信息参数"> 

C、robots(机器人向导) 

说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。 

content的参数有all,none,index,noindex,follow,nofollow。默认是all。 

举例:<metaname="robots"content="none"> 

D、author(作者) 

说明:标注网页的作者 

举例:<metaname="author"content="root,[email protected]"> 

2、http-equiv属性 
使用带有 http-equiv 属性的 <meta> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。

A、Expires(期限) 

说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。 

用法:<metahttp-equiv="expires"content="Fri,12Jan200118:18:18GMT"> 

注意:必须使用GMT的时间格式。 

B、Pragma(cache模式) 

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

用法:<metahttp-equiv="Pragma"content="no-cache"> 

注意:这样设定,访问者将无法脱机浏览。 

C、Refresh(刷新) 

说明:自动刷新并指向新页面。 

用法:<metahttp-equiv="Refresh"content="2;URL=http://www.jb51.net">(注意后面的引号,分别在秒数的前面和网址的后面) 

注意:其中的2是指停留2秒钟后自动刷新到URL网址。 

D、Set-Cookie(cookie设定) 

说明:如果网页过期,那么存盘的cookie将被删除。 

用法:<metahttp-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/"> 

注意:必须使用GMT的时间格式。 

E、Window-target(显示窗口的设定) 

说明:强制页面在当前窗口以独立页面显示。 

用法:<metahttp-equiv="Window-target"content="_top"> 

注意:用来防止别人在框架里调用自己的页面。 

F、content-Type(显示字符集的设定) 

说明:设定页面使用的字符集。 

用法:<metahttp-equiv="content-Type"content="text/html;charset=gb2312"> 

G、content-Language(显示语言的设定) 

用法:<metahttp-equiv="Content-Language"content="信息参数"/> 

H、Cache-Control指定请求和响应遵循的缓存机制

在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached,响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。
 
时间: 2024-12-29 10:01:30

meta标签、利用媒体查询 link不同的CSS文件的相关文章

响应式设计:媒体查询

媒体查询可以让我们根据设备显示的特性为其设定CSS样式.可以在不改变页面内容的情况下,为特定的一些输出设变指定显示效果. 一.媒体查询语法 1.<link>标签:通过link标签的media属性为样式表指定设备类型,例如: 以下代码表示媒体类型是显示屏,媒体特性为显示屏纵向放置,此时才引入cssy样式 <link rel="stylesheet" type="text/css" media="screen and (orientation

媒体查询-全面学习

以前总是心里想,媒体查询很简单,几个查询然后给个单独的样式就ok了,但当实际解决其问题来的时候,似乎下手有点艰难,所以今天特地来全面学习了解并记录下. 首先,css2的媒体查询与css3有区别的,我这里表述似乎有问题,css2应该叫媒介查询,什么是媒介查询,比如: 1 <link rel="stylesheet"<span style="color: #ff0000;"> media="screen"</span>

常见布局、媒体查询

常见布局实现: 作者:Sweet_KK 链接:https://juejin.im/post/5aa252ac518825558001d5de 来源:掘金 一.水平居中 文本/行内元素/行内块元素居中 #parent{ text-align: center; } ==text-align== 只控制行内内容(文字.行内元素.行内块元素)如何相对于他的块父元素对齐 优缺点 优点:简单快捷,容易理解,兼容性非常好 缺点:只对行内内容有效:属性会继承影响到后代行内内容:如果子元素宽度大于父元素宽度则无效

0082 rem适配方案:less+rem+媒体查询、flexible.js+rem

1.让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备. 2.使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化,元素尺寸也会发生变化,从而达到等比缩放的适配. 技术方案: 1.less+rem+媒体查询 2.flexible.js+rem 总结: 两种方案现在都存在,方案2 更简单,现阶段无需了解里面的js代码. rem实际开发适配方案1 ①假设设计稿是750px ②假设我们把整个屏幕划分为15等份(划分标准

CSS基础教程 -- 媒体查询屏幕适配

响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受min和max用于表达"大于或等于"和"小与或等于".如:width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML

移动设备上的媒体查询 CSS media queries for mobile device

现在试图解决android平板的屏幕分辨率问题,目前主要想到的办法是采用响应式设计和媒体查询,发现无论使用那种方式,工作量都很大,调试都困难,悲催啊. CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这里 非常棒的一篇文章 关于CSS media queries想了解更多,参看这里 如何使用Media Queries媒体查询: 媒体查询就像是一个C

响应式设计——媒体查询

一.响应式设计 响应式设计的概念是页面的设计应根据用户的行为(如调整浏览器窗口大小)和设备环境(如屏幕大小.屏幕定向)进行相应的调整.它可以由多方面组成,包括弹性网格和布局.弹性图片.媒体查询等. 二.媒体查询      2.1媒体查询的概念         在css2中允许使用media来对特定的媒体应用特定的样式,例如针对屏幕或者打印机.可以通过<link>标签的media属性为样式表指定特定的媒体. <link rel="stylesheet" type=&qu

响应式网页之媒体查询

由于现在的网页要兼容各种pc尺寸及ipad甚至手机屏幕,所以响应式的网页变得尤为重要.手写响应式网页,具体技术点有: 1.声明viewport元标签(响应式网页必备) <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> width - viewport的宽度 height - viewport的高度 initial-scale - 初

详解css媒体查询

简介 媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的语法. Media Queries 的引入,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备.(1) 既然媒体查询是用于控制样式的,而样式的使用无外乎如下几种规则: 使用link引入 使用style标