一、HTML前端
编写前端使用的是HTML，超文本标记语言。首先是一个标记语言，需要有标签。每一个标签需要有特定的单词或者单词组合完成。
1.1 网页基本要素——-文本
用代码处理网页上的文字。
使用的标签如下：
<!-- 处理文字的颜色、字体大小、字体样式，使用标签font --><font>你追我，你追到我，我就嘿嘿嘿</font><!--如果单纯的使用font标签，没有任何效果，需要配合使用属性--><!--设置字体颜色,需要属性color--><font color = "red">你追我，你追到我，我就嘿嘿嘿</font><!-- 设置文本的大小，需要属性size 取值范围：1-7整数--><font size = "6">你追我，你追到我，我就嘿嘿嘿</font><!-- 设置文本的样式,默认样式微软雅黑--><font face = "楷体">你追我，你追到我，我就嘿嘿嘿</font><!-- 一个标签中，可以同时使用多个属性--><font size = "6" color = "green" face = "楷体">你追我，你追到我，我就嘿嘿嘿</font><!-- 文本加粗--><b>哈哈哈哈哈哈哈哈</b><strong>黑恶黑恶黑</strong><!-- 文本设置斜体--><i>斜体斜体斜体</i><!-- 文本下划线--><u>文本下划线</u><!-- 设置标题：标题自带换行，加粗和文本的大小 --><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!--其他的文本标签自带换行以及间距--><p>段落</p><!--标记文本--><span>标记文本</span>
1.2 网页基本要素——-图片
在页面上显示一张图片
要在网页上展示一张图片，需要用到的标签<img src="图片来源的路径">
- 图片来源的路径
绝对路径：以服务器为基础，访问服务器上的资源，以HTTP或者HTTPS开头的网络资源。
相对路径：图片资源一般存放在自己的工程里面，由工程里面的相对位置进行查找。参考点以自身html文件为基准。如果是和当前代码文件在同一个文件夹下，路径填写名称.后缀即可，如果在子目录里面，添加上目录名称即可。如果不在同一个目录，需要../目录名称/图片名称.后缀。 - 图片的一些属性
1、显示一张完整的图片<img src = "../img/1.jpg">2、调整图片的大小:一般情况下，只设置一个就行，另外一个同比例缩放<img src = "../img/1.jpg" width = "200px" height = "200px">3、鼠标悬停在图片上显示文本信息<img src = "../img/1.jpg" title = "文本提示">4、当图片未加载出来的时候，显示的文本信息<img src = "../img/2.jpg" alt = "图片正在加载.....">
1.3 网页基本要素——-超链接
从一个网页跳转到一个新的网页。
使用的标签：<a href = "网页的来源">点我</a>
在超链接里面存在绝对路径和相对路径，与之前图片的内容一致。
示例代码：<a href = "http://www.baidu.com">点我</a>//跳转到自己工程里面的相对路径，不会打开新的网页标签<a href="图片.html">点我</a>打开新的网页标签：<a href="图片.html" target="_blank">点我</a>
1.4 表格
通过代码实现页面上表格，用表格进行布局，将图片、文字和超链接等内容放置在表格里面不同的单元格就可以。实现表格的标签table标签表示整个表格、tr标签表示一行、td标签表示一个单元格。
1、定义一个三行三列的表格。<table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>
- 表格标签及其对应的属性
一、table标签1、border:边框，默认值为0，设置为1才会显示2、width:表格的宽度3、height:表格的高度4、cellspacing:设置表格之间的间距，默认值为2，设置为0表示去掉间距。5、cellpadding:设置内容到边框之间的间距。6、align = "center":将表格居中7、bgcolor:设置整个表格的背景颜色。8、background：背景图片二、tr标签1、height：表示设置一行的高度2、align = "center":将一行的内容水平居中3、bgcolor:设置一行的背景颜色4、background：设置一行的背景颜色三、td标签1、width：设置单个单元格的宽度，设置每一列的第一行即可2、height:设置单个单元格的高度，设置每一行的第一列即可3、align:设置单个单元格内容居中4、bgcolor：设置单个单元格的背景颜色5、background：设置单个单元格的背景图片四、合并单元格：1、colspan：合并列2、rowspan:合并行
二、CSS层叠样式表
层叠样式表：用来设置所有的前端样式，包括：字体样式、高度、宽度、边框等样式，全部抽取成css的样式表，简单理解：用css完成前端的样式设置，替代标签标签中的属性。
2.1 常用的css样式
1、border:边框2、width:宽度3、height:高度4、background-color：背景颜色5、margin:外边距6、padding:内边距7、box-sizing:配合使用内边距8、border-radius:设置圆角9、position:fixed:屏幕的绝对定位需要配合使用left和top的css属性进行调整位置10、position: absolute;根据父容器进行绝对定位需要配合使用left和top的css属性进行调整位置11、opacity：取值范围在0-1之间。12、cursor: pointer;鼠标样式设置文本：color:颜色font-size:字体大小text-align:设置文本水平居中font-family：设置字体的样式line-height：设置一行文本垂直居中font-weight：文本加粗font-style: italic;文本斜体text-decoration: underline;下划线
2.2 css实现的三种方式
- 内联方式：不推荐
在标签中使用style=”css的样式”;一个标签里面，只需要一个style属性即可，可以在一个style里面添加多个css样式，中间用分号隔开 - 内部方式
在head标签之间，新加一个标签：style，在style标签之间，定义一些选择器，在选择器里面再编写css样式，通过在标签中调用选择器的方式，完成关联。
选择器5个：
1、id选择器:按照要求，id选择器虽然多次使用一样生效，不允许多次使用，id选择器只能被使用一次
#id选择器名称{
css样式
}
使用：在标签中添加id = “选择器名称”；
2、class选择器
.class选择器名称{
css样式;
}
使用：在标签中添加class = “选择器名称”;
3、标签选择器
标签名称{
css样式；
}
使用：不需要使用，只要在body中有和标签选择器名称一样的，就直接渲染
4、组合选择器
多个选择器一起使用，前面的选择器用来选定范围，最后一个选择器用来作用样式
#table1 td{
css样式；
}
解析：将使用了#table1选择器范围内的所有td标签渲染上。
5、伪类选择器
可以做一些样式，比如鼠标悬停
选择器:hover{
鼠标悬停之后的css样式
} - 外部引用
<link href="../css/css1.css" rel="stylesheet" />
三、DIV盒模型
简单理解：单个的单元格
- 设置外边距
只要是边框与边框之间的距离，都称为外边距，设置外边距使用css属性：
margin-top:上外边距
margin-left:左外边距
margin-right:右外边距
margin-buttom:下外边距 - 设置内边距
只要是div里面的内容到边框的距离，都称为内边距
padding-top:上内边距
padding-left:左内边距
padding-right:右内边距
padding-buttom:下内边距
一、CSS选择器补充讲解
1.1 有序列和无序列
- 无序列：使用标签ul和li的组合，ul是li的父标签，在前面的位置，会有黑色的圆点（可以使用css设置将黑圆点去掉）
<ul id = "one"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
- 无序列效果：
- 有序列：使用标签ol和li的组合，ol是li的父标签，在前面的位置，会自动加上数字编号。
<ol id = "three"><li>0</li><li>00</li><li>000</li><li>0000</li></ol>
- 有序列效果图
1.2 补充的css选择器
1、全局选择器：* 作用是将整个网页符合要求的全部标签选择上
2、多选择器：选择器1,选择器2 将符合两个选择器的标签同时选择上
3、找出指定元素下的符合要求的子标签：选择器1>选择器2
4、找出符合要求标签的紧邻下一个兄弟标签：选择器1+选择器2
5、找出符合要求标签的后面所有兄弟标签：选择器1~选择器2
6、找出指定标签中有指定的属性名称：选择器[属性名]
7、找出指定标签中有指定属性名称并且该属性有指定的值：选择器[属性名=值]
8、找出指定标签中有指定属性名称并且属性值中包含特定字符：选择器[属性名*=字符]
9、找出指定标签中有指定属性名称并且属性值按照特定字符开头：选择器[属性名^=字符]
10、找出指定标签中指定属性名称并且属性值按照特定字符结尾：选择器[属性名$=字符]
11、选择出a标签是否被点击了，必须有网址，而且要网址不重复
a:link 未被点击a:visited 已经被点击
12、选择出符合选择器要求的子标签，并且该标签必须属于父标签下的第一个子标签。
选择器:first-child
13、选择出一个父标签下第一个满足要求的子元素
选择器:first-of-type
14、选择出一个父标签下具有唯一特性的子元素
选择器:only-of-type
15、找出一个父标签中第几个子元素
选择器:nth-child(2)
16、找出一个父标签下的最后一个子标签
选择器:last-child()
二、表单
<html><head><meta charset="utf-8"><title>表单</title></head><body><!-- 前端的表单，是为了向服务器发送请求连接，并且带数据的--><form>用户名：<input type = "text" name = "userName" placeholder="请输入用户名"/><br />电话：<input type = "text" name = "tel" maxlength="11" placeholder="请输入电话号码"/><br />密码：<input type = "password" name = "password" /><br />性别：<input type = "radio" name = "gender" value = "基佬" />男<input type = "radio" name = "gender" value = "女" />女<input type = "radio" name = "gender" checked="checked" value = "保密" />保密<br />兴趣爱好：<input type = "checkbox" value = "游泳" name = "inst" />游泳<input type = "checkbox" value = "拍照" name = "inst" checked="checked"/>拍照<input type = "checkbox" value = "爬山" name = "inst" />爬山<br />所在城市：<select name = "city"><option value = "重庆">重庆</option><option value = "上海">上海</option><option value = "广州" selected="selected">广州</option><option value = "厦门">厦门</option><option value = "三亚">三亚</option></select><br />个人简介：<br /><textarea rows="10" cols="80"></textarea><br /><button>提交</button><input type="submit" value = "提交" /><input type="button" value = "提交" /><input type = "reset" value = "重置" /></form></body></html>
一、javascript介绍
1.1 概念
javascript是一门轻量级的前端脚本语言，js是一门独立的开发语言，独立的封装函数库，js是一个弱类型的开发语言。
1,2 JavaScript的组成
ECMAScroipt:js的基础部分，包含：变量、数据类型、运算符、控制结构、函数、数组、对象DOM对象:document Object model 文档对象模型(重点)BOM对象:browser object model 浏览器对象模型
二、js的基础
2.1 js的输入和输出
- js的输入
//打开弹出框进行输入window.prompt("请输入内容：");
- js的输出
//1、以弹出框的方式进行输出，一般不用，优先级过高，线程阻塞的方法window.alert("输出的内容：哈哈哈");//2、在body网页的部分显示内容，提前感受一下DOM，不推荐的document.write("我到网页端了");//3、在控制台输出console.log("输出的内容");
2.2 数据类型
1、number：数字类型，所有的数字都用该类型
2、string:字符串类型，包括了字符类型，可以使用双引号，也可以使用单引号。
3、boolean：布尔数据类型，true和false
4、Array：数组类型，本身实际属于对象数据类型
5、Object:对象数据类型，包括自定义对象，时间对象，数组对象等。Object属于js对象里面的超类，
可以使用Object obj = new Object();
6、function:函数类型，可以将一个函数当成变量，赋值一个变量名。
7、undefined:未定义，在变量没有定义就使用的时候，会变成未定义错误，xxx not defined
8、null:空数据类型。
9、not a number:不是一个数字，当不是number数据类型的时候，进行了算术运算，会提示NaN
2.3 变量
第一种方式：使用var关键字进行修饰，定义变量同时赋值
var num = 10;
第二种方式：先定义变量，再赋值
var flag;
flag = false;
第三种方式：不用var修饰，直接使用变量赋值
str = “abc”;
第四种方式：在js要使用局部变量,一般在循环的时候可以使用。
let i = 0;
- 使用typeOf函数完成判断该变量具体是什么数据类型。
<script>var num1 = 10;console.log(typeof(num1));var num2 = 12.5;console.log(typeof num2);var str = 'a';console.log(typeof str);var msg = "123123";console.log(typeof msg);var flag = false;console.log(typeof flag);var arr = [1,2,3];console.log(typeof arr);var date = new Date();console.log(typeof date);var obj = new Object();console.log(obj);var fun = function(){}console.log(typeof fun);var a = "200";var b = "123.1";console.log(a - b);</script>
2.4 分支语句
- switch分支
var 变量 = 值;switch(变量){case 值1:执行的代码break;case 值2:执行的代码;break;default:执行的代码;}
- if分支
if(判断语句){执行的代码;}else if(判断语句){执行的代码;}else if(判断语句){执行的代码;}else{执行的代码;}
2.5 循环语句
- for循环
for(let 变量名=值;判断语句;改变变量的值){循环体;}//for in 循环for(var 变量 in 数组){循环体;}
- while循环
var 变量 = 值;while(判断语句){循环体;改变变量的值;}
- do…while循环
var 变量 = 值;do{循环体;改变变量的值;}while(判断语句);
- while和dowhile的区别：while是先判断，只有条件正确了才能执行，do…while先执行，再判断条件是否符合。
- 跳出循环的方式
break:结束整个循环continue:结束本次循环，继续下一次循环。
2.6 运算符
- 赋值运算符：=，+=，-=，/=，%=
- 算术运算符：+,-,*,/,%,++，—
- 比较运算符：>,<,>=,<=,!=,===(既要判断值，也要判断数据类型)。
- 逻辑运算符：与运算(&&)，或运算(||)，非运算(!)
- 三元运算符：?
var temp = 判断语句?值1：值2
2.7 数组
- 概念：一组数据的集合，将多个数据存储在一个内存空间。
- 特点：js里面的数组，没有数据类型的限制。没有长度的限制。
- 数组的语法：
//定义数组，并同时将元素存入数组var arr = [1,2,3,4];//第二种方式，定义一个空的数组var temp = new Array();//可以通过push方法向数组中新增元素。temp.push(1);
- 数组应用——冒泡排序
var num = [10,8,6,11,7,12,5,4];for(var i = 0;i < num.length-1;i++){for(var j = 0;j < num.length-1-i;j++){if(num[j] > num[j+1]){var temp = num[j];num[j] = num[j+1];num[j+1] = temp;}}}
- 数组应用——选择排序
var num = [10,8,6,11,7,12,5,4];for(var i = 0;i < num.length-1;i++){for(var j = i+1;j < num.length;j++){if(num[i] > num[j]){var temp = num[i];num[i] = num[j];num[j] = temp;}}}
- 数组的应用——折半查找（二分法）
前提：一定是有序列，二分法是根据元素值，找到该元素的下标
<script>var arr = [1,2,4,5,7,8,10,11,15,16,17,19,20,21,22,23,25,27,29,30];//下标为11；var key = 30;//定义变量记录最小下标var min = 0;//定义变量记录最大下标var max = arr.length-1;//定义一个变量，记录下标，默认值为-1var index = -1;while(max >= min){//计算中间下标var mid = parseInt((min + max)/2);if(key > arr[mid]){min = mid + 1;}else if(key < arr[mid]){max = mid - 1;}else{index = mid;break;}}if(index != -1){document.write("您要找的下标为："+index);}else{document.write("未找到该元素");}</script>
2.8 函数
- 概念：将具有特定功能的代码进行封装，需要使用的时候，直接调用函数即可执行代码，提高代码的复用性。
- 语法：
//1、定义普通的函数
function 函数名称(参数){
封装到函数中的代码;
return 变量或者值;
}
//2、字面量函数
var 变量 = function(){
函数封装的代码;
}
//普通函数和字面量函数的区别：普通函数加载顺序是先加载定义函数，最后做调用，和代码的位置无关
//字面量函数：加载顺序和编写代码的顺序一致，必须先写定义，后写调用。
//js的入口函数:如果存在多个入口函数，则后面的会将前面的入口函数覆盖。原生js的入口函数会等待body中所有的资源加载完毕，才会执行入口函数。
window.onload = function(){
函数封装的代码;
}
//在入口函数的右边：称之为匿名函数。匿名函数还可以作为回调函数。
- 可变参数的函数:arguments
//定义一个函数：函数的作用是计算任意个数的和
function fun1(){
//获取到实际参数
var res = 0;
for(var i = 0;i < arguments.length;i++){
res = res + arguments[i];
}
document.write(res);
}
//调用函数
fun1(1,2,3,4,5);
2.9 js创建对象（了解）
- 字面量创建对象:只能创建特定的js对象，如果要修改对象中的属性和方法，需要修改源码
var person = {
name:”张三”,
age:18,
gender:”男”,
doIt:function(){
document.write("我要学java");
}
}
//调用：
document.write(person.name);
person.doIt();
- 使用父类对象进行创建:需要对每一个对象进行重新赋值，不能批量的创建对象
var obj = new Object();
obj.name = “张三”;
obj.age = 18;
obj.gender = “男”;
obj.doIt = function(){
document.write(“我要学python”);
}
//调用
document.write(obj.name);
obj.doIt();
- 使用工厂方法的思维，创建对象
function createPerson(name,age,msg){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.doIt = function(){
document.write(msg);
}
return obj;
}
//调用
var person = createPerson(“李四”,20,”学习c++”);
document.write(person.name);
document.write(preson.age);
person.doIt();
- 使用构造方法的形式创建对象
function person(name,age,msg){
this.name = name;
this.age = age;
this.doIt = function(){
document.write(msg);
}
}
//调用
var p = new person(“王五”,30,”学习c语言”);
document.write(p.name);
document.write(p.age);
p.doIt();
一、DOM文档操作
DOM ：document object model,文档对象模型，主要用于操作body中的标签，可以实现动态的修改已经写好的css属性。
1.1 创建标签
使用js完成标签的创建，并且给该标签设置css属性。
//调用方法，document.createElement(“标签名”);
function method(){
//在前端页面创建一个div，并且将css属性设置上
//使用document对象的方法，进行创建div
var oDiv = document.createElement(“div”);
//设置css属性
oDiv.style.border = “1px red solid”;
oDiv.style.height = “200px”;
oDiv.style.width = “200px”;
oDiv.style.float = “left”;
//将创建好的div，挂载到父标签
document.body.appendChild(oDiv);
}
1.2 获取标签
将已经在页面存在的标签，进行获取，获取了之后，修改css、添加子标签、获取标签中的文本
//1、调用方法：getElementById(“id名称”);
var oDiv = document.getElementById(“one”);
//2、调用方法：getElementsByClassName(“class名称”);
var oDiv = document.getElementsByClassName(“items”);
//3、调用方法：getElementsByTagName(“标签名称”);
var oDiv = document.getElementsByTagName(“div”);
//4、调用方法：querySelector(“id名称”)；获取一个标签
var oDiv = document.querySelector(“#one”);
//5、调用方法：querySelectorAll(“选择器”)
var oDiv = document.querySelectorAll(“.items”);
//6、获取了标签之后，拿到标签之间的值
var oDiv = document.querySelector(“id名称”);
oDiv.innerText();
1.3 修改标签属性
在上面已经演示过了，先获取符合要求的标签，可以对其标签进行修改css、获取文本、修改文本、修改标签中的属性。
1.4 删除标签
先获取该标签，再删除该标签。
//删除单个：
function method8(){
var oDiv = document.querySelector(“#one”);
//将其删除
oDiv.remove();
}
//删除多个
function method9(){
//获取标签
var oDiv = document.querySelectorAll(“.items”);
for(var i = 0;i < oDiv.length;i++){
oDiv[i].remove();
}
}
二、事件操作
2.1 鼠标事件,
- 当鼠标在页面上做了某些操作的时候，会自动的调用js里面的函数代码，并将函数代码执行。
//1、鼠标单击事件
onclick = “函数()”;
//2、鼠标双击事件:页游
ondblclick = “函数()”;
//3、鼠标悬停
onmouseover = “函数()”;
//4、鼠标移动开
onmouseout = “函数()”;
//意外收获：获取标签中的属性值：getAttribute(“属性名”);设置标签中的属性值:setAttribute(“属性名”,属性值);
//5、鼠标移动及触发。
onmousemove = “函数”;
2.2 键盘事件
//键盘按下事件
window.onkeydown
//键盘松开事件
window.onkeyup
2.3 表单事件
//1、获取焦点事件
onfocus=”函数名()”;
//2、失去焦点
onblur=”函数名()”;
//内容改变事件
onchange = “函数名()”;
2.4 定时器
//定时器：打开浏览器之后，延迟一定时间才执行，并且只执行一次。
setTimeout(“函数名()”,毫秒值);
//定时器：每间隔一定时间，就会执行一次，
setInterval(“函数名()”,毫秒值);
//对应的清除定时器
clearTimeout(定时器名称);
clearInterval(定时器名称);
若有收获，就点个赞吧
0 人点赞
