admin管理员组文章数量:1543840
参考书：w3school 在线教程
本文包含前端内容：HTML、CSS、JavaScript、BOM、DOM、VUE、Element、Nginx
HTML
图标：Icon 图标 | Element Plus (element-plus)
快捷键：
1. 生成浏览器文件： ！（英文感叹号）+回车
2. 代码格式化（更整齐）：shift+alt+F
3. 整行移动：alt+上/下
4. 快速保存：ctrl+S (每次写完都要保存)
5. 快速查找：ctrl+F
6. 快速替换：ctrl+H
HTML基本骨架：
- html标签：定义HTML文档（双标签）
- head标签：定义文档的头部，描述文档的各种属性和信息(双标签)
- body标签：定义文档的主体，包含文本，超链接，图像，表格和列表等（双标签）
- title标签：定义文档标题，显示在浏览器窗口的标题栏或状态栏上（双标签）
- meta标签：描述一个HTML网页文档的属性，编码格式等，放在HEAD里面（单标签）
标题标签：
- 标题：<h1>…</h1>---------<h6>…</h6>（定义的标签越来越小）
- 生成h1---h6的快捷键：h$*6
- 标题位置摆放：align+left/center/right (例：<h1 align=”left”>…</h1>)
标签之段落，换行，水平线：
- 段落标签：<p>…</p>
- 换行标签：<br>(单标签，放在句子中间)
- 水平线标签：<hr>
属性：color（颜色） width（宽度） size（高度） align（对齐方式）
<hr color=”” width=”” size=”” align=””/>
标签之图片标签：
- 图片标签：<img>(单标签)
例：<img src=”(图片地址或名字，必须和网页文件在同一个文件夹下)” alt=”（规定图片无法显示时的替代文本）” title=”（鼠标悬停在图片上给予的提示）” width=”（规定图片的宽度）” height=”（规定图片的高度）”>
图片的路径详解：
- 子级关系： /
- 父级关系：. . /
- 同级关系：. /
- 网络路径：具体的网络地址
标签之超文本链接：
- 超文本链接标签：<a href=”url”>链接文本（可为图片）</a>
- 未访问过的链接为蓝色，访问过的链接为紫色，点击链接时链接显示红色。（后期可以通过css样式修改效果）
标签之文本：
- 定义着重文字：<em>(双标签)
- 定义粗体文字：<b>（双标签）
- 定义斜体字：<i>（双标签）
- 定义加重语气：<strong>（双标签）
- 定义删除字：<del>（双标签）
- 没有特定含义：<span>（双标签）
- 文本标签可以相互嵌套，如：<p>我喜欢<em>橘子</em></p>
（段落标签<p>表示一个段落，文本标签表示词汇）
标签之有序列表：
- 有序列表：<ol>…<li>…</li>…</ol>
如：<ol>
<li>橘子</li>
<li>苹果</li>
</ol>
- <ol>标签里加type可选择<ol>的属性：<ol type>……
- 有序列表可以嵌套
如：<ol>
<li>
水果
<ol>
<li>橘子</li>
<li>西瓜</li>
</ol>
</li>
</ol>
标签之无序列表：
- 无序列表：<ul>…<li>…</li>…</ul>
- <ul type>可选择<ul>的属性：
disc: 默认实心圆
circle: 空心圆
square: 小方块
none: 不显示
- 无序列表可以嵌套
如：<ul>
<li>
水果
<ul>
<li>橘子</li>
<li>苹果</li>
</ul>
</li>
</ul>
- 生成无序列表快捷键：ul>li*3(数字根据自己需要的li数量修改)
标签之表格：
- 表格标签：表格<table>…</table>; 行<tr>…</tr>; 列<td>…</td>
如：<table>
<tr>
<th>水果</th>
<th>蔬菜</th>
</tr>
<tr>
<td>橘子</td>
<td>青菜</td>
</tr>
<tr>
<td>苹果</td>
<td>白菜</td>
</tr>
</table>
- 生成表格的快捷键：table>tr*2>td*2{单元格名字}（数字表示行/列的数量）
表格合并单元格：
- 水平合并：colspan ; 垂直合并：rowspan
如：<td colspan=” ” rowspan=” ”>
- 水平合并：保留左边，删除右边
垂直合并：保留上边，删除下边
标签之Form表单：
- 表单标签：<form action=”url(服务器地址)” method=”get/post（数据提交方式）” name=”（表单名称）”></form>
- 表单的基本组成：表单标签:<form>…</form> ; 表单域（输入框）:<input type=”text”> ; 表单按钮<input type=”submit”>
如：<form>
<input type=”text”>
<input type=”submit”>
</form>
标签之表单项：
- 文本框：<input type=”text”>
如：用户名：<input type=”text”>
- 密码框：<input type=”password”>（输入时显示星号或圆点）
如：密码：<input type=”password” name=”pwd”>
- 提交按钮：<input type=”submit”>
登录按钮：<input type=”submit” value=”登录”>
块元素与行内元素：
区别：块元素独占一行，纵向排列，可设置width,height属性，可包含行内元素和其他块级元素。
行内元素（内联元素）不会独占一行，横向排列，不可设置宽高属性，可包含内联元素不包含块级元素。
- 常见块级元素：<div> <form> <h1~h6> <p> <table> <ol>……
- 常见行内元素(内联元素)：<a> <b> <em> <i> <span> <strong>……
- 行内块级元素（不换行，能识别宽高）：<img> <button> <input>……
新增标签：
- 新标签：<header></header>头部
<nav></nav>导航
<section></section>定义文档中的节，如章节，页眉，页脚
<aside></aside>侧边栏
<footer></footer>脚部
<article></article>代表一个独立完整的内容块，如文章，帖子，评论
- 老版本浏览器可能不兼容新标签，要用<div>承载
CSS
CSS组成：
选择器+声明（样式）
如：<style>
h1(声明){
color:blue;（样式）
font-size:12px;
}
</style>
CSS常用选择器：
1.通配符选择器：它是所有选择器里作用范围最广的，能匹配页面中所有的元素。
基本语法格式：*{ 属性1：属性值1；属性2：属性值2；}
2.标签选择器：指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式。
基本语法格式：标签名{ 属性1：属性值1；属性2：属性值2；}
例：p{ font-size: 12px; color: #666; font-family:"微软雅黑"; }
3.类选择器：使用 . 号进行标识，后面紧跟类名。
基本语法格式：.类名{ 属性1：属性值1；属性2：属性值2；}
4.id选择器：用 # 号进行标识，后面紧跟id名。
基本语法格式：#id名{ 属性1：属性值1；属性2：属性值2；}
例：#dxc {font-size: 24px;}
<p id="dxc">段落</p>
5.属性选择器：为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
语法格式：[标签名称] { 属性1：属性值1；属性2：属性值2；}
例：[href]{
Color:red;
}
6.伪类选择器
CSS提供了五种基本伪类选择器，分别对应HTML标记的五种状态。
CSS具体样式：
参考：常用CSS样式大全（超全面）_css样式大全(整理版)-CSDN博客
JavaScript
输出语句：
1.使用window.alert()写入警告框
2.使用document.write()写入HTML网页输出
3.使用console.log()写入浏览器控制台
<script>
window.alert("Hello JavaScript");//浏览器弹出警告框
document.write("Hello JavaScript");//写入HTML,在浏览器展示
console.log("Hello JavaScript"); //写入浏览器控制台
</script>变量：
JavaScript 中用var关键字(variable的缩写)来声明变量。JavaScript是一门弱类型语言，变量可以存放不同类型的值，声明变量时不用指定数据类型。
变量名需要遵循如下规则：
1.组成字符可以是任何字母、数字、下划线(_）或美元符号($)
2.数字不能开头
3.建议使用驼峰命名
var变量特点：
1.作用域比较大，是全局变量
2.可以重复定义（后定义会取代先定义）
var x = 1;
var x = "A";
alert(x);结果为 A
let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明。
const关键字用来声明一个只读的常量。一旦声明，常量的值就不能改变。
数据类型：
JavaScript中分为原始类型和引用类型
原始类型：
number:数字（整数、小数、NaN(Not a Number))
string:字符串，单双引皆可
boolean:布尔。true,false
null:对象为空
undefined:当声明的变量未初始化时，该变量的默认值是undefined
使用typeof运算符可以获取数据类型 :
运算符：
类型转换：
具体参考：JavaScript 类型转换全面总结_js类型转换-CSDN博客
JavaScript类型转换- CSDN搜索
流程控制语句：
与java类似：
函数：
二、JavaScript 函数_javascript系统函数有哪些-CSDN博客
JavaScript是弱类型语言，在函数声明的时候不需要指定形参类型和返回值类型
对象：
Array对象用于定义数组
特点：长度可变，类型可变，可存储任意类型的数据
for循环遍历所有元素，forEach遍历数组中有值的元素
箭头函数
push方法添加元素到数组尾部
var arr = [1,2,3,4];
arr.push(7,8,9);
console.log(arr);splice方法删除元素
var arr = [1,2,3,4];
arr.splice(2,2);
console.log(arr);此时arr数组中的3，4元素被删去
String对象用于创建字符串
charAt方法用于查找字符串中某个位置对应的字符
var str = "hello string";
console.log(str.charAt(1));此处查询结果是 e
indexOf方法用于检索字符/字符串的位置
var str = "hello string";
console.log(str.indexOf("lo"));此处查询"lo"的结果是 3
trim方法用于去除字符串左右两边字符
substring方法用于提取字符串中两个指定的索引号之间的字符
var str = "hello world";
console.log(str.substring(0,4));此处结果是 hell
substring(start,end)——开始索引，结束索引 (含头不含尾)
Math对象提供与数学相关的功能
Math对象是JavaScript的一个全局对象，不需要创建，直接作为对象使用就可以调用其属性和方法。Math对象的常用方法如下表所示。
random()方法返回的随机数包括0，不包括1，且都是小数。如果想选择一个1~100中的整数(包括1和100),则代码如下所示。
var iNum=Math.floor(Math.random()*100+1);Date对象
Date对象是在早期java中java.util.Date类基础上构建的。为此，Date对象使用自协调世界时(Coordinated Universal Time, UTC)1970年1月1日午夜(零时)开始的毫秒数来保存日期。在使用这种数据存储格式的条件下，Date对象保存的日期能够精准1970年1月1晶之前或之后的100000000年。
要创建一个日期对象，需要使用new Date()方法创建一个实例，语法格式如下。
var 日期实例=new Date(参数);
在上述语法中，日期实例是存储Date对象的变量。
- 如果没有参数，则表示当前日期和时间，如"var today=new Date();"。
- 参数是字符串格式"MM DD,YYYY,hh:mm:ss",表示日期和时间，如"var today=new Date("july15,2020,10:07:42");"。
Date对象中有大量用于设置，获取和操作日期的方法，从而实现在页面中显示不同类型的日期时间。其中常用的是获取日期的方法，如下表所示。
JavaScript自定义对象
var user = {
name:"jack",
age:20,
gender:"male",
// eat:function(){
// alert("吃饭")
// }
eat(){
alert("吃饭");
}
}
alert(user.name);
user.eat();JSON是通过JavaScript对象标记法书写的文本
注意JSON书写时候的key要加双引号
JSON基础语法
JSON字符串——>JS对象
var jsonString = '{"name":"Tom","age":20,"addr":["北京","上海","西安"]}';
var obj = JSON.parse(jsonString);
alert(obj.name);JS对象——>JSON字符串
BOM
BOM是JavaScript的组成部分之一，它提供了独立于内容与浏览器窗口进行交互的对象。使用BOM可以实现与HTML的交互。BOM的作用是将相关的元素组织包装起来，提供程序开发人员使用，从而降低开发者劳动量，提高Web页面的能力。
HTML----JavaScript操作对象BOM对象_html js bom-CSDN博客
1.window对象
window对象是整个BOM的核心，它表示浏览器打开的窗口，可以通过JavaScript访问浏览器窗口的一个接口。
1.widow对象的常用属性
在JavaScript中，属性的基本语法格式如下。
window.属性名="属性值";window对象的常用属性如下。
- history:用户访问过的统一资源定位符(Uniform Resource Locator, URL)信息。
- location:当前URL信息。
- screen:只读属性，包含客户端显示屏幕上的信息。
例如，window.location="淘宝网丫URL地址",表示页面跳转至淘宝网站主页:screen.width表示返回浏览器屏幕的宽度，单位为像素(px)。
history和location这两个常用属性会在后面的中详细介绍。
2.window对象的常用方法
在JavaScript中，window对象的常用方法的基本语法格式如下。
window.方法名();window对象的常用方法如下：
- alert():显示一个带有提示信息和一个"确定"按钮的警示对话框。
- confirm():显示一个带有提示信息、”确定“和"取消"按钮的对话框。
- prompt():显示可提示用户输入的对话框。
- open():打开一个新的浏览器窗口，加载给定URL所指定的文档。
- close():关闭浏览器的窗口。
- setInterval():间隔指定的毫秒数不停地执行指定的代码。（执行n次）
- setTimeout():在指定的毫秒(ms)数后执行指定的代码。（执行1次）
- clearInterval():用于停止setInterval()方法执行的函数代码。
- clearTimeout():用于停止执行setTimeout()方法的函数代码。
由于window对象是全局对象，所以在使用window对象的属性和方法时，window可以省略不写.例如，之前直接使用的alert()方法、confirm()方法及prompt()方法的用法、本节主要讲解open()方法和close()方法，JavaScript定时函数会在后面中详细介绍。
1.open()
在页面上弹出一个新的浏览器窗口，具体语法如下。
window.open([URL,name,specs,replace]);- URL为可选参数，打开指定的页面URL。如果没有指定URL，则打开一个新的空白窗口。
- name为可选参数，指定target属性或窗口的名称。
- specs为可选参数，表示窗口特征属性，具体说明如下表所示。
- replace为可选参数，指定装载到窗口的URL在窗口的浏览历史中是创建一个新条目，还是替换浏览历史中的当前条目。
2.close()
用于关闭浏览器窗口，具体语法格式如下。
window.close();2.history对象
从窗口被打开的那一该起，history对象就用户上网的历史记录。收于history对象是window对象的属性，所以每个浏览器窗口、每个标签页，都有自己的history对象与特定的window对象关联。出于安全方面的考虑，开发者无法得知用户浏览过的URL。不过，借由用户访问过的列表，同样可以在不知道实际URL的情况下前进和后退。下表列出了history对象的常用属性和方法。
history对象常用的length属性，它保存着历史记录的数量。这个数量包括所有的历史记录，即所有前进和后退的记录。对于加载到窗口、标签页或框架中的第一个页面而言，history.length等于0。如下代码测试该属性的值，可以确定用户是否一开始就打开了页面。
if(history.length==0){
//这应该是用户打开窗口的第一个页面
}
使用go()方法可以在用户的历史记录中任意跳转，可以向前也可以向后。此方法接收一个参数。go(number)中number参数指的是要访问的URL在history的URL列表中的相对位置，当值为正数时，表示向前跳转;当值为负数时，表示向后跳转。具体使用方式如下。
//前进一页
history.go(1);
//后退一页
history.go(-1);
//前进两页
history.go(2);
也可以给go()方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置，此跳转可能前进，也可能后退，具体要看哪个位置最近。如果历史记录中不包含该字符串，则什么也不做，例如：
//跳转到最近的home页面
history.go("home");
//跳转到最近的list页面
history.go("list");
另外，还可以使用两个简写方法forward()和back()代替go()方法可以模仿浏览器的"前进"和"后退"按钮。
//前进一页
history.forward();
//后退一页
history.back();
history对象常用于创建自定义的"前进”和"后退"按钮，以及检测当前页面是不是用户历史记录中的第一个页面。
3.location对象
location对象是比较有用的BOM对象之一，它提供了与当前窗口中加载文档有关的信息，还提供了一些导航功能。本节将会学习location对象的常用属性和方法。
1.location对象的常用属性和方法
location对象的用处不仅表现在它保存着当前文档的信息，还表现在它将URL解析为独立的片段，让开发者可以通过不同的属性访问这些片段。下表列出了location对象的常用属性和方法。
2.location对象的使用
location对象常用的属性是href,通过对此属性设置不同的网址，从而达到跳转功能。
4.document对象
document对象既是window对象的一部分，又代表了整个HTML文档，可用来访问页面中的所有元素。在使用document对象时，除要符合各浏览器的标准外，也要符合W3C（万维网联盟）的标准。
geetElementById()方法一般用于访问div、图片、表单元素、网页标签等，但要求访问对象的id是唯一的。
getElementsByName()方法与getElementById()方法相似，但它访问的是具有name属性的元素，由于一个文档中的name属性可能不唯一，所以getElementsByName()方法一般用于访问一组相同name属性的元素，如具有相同name属性的单选按钮、复选框等。
getElementsByTagName()方法通常按标签来访问页面元素，一般用于访问一组相同的元素，如一组<input>、一组图片等。
JavaScript定时函数
在JavaScript中，定时函数包括超时调用和间谒用，前者是在指定的时间过后执行的代码，而后者则是每隔指定的时间就执行一次代码。
1.超时调用
超时调用需要使用window对象的setTimeout()方法，它接收两个参数；要执行的代码和以毫秒表示的时间。其中，第一个参数可以是一个包含JavaScript代码的字符串，也可以是一个函数。例如，下面对setTimeout()方法的两次调用都会在1秒后显示一个警告框。
//不推荐传递字符串
setTimeout("alert('你好！')".1000);
//推荐使用
setTimeout(function(){
alertt('你好！');
},1000)
虽然以上两种方法都没有问题，但是由于字符串可能导致性能损失，所以不推荐以字符串作为第一个参数。
第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码不一定会执行。JavaScript是一个单线程的解释器，因此在一定时间内只能执行一段代码。为了控制要执行的代码，就有一个JavaScript任务队列。这些任务按照将它们添加到队列的顺序执行。setTimeout()方法的第二个参数告诉JavaScript再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行;如果队列不是空的，那么它就要等前面的代码执行完以后再执行。
调用setTimeout()方法，该方法会返回一个数值ID,表示超时调用。这个超时调用ID是计划执行代码的唯一标识符，可以通过它来取消超时调用。要取消尚未执行的超时调用计划，可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它，具休代码如下所示。
//设置超时调用
var timeoutId=setTimeout(function(){
alert('你好！');
},1000)
//取消超时调用
clearTimeout(timeoutId);
只要是在指定的时间尚未过去之前调用clearTimeout()方法，就可以完全取消超时调用。上面的代码在设置超时调用之后又马上调用了clearTimeout()方法，所以不会在1秒后显示警告框。
2.间谒调用
间谒调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间谒调用或被取消或者页面被卸载。设置间谒调用的方法是setInterval(),接收的参数与setTimeout()方法相同，为要执行的代码和每次执行之前需要等待的毫秒数。
//不推荐传递字符串
setInterval("alert('你好！')",3000);
//推荐使用
setInterval(function(){
alert('你好！')"
},3000)调用setInterval()方法同样会返回一个间歇调用ID,该ID可用于在将来某个时刻取消间谒 调用。要取消尚未执行的间谒调用，可以使用clearInterval()方法并传入相应的间谒调用ID。取消间谒调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间谒调用将会一直执行到页面卸载。
DOM
web前端学习（四十二）——JavaScript DOM元素（添加、移除及替换）、DOM集合（Collection）、DOM节点列表（NodeList）_前端使用dom-CSDN博客
javaScript:DOM元素的获取（静态/动态获取）_js获取dom干啥用-CSDN博客
事件
事件绑定
<body>
<input type="button" id="btn1" value="按钮1" onclick="on()">
<input type="button" id="btn2" value="按钮2">
<script>
//通过HTML的事件属性进行绑定
function on(){
alert("您点击了按钮1");
}
//通过DOM元素属性绑定
document.getElementById('btn2').onclick=function(){
alert("您点击了按钮1");
}
</script>
</body>常见事件
具体参考：javaScript中的常用事件_js常用的事件-CSDN博客
鼠标事件
键盘事件
表单事件
VUE
简介 | Vue.js (vuejs)
具体参考：
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）-CSDN博客
安装vue步骤Vue的安装及使用教程【超详细图文教程】_安装vue-CSDN博客
VUE路由
【Vue】Vue 路由的配置及使用_vue 路由配置-CSDN博客
AXIOS
Axios中文文档 | Axios中文网 (axios-http)
具体参考Axios使用方法详解，从入门到进阶-CSDN博客
Elemen
一、什么是Element？
① Element：是饿了么团队研发的，一套为开发者、设计时和产品经理准备的基于Vue 2.0 的桌面端组件库。
② 组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等。
③ 官网：Element - 网站快速成型工具
二、快速入门
- 安装ElementUI组件库（在当前工程的目录下），在命令行执行指令：
npm install element-ui@2.15.3
- 引入ElementUI组件库
//main.js:
import ElementUI from 'element-ui ' ;
import 'elenent-ui/lib/theme-chalk/index.css' ;
Vue.use(ElementUI);- 访问官网，复制组件代码，调整。
//App.vue
<template>
<div>
<! -- <h1>{{fimessage}}</h1> -->
<element-view></element-view>
</div>
</template>
<script>
import Elementview from './views/element/ElementView.vue '
export default {
components: { ElementView },
data(){
return {
message: "Hello vue222"
},
methods : {
}
</script>
<style>
</style>
//ElementVue.vue
<template>
<div>
<!-- button按钮-->
<el-row>
<el-button>默认按钮</e1-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<div>
</template>
<script>
export default {
}
</script>
<style>
</style>nginx
官网：nginx news
具体参考：Nginx是什么，Nginx配置文件解释，应用场景有哪些_nginx是干嘛用的-CSDN博客
nginx简介
Nginx是一款 http 服务器 （或叫web服务器）。它是由俄罗斯人伊戈尔·赛索耶夫为俄罗斯访问量第二的 Rambler.ru 站点开发的，并于2004年首次公开发布的。
Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好。中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。
Nginx 是高性能的 HTTP 和反向代理的web服务器，处理高并发能力是十分强大的，能经受高负 载的考验,有报告表明能支持高达 50,000 个并发连接数。
Nginx支持热部署，启动简单，可以做到7*24不间断运行。几个月都不需要重新启动。
Nginx 是什么，总结一下就是这些：
①一种轻量级的web服务器
②设计思想是事件驱动的异步非阻塞处理（类node.js）
③占用内存少、启动速度快、并发能力强
④使用C语言开发
⑤扩展性好，第三方插件非常多
⑥在互联网项目中广泛应用
版权声明：本文标题：JavaWeb前端内容学习笔记 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1727111370a1098212.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论