Cao_Mary的博客

本文原产于个人有道云笔记，迁移CSDN时部分图片未上传，格式未调整。望阅读的人海量。1.HTML基础——基本概念1.1什么是浏览器浏览器是安装在电脑里面的一个软件， 能够将网页内容呈现给用户查看，并让用户与网页交互的一种软件。 就好比QQ一样都是安装在电脑里面的一个软件， 只不过功能不同而已。功能主要有两个：将网页渲染出来给用户查看，能够让用户通过浏览器和网页交互。浏览器市场份...

阅读本文前，先了解一篇文章 移动端视口1.适配移动端方法一：PC+ 移动端使用媒体查询PC端，移动端使用媒体查询，使用同一套代码html头部添加<meta name="viewport" content="width=device-width, initial-scale=1.0">内容区域：采用媒体查询的方式布局页面。主要是通过查询设备的宽度来执行不同的css代码，最终达...

1.什么是视口?视口简单理解就是可视区域大小我们称之为视口在PC端，视口大小就是浏览器窗口可视区域的大小（窗口多大，可视区域/视口就多大）在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了9802.为什么是980而不是其他的值?因为过去网页的版心都是980乔布斯为了能够让网页在移动端完美的展示, 所以将iOS手机视口的大小定义为了980后来谷歌也觉得这是一个非常牛...

本文写作顺序是按照实际编写移动端适配的顺序编写的。想要充分理解，需要童鞋们有rem，像素，媒体查询，的基础知识。若顺序阅读理解较为困难。可以按照标题3、2、1的顺序阅读。理解困难，可留言。1.js添加如下三行代码——解决设备像素同逻辑像素不同的问题let scale = 1.0 / window.devicePixelRatio;let text = `<meta name="v...

1.什么是设备像素和CSS像素?1.1、设备像素又称为物理像素, 是"物理屏幕"上真实存在的发光点，只有屏幕一经出厂就固定不会改变1.2、CSS像素又称为逻辑像素，是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素例如:iPhone3G/iPhone3GS3.5英寸逻辑像素320*480设备像素320*480iPhone4/4S3.5英寸逻辑像素3...

1.像素什么是像素(Pixel)?在前端开发中视口的水平方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素例如div尺寸是100 x 100, 那么水平方向就占用100个小方格, 垂直方向就占用100个小方格像素特点不会随着视口大小的变化而变化, 像素是一个固定的单位(绝对单位)2.百分比什么是百分比?百分比是前端开发中的一个动态单位, 永远都是以当前元素...

本文只涉及bootstrap基本使用，不提供代码案例。以便于快速了解bootstrap是什么。详细使用规则还是要看官方文档。

svg脚本编程：通过js操作svg企业开发中均使用框架进行脚本编程脚本编程推荐自学svg框架https://svgjs.com/http://snapsvg.io/docs/可以做搜狗浏览器官网特效。多看看svg在线编辑器使用js绘制svg注意点：绘制画布注意点:创建SVG时必须指定命名空间（用于告诉浏览器，此文件不是普通xml文件，而是用来表示SVG图形的。svg内所有标签都...

一、动画1.SVG动画在SVG中提供了三种常用动画标记animate：基础动画animateTransform：形变动画animateMotion：路径动画2.SVG动画属性attributeType: CSS/XML 规定的属性值的名称空间attributeName: 规定元素的哪个属性会产生动画效果from/to: 从哪到哪dur: 动画时长fill: 动画结束之...

一、裁剪与蒙版1.clipPath只有路径范围内的内容会被显示, 路径范围外的内容不会被显示2.maskmask和clipPath差不多2.1.裁切路径是可见与不可见的突变2.2.蒙版则是可见与不可见的渐变注意点:在指定裁剪和蒙版的时候需要通过url(#id)来指定1.圆形在上，矩形在下<svg width="500" height="500"> ...

一、SVG常用属性1.fill: 修改填充颜色2.fill-opacity: 0~1 设置填充颜色的透明度3.stroke: 修改描边颜色4.stroke-width: 修改描边宽度5.stroke-opacity: 0~1 设置描边透明度6.stroke-linecap: butt(两边都没有)/square（两边为方块）/round （两边为圆形）设置线段两端帽子7.strok...

一、SVG概念1.什么是SVG?SVG英文全称为Scalable Vector Graphics，意思为可缩放的矢量图2.位图和矢量图在计算机中有两种图形, 一种是位图, 一种是矢量图2.1 位图:传统的 jpg / png / gif图都是位图位图是一个个很小的颜色小方块组合在一起的图片。一个小方块代表1px2.2 位图的优点和缺点:优点: 色彩丰富逼真缺点: 放...

1.什么是CanvasCanvas是H5新增的一个标签，我们可以通过JS在这个标签上绘制各种图案Canvas拥有多种绘制路径、矩形、圆形、字符以及图片的方法2.绘制基本步骤2.1.在body中创建一个canvas标签<canvas></canvas>canvas标签有默认的宽高，默认width=300，默认height=150不能通过CSS设置画布的宽...

1.什么是属性？属性就是对象身上保存的变量只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象)// 1.自定义一个对象var obj = {};console.log(obj);// 2.动态给自定义对象添加属性obj.name = "lnj"; // name就是对象obj的一个属性obj.age = 33; // age就是对象obj的一个属性console.log...

1.SASS开篇1.什么是SASS(Syntactically Awesome Stylesheets Sass)?SASS是一套利用Ruby实现的, 最早最成熟的CSS预处理器, 诞生于2007年.它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展2.如何学习SASS?LESS是一套利用JavaScript实现的C...

1、less可以在node.js环境下运行2、less可以在浏览器中直接运行2.1、浏览器中运行方式一步骤：（1）编写less文件（2）引入less文件（3）引入less.js下载地址（4）运行//引用文件<link rel="stylesheet/less" href="css/index.less"><script src="js/less.min.j...

一、less基础1.1、less开篇1.什么是CSS预处理器？CSS预处理器就是用某一种语言用来为CSS增加一些动态语言的特性（变量、函数、继承等。js就是动态语言。）CSS预处理器可以让你的CSS更加简洁，适应性更强，代码更直观等诸多好处简而言之：CSS预处理器就是升级版CSS2.常见的CSS预处理器Less、Sass、Stylus3.为什么需要les...

一、主体搭建1.建立站点文件夹1.1、在项目的根目录下建立如下文件夹：注意：  1.文件夹名称不能是中文  2.里面至少应该包含css/js/images三个子文件夹  3.里面至少应该包含index.html文件/项目根目录css（文件夹）base.css(放css的工具类)index.cssnormalize.css（或者cssreset-min.css，用于清...

1.简述浏览器端存储网页中的数据有三种存储方案：cookie、SessionStorage和LocalStorage。其中：SessionStorage和LocalStorage是H5新增的存储方案。而cookie经常同session一并提起，它们的主要区别：cookie：会话跟踪技术 客户端（浏览器）session；会话跟踪技术 服务端也就是说session一般用于服务器端进行会...