Web前端学习笔记

最新推荐文章于 2024-10-07 19:08:25 发布
最新推荐文章于 2024-10-07 19:08:25 发布
阅读量684 收藏 7
点赞数 1
文章标签： 前端 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66697447/article/details/131021999
版权
本文介绍了Web前端开发的核心技术，包括HTML、CSS、JavaScript的基本概念和用法，深入讲解了Vue.js框架的常用指令和生命周期，以及Ajax和Axios在数据交互中的应用。此外，还提到了Nginx在部署中的作用和配置。
摘要由CSDN通过智能技术生成

目录

Web前端

标签

CSS

样式

盒子模型

表格标签

表单标签

JS

引入方式

基础语法

数据类型

运算符

流程控制语句

函数

JS对象

Array

String

JavaScript自定义对象

JSON

BOM

DOM

事件

Vue

常用指令

生命周期

vue-cli

Vue项目中使用Axios

路由

Vue路由

服务器端路由

客户端路由

Ajax

Axios

Element

常见组件

部署(Nginx)

Nginx安装目录

部署

Web前端

前端的代码通过浏览器转化(解读和渲染)成用户看到的网页

浏览器中对代码进行解析渲染的部分，称为浏览器内核

Web标准：Web标准也称为网页标准，由一系列的标准组成，大部分由W3C(World Wide Web Consortium,万维网联盟)负责制定

三个组成部分：

  • HTML：负责网页的结构(页面元素和内容)

  • CSS：负责网页的表现(页面元素的外观，位置等页面样式，如：颜色，大小等)

  • JavaScript：负责网页的行为(交互效果)

# HTML

HTML(HyperText Markup Language):超文本标记语言

  • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。

  • 标记语言：由标签构成的语言

    • HTML标签都是预定义好的。例如：<a>展示超链接，<img>展示图片，<video>展示视频

    • HTML代码直接在浏览器中运行，HTML标签由浏览器解析

CSS(Cascading Style Sheet):层叠样式表，用于控制页面的样式。

HTML结构标签

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        
    </body>
</html>

特点：

  • HTML标签不区分大小写

  • HTML标签属性单双引号都可以

  • HTML语法松散

标签

  1. 标题标签

    标签：<h1>...</h1>(h1-->h6 重要程度依次降低)

    HTML标签都是预定义好的，不能自己随意定义

  2. 水平线标签：<hr>

  3. 图片标签

    • 绝对路径：绝对磁盘路径(D:/XXXX),绝对网络路径(https://XXXX)

    • 相对路径：从当前文件开始查找 (./ : 当前目录, ../ : 上级目录)

CSS

在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符：&nbsp

样式

CSS引入样式

  • 行内样式：写在标签的style属性中

    <h1 style="xxx : xxx; xxx : xxx;">中国新闻网</h1>

  • 内嵌样式：写在style标签中(可以写在页面任何位置，但通常约定写在head标签中)

    <style>
    h1{
        xxx : xxx;
        xxx ：xxx;
    }
</style>

  • 外联样式：写在一个单独的.css文件中(需要通过link标签在网页中引入)

    <link rel="stylesheet" href="css/文件名称.css">

  • line-height:设置行高

  • text-indent：定义第一个行内容的缩进

  • text-align：规定元素中的文本的水平对齐方式

颜色表示形式

表示方式表示含义取值
关键字预定义的颜色名red，green，blue...
rgb表示法红绿蓝三原色，每项取值范围：0-255rgb(0,0,0),rgb(255,255,255),rgb(255,0,0)
十六进制表示法#开头，将数字转换成十六进制表示#000000，#ff0000，#cccccc，简写：#000，#ccc

标签

  • <span>是一个在开发网页时大量会用到的没有语义的布局标签

  • 特点:一行可以显示多个(组合行内元素)，宽度和高度默认由内容决定

  • 视频标签:<video>

    • src:规定视频的url

    • controls：显示播放控件

    • width：播放器的宽度

    • height：播放器的高度

  • 音频标签：<audio>

    • src:规定音频的url

    • controls：显示播放控件

  • 段落标签：<p>

  • 文本加粗标签：<b> / <strong>

  • 换行标签：

CSS选择器

  • 元素选择器：标签名{...}

  • id选择器：#id属性值{...}

  • 类选择器：.class属性值{...}

  • 优先级：id选择器>类选择器>元素选择器

CSS属性

  • color：设置文本的颜色

  • font-size：字体大小(记得加px)

  • text-decoration：规定添加到文本的修饰，none表示定义标准的文本

超链接

标签：<a>

属性：

  • href：指定资源访问的url

  • target：指定在何处代开资源链接

    • __self:默认值，在当前页面打开

    • __blank: 在新的空白页面打开

盒子模型

  • 盒子：页面中所有的元素(标签)，都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

  • 盒子模型组成：内容区域(content),边距区域(padding),边框区域(border)，外边距区域(margin)

布局标签

布局标签：实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签

  • div标签：

    • 一行只显示一个(独占一行)

    • 宽度默认是父元素的宽度，高度默认由内容决定

    • 可以设置宽高(width,height)

  • span标签：

    • 一行可以显示多个

    • 宽度和高度默认由内容决定

    • 不可以设置宽高(width,height)

CSS属性

  • width：设置宽度

  • height：设置高度

  • border：设置边框的属性

  • padding：内边距

  • margin：外边距

如果只需要设置某一个方位的边框，内边距，外边距，可以在属性名后加上-位置，如：padding-top，padding-left，padding-right...

表格标签

  • 场景：在网页中以表格(行，列)形式整齐展示数据

标签：

标签描述属性/备注
<table>定义表格整体，可以包裹多个<tr>border：规定表格边框的高度；width：规定表格的宽度；cellspacing：规定单元之间的空间
<tr>表格的行，一个<tr>表示一行，可以包裹多个<td>
<td>表格单元格(普通)，可以包裹内容如果是表头单元格，可以替换为<th>(具有加粗居中效果)

表单标签

  • 场景：在网页中主要负责数据采集功能

  • 标签：<form>

  • 表单项：不同类型的input元素，下拉列表，文本域等

    • <input>:定义表单项，通过type属性控制输入形式
<input>的type属性：text，password，radio，checkbox，file，date，datetime-local，time，number，hidden，button，submit
    • <select>:定义下拉列表
    • <textarea>:定义文本域

  • 属性：

    • action：规定当提交表单时向何处发送表单数据，URL

    • method：规定用于发送表单数据的方式，GET,POST

      • get：表单数据拼接在url后面，大小有限制

      • post：表单数据在请求体中携带，大小没有限制

表单项必须有name属性才可以提交

JS

  • JavaScript(JS)是一门跨平台，面向对象的脚本语言，是用来控制网页行为的，它能使网页可交互

  • JavaScript和Java是完全不同的语言，不论是概念还是设计，但是基础语法类似

  • JavaScript在1995年由Brenda Eich发明，并于1997年成为ECMA标准

    [ECMA]  ECMA国际(前身为欧洲计算机制造商协会)，制定了标准化的脚本程序设计语言ECMAScript，这种语言得到广泛应用，而JavaScript是遵守ECMAScript的标准的

  • ECMAScript 6(ES6)是最新的JavaScript版本(发布于2015年)

引入方式

内部脚本

内部脚本：将JS代码定义在HTML页面中

  • JavaScript代码必须位于<script></script>标签之间

  • 在HTML文档中，可以在任意地方，放置任意数量的<script>

  • 一般会把脚本置于<body>元素的底部，可改善显示速度

外部脚本

外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

  • 外部JS文件中，只包含JS代码，不包含<script>标签

  • <script>标签不能自闭合

基础语法

  • 区分大小写：与Java一样，变量名，函数名以及其他一切东西都是区分大小写的

  • 每行结尾的分号可有可无

  • 注释：

    • 单行注释：//注释内容

    • 多行注释：/* 注释内容 */

  • 大括号表示代码块

输出语句

  • 使用window.alert()写入警告框

  • 使用document.write()写入HTML输出

  • 使用concole.log()写入浏览器控制台

<script>
    window.alert("hello JavaScript"); //浏览器弹出警告框
    
    document.write("hello JavaScript"); //写入HTML,在浏览器展示
    
    console.log("hello JavaScript"); //写入浏览器控制台
</script>

变量

  • JavaScript中用var关键字(variable)来声明变量

  • JavaScript是一门弱类型语言，变量可以存放不同类型的值

  • 变量名需要遵循如下规则：

    • 组成字符可以是任何字母，数字，下划线或美元符号($)

    • 数字不能开头

    • 建议使用驼峰命名

var定义变量：

  • 作用域比较大，全局变量

  • 可以重复定义

let定义变量：

  • 局部变量

  • 不能重复定义

注意事项：

  • ECMAScript 6 新增了let关键字来定义变量，它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明

  • ECMAScript 6 新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变

数据类型

  • JavaScript中分为：原始类型 和 引用类型

原始类型：

  • number：数字(整数，小数，NaN(Not a Number))

  • string：字符串，单双引号皆可

  • Boolean：布尔，true/false

  • null：对象为空

  • undefined：当声明的变量未初始化时，该变量默认值是undefined

使用typeof运算符可以获取数据类型

运算符

  • 算术运算符：+，-，*，/,%,++,--

  • 赋值运算符：=，+=，-=，*=，/=,%=

  • 比较运算符：>,<,>=,<=,!=,==,===

  • 逻辑运算符：&&，||，！

  • 三元运算符：条件表达式？true_value：false_value

==会进行类型转换，===不会进行类型转换

类型转换

  • 字符串类型转为数字：

    将字符串字面值转为数字，如果字面值不是数字，则转为NaN

  • 其他类型转为Boolean：

    • Number：0和NaN为false，其他均转为true

    • String：空字符串为false，其他均转为true

    • Null和undefined：均转为false

流程控制语句

  • if...else if...else

  • switch

  • for

  • while

  • do...while

函数

  • 函数(方法)是被设计为执行特定任务的代码块

  • JavaScript函数通过function关键字进行定义，语法：

    function functionName(参数1，参数2...){
  //要执行的代码
}

  • 定义方式二：

    var functionName = function(参数1，参数2...){
  //要执行的代码
}

  • 形式参数不需要类型，因为JavaScript是弱类型语言

  • 返回值也不需要定义类型，可以在函数内部直接使用return返回即可

  • 调用：函数名称(实际参数列表)

JS中，函数调用可以传递任意个数的参数

  • 箭头函数(ES6)：是用来简化函数定义语法的，具体形式为：(...)=>{...},如果需要给箭头函数起名字：var xxx=(...) =>{...}

JS对象

Array

  • JavaScript中Array对象用于定义数组

  • 定义：

    • var 变量名 = new Array(元素列表)；

    • var 变量名 = [元素列表];

  • 访问：arr[索引] = 值;

JavaScript中的数组相当于Java中集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意的类型的数据

  • 属性：

    length：设置或返回数组中元素的数量

  • 方法：

方法描述
forEach()遍历数组中的每个有值的元素，并调用一次传入的函数
push()将新元素添加到数组的末尾，并返回新的长度
splice()从数组中删除元素

String

  • String字符串对象创建方式有两种：

    • var 变量名 = new String("...");

    • var 变量名 = "...";

  • 属性：length：字符串的长度

  • 方法：

方法描述
charAt()返回在指定位置的字符
indexOf()检索字符串
trim()去除字符串两边的空格
substring()提取字符串中两个指定的索引号之间的字符

JavaScript自定义对象

var 对象名={
    属性名1：属性值1,
    属性名2：属性值2,
    属性名3：属性值3,
    函数名称：function(形参列表){
        
    }
};

  • 调用格式：

    对象名.属性名;

    对象名.函数名();

JSON

  • JavaScript Object Notation，JavaScript对象标记法

  • JSON是通过JavaScript对象标记法书写的文本

  • 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网路中进行数据传输

基础语法

  • 定义：

    var 变量名 = '{"key1":value1,"key2":value2}';

  • value的数据类型为：

    • 数字(整数或浮点数)

    • 字符串(在双引号中)

    • 逻辑值(true或false)

    • 数组(在方括号中)

    • 对象(在花括号中)

    • null

  • JSON字符串转为JS对象

    var jsobject = JSON.parse(userStr);

  • JS对象转为JSON字符串

    var jsonStr = JSON.stringify(jsObject);

BOM

  • Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象

  • 组成：

    • Window：浏览器窗口对象

    • Navigator：浏览器对象

    • Screen：屏幕对象

    • History：历史记录对象

    • Location：地址栏对象

Window

  • 浏览器窗口对象

  • 获取：直接使用window，其中window.可以省略

  • 属性：

    • history：对hist对象的只读引用

    • location：用于窗口或框架的location对象

    • navigator：对navigator对象的只读引用

  • 方法：

    • alert():显示带有一段消息和一个确认按钮的警告框

    • confrim():显示带有一段消息以及确认按钮和取消按钮的对话框

    • setinterval():按照指定的周期(以毫秒计)来调用函数或计算表达式

    • setTimeout():在指定的毫秒数后调用函数或计算表达式

Location

  • 地址栏对象

  • 获取：使用window.location获取，其中window.可以省略

    • window.location.属性;

    • location.属性;

  • 属性：

    href：设置或返回完整的URL

DOM

  • Document Object Model 文档对象模型

  • 将标记语言的各个组成部分封装为对应的对象：

    • Document：整个文档对象

    • Element：元素对象

    • Attribute：文本对象

    • Text：文本对象

    • Comment：注释对象

  • JavaScript通过DOM，就能够对HTML进行操作：

    • 改变HTML元素的内容

    • 改变HTML元素的样式(CSS)

    • 对HTML DOM事件作出反应

    • 添加和删除HTML元素

  • DOM是W3C(万维网联盟)的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：

    1. Core DOM-所有文档类型的标准模型

      • Document：整个文档对象

      • Element：元素对象

      • Attribute：文本对象

      • Text：文本对象

      • Comment：注释对象

    2. XML DOM-XML文档的标准模型

    3. HTML DOM-HTML文档的标准模型

      • Image：<img>

      • Button:<input type = 'button'>

  • HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的

  • Document对象中提供了以下获取Element元素对象的函数：

    1. 根据id属性值获取，返回单个Element对象

      var h1 = document.getElementById('h1');

    2. 根据标签名称获取，返回Element对象数组

      var divs = document.getElementByTagName('div');

    3. 根据name属性值获取，返回Element对象数组

      var hobbys = document.getElementByName('hobby');

    4. 根据class属性值获取，返回Element对象数组

      var class = document.getElementByClassName('cls');

事件

  • 事件：HTML事件是发生在HTML元素上的事情，例：

    • 按钮被点击

    • 鼠标移动到元素上

    • 按下键盘按键

  • 事件监听：JavaScript可以在事件被侦测到时执行代码

事件绑定

  • 通过HTML标签中的事件属性进行绑定

  • 通过DOM元素属性绑定

常见事件

事件名说明
onclick鼠标单击事件
onblur元素失去焦点
onfocus元素获得焦点
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onkeydown某个键盘的键被按下
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开

Vue

  • Vue是一套前端框架，免除JavaScript中的DOM操作，简化书写

  • 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上

  • 官网：Vue.js

  • 框架：是一个半成品软件，是一套可重用的，通用的，软件基础代码模型。基于框架进行开发，更加快捷，更加高效。

  1. 新建HTML页面，引入Vue.js文件

  2. 在JS代码区域，创建Vue核心对象，定义数据模型

  3. 编写视图

插值表达式

  • 形式：{{表达式}}

  • 内容可以是：

    • 变量

    • 三元运算符

    • 函数调用

    • 算术运算

常用指令

  • 指令：HTML标签上带有v- 前缀的特殊属性，不同指令具有不同的含义

  • 常用指令：

指令作用
v-bind为HTML标签绑定属性值，如设置href，css样式等
v-model在表单元素上创建双向数据绑定
v-on为HTML标签绑定事件
v-if条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else-if条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show根据条件展示某元素，区别在于切换的是display属性的值
v-for列表渲染，遍历容器的元素或者对象的属性

通过v-bind或者v-model绑定的变量，必须在数据模型中声明

生命周期

  • 生命周期：指一个对象从创建到销毁的整个过程

  • 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

状态阶段周期
beforeCreate创建前
created创建后
beforeMount挂载前
mounted挂载完成
before Update更新前
updated更新后
before Destroy销毁前
destroyed销毁后

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功(发送请求到服务端，加载数据)

vue-cli

  • Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板

  • Vue-cli提供了如下功能：

    • 统一的目录结构

    • 本地调试

    • 热部署

    • 单元测试

    • 集成打包上线

  • 依赖环境：NodeJS

Vue项目-目录结构

  • 基于Vue脚手架创建出来的工程，有标准的目录结构：

    node_modules整个项目的依赖包
    public存放项目的静态文件
    src存放项目的源代码
    package.json模块基本信息，项目开发所需要模块，版本信息
    vue.config.json保存vue配置的文件，如：代理，端口的配置等
    src:
    assets静态资源
    components可重用的组件
    router路由配置
    views视图组件(页面)
    App.vue入口页面(根组件)
    main.js入口js文件

  • Vue的组件文件以.vue结尾，每个组件由三个部分组成：<template>,<script>,<style>。

Vue项目中使用Axios

  • 在项目目录下安装axios：npm install axios；

  • 需要使用axios时，导入axios：import axios from 'axios';

路由

Vue路由

路由：路由就是URL到函数的映射

前端路由：URL中的hash(#号)与组件之间的对应关系

Vue路由

  • 安装(创建Vue项目时已选择)

    npm install vue-router@3.5.1

  • 定义路由

Vue Router

Vue Router是Vue的官方路由

  • 组成：

    • VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件

    • <router-link>:请求链接组件，浏览器会解析成<a>

    • <router-view>:动态视图组件，用来渲染展示与路由路径对应的组件

      • /user:UserView.vue

      • /emp:EmpView.vue

      • /order:OrderView.vue

服务器端路由

对于服务器来说，当接收到客户端发来的HTTP请求，会根据请求的URL，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。对于最简单的静态资源服务器，可以认为，所有URL的映射函数就是一个文件读取操作。对于动态资源，映射函数可能是一个数据库读取操作，也可能是进行一些数据的处理，等等。

客户端路由

对于客户端（通常为浏览器）来说，路由的映射函数通常是进行一些DOM的显示和隐藏操作。这样，当访问不同的路径的时候，会显示不同的页面组件。客户端路由最常见的有以下两种实现方案：

  • 基于Hash

  • 基于History API

Ajax

  • Ajax：Asynchronous JavaScript And XML，异步 JavaScript 和 XML，或Ajax本身不是一种技术，而是一种将一些现有技术结合起来使用的方法，包括：HTML 或 XHTML、CSS、JavaScript、DOM、XML、XSLT、以及最重要的 XMLHttpRequest 对象。当使用结合了这些技术的 Ajax 模型以后，网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

  • 作用：

    • 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据

    • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想，用户名是否可用的校验等

Axios

步骤：

  1. 引入Axios的js文件

  2. 使用Axios发送请求，并获取响应结果

请求方式别名

  • axios.get(url [,config])

  • axios.delete(url [,config])

  • axios.post(url [,data[,config]])

  • axios.put(url [,data[,config]])

发送GET请求：

axios.get("http://......").then((result) => {
  console.log(result.data);
});

发送POST请求：

axios.post("http://.......").then((result) =>{
    console.log(result.data);
});

Element

  • Element：饿了么团队研发的，一套为开发者，设计师和产品经理准备的基于Vue2.0的桌面端组件库

  • 组件：组成网页的部件，例如：超链接，按钮，图片，表格，表单，分页条等

  • 官网：Element - The world's most popular Vue UI framework

步骤：

  • 安装ElementUI组件库(在当前工程的目录下)，在命令行执行指令：

    npm install element-ui@2.15.3

  • 引入ElementUI数据库

    import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
​
Vue.use(ElementUI);

  • 访问官网，复制组件代码，调整

常见组件

表格

  • Table表格：用于展示多条结构类似的数据，可对数据进行排序，筛选，对比或其他自定义操作

<template>
    <div>
        <!-- Table表格 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
    </div>
</template>
​
<script>
​
export default {
    data() {
        return {
            tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
        }
    },
}

分页

  • Pagination分页：当数据量过多时，使用分页分解数据

<template>
    <div>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
    </div>
</template>

对话框

  • Dialog对话框：在保留当前页面状态的情况下，告知用户并承载相关操作

<template>
    <div>
        <!-- Dialog对话框 -->
        <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
​
        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="date" label="日期" width="150"></el-table-column>
                <el-table-column property="name" label="姓名" width="200"></el-table-column>
                <el-table-column property="address" label="地址"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
​
<script>
​
export default {
    data() {
        return {
            gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
        }
    },
​
}
</script>

表单

  • Form表单：由输入框，选择器，单选框，多选框等控件组成，用以收集，校验，提交数据。

部署(Nginx)

  • Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器，其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用

  • 官网：nginx news

Nginx安装目录

conf配置文件目录
html静态资源文件目录
logs日志文件目录
temp临时文件目录

部署

  1. 将打包好的dist目录下的文件，复制到nginx安装目录的html目录下

  2. 启动：双击nginx.exe文件即可，Nginx服务器默认占用80端口

Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号(nestat-ano|findStr 80)

做一个梦.
关注
web前端笔记
07-28
web前端笔记是在培训机构培训过程中整理的一些笔记，仅供参考
Web前端笔记
weixin_51582215的博客
04-29 639
Web前端笔记
web前端——HTML+CSS学习笔记
最新发布
m0_64302102的博客
10-07 978
初学者的HTML+CSS学习笔记
Web前端开发笔记(1)
gentle、待人的博客
02-27 2650
Web前端开发笔记(1) HTML基础(从了解到入门) 文章目录Web前端开发笔记(1)前言基础学习路线HTML目标：1.网页1.1.什么是网页?1.2 什么是 HTML1.3 网页的形成1.4 网页总结2. 常用浏览器2.1 常用浏览器2.2浏览器内核3.Web 标准（重点）3.1为什么需要 Web 标准3.2Web 标准的构成4. HTML 标签（上）4.1 HTML 语法规范4.2 标签关系4.3 HTML 基本结构标签4.3.1 第一个 HTML4.3.2 基本结构标签总结4.4 网页开发工具4.
web前端学习笔记以及代码
02-24
本压缩包“web前端学习笔记以及代码”显然包含了一套完整的前端学习资源，包括理论知识和实践代码，这对于初学者或者希望提升技能的开发者来说非常有价值。 首先，前端开发通常涵盖以下关键知识点： 1. HTML...
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
web前端学习笔记.docx编程资料
04-06
### Web前端学习笔记知识点概述 #### 一、Web基础知识 ##### 1.1 Web与Internet - **Internet**: 是一个全球性的计算机互联网络，提供多种服务如Telnet、Email、WWW、BBS、FTP等。它基于分组交换原理及TCP/IP协议...
超详细的web前端基础学习笔记
06-28
#### 超详细的web前端基础学习笔记 ##### 前端课程介绍 - **HTML**：HTML (HyperText Markup Language) 是一种标记语言，用于定义网页的结构与内容。它如同网页的骨架，为网页提供基本框架。 - **CSS**：CSS ...
web 前端笔记
随风潜入夜，不白头
01-25 269
一、HTML、CSS、JavaScript 三者构成一个完整的页面 1、jQuery 是一个 JavaScript 库 2、jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。 3、jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。 4、TypeScript 是 JavaScript 的一个超集 5、ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表（提供了常规的折线图、
WEB前端笔记
05-13
WEB 前端培训笔记 里面有CSS +HTML JAVASCRIPT 一些的关键点和问题
Web前端笔记(标签)
W15105879792的博客
08-01 396
学习笔记
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值