移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)

移动端web现状:

移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器。移动端常见的浏览器都是基于webkit内核开发的,国内机操作系统也是基于Android开发的,因此在移动开发中只兼容主流浏览器,即处理webkit内核浏览器即可。

手机屏幕现状:移动设备的屏幕尺寸繁多,常见Android设备分辨率有:480x800、 480x854、 540x960、720x1280、1080x1920、2k、4k等;iPhone设备常见分辨率有:640x960、 640x1136、 750x1334、 1242x2208等;实际开发中大多使用px为尺寸单位,因此我们不关注分辨率。

viewport视口:

视口(viewport):指浏览器显示页面内容的屏幕区域,视口可分:布局视口、视觉视口、理想视口。

layout viewport布局视口:移动设备的浏览器默认设置一个布局视口,用于解决早期pc端页面在移动端显示问题。iOS、Android视口一般设置为980px,所以pc网页一般都可以在移动设备显示,只是元素看起来比较小,一般可以通过手动设置缩放视觉视口来显示网页。

visual viewport视觉视口:指用户正在看到的网页的区域。通过设置视觉视口来显示网站页面呈现在屏幕的区域,不会影响布局视口的变化。

ideal viewport理想视口:为了网站在移动设备上有理想的浏览和阅读宽度而设定。需要手动添加meta视口标签告知浏览器,它是乔布斯发明的,开启它需要meta视口标签,主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,布局的视口就多宽。视口属性:
在这里插入图片描述

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

二倍图:

物理像素(分辨率):指屏幕显示的最小颗粒,是物理真实存在的,是设备制造商出厂时就已经设置好了。实际开发时1px不一定等于一个物理像素(电脑端1px是等于物理像素的)。

物理像素比:指1px能显示的物理像素点的个数,或称屏幕像素比。

Retina(视网膜屏幕):把更多的物理像素点压缩到一块屏幕里,从而达到更高的分辨率,分辨率高则越细腻。

二倍图原理:由于图片色彩比较丰富,一张原大小的图放到移动设备后,会放大2倍,这样图片就会变的模糊,因此我们在制作图片时把图片制作成需求图的2倍大小,再通过css代码把尺寸设置为需求的大小,这样就会解决图片在移动设备因放大而变模糊的问题。随着科技的提升,现在也存在3、4等倍数的图,实际开发看公司需求。

移动端开发主流方案:

移动端开发主流方案有两种可选:

1、单独制作移动端页面(主流),当输入网址后自动判断设备,跳转到对应的网站。

2、响应式页面兼容移动端,同时兼容PC和移动设备,通过判断屏幕尺寸来改变样式。制作起来非常麻烦,需要调整兼容性问题。

reset.css和normalize.css初始化文件:

reset和normalize都是用来初始化样式在不同浏览器显示不同的文件;两个区别是reset会重置所有默认样式,包括各浏览器显示一致的样式,而normalize则只会初始化各浏览器显示不一致的样式;因此移动端开发CSS初始化推荐:Normalize.css,其保留了有价值的默认值,修复浏览器bug,模块化且拥有详细解说文档,支持npm下载,其官网:http://necolas.github.io/normalize.css

盒模型推荐:box-sizing:border-box,移动设备多支持h5c3因此使用c3中的盒模型可以避免大量计算问题。

	 /*移动端部分特殊样式处理*/-webkit-tap-highlight-color: transparent;/*点击高亮我们需要清除清除  设置为transparent 完成透明*/-webkit-appearance: none;/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/img,a {-webkit-touch-callout: none;}/*禁用长按页面时的弹出菜单*/

布局技术选型:

单独制作移动页面:流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局。

响应式页面开发:媒体查询、bootstrap

流式布局(百分比布局):把盒子的宽度设置成百分比,根据屏幕的宽度自动伸缩,不受固定像素的限制,内容向两边填充,是移动端布局常见的布局方式,也称非固定像素布局。实际中这种方式也不可能无限制的伸缩,因此一般要给父盒子max-width和min-width对其进行限制。

	<style>section {width: 100%;height: 600px;max-width: 1000px;min-width: 320px;margin: 0 auto;background-color: rgb(143, 228, 126);}section div {width: 45%;height: 200px;}section div:first-child {float: left;margin-left: 5%;background-color: lightyellow;}section div:last-child {float: right;margin-right: 5%;background-color: lightblue;}</style><body><section><div></div><div></div></section></body>

flex伸缩布局:flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 ,伸缩性在响应式布局中有很大作用,但是flex布局存在极大兼容性问题,因此flex布局在pc端并不常见,移动端支持良好。开启伸缩布局:给父级元素添加:display:flex;自己元素使用:flex:3;这个里的3表示占3份。

当父盒子设置为flex布局后(容器),子元素(项目)的float、clear、vertical-align属性失效。

主轴:默认是flex容器水平方向从左到右;

侧轴:默认与主轴垂直方向从上到下。父元素相关属性:
在这里插入图片描述
flex子项常见属性:
在这里插入图片描述

	<style>.box {max-width: 1200px;min-width: 800px;margin: 0 auto;display: flex;flex-direction: row-reverse;}.box div {height: 50px;}.box div:nth-child(1) {background-color: rgb(240, 48, 48);flex: 2;/*表示该子元素占2/7份*/}.box div:nth-child(2) {background-color: rgb(201, 218, 49);margin: 0 10px;/*给margin盒子不会被挤下去,自由伸缩*/width: 100px;/*未给flex属性的元素可以设置宽度,设置完宽度后大该元素小不变*/}.box div:nth-child(3) {background-color: rgb(17, 226, 59);flex: 1;/*表示此元素占1/7份*/}.box div:nth-child(4) {background-color: rgb(218, 19, 191);flex: 4;/*表示该子元素占4/7份*/}/*总份数为:2 + 1 + 4 = 7*/
</style><body><div class="box"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></div>
</body>

rem适配布局:rem是一个相对单位,类似于em,em指相对父系元素字体大小,而rem指相对于html元素字体大小。如:根元素设置字体大小为12px,非根元素设置字体大小为2rem,实际非跟元素的字体大小为24px,rem布局目前是比较流行的布局方式,非常重要。rem只是一个相对单位,可以设置给其他元素。

媒体查询(media query):使用@media查询可以针对不同的媒体类型定义不同的样式,从而轻松的解决屏幕大小适配问题。
在这里插入图片描述

	@media mediatype and|not|only (media feature) {/* 当同时有多个条件时,中间可以用and连接*/
}<style>@media screen and (min-width:320px) {html {font-size: 2px;}}@media screen and (min-width:690px) {html {font-size: 4px;}}@media screen and (min-width:1200px) {html {font-size: 6px;}}.box {width: 200rem;margin: 0 auto;}.box div {float: left;width: 50rem;height: 10rem;box-sizing: border-box;border: 1rem solid rgb(97, 245, 11);font-size: 6rem;text-align: center;}
</style><body><div class="box"><div>hello盒子</div><div>hello盒子</div><div>hello盒子</div><div>hello盒子</div></div>
</body>

媒体查询引入资源:针对不同的屏幕尺寸引入不同的css样式表,以层叠性实现不同样式:

	 /* <link rel="stylesheet" href="stylemin.css" media="mediatype and|not|only (media feature)"> */<link rel="stylesheet" href="stylemin.css" media="screen and (min-width:320px)"><link rel="stylesheet" href="stylemax.css" media="screen and (min-width:750px)">

rem适配方案技术:

①less + 媒体查询 + rem:通过媒体查询根据不同屏幕的尺寸设置不同的font-size,页面中元素尺寸选择rem值,元素rem值 = 设计稿尺寸(px) / font-size , 新font-size=原设计稿中font-size x 新屏幕尺寸 / 原设计稿尺寸。,如下代码:

//可以适配的屏幕尺寸:@arr:320px,540px,750px,920px,1200px;
//设计稿的宽度:@psdWidth;
//设计稿中font-size:@baseSize;
//获取@arr的长度@arrLength:length(@arr);
//.functionName(参数) when (条件){code},less中函数可以使用when加条件,当条件满足时会执行函数,否则不再执行函数,如:
.setFontSize(@index) when (@index <= @arrLength){@media (min-widht:extract(@arr,@index){html{font-size:@baseSize / @psdWidth * extract(@arr,@index);};};.setFontSize(@index + 1);//函数自己调用自己实现遍历效果,每次调用时参数+1来提满足判断条件
};//调用:
.setFontSize(1);//调用时传入参数1,从1开始遍历

②flexible.js + rem(推荐):flexible.js是手机淘宝团队推出的高效简洁移动端适配库,可以避免写媒体查询这一步,我们只需确定font-size即可(它的原理是把屏幕分为10等份,font-size的值=设计稿的值 / 屏幕所分的份数)。此时页面元素的rem值为:页面元素的px值 / font-size ,flexible.js会自动计算,其GitHub地址:https://github.com/amfe/lib-flexible,将其下载后把里面的文件通过js标签引入:

	<script src="js/flexible.js"></script>

cssrem:一款自动将px单位转换为rem单位的VScode插件。因为此插件中默认是参照16px转换的,因此需要自己手动配置参数(VScode设置----搜索框搜cssrem:root font size-----配置对应的参数)

响应式布局:随着屏幕尺寸的变化,布局发生相应的变化,不用单独写页面。

响应式开发原理:通过媒体查询针对不同的屏幕宽度改变父级容器大小,再改变里面子元素的排列方式和大小,从而达到适配不同设备的目的。
在这里插入图片描述

	<style>.container {margin: 0 auto;height: 200px;background-color: rgb(209, 241, 153);}@media screen and (max-width:768px) {.container {width: 100%;}}@media screen and (min-width:768px) {.container {width: 750px;}}@media screen and (min-width:992px) {.container {width: 970px;}}@media screen and (min-width:1200px) {.container {width: 1170px;}}
</style><body><div class="container"></div>
</body>

Bootstrap:响应式项目开发中,bootstrap是一款当下很好用的前端框架。使用bootstrap的HTML骨架如下:

	<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--告知以IE的edge浏览器加载网页--><meta name="viewport" content="width=device-width, initial-scale=1"><!--开启视口--><title>Bootstrap</title><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 引入Bootstrap库 --> <!-- 条件注释,第一个是解决html5新标签兼容性的,第二个是解决css媒体查询问题的 --><!--[if lt IE 9]><script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--></head><body><h1>你好,世界!</h1><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 引入jQuery --><script src="js/bootstrap.min.js"></script><!-- 引入了bootstrap.js文件--></body></html>

bootstrap使用:此框架里面内置了很多类样式,使用时直接给标签加对应的类名即可。常用类名总结:
在这里插入图片描述
注意:bootstrap是一个非常丰富的前端框架,想要了解更多,请阅读官方文档:https://www.bootcss.com,下面将介绍移动端web开发中常用bootstrap部分:

	<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css"><style>.container {margin: 0 auto;background-color: rgb(245, 122, 50);}.box-first {margin: 0 auto;width: 200px;height: 200px;background-color: rgb(176, 245, 137);}.box-second {margin: 0 auto;width: 300px;height: 300px;background-color: rgb(229, 56, 251);}</style>
</head>
<body><div class="container"><div class="box-first  hidden-md hidden-xs"></div><div class="box-second  visible-md visible-xs"></div></div>
</body>
</html>

.container容器默认有15px的左右内间距,而.row 有margin-left,margin-right值为-15px做拉伸,所以看到的是紧密的。

bootstrap栅格系统:把页面内容分成12等份,由行和列的组合的布局页面,网格状布局,在一个响应式容器中定义行和列。由类名row定义栅格系统的行,由col-x-n定义栅格系统的列。col-x-n中n表示所占栅格12份中的几份,x参数及含义如下:
在这里插入图片描述
栅格嵌套:每个栅格中是可以嵌套其它栅格的,就像div一样,可以相互嵌套。

栅格偏移:col-(lg/md/sm/xs)-offset-n,给某个栅格添加此类可以使这个栅格向后偏移n份。

栅格排序:col-(lg/md/sm/xs)-push/pull-n,将某个栅格push推后几份或将某个栅格pull拉前几份。

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css"><style>.container {margin: 0 auto;background-color: rgb(245, 122, 50);}.row div[class^=col] {border: 1px solid limegreen;height: 133px;}.inset div[class^=col] {height: auto;background-color: rgb(88, 236, 219);}.offset div[class^=col] {height: auto;background-color: rgb(230, 59, 193);}.arr div[class^=col] {height: auto;background-color: rgb(230, 59, 193);}</style></head><body><div class="container"><div class="row"><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">1</div><!--栅格嵌套开始:--><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"><div class="row inset"><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套a</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套b</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套c</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套d</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套e</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套w</div></div></div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">3</div><!-- 栅格偏移col-x-offset-n: --><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"><div class="row offset"><div class="col-lg-4 col-md-3 col-sm-2 col-xs-1">栅格偏移</div><div class="col-lg-4 col-lg-offset-4 col-md-3 col-md-offset-6 col-sm-2 col-sm-offset-8 col-xs-1 col-xs-offset-10">栅格偏移</div></div></div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">5</div><!-- 栅格排序push推、pull拉 --><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"><div class="row arr"><div class="col-lg-6 col-lg-push-6 col-md-6 col-md-push-6 col-sm-6 col-sm-push-6 col-xs-6 col-xs-push-6">栅格排序-左边</div><div class="col-lg-6 col-lg-pull-6 col-md-6 col-md-pull-6 col-sm-6 col-sm-pull-6 col-xs-6 col-xs-pull-6">栅格排序-右边</div></div></div></div></div></body></html>

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575363.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Centos 6.5(64bit)上安装Vertica single node

在Win8上使用虚拟机Virtualbox安装Centos6.5,想在上面安装vertica. 以下记录了我在安装的过程中遇到的问题与一些解决方案。 1.安装Centos的时候遇到了一个恼人的问题&#xff0c;即安装成功后第一次启动时会需要你配置一些用户信息&#xff0c;时区信息和Kdump信息。 我当时选…

less简介、less安装、编译、less语法之变量、嵌套、类混入、函数混入、运算、less文件导入

less基础&#xff1a; CSS是一门非程序语言&#xff0c;没有变量、函数、作用域等&#xff0c;此时使用rem单位就会出现图片等大量计算尺寸的问题&#xff0c;但是less可以轻松实现运算&#xff0c;它是CSS预处理语言&#xff0c;引入了变量、混入、函数等&#xff0c;常见的C…

Mysql数据库备份和按条件导出表数据

Mysql数据库备份和按条件导出表数据一、备份数据库# mysqldump -u root -p dbcurr>/home/20090219.sqlmysqldum为备份命令&#xff0c;-u用户&#xff0c;-p密码&#xff0c;dbcurr数据库名&#xff0c;>备份符&#xff0c;/home/20090219.sql存储数据文件的路径。www.2…

jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器

jQuery简介&#xff1a; jQuery是一个高效、精简并且功能丰富的javascript库&#xff0c;它提供的API简单易学&#xff0c;且兼容众多浏览器&#xff0c;极大地简化了javascript代码开发&#xff0c;包含内容&#xff1a;HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函…

睡觉应该按时

最近又想奋起 &#xff0c;最天又是 12 点多睡的&#xff0c;结果呢&#xff0c;呵呵&#xff1f; 一个规律的认识&#xff0c;真是反反复复&#xff0c;希望养成一个好的习惯&#xff0c;而不是不能可持续发展的习惯转载于:https://www.cnblogs.com/51Tsinghua/p/3831444.html…

golang的指针到string,string到指针的转换

由于某个需求&#xff0c;需要如题的转换&#xff0c;废话不多说&#xff0c;直接贴代码了&#xff0c;其实挺丑了&#xff0c;备用了 func (this *Server) socketParserHandler(client *genTcpServer.Client, fullData []byte) {fmt.Println("original data is", cl…

jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件

jQuery事件&#xff1a; jQuery中的事件和javascript中的事件基本相似&#xff0c;不同的是jQuery中的事件处理函数写在事件后面的括号中&#xff0c;如&#xff1a; <script>$(input).click(function() {alert(hello word);});</script>jQuery中常见事件&#xf…

atitit.提升开发效率---mda 软件开发方式的革命

atitit.提升开发效率---mda 软件开发方式的革命 1. 软件开发方式的革命开发工具的抽象层次将再次提升 1 2. 应用框架和其实现相分离 2 3. 目前的问题模型和代码不同步 2 4. MDA的历史及其由来 2 5. MDA的三个主要目标是&#xff1a;轻便性、 互操作性和可重用性。 3 6. MDA跟代…

BigQuery 分区表简介和使用

大纲 什么是分区表 我们先看定义&#xff1a; 分区表是一种数据库表设计和管理技术&#xff0c;它将表中的数据划分为逻辑上的多个分区&#xff0c;每个分区包含一组特定的数据。每个分区都根据定义的分区键&#xff08;通常是一个列或字段&#xff09;的值进行分类&#xff…

jQuery操作属性、设置文本、遍历元素、元素创建添加删除、操作元素尺寸、操作元素位置、注册事件、事件处理、解绑事件、拷贝、多库共存、jQuery插件

jQuery操作属性&#xff1a; jQuery中提供三种方法操作属性&#xff0c;分别是&#xff1a;prop()、arrt()、data(),具体如下&#xff1a; prop()操作自带属性&#xff1a;用来操作元素本身自带的属性&#xff08;包括没有显示在DOM上的自带属性&#xff09;&#xff0c;如:a…

C_文件读写流

strcmp() 所在头文件&#xff1a;string.h 功能&#xff1a;比较俩个字符串 一般形式&#xff1a;strcmp(字符串1&#xff0c;字符串2) 说明&#xff1a; 当S1<S2时&#xff0c;返回为负数return result,result<0 当S1S2时&#xff0c;返回值0 当S1>S2时&#xff0c;返…

初次使用Apache、ip地址、防火墙、域名、DNS、hosts文件、端口、URL介绍、Apache配置文件、配置虚拟主机、请求响应、http协议、

Apache提供web服务&#xff1a; 启动Apache&#xff0c;让其客户端可以使用你机器上安装的Apache提供的web服务&#xff0c;访问你机器上的网站。这种情况下你的计算机就是服务器&#xff0c;别人的机器就是客户端。 注意&#xff1a;确保配置文件语法检查通过&#xff0c;确…

量子计算机算法与应用研究论文(转载务必注明出处)

量子计算机算法与应用研究 学科分类&#xff1a;计算机科学 湖北省沙市中学 谢晓啸 摘要 1.量子计算机 2.量子计算机算法 3.移动互联 4.云计算 5.经典计算机的局限 6.量子计算前景 二零一四年一月十二日 目 录 摘 要......................................................…

cookie和session、web服务工作原理、Apache配置php扩展、php简介

cookie和session: cookie和session区别&#xff1a;cookie数据是存在本地的&#xff0c;而session数据是存在服务端的&#xff0c;session比cookie更安全。 cookie&#xff1a;用于http做会话时记住客户端所做的事,这里可以解决首次登陆页面广告等问题。 服务端与客户端在做开…

分享MYSQL中的各种高可用技术(源自姜承尧大牛)

图片和资料来源于MYSQL大牛姜承尧老师&#xff08;MYSQL技术内幕作者&#xff09; 姜承尧&#xff1a; 网易杭州研究院 技术经理 主导INNOSQL的开发 mysql高可用各个技术的比较 数据库的可靠指的是数据可靠 数据库可用指的是数据库服务可用 可靠的是数据&#xff1a;例如工商银…

php中数据类型、数组排序、循环语句、混编、操作本地文件流程、常用API、函数、魔术常量

php中数据类型&#xff1a; php中有7种数据类型&#xff0c;分别是&#xff1a; //1.String字符串&#xff0c;用引号包裹的字符&#xff0c;如&#xff1a;$str hello word;//2.Integer整型&#xff0c;可以是正数或负数&#xff0c;有十进制、十六进制、八进制&#xff0c;…

J2ME游戏中的图片处理

图片资源乃是游戏的外衣&#xff0c;直接影响一个游戏是否看上去很美。在J2ME游戏开发中&#xff0c;由于受到容量和内存的两重限制&#xff0c;图片使用受到极大的限制。在这种环境中&#xff0c;处理好图片的使用问题就显得更加重要。 本文从容量和内存两个方面谈谈J2ME游戏图…

php中命名空间、面向对象、访问控制、接口

命名空间&#xff1a; php中命名空间&#xff1a;解决自己编写的代码和php内置及第三方的函数、常量、类命名冲突问题(在不同的命名空间可以定义相同名称的常量、类、函数)&#xff1b;及为繁琐的命名创建一个别名&#xff0c;具体如下&#xff1a; //1.简单定义命名空间&…

经典的十个机器学习算法

1、C4.5 机器学习中&#xff0c;决策树是一个预测模型&#xff1b;他代表的是对象属性与对象值之间的一种映射关系。树中每个节点表示某个对象&#xff0c;而每个分叉路径则代表的某个可能的 属性值&#xff0c;而每个叶结点则对应从根节点到该叶节点所经历的路径所表示的对象的…

JSON数据、字符串拼接、宽字符处理、数组、Notice警告、isset和empty、变量、作用域、常量、include和require

JSON数据&#xff1a; 字面量是代码中表述数据的手段&#xff0c;JSON是一门类似于js字面量表述数据的手段&#xff0c;JSON是现在市面上用的最广的数据表述手段。 1.JSON对象中属性名称必须用双引号引起来 2.JSON中字符串必须用双引号引起来 3.JSON中不允许使用注释 4.JS…