Web前端基础
关注
分享
扫一扫
文章平均质量分 61
karry_孙二
学习记录
展开
-
Web前端-29-JavaScript-操作元素属性
操作元素属性1.操作属性的方法（1）“ . ” 操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js 操作元素属性</title> <script type="text/javascri...原创 2018-11-21 09:59:11 · 249 阅读 · 0 评论 -
Web前端-28-JavaScript-尺寸样式操作
JavaScript尺寸样式操作如需改变 HTML 元素的样式，请使用这个语法：document.getElementById(id).style.属性名=新样式var box = document.getElementById('box'); //获取boxbox.style.css.style;...原创 2018-11-21 09:59:00 · 206 阅读 · 0 评论 -
Web前端-27-JavaScript-事件
JavaScript事件JavaScript事件是由访问Web页面的用户，引起的一系列操作，例如：用户点击。当用户执行某些操作的时候，再去执行一系列代码。//在HTML中把事件处理函数作为属性执行JS代码<input type="button" value="按钮" onclick="alert('Lee');" /> //注意单双引号...原创 2018-11-21 09:58:50 · 165 阅读 · 0 评论 -
Web前端-26-JavaScript-DOM
JavaScript DOMDOM（Document Object Model）即文档对象模型，针对HTML和XML文档的API（应用程序接口）。DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM中的三个字母，D（文档）可以理解为整个Web加载的网页文档；O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是docume...原创 2018-11-20 08:50:52 · 141 阅读 · 0 评论 -
Web前端-25-JavaScript-BOM
JavaScript BOM浏览器对象模型 (BOM)浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性1.警告框 alert警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。...原创 2018-11-20 08:48:27 · 201 阅读 · 0 评论 -
Web前端-24-JavaScript-数组
JavaScript数组1.使用new关键字创建数组var box = new Array(); //创建了一个数组var box = new Array(10); //创建一个包含10个元素的数组var box = new Array('曹老师',...原创 2018-11-20 08:46:56 · 146 阅读 · 0 评论 -
Web前端-23-JavaScript-对象
JavaScript对象1.对象定义JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。2.创建对象（1）使用new运算符创建Objectvar people= new Object(); //new方式people.name='suner';...原创 2018-11-20 08:45:50 · 112 阅读 · 0 评论 -
Web前端-22-JavaScript-函数
JavaScript函数1.函数的定义函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。（1）函数是完成某一功能的代码段（2）函数是可重复执行的代码段（3）函数方便管理和维护2.语法格式function 函数名称（[参数][ 参数][ 参数]）{代码段return 返回值}<!DOCTYPE html><ht...原创 2018-11-20 08:44:34 · 133 阅读 · 0 评论 -
Web前端-21-JavaScript-运算符
JavaScript运算符1.算术运算符表达式是用于JavaScript脚本运行时进行计算的式子，可以包含常量变量运算符。（1） 加法var box = 1 + 2; //等于3var box = 1 + NaN; //NaN，只要...原创 2018-11-20 08:43:50 · 218 阅读 · 0 评论 -
Web前端-20-JavaScript-流程控制语句
JavaScript流程控制语句1.if... else语句if (条件表达式) {语句;} else if (条件表达式) {语句;} ... else {语句;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js...原创 2018-11-20 08:43:13 · 223 阅读 · 0 评论 -
Web前端-19-JavaScript-数据类型
JavaScript数据类型1.String类型JavaScript 字符串：字符串是存储字符（比如 "Head teacher"）的变量。字符串可以是引号中的任意文本。您可以使用单引号或双引号：var carname='Head teacher';2.Number类型JavaScript Number类型：JavaScript 只有一种数字类型。数字可以带小...原创 2018-11-20 08:32:48 · 224 阅读 · 0 评论 -
Web前端-18-JavaScript-变量
JavaScript变量JavaScript描述了一组具有特定用途的关键字，一般用于控制语句的开始或结束，或者用于执行特定的操作等。关键字也是语言保留的，不能用作标识符1.关键字break else new var case finally return void catch for switch while co...原创 2018-11-20 08:32:19 · 139 阅读 · 0 评论 -
Web前端-17-JavaScript-概述
JavaScript概述1.概述JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算...原创 2018-11-20 08:31:35 · 605 阅读 · 0 评论 -
Web前端-16-css-背景属性
css背景属性（1）background-color 背景颜色（2）background-image:url(“背景图片地址URL”)（3）background-repeat: 图片是否平铺值：①repeat 默认 x轴 y轴 都平铺②no-repeat 不平铺③repeat-x x轴平铺 y轴不平铺④repeat-y y轴平铺 x轴不平铺（4）background...原创 2018-11-18 11:52:25 · 243 阅读 · 0 评论 -
Web前端-15-css-伪类元素
css伪类元素a:link{color:red;/*未访问的链接*/}a:hover{color:green;/*鼠标滑过链接*/}a:active{color:pink;/*鼠标点击的效果*/}a:visited{color:blue;/*访问过的链接*/}<!DOCTYPE html><html ...原创 2018-11-18 11:52:20 · 230 阅读 · 0 评论 -
Web前端-14-css-盒子模型
css盒子模型盒子模型：元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。设置边框border设置一边的边框，比如顶部边框，可...原创 2018-11-18 11:52:11 · 343 阅读 · 0 评论 -
Web前端-13-css-浮动属性
css浮动属性1.css浮动属性Float 浮动Float：left 左浮动Float：right右浮动2.css对齐操作（1）使用margin属性进行水平对齐Margin-left：auto；Margin-right：auto;（2）使用position属性进行左右对齐Position:absolute;Left:0;Right:0;...原创 2018-11-18 11:52:00 · 370 阅读 · 0 评论 -
Web前端-12-css-定位属性
css定位属性1.position属性（1）定位方式absolute(绝对定位)、fixed(固定）（relative定位参考，可对内部相对absolute定位）z-index: 层叠顺序，值越大越在上方。top: 检索或设置对象与其最近一个定位的父对象顶部相关的位置right: 检索或设置对象与其最近一个定位的父对象右边相关的位置bottom: 检索或设置对象...原创 2018-11-18 11:51:52 · 291 阅读 · 0 评论 -
Web前端-11-css-边框属性
css边框属性1.border属性（1）border:复合属性,设置对象边框的特性, 如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置（2）例如：border:1px solid red;设置或检索对象边框宽度设置或检索对象边框样式设置或检索对象边框颜色<!DOCTYPE html><html lang="en"...原创 2018-11-18 11:51:41 · 1571 阅读 · 0 评论 -
Web前端-10-css-文本属性
css文本属性1.text-indent属性（1）text-indent: 首行缩进（2）例如：text-indent:30px; <!--首行缩进30个像素--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <titl...原创 2018-11-18 11:51:28 · 466 阅读 · 0 评论 -
Web前端-9-css-字体属性
CSS字体属性1.font-size属性（1）font-size:设置字体尺寸,字体大小。（2）例如：font-size:14px;2.font-family属性（1）font-family:设置文本的字体名称序列，一般字体引用可以不加引号，如果字体名包含了空格、数字或者符号（如连接符）则需加上引号，避免引发错误。（2）例如：font-family:Arial;...原创 2018-11-18 11:51:16 · 919 阅读 · 0 评论 -
Web前端-8-css-颜色属性
css颜色属性1.HSL属性（1）HSL颜色:通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。H:Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360。S:Saturation(饱和度)。取值为：0.0% - 100.0%。L:Lightness(亮度)。...原创 2018-11-17 22:27:22 · 477 阅读 · 0 评论 -
Web前端-7-css-选择器
选择器1.选择器格式选择器{ 声明 1；声明2；声明3；.....声明N}其中选择器也叫选择符（1）这里的声明是以 “属性:值”的形式，而且多个声明之间用分号进行分割（2）例如：h1 {color:red; font-size:14px;}h1 ，就是选择器，当然这里我们直接用标签当做选择器了Color，属性取值为redfont-size属性取值为 14个像素。其中...原创 2018-11-17 22:27:10 · 169 阅读 · 0 评论 -
Web前端-6-css-样式
css概述CSS是英文Cascading Style Sheets(层叠样式表)的缩写，CSS语言是一种标记语言，它不需要编译，可以直接由浏览器解释执行(属于浏览器解释型语言)。css优点1）表现和内容相分离将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息，这样的页面对搜索引擎更加友好。2）提高页面浏览速度对于同一个页面的视觉效果，采用DIV+CSS重构...原创 2018-11-17 22:26:53 · 199 阅读 · 0 评论 -
Web前端-5-html-From标签
form标签（1）表单是HTML中重要组成部分，是网页提供的一种交互式操作手段，主要用于采集和提交用户输入的信息。表单是一个包含表单元素的区域，而表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。（2）在HTML中，只要在需要使用表单的地方插入成对的表单标记<form></form>，就可以完成表单的基本定义，基本语法如下...原创 2018-11-14 22:45:27 · 828 阅读 · 0 评论 -
Web前端-4-html-图片标签
图片标签1）<img>标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。2）<img>标记创建的是被引用图像的占位空间，语法格式如下。像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascr...原创 2018-11-14 22:42:05 · 2798 阅读 · 0 评论 -
Web前端-3-html-超链接
超链接定义1）所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。2）<a>标签可以在网页上定义一个链接地址，通过href属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。...原创 2018-11-14 22:41:18 · 1972 阅读 · 0 评论 -
Web前端-2-html-列表
html列表在HTML文件中，除了使用标记对文字进行修饰以外，HTML还可以提供列表，可以对网页文字进行更好的布局和定义。列表项目以项目符号开始，这样有利于将不同的内容分类呈现，将项目有序或无序地罗列显示，并体现出重点。有序列表1）所谓有序列表，就是有顺序的列表，即列表前面带个123或abc。英文单词为“Ordered List”，标签为<ol>...</ol&...原创 2018-11-14 22:40:26 · 494 阅读 · 0 评论 -
Web前端-1-html-页面标签
html概述1）HTML是英文HyperText Markup Language的缩写，即超级文本标记语言，是用于描述网页文档的一种标记语言。2）HTMl是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML命令可以说明文字、图形、动画、声音、表格、链接等。3）特点①简易性，HTML版本升级采用超集方式，从而更加灵活方便。 ②可扩展性，HTML语言的广泛应用带...原创 2018-11-14 16:42:12 · 1573 阅读 · 0 评论