老陈博客

什么是 TypeScript？ TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。 TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统JS 有类型（比如，number/string 等），但是 JS 不会检查变量的类型是否发生变化，而 TS 会检查，TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性。 类型注解 示例代码 1let age: number = 18; 说明：代码中:number就是类型注解 类型注解约束了只能给该变量赋值该类型的值 错误演示 12// 错误原因：将 string 类型的值赋值给了 number 类型的变量，类型不一致let age: number = '18'; 常用基础类型 可以将 TS 中的常用基础类型分为两类 JavaScr ...

函数定义 函数声明 function 12345678# 有参函数 function 函数名(参数){ 函数体 }# 无参函数 function 函数名(){ 函数体 } 特点 函数声明的时候，函数体并不会执行，只要当函数被调用的时候才会执行。 函数调用1234567891011121314151617# 函数调用# 函数名(); 无参函数调用# 函数名("xiaoming"); 有参函数调用# 无参调用案例 function fun(){} fun();# 有参函数调用 function getfun(x,y){ console.log(x,y); } getfun("小菲菲","小灿灿"); 案例2123456789# 无参函数function fun(){ console.log("xiaofeifei");}# 有参函数 function fn(x ...

1. JavaScript简介 JavaScript是一种运行在客户端（即浏览器）的脚本语言，最初由的Brendan Eich设计，将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。 1.1 为什么要学习javaScript JavaScript是世界上最流行的网络高级脚本语言，已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。同时它也能在多个场景应用，如下： 网页特效 服务端开发（Node.js） 命令行工具（Node.js） 桌面程序（Electron） APP 控制硬件-物联网（Ruff） 游戏开发 那么问题来了，为什么我们要学JavaScript？ 因为你没有选择！！！！在Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互。随着HTML5在PC和移动端越来越流行，JavaScript变得更加重要了。并且，新兴的Node.js把JavaScript引入到了服务器端，Ja ...

简单来说< meta name=”viewport” content=”width=device-width,initial-scale=1.0” >的解释 content属性值: width:可视区域的宽度，值可为数字或关键词device-widthheight: layout viewport 的高度，这个属性对我们并不重要，很少使用intial-scale: 页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 可视区域的缩放级别: maximum-scale=1.0, 设置页面的初始缩放值，为一个数字，可以带小数minimum-scale=1.0; 允许用户的最小缩放值，为一个数字，可以带小数maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。user-scalable:是否可对页面进行缩放，no 禁止缩放、yes允许。 复杂的说： 在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewpor ...

meta eg： 12345678<meta name="viewport" content="width=device-width,intial-scale=0,maximum-scale=0,user-scalable=yes,shrink-to-fit=no"> 这是一个用于设置网页视口（viewport）的HTML 标签。视口是用户在网页上看到的可见区域，而这个标签的目的是为了确保网页在各种设备上能够以合适的方式显示。让我们逐个解释这个标签中的属性： width=device-width: 这个属性设置视口的宽度等于设备的宽度。这确保网页在移动设备上不会缩小到一个默认的宽度，而是会根据设备的实际宽度进行调整。 initial-scale=0: 这个属性设置初始的缩放级别为0。这可以被认为是一个“禁用缩放”的设置，确保用户最初加载页面时不会自动缩放。 maximum-scale=0: 这个属性设置最大的缩放级别为0。这同样是为了限制用户对页面的缩放能力，保持一个不可缩放的 ...

CSS常用标签1. 字体属性：(font) 大小：font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD样式 ：font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高 ：line-height: normal;(正常) 单位：PX、PD、EM粗细 ：font-weight: bold;(粗体) lighter;(细体) normal;(正常)变体 ：font-variant: small-caps;(小型大写字母) normal;(正常)大小写 ：text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none(无)修饰 ：text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体：(font-family)”Courier New”, Courier, monospace, “Times N ...

新语义元素： HTML5提供了新的语义元素来明确一个Web页面的不同部分。 ：描述了文档的头部区域，于定义内容的介绍展示区域 ：定义导航链接的部分。 ：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，section通常 包含了一组内容及其标题。 ：定义独立的内容。 ：定义页面主区域内容之外的内容（比如侧边栏）。 ：标签规定独立的流内容（图像、图表、照片、代码等等）。 ：定义 元素的标题。 ：述了文档的底部区域，一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。 在一个网页中，这些新的语义标签元素位置如下图所示：> 新元素的浏览器兼容问题： 为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素): 12345header, section, footer, aside, nav, article, figure{ display: block;} IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用 ...

什么是媒体查询？ 使用 @media 查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询 语法规范 123@media mediatype and|not|only (media feature) {CSS-Code;} 用 @media 开头 注意@符号 mediatype 媒体类型 关键字 and not only media feature 媒体特性 必须有小括号包含 mediatype 查询类型 将不同的终端设备划分成不同的类型，称为媒体类型 值 解释说明 all 用于所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕、平板电脑、智能手机等 关键字关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。 and：可以将多个媒体特性连接到一起，相当于“且”的意思。123@media screen and (min-w ...

在制作网页时我们往往需要在网页中添加一些背景颜色、背景图像让网页更加美观，吸引访问者的眼球。CSS 中提供了一系列用于设置 HTML 元素背景效果的属性，如下所示： background-color：设置元素的背景颜色； background-image：设置元素的背景图像； background-repeat：控制背景图像是否重复； background-attachment：控制背景图像是否跟随窗口滚动； background-position：控制背景图像在元素中的位置； background-size：设置背景图像的尺寸； background-origin：设置 background-position 属性相对于什么位置来定位背景图像； background-clip：设置背景图像的显示区域； background：背景属性的缩写，可以在一个声明中设置所有的背景属性。 1. background-color background-color 属性为元素设置一个背景颜色，该属性支持以下几种属性值 值 描述 color_name 使用具体颜色名称为元素设置背景 ...

css animation组成及动画的语法 CSS animations 使得可以将从一个 CSS 样式配置转换到另一个 CSS 样式配置。Animations由两部分组成：css动画的配置，以及一系列的 keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何Js技术即可完成动画的制作 属性 描述 animation-name 指定由 @keyframes 描述的关键帧名称 animation-duration 设置动画一个周期的时长 animation-delay 设置延时，即从元素加载完成之后到动画序列开始执行的这段时间 animation-direction 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行 animation-iteration-count 设置动画重复次数， 可以指定 infinite 无限次重复动画 animation-play-state 允许暂停和恢复动画 animation-timing-function 设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化 anim ...