web
王博玉-
这个作者很懒,什么都没留下…
展开
-
HTML5写的网页
最简单网页的基础代码<div id="wrap"> <div id="header"> <h1>网站标题(<span style="font-size:16px;">网站标题-16px</span>)</h1> </div> <ul id="nav"> ...原创 2019-11-26 20:38:39 · 265 阅读 · 0 评论 -
JS基本运算
前几天总结了算术运算,逻辑运算,关系运算,赋值运算,对象操作运算,今天总结JS基本运算中的其他三种运算。1.条件运算符条件运算符是唯一的三元运算符。语法形式如下:b ?x:Yb操作数必须是一个布尔型的表达式,x和y是任意类型的值。如果操作数b的返回值为true,则执行x操作数,并返回该表达式的值。如果操作数b的返回值为false,则执行y操作数,并返回该表达式的值。实例设计:定...原创 2019-11-24 18:10:02 · 439 阅读 · 2 评论 -
JS正则表达式
js中正则表达式使用 js中使用正则表达式,除了了解正则表达式基本的匹配规则外。还需要了解下面的基本的知识:python,js,groovy这些脚本语言都有在线调试的网站,可以在线测试是否有语法错误,用起来也很方便。var reg = new RegExp('\\d{8-20}') reg.test(“11111111a”)这里的\,第一个\是转义符,用于转义。上面的例子还可...原创 2019-11-23 22:07:42 · 168 阅读 · 0 评论 -
JS数组的基本操作方法
一、concat()concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,仅会返回被连接数组的一个副本。var arr1 = [1,2,3];var arr2 = [4,5];var arr3 = arr1.concat(arr2);console.log(arr1); //[1, 2, 3]console.log(arr3); //[1, 2, 3, 4, 5]二...原创 2019-11-22 22:45:18 · 131 阅读 · 0 评论 -
JS 声明变量的三种方式
JS 声明变量的三种方式(1)使用变量步骤:a.声明–>b.赋值–>3.调用正确用法:<script type="text/javascript"> // 方式一:声明和赋值不分离 var correctUsage = "正确使用变量的方式一"; alert(correctUsage); //能够弹出来该变量所对应的值 // 方式二:声明和...原创 2019-11-21 21:53:18 · 795 阅读 · 0 评论 -
总结基础JS
最近总觉得自己所学到的Javascript基础知识不够系统,所以重新学习了Javascript的基本知识并有了这篇文章的产出。1、javaScript的概念:是一种表述语言,也是一种基于对象(Object)和事件驱动(EventDriven)的,安全性好的脚本语言,运行在客户端,从而减轻服务器端的负担,总结如下:1.javaScript主要用来向HTML页面找那个添加交互行为。2.javaS...原创 2019-11-20 19:50:24 · 168 阅读 · 0 评论 -
css3过渡动画2
前些天更新了css3过渡动画中的光标移过动画,激活动画,焦点动画以及选择动画,今天继续更新剩下的css3过渡动画中的目标动画,响应式动画和事件动画。1.选择动画:实例说明::checked 伪类在发生选中状况时触发过渡,取消选中则恢复原来的状态。本例设计当复选框被选中时缓慢缩进2个字符,演示效果如图所示。第一步:新建HTML5文档,设计表单结构。<form id=fm-form...原创 2019-11-18 21:53:23 · 211 阅读 · 0 评论 -
web JS基础
分支选择结构1、程序的流程控制1、顺序结构2、分支结构3、循环结构2、if结构1、语法if(条件){语句块}2、注意1、如果条件不是boolean类型,则会进行自动转换以下情况可以被转换成假: if(0){} if(0.0){} if(undefined){} if(""){} if(null){} if(NaN){} ...原创 2019-11-17 22:52:06 · 392 阅读 · 0 评论 -
数据类型&运算符&函数
1、数据类型转换1、隐式转换函数:typeof(变量) 或 typeof 变量与字符串做加法操作,最后会将其他数据转换为字符串2、转换函数1、toString()2、parseInt(数据)3、parseFloat(数据)4、Number(数据)2、运算符和表达式1、运算符算术运算符,关系运算符,逻辑运算符,位运算符 … …2、表达式由运算符以及操作数所组成的式子a+b...原创 2019-11-19 08:27:51 · 183 阅读 · 0 评论 -
JS中的运算符&函数&分支结构
1、运算符1、赋值运算符1、使用"="进行赋值注意:赋值符号的左边,必须是变量const PI=3.14;(特殊)2、扩展赋值表达式+=,-=,*=,/=,%=,&=,|=,^=ex: var num = 5; num+=3; ==> num=num+3; num-=5; ==> num=num-5;语法:a+=b;==> a=...原创 2019-11-14 19:14:41 · 219 阅读 · 0 评论 -
JS 数据类型的转换 &运算符和表达式
1、数据类型转换1、弱类型由数据来决定数据类型var num;//undefined num=12;//number num="你好";//string num=false;//boolean强数据类型:由数据类型来决定数据1 、typeof() 函数作用:获取指定数据的数据类型语法:typeof(变量) 或者 typeof 变量;使用:var result = typ...原创 2019-11-13 11:28:35 · 232 阅读 · 0 评论 -
使用JS以及变量和常量and数据类型
使用JS一、运行环境1、独立的JS解释器(NodeJS)2、浏览器内核中嵌入的JS解释器1、浏览器 Console 中直接输入脚本2、将JS嵌入在HTML页面中执行1、元素事件中console.log(“输出的内容”);2、window.alert("");alert("");2、变量和常量1、变量1、what内存中的一段存储空间2、变量的声明var 变量名;//...原创 2019-11-12 21:22:33 · 125 阅读 · 0 评论 -
JS 中的变量和常量 以及数据类型
变量的使用1、未经初始化的变量声明了变量,但是没有被赋过值,值默认为 undefined(未定义)var userName;//定义变量,但未赋值console.log(userName);//undefined小习惯:声明变量时,字符串的话可以设置默认值为"",如果是数字的话,可以设置默认值为 02、变量未被定义过,而被直接使用console.log(userName);语法错...原创 2019-11-11 14:11:04 · 377 阅读 · 0 评论 -
web js基础
1、什么是JSJS是一种运行于JS解释器/引擎中的解释型脚本语言编译型语言:程序在运行前会进行编译解释型语言:运行之前不会编译,直接执行,出错则停止 JS解释器/引擎:是JS脚本的运行环境 1、独立安装的JS解释器(NodeJS) 2、嵌入在浏览器内核中的JS解释器 PC,平板,手机,电视 ... 全部都支持JS2、JS的发展史 1、1992年 Nombas 为自己的软件开发...原创 2019-11-10 22:58:54 · 414 阅读 · 0 评论 -
css3过渡动画
过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形(transform)等等这些属性。css过渡只能定义首和尾两个状态,所以是最简单的一种动画。根据过渡动画的触发方式不同,可分为以下几点:1.光标移过动画最常用的过渡动画触发方式是使用:hover 伪类案例:设计当光标经过菜单项时,以过渡动画形式从中文界面缓慢翻转...原创 2019-11-08 16:07:00 · 494 阅读 · 0 评论 -
css转换(变形)
1、什么是转换 改变元素在页面中的大小,位置,角度和形状的一种方式2、转换分类1、2D转换使元素在x轴和y轴上发生变化效果2、3D转换在2D转换基础上,增加 z轴的变化效果3、转换属性属性:transform取值:1、none默认值,不进行任何转换2、转换函数表示一个或者多个转换函数,如果是多个函数的话,中间以空格分开4、转换原点属性:transform-ori...原创 2019-11-07 20:15:10 · 276 阅读 · 0 评论 -
CSS 动画
动画1、什么是动画使元素从一种样式逐渐变化为另一种样式其原理是通过 关键帧 控制动画的每一步注意:浏览器兼容性通过了浏览器前缀解决兼容性-moz--webkit--o-2、使用动画的步骤1、声明动画声明动画的名称,并且指定关键帧的信息关键帧:1、时间点2、该时间点上的状态(样式)2、使用动画通过动画属性,将动画效果绑定到某个元素上3、声明动画语法@keyfra...原创 2019-11-06 21:45:16 · 247 阅读 · 1 评论 -
css渐变文本格式化 及 表格
1、渐变1、线性渐变background-image:linear-gradient(angle,color-point,color-point);ex: background-image:linear-gradient(to bottom,#f9f9f9,#cdcdcd);2、径向渐变background-image:radial-gradient([size at positio...原创 2019-11-05 20:06:57 · 161 阅读 · 0 评论 -
css复杂选择器
1、兄弟选择器1、作用通过元素的平级关系来匹配其他元素只能向后不能向前2、分类1、相邻兄弟选择器匹配指定元素的相邻兄弟相邻:紧紧挨在指定元素的后面 语法: 选择器1+选择器2 ex: 1、div+p{} 2、#content+.important{}2、通用兄弟选择器通用:某元素后面所有的兄弟元素语法:选择器1~选择器22、属性选...原创 2019-11-04 22:23:01 · 154 阅读 · 0 评论 -
css渐变和浮动
1、渐变1、线性渐变background-image:linear-gradient(angle,color-point,color-point);ex:background-image:linear-gradient(to bottom,#f9f9f9,#cdcdcd);2、径向渐变background-image:radial-gradient([size at position]...原创 2019-11-03 22:56:55 · 336 阅读 · 0 评论 -
CSS BASIC 浮动、显示和列表
1、浮动1、定位普通流定位(文档流定位)浮动定位相对定位绝对定位固定定位2、浮动定位1、特征1、浮动元素 会被排除在文档流之外-脱离文档流,不占据页面空间,其他未浮动元素要上前补位2、浮动元素会停靠在父元素的左边或右边,或平级的其他已浮动元素的边缘上3、浮动元素依然位于父元素之内,并且只会在当前行内浮动4、浮动定位解决的问题------让多个块级元素在一行内显示2、语法:...原创 2019-11-02 22:47:38 · 150 阅读 · 0 评论 -
web尺寸与边框
尺寸与边框1、CSS单位1、尺寸单位1、%占据父元素尺寸的占比2、in英寸,1in=2.54cm3、cm厘米4、mm毫米5、px像素,计算机屏幕上的一个点6、pt(point)磅/点1pt=1/72in7、em1em 相当于 当前字体尺寸2em 相当于 当前字体尺寸的2倍注意:css中描述尺寸的单位是不能省略的。2、颜色单位1、rgb(r,g,b)r:r...原创 2019-11-01 18:08:37 · 2367 阅读 · 0 评论 -
css基础选择器
1、作用规范了页面中哪些元素能够使用定义好的样式同时也帮助我们去匹配页面上的元素2、选择器1、通用选择器(了解)1、作用匹配页面上所有的元素2、语法*{样式声明;}3、注意效率低,尽量不用尽可能通过 继承性 去代替通用选择器的效果2、元素选择器又名:标签选择器,标记选择器1、作用匹配页面某一指定元素比如:页面所有的 div 元素页面所有的 p 元素2、语法元...原创 2019-11-01 18:05:01 · 212 阅读 · 0 评论 -
使用CSS样式表的方式及样式表特征
CSS3 样式表由一个或多个CSS3样式组成,它分为内部样式表和外部样式表。两种样式表没有本质不同。一个style标签可以定义一个内部样式表。如果网页包含多个style标签,就表示该文档包含了多个内部样式表。一个CSS3文件可以定义一个外部样式表,这是一个文本文件,扩展名为.css。外部样式表必须导入到网页文档中才能有效。使用CSS样式表的方式·1、内联方式作用:将样式定义在单个的HT...原创 2019-10-31 15:46:07 · 1184 阅读 · 0 评论 -
html图像与连接(2)&语法
2、图像1、语法2、属性1、src指定要显示的图像的URL2、width3、height注意:等比缩放3、链接1、语法内容2、属性1、href链接文件URL2、target目标,打开新网页的方式取值:1、_self默认值2、_blank新标签页打开3、链接4种表现形式1、目标文档为下载资源xxx2、电子邮件链接xxxx3、返回页面顶部空链接...原创 2019-10-30 09:36:33 · 340 阅读 · 0 评论 -
html链接与图像
1、图像和链接1、URL1、目录 & 目录结构目录:WEB站点中文件夹的名称目录结构:由目录以及子目录形成复杂结构2、URLURL(Uniform Resource Locator)统一资源定位符作用:用来标识网络中资源的位置资源:图片,网页,音视频…俗称:路径(地址) URL在WEB页面上有三种表现形式: 1、绝对路径 2、相对路径 3、根相对路径 ...原创 2019-10-29 21:18:42 · 179 阅读 · 0 评论