阿陈陈陈-CSDN博客

原创 js---javascript BOM

事件通常与函数配合使用，这样我们可以通过发生的事件来驱动函数执行.常见事件:事件绑定在javascript中事件经常与函数一起使用，那么我们介绍一下怎样将一个事件与函数绑定到一起，简单说，就是某个事件被触发后，函数如果被调用。事件的三要素：事件、事件源、响应行为onclick事件...

2021-11-14 14:13:40 458

原创 h5---新增的结构性元素(header、footer、nav、article、section、aside、time、progress和meter元素进度条）

前端入门笔记之零散学习（1）最开始我们页面布局用的是table标签，然后演变成div+css布局，直到现在我们进行布局用新增的结构性元素。div+css布局新增的结构性元素常见的新增结构性元素1.header元素：一般用于网页的头部，定义头部的区域块，也可以定义一块内容，所定义的内容是一块独立的。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></t

2021-11-07 21:14:40 1570

原创 js---javascript DOM

前端入门笔记之js(17)DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。请看下面的 HTML 页面:这段代码可以用 DOM 绘制成一个节点层次图：DOM 通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。W3C DOM 标准被分为 3 个不同的部分：核心 DOM - 针对任何结构化文档的标准模型XML DOM - 针对 XML 文档的标准模

2021-11-07 16:25:43 177

原创 js---javascript 函数与事件(创建三种函数的方式、事件绑定、常用事件小例子)

创建函数在ECMAScript中函数有以下几种创建方式第一种function 函数名称(参数列表){函数体;return 返回值 //可以不返回}第二种var 函数名称=function(参数列表){函数体;}第三种：【了解，不用】Var 函数名称=new Function(参数列表,函数体);案例：...

2021-10-31 21:51:22 517

原创 js---javascript常用对象(RegExp正则表达式)

**正则表达式：**是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符串的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符的一种过滤逻辑。使用正则表达式的目的：给定的字符串是否符合正则表达式的过滤逻辑（称作“匹配”）可以通过正则表达式，从字符串中获取我们想要的特定部分正则表达式的特点：灵活性、逻辑性和功能性非常的强可以迅速地用极度简单地方式达到字符串地复杂控制创建的两种方式： var reg = new RegExp(pattern);var re

2021-10-31 20:52:41 203

原创 js---javascript常用对象（Math）

前端入门笔记之js(13)Math 对象用于执行数学任务。使用 Math 的属性和方法的语法：var pi_value=Math.PI;var sqrt_value=Math.sqrt(15);注意：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。例子： <script> v

2021-10-31 14:33:39 236

原创 js---javascript常用对象（Date）

前端入门笔记之js（12）Date 对象用于处理日期和时间。创建 Date 对象的语法：var myDate=new Date()

2021-10-31 14:10:51 138

原创 js---javascript常用对象（String）

前端入门笔记之js（11）String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。需要注意的是，JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。创建 String 对象的语法：var str1=new String(s);var str2=String(s);...

2021-10-31 11:33:13 90

原创 js---javascript常用对象（Array）

前端入门笔记之js（10）Array （数组）对象用于在单个的变量中存储多个值。创建 Array 对象的4种语法：var arr1=new Array();var arr2=new Array(size);var arr3=new Array(element0, element1, …, elementn);var arr4=[“ndjsn”,“ndi”,“dmciw9”];var arr=new Array(3);//第一种，第二种类似就不过多阐述arr[0]=“123”;arr[1]=

2021-10-31 11:16:01 282

原创 js---javascript常用对象（ Number）

前端入门笔记之js(9)JavaScript 还支持 Number 对象，该对象是原始数值的包装对象。在必要时，JavaScript 会自动地在原始数据和对象之间转换。语法：var myNum=new Number(value);有new返回的类型是objectvar myNum=Number(value);没有new，返回的类型是本身对象的名字例子：...

2021-10-31 10:54:41 258

原创 js---javascript常用对象（ Boolean）

前端入门笔记之js(8)Boolean 对象: 是一个将布尔值打包的布尔对象。Boolean 对象主要用于提供将布尔值转换成字符串的 toString() 方法。语法：new Boolean(value); //构造函数Boolean(value); //转换函数当作为一个构造函数（带有运算符 new）调用时，Boolean() 将把它的参数转换成一个布尔值，并且返回一个包含该值的 Boolean 对象。如果作为一个函数（不带有运算符 new）调用时，Boolean() 只将把它的参数转换成

2021-10-31 10:48:18 195

原创 js---逻辑语句(if-else、switch、for、for in）

前端入门笔记之js（7）逻辑语句：JS的逻辑语句也跟Java 大部份相似(1)if-else(2)Switch(3)For(4)for in在数组里的遍历：在对象里的遍历：<script>var obj = { attr1: "value1", attr2: "value2"}for(attr in obj) { console.log("value of "+ attr + " is: " + obj[attr]); }</scr

2021-10-26 10:12:23 115

原创 js---运算符

前端入门笔记之js（6）JavaScript的运算符和表达式与Java 大部份相似(1)赋值运算符var x = 5;(2)算数运算符+: 遇到字符串变成连接-：先把字符串转成数字然后进行运算*: 先把字符串转成数字然后进行运算/: 先把字符串转成数字然后进行运算(3)逻辑运算符&& ||(4)比较运算符< > >= <= != =====:全等：类型与值都要相等(5)三元运算符3<2?“大于”:“小于”(6)void运算符

2021-10-25 16:31:52 174

原创 js---类型转换（转换成字符串、装换成数字、强制类型转换）

前端入门笔记之js（5）类型转换ECMAScript为开发者提供了大量的类型转换方法。大部分类型具有进行简单转换的方法，还有几个全局方法可以用于更复杂的转换。Boolean 值、数字和字符串的原始值它们是伪对象，这意味着它们实际上具有属性和方法。转换成字符串toString()方法.把number转成string、boolean转string例子：<!DOCTYPE html><html><head> <meta charset="utf

2021-10-24 21:49:03 280

原创 js---变量的两种数据类型（原始数据类型、应用数据类型）

前端入门学习之js（4）数据类型的类型：在ECMAScript中，变量可以存在两种数据类型，即原始类型与引用类型。原始类型的含义：相当于 Java基本数据类型原始类型原始类型，可以理解成是一个值类型。简单说，就是一个字面值，它是不可变的，例如: 10 “abc”ECMAScript有五种原始类型：1. String 在javascript中字符串字符串字面值，可以使用单引号或双引号声明。2. Number 在javascript中任何数字都看成是Number类型，它即可以表示32位整数，也

2021-10-20 10:11:55 366

原创 js---变量声明的两种方法

Javascript基础语法变量声明变量是用于存储信息的容器javascript中的变量与我们在java中的变量不一样。在javascript中使用 var 运算符（variable 的缩写）加变量名定义的JavaScript 变量名称的规则：变量对大小写敏感（y 和 Y 是两个不同的变量）变量必须以字母或下划线开始注意：由于 JavaScript 对大小写敏感，变量名也对大小写敏感。Int i=10;var i = 10;数据类型在ECMAScript中，变量可以存在两种数据类型，

2021-10-19 17:41:55 584

原创 js---JavaScript的使用(两种导入方法)

前端入门笔记之js（2）导入js方式第一种：1. 在html页面中直接插入javascript2. 如需在 HTML 页面中插入 JavaScript，请使用 scripvt 标签。例如:那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。注意: <script>标签可以出现在html页面的任意位置，但实际操作中，一般会写在

2021-10-18 16:18:14 4688

原创 js---什么是JavaScript

前端入门笔记之js(1)什么是JavaScript: 是因特网上最流行的脚本语言，它存在于全世界所有 Web 浏览器中，能够增强用户与 Web 站点和 Web 应用程序之间的交互。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。JavaScript 与 Java 是两种完全不同的语言。脚本语言：脚本语言又被称为扩建的语言，或者动态语言，是一种解释型语言，由解释器来运行，用来控制软件应用程序，脚本通常以文本保存，只

2021-10-18 16:17:31 149

原创 css---风筝效果（margin-left、left: 100%）

前端入门笔记之css（）知识点：**margin-left：**让元素向左移动多少像素，**margin-top：**让元素向上移动多少像素left: 100%： left的%，对应的是父级的widthtop: 100%：top的%，对应的是父级的heigh代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style

2021-10-17 21:31:57 387

原创 css---光标样式

前端入门笔记之css（12）光标样式属性：cursor 更改鼠标图标{cursor: crosshair;}光标呈现为十字线 1.url：需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 2.default：默认光标（通常是一个箭头） 3.auto：默认。浏览器设置的光标。 4.crosshair：光标呈现为十字线。 5.pointer：光标呈现为指示链接的指针（一只手） 6.move：此光标指示某对象可被移动。

2021-10-10 16:20:27 2352

原创 css---盒子模型（边框、内边距、外边距）

前端入门笔记之css（10）盒子模型CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距。外边距默认是透明的，因此不会遮挡其后的任何元素。四种设置方向的固定格式：上、右、下、左（顺时针）上、左右、下上下、左右上下左右边框元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你

2021-10-10 12:06:33 987

原创 css---分类（clear、float、display、visibility)

前端入门学习之css(9)分类 CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及t元素的可见度。 常用属性 clear:设置一个元素的侧面是否允许其它的浮动元素 float:定义元素在哪个方向浮动 cursor:当指向某元素之上时显示的指针类型 display:定义是否及如何显示元素 visibility:定义元素是否可见或不可见。...

2021-10-10 11:16:44 236

原创 css---继承定位和默认定位

前端入门笔记之css(8)继承定位：继承父级的定位。父级是什么定位，它就是什么定位{position:inherit;left:2000px;top:0;}

2021-10-09 17:11:05 346

原创 css---窗口定位（固定定位）和滚动条设置

前端入门笔记之css（7）窗口定位：根据窗口进行定位。可以滑动，广告栏类似的状态；有滚动条的话，一直跟着窗口走；绝对定位不会跟着窗口走。{position：fixed；left:300px;top:300px}

2021-10-09 11:27:06 3434

原创 css---绝对定位

前端入门笔记之css（6）绝对定位：绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）。绝对定位的语法：{position: absolute}1.脱离标准流：绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的相应顺序。2.原来的位置不会保留3.绝对定位是根据有定位的父级元素进行定位4.如果父级元素

2021-09-30 16:53:07 239

原创 css---相对定位和z-index的使用

前端入门笔记之css（6）定位1、CSS 定位 (Positioning) 属性允许你对元素进行定位。2、定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置3、CSS 有三种基本的定位机制：普通流、浮动和绝对定位。4、固定定位：fixed相对定位：relative绝对定位：absolute静态定位：static集成定位：inherit常用属性:1、position:把元素放置到一个静态的,相对的，绝对的，或固定的

2021-09-27 11:44:55 810

原创 css---轮廓

web前端入门笔记之css(5)轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度。常用属性:outline:在一个声明中设置所有的轮廓属性outline-color:定义轮廓的颜色outline-style:定义轮廓的样式outline-width:定义轮廓的宽度代码：<!DOCTYPE html><html><head> <meta ch

2021-09-17 09:58:37 95

原创 css---列表和表格

列表CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。常用属性:list-style:简写属性。用于把所有用于列表的属性设置于一个声明中。list-style-image:定义列表项标志为图象list-style-position:定义列表项标志的位置list-style-type:定义列表项标志的类型。代码截图：结果截图：表格 CSS 表格属性可以帮助您极大地改善表格的外观 常用属性: border-collapse:定义是否把表格边框合并为单一的边框。

2021-09-14 21:25:13 108

原创 css---css属性（字体、文体、背景、尺寸）

web前端入门笔记之css（3）CSS属性字体Css字体属性定义文本的字体系列，大小，加粗，风格(如斜体)和变形(如小型大写字母)常用属性:font:简写属性，作用是把所有针对字体的属性设置在一个声明中。font-size:定义字体的尺寸font-style:定义字体风格代码： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title>

2021-09-13 17:12:49 484

原创 css---六种选择器

web前端入门笔记之css（2)CSS选择器css选择器主要是用于选择需要添加样式的html元素。对于css来说，它的选择器有很多，我们主要介绍以下几种:元素选择器这是最常见的选择器，简单说，文档中的元素就是选择器注意：div在style里，style在head标签里属性选择器如果需要选择有某个属性的元素，而不论属性是什么，可以使用属性选择器id选择器id选择器使用**#引入，它引用的是id属性中的值。注意：style标签的位置在head标签里面。div标签里面需要添加id的值*

2021-09-13 11:42:59 712

原创 css---四种导入方式

web前端入门笔记之css（1）css是什么 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表【.css文件、css区域】中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一...

2021-09-09 21:20:26 613

原创 html---frameset框架标签

web前端入门笔记之html（14）框架标签⦁ 所谓框架就是将页面划分成几个窗框，就可以让我们在同一个浏览器中显示不止一个页面。（也就是把当前展示的页面划分成几块）< frameset>⦁ < frameset>是框架结构标签，它定义如何将窗口分割为框架.⦁ 注意:不能与 < frameset>< /frameset> 标签一起使用 < body>< /body> 标签。⦁ 常用属性:⦁ cols:垂直切割⦁ ro

2021-08-24 16:52:43 704

原创 html---特殊符号

2021-08-19 16:47:16 66

原创 html---表单小练习

web前端入门学习（13）表单小练习收集顾客信息：截图：代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body bgcolor="lightblue"> <div>用户名： <input type="text" name="yonghuming" value

2021-08-19 16:39:45 88

原创 html---表单标签

web前端入门之html（12）表单标签form标签⦁ < form>标签代表一个表单，表单用于向服务器传输数据。⦁ < form>标签能够包含< input>，可以是文本字段，复选框，单选框或提交按钮等。还可以包含< textarea> < select>等。⦁ < form>常用属性:⦁ name:用于定义表单的名称⦁ action:用于规定提交表单时向何处发送表单数据。⦁ method:用于规定提交的方式。一般

2021-08-13 11:21:56 184

原创 html---网上书城案例

web前端入门之html（11）网上书城案例简单实现1.前期准备：划分图片结构1.截图：2.代码：<!DOCTYPE html><html><head><meta http-equiv="Conten

2021-08-11 13:45:05 2814

原创 html---表格标签

web前端入门之html（10）表格标签1.table⦁ < table>标签用于定义表格⦁ 常用属性:align:用于设定表格的对齐方式bgcolor:用于设定表格的背景颜色。border:用于设定表格边框的宽度width:用于规定表格的宽度。2.tr⦁ < tr>标签用于定义表格的行,包含一个或多个th或td元素。⦁ < tr>常用属性:align:用于设定表格中行的内容对齐方式。bgcolor:用于设定表格中行的背景颜色。3.td⦁ &

2021-08-10 16:19:48 572

原创 html---＜a＞链接标签

web前端入门笔记之html（9）链接标签1.a 标签⦁ < a>标签用于定义超连接，用于从一个页面链接到另一个页面。⦁ 常用属性:href:用于设定链接指向页面的url.name:用于设定锚的名称target:用于设定在何处打开链接页面。target属性:_blank 新窗口打开链接_self 当前页打开链接download：规定被下载的超链接目标。hreflang：规定被链接文档的语言。media：规定被链接文档是为何种媒介/设备优化的。rel：规定当前文档与被链

2021-08-09 17:32:58 109

原创 html---img图形标签

web前端入门笔记之html（8）图形标签1.img 标签⦁ < img>是一个图片标签，用于在页面上引入图片.⦁ 常用属性：src:用于设定要引入的图片的urlwidth:用于设定图片的宽度 height:用于设定图片的高度(不设置宽和高时，系统会自动默认图片的大小，如果自己设置了宽高跟原来的图片比值不一样的话，图片就会变形）alt:用于设定图像的替代文字,如果图片不存在时，会出现当做提示的内容title：用来告诉浏览器，当鼠标悬停在图片时显示的内容border：图片边框厚

2021-08-06 17:25:59 452

原创 html---列表标签（ul、li、ol）

web前端入门笔记之html（7）列表标签1.ul⦁ < ul>标签表示的是一个无序列表。常用属性:type:规定列表的项目符号类型,可取值 disc（圆点）,square（方块）,circle（圆圈）.默认值为disc<ul>你好呀，你好呀！</ul><ul type="disc">你好呀，你好呀！</ul><ul type="square">你好呀，你好呀！</ul><ul type="circl

2021-08-06 16:37:26 4504

空空如也

空空如也