meta标签 | 易学教程

常见的移动端Web页面问题解决方案

阅读更多关于常见的移动端Web页面问题解决方案

安卓浏览器看背景图片，有些设备会模糊用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样 devicePixelRatio＝2 ,现在android比较乱，有1.5的，有2的也有3的。想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100100，背景图必须得200200，然后 background-size:contain; ，这样显示出来的图片就比较清晰了。代码如下： background:url(../images/icon/all.png) no-repeat center center; -webkit-background-size:50px 50px; background-size: 50px 50px;display:inline-block; width:100%; height:50px; 或者指定 background-size:contain; 都可以，大家试试！图片加载若您遇到图片加载很慢的问题，对这种情况，手机开发一般用c anvas 方法加载：具体的canvas

清除浮动的7种方法

阅读更多关于清除浮动的7种方法

使用display：inline-block会出现的情况： 1.使块元素在一行显示 2.使内嵌支持宽高 3.换行被解析了 4.不设置的时候宽度由内容撑开 5.在IE6,7下步支持块标签由于inline-block属性换行的时候被解析（有间隙）故解决方法使用浮动float:left/right 使用浮动时出现的情况： 1.使块元素在一行显示 2.使内嵌元素支持宽高 3.不设置不宽高的时候宽度由内容撑开 4.换行不被解析（故使用行内元素的时候清除间隙的方法可以使用浮动） 5.元素添加浮动，会脱离文档流，按照指定的一个方向移动，直到碰到父级的边界或者另一个浮动元素停止（文档流是文档中可显示对象在排列时所占用的位置） 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 div,span{height:100px;background:red;border:1px solid #000; float:left;} 8 /* 9 inline-block 10 11 1.使块元素在一行显示 12 13 2.使内嵌支持宽高 14 15 3.换行被解析了 16 17 4

http-equiv是什么意思(转载)

阅读更多关于 http-equiv是什么意思(转载)

1.定义语言格式：〈meta http－equiv=〃Content－Type〃 content=〃text/html; charset=gb2312〃〉这是META最常见的用法,在制作网页时,在纯HTML代码下都会看到它,它起的作用是定义你网页的语言,当访客浏览你的网页时,浏览器会自动识别并设置网页中的语言,如果你网页设置的是GB码,而访客没有安装GB码,这时网页只会呈现访客人所设置的浏览器默认语言。同样的,如果该网页是英语,那么 charset=en。 2.描述网页格式: 〈meta name=〃Keywords〃 CONTENT=〃china,enterprise,business,net〃〉 META 也常用来描述网页,以供某些搜索站台机器人的使用。大家知道,搜索站台分为两大类,一类为完全人工登录,比如Yahoo；另一类为机器人搜索,以机器人搜索的搜索站台会包含更多的内容。机器人会搜索网页META标签中所设置的描述关键字,把它们加入到搜索数据库中,用来索引你的网页。而这个标签很少有人注意到。在格式中,Content列出了你所设置的关键字,这其中的内容可以自行设置,其间用逗号相隔。这里有个技巧,你可以重复某一个单词,这样可以提高自己网站的排行位置,如：〈meta name=〃Keywords〃 CONTENT=〃china,china,china

CSS响应式设计之Viewport

阅读更多关于 CSS响应式设计之Viewport

移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。二、css中的1px并不等于设备的1px 在css中我们一般使用px作为单位

08: vue组件

阅读更多关于 08: vue组件

1.1 初识组件　　1、什么是组件　　　　　　1. Html中有组件，是一段可以被复用的结构代码　　　　　　2. Css中有组件，是一段可以被复用的样式　　　　　　3. Js中有组件，是一段可以被复用的功能　　　　　　4. Vue中也有组件，指的就是一个模块，是一个独立的，完整的（包含html，css，js等），可以直接拿来用的　　2、使用组件分成三步　　　　1、第一步定义组件容器（定义自定义元素）　　　　2、第二步定义组件Vue.extend方法　　　　　　　　1. 参数是组件对象，对象属性跟vue实例化时候传递的参数对象的属性是一样的，例如 data，methods，computed 　　　　　　　　2. 在vue实例化时候，data属性的属性值是一个对象，在组件中，data属性值是一个函数，返回值是一个对象　　　　　　　　3. 组件中，可以通过template定义模板，通常模板写在一个根元素内　　　　3、第三步将组件注册到页面中 Vue.component 　　　　　　　　第一个参数表示容器元素的名称　　　　　　　　第二个参数表示组件类　　3、组件特性　　　　　　　　1. 组件的实例化对象，跟vue实例化对象一样，因此，我们也可以将vue实例化对象看成组件　　　　　　　　2. 组件间是独立的，因此数据要独立存储，方法要独立定义

Vuejs

阅读更多关于 Vuejs

Vue开发去哪网App 用到的了Vue中的知识点 Axios –Ajax数据的获取 Vue Router –做多页面之间的路由 Vuex –各个组件之间的数据共享异步组件 —代码上线，性能更优 Stylus –编写前端的样式递归组件 –实现组件自身调用自己 slider 插件实现轮播图开始！ Hello Vue <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello Vue</title>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="./js/vue.js"></script> </head> <body> <div id="app1"> </div> <div id="app"> {{content}} </div> <script> var dom = document.getElementById('app1'); dom.innerHTML = "Hello Vue" setTimeout(function () { dom.innerHTML = 'Bye Vue' },2000) // 创建Vue实例 var

Meta http-equiv属性详解

阅读更多关于 Meta http-equiv属性详解

本文转载于: 猿2048 网站 Meta http-equiv属性详解 Meta http-equiv属性详解(参考链接： http://www.w3school.com.cn/tags/tag_meta.asp ) http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。引用 meat标签的http-equiv属性语法格式是：＜meta http-equiv="参数" content="参数变量值"＞；其中http-equiv属性主要有以下几种参数： 1、Expires(期限) 说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。用法： Html代码＜meta http-equiv= "expires" content= "Wed, 20 Jun 2007 22:33:00 GMT"＞注意：必须使用GMT的时间格式。 2、Pragma(cache模式) 说明：是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出用法： Html代码＜meta http-equiv= "Pragma" content= "no-cache"＞注意：这样设定

常见的meta标签属性

阅读更多关于常见的meta标签属性

meta标签是网页元标签。可以定义一些网站的功能。 1. name属性 name属性的通用格式如下： <meta name="xxx" content="xxxx,xxxx"> 常见的值有如下几种： 1. viewport 定义浏览器窗口的视窗为自适应大小 <meta name="viewport" content="width: device-width,initial-scale=1.0"> 2. keywords 指定当前页面对于搜索引擎的关键字 <meta name="keywords" content="js,html"> 3. description 告诉搜索引擎当前页面的主要内容，firefox中被用作标签的描述。 <meta name="description" content="this is a websit"> 4. author 标明作者 <meta name="author" content="lyralee"> 2. http-equiv属性该属性可以改变服务器和js引擎的一些行为。通用形式： <meta http-equiv="xxx" content="xxx"> 1. refresh 自动刷新页面。content的内容是刷新的间隔时间（s） <meta http-equiv="refresh" content="1"> 2. X-UA

Python学习笔记——爬虫之Scrapy项目实战

阅读更多关于 Python学习笔记——爬虫之Scrapy项目实战

目录手机App抓包爬虫阳光热线问政平台 (实战项目三)新浪网分类资讯爬虫 Cosplay图片下载爬虫用Pymongo保存数据三种Scrapy模拟登陆策略手机App抓包爬虫 1. items.py class DouyuspiderItem(scrapy.Item): name = scrapy.Field()# 存储照片的名字 imagesUrls = scrapy.Field()# 照片的url路径 imagesPath = scrapy.Field()# 照片保存在本地的路径 2. spiders/douyu.py import scrapy import json from douyuSpider.items import DouyuspiderItem class DouyuSpider(scrapy.Spider): name = "douyu" allowd_domains = ["http://capi.douyucdn.cn"] offset = 0 url = "http://capi.douyucdn.cn/api/v1/getVerticalRoom?limit=20&offset=" start_urls = [url + str(offset)] def parse(self, response): # 返回从json里获取 data段数据集合

移动端常见的一些兼容性问题

阅读更多关于移动端常见的一些兼容性问题

随着手机的普及，移动端的开发也成了一个重要的方向，但由于设备的不统一会造成一些兼容性问题， 1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960*640分辨率，在网页里只显示了480*320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100*100，背景图必须得200*200，然后background-size:contain;，这样显示出来的图片就比较清晰了。代码可以如下： background:url(../images/icon/all.png) no-repeat center center; -webkit-background-size:50px 50px; background-size: 50px 50px;display:inline-block; width:100%; height:50px; 或者指定 background-size:contain;都可以，大家试试！ 2、图片加载

订阅 meta标签