移动端web开发笔记(一)

我本来一直在开发PC端的网页的,但是看到很多招聘都要求要有移动端开发的经验,所以开始学习一下!

先搞清楚两个概念,移动端web开发,web app开发

1、 移动web开发(pc端的页面用手机浏览器打开)

这部分跟web前端开发差别不大,使用的技术都是html+css+js。区别为手机浏览器是webkit的天下,pc端是IE的天 下。手机网页可以理解成pc网页的缩小版加一些触摸特性。因为是在浏览器中进行的网页开发,所有最终代码具有跨系统平台的特性

2、 web app开发(web应用程序)

特指的是用html5技术开发,之所以叫web app是因为他比较接近客户端应用程序的用户体验,可以和系统深度融合,调用一些只有客户端才能调用的功能(比如在移动设备上利用html5开发出的网页可以访问电话、摄像头等本地功能).

 

一、meta标签

html代码中最关键的就是meta标签设置,开发移动端页面首先一定要设置viewport (可视区域)

device-width - 设备的宽度

initial-scale - 初始的缩放比例 

minimum-scale - 允许用户缩放到的最小比例  

maximum-scale - 允许用户缩放到的最大比例 

user-scalable - 用户是否可以手动缩放


其次是一些辅助优化功能,常用的有如下meta标签:

 

下面延伸一下<meta>标签的作用

meta标签是元素可提供相关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部,不包含任何内容。

meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能

<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />

<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no;" />

 

也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,例如加入关键字会自动被大型搜索网站自动搜集;可以设定页面格式及刷新等等。

 

name属性

主要有以下几种参数:

(1)Keywords(关键字)

说明:keywords用来告诉搜索引擎你网页的关键字是什么。提高网站的访问量

举例:

<meta name ="keywords"content="science,education,culture,politics,ecnomics,relationships,entertainment,human">

(2)description(网站内容描述)

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

网站内容描述(description)的设计要点:

①网页描述为自然语言而不是罗列关键词(与keywords设计正好相反);

②通常为网页内容的摘要信息,也就是希望搜索引擎在检索结果中展示的摘要信息;

③网页描述中含有有效关键词;

④网页描述内容与网页标题内容,主题内容有高度相关性;

⑤网页描述的文字不必太多,一般不超过搜索引擎检索结果摘要信息的最多字数(通常在100中文字之内,不同搜索引擎略有差异)。

举例:<meta name="description" content="This page isabout the meaning of science,education,culture.">

3robots(机器人向导)

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

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

举例:<meta name="robots"content="none">

4author(作者)

说明:标注网页的作者

 

http-equiv属性

相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为contentcontent中的内容其实就是各个参数的变量值

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

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

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

2content-Language当浏览者访问你的网页时,浏览器会自动识别并设置网页中的语言

用法:<metahttp-equiv="Content-Language" content="zh-cn" />

3Expires(期限)

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

用法:<meta http-equiv="expires"content="Fri,12 Jan 2001 18:18:18 GMT">

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

4Pragma(cache模式)

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

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

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

5Refresh(刷新)

说明:自动刷新并转到新页面。

用法:<meta http-equiv="Refresh" content="2;URL">;(注意后面的分号,分别在秒数的前面和网址的后面,URL可为空)

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

6Set-Cookie(cookie设定)

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

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

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

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

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

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

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

 

 



已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页