[ Web开发1 ]

<html>
      <head> Hello HTML</head>
             <title>HTML快速入门</title>
      </head>

      <body>
         <h1>Hello HTMI</h1>
         <img src="1.jpg"/>
      </body>

</html>

2. 特点

HTML标签不区分大小写

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

HTML语法松散

1.标题标签

标签：<h1>..</h1>（h1→h6 重要程度依次降低）

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

2.水平线标签 <hr>

3.图片标签 <img src=".." width=".." height="...">

绝对路径：绝对磁盘路径（D：/xxxx）、绝对网络路径（https://xxxx)

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

1.CSS引入方式

行内样式：<h1 style="...">

内嵌样式：<style></style>

外联样式：xxx.css <link href="...">

2.颜色表示

关键字：red、green..

rgb表示法：rgb(255,0,0)、rgb(134,100,89）

十六进制：#ff0000、#cccccc、#ccc

3.颜色属性

color：设置文本内容的颜色

1.<span>标签

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

●特点：一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

2. CSS选择器

●元素选择器：标签名 h1 {color:blue;}

●id选择器：#id

●类选择器：.class

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

3. CSS属性

color：设置文本的颜色

font-size:字体大小（注意：记得加px）

1.超链接

标签：<a>

属性：

href：指定资源访问的url

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

_self：默认值，在当前页面打开

_blank：在空白页面打开

2. CSS属性

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

color：定义文本的颜色

视频标签：<video>

src：规定视频的url

controls：显示播放控件

width：播放器的宽度

height：播放器的高度

音频标签：<audio>

src：规定音频的url

controls：显示播放控件

段落标签：<p>

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

1.音频、视频标签

2.换行、段落标签

换行：<br>；段落：<p>

3.文本加粗标签

4.CSS样式

line-height：设置行高

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

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

5.注意

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

页面布局

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

盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

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

特点：

div标签：

O一行只显示一个（独占一行）

O 宽度默认是父元素的宽度，高度默认由内容撑开

O可以设置宽高（width、height）

span标签：

1.一行可以显示多个

2.宽度和高度默认由内容撑开

3.不可以设置宽高(width、height)

1.CSS盒子模型

组成：内容（content）、内边距（padding）、边框（border）、外边距

(margin)

2.CSS属性

width：设置宽度 8

height：设置高度

border:设置边框的属性，如：1px solid #000;

padding：内边距

margin：外边距

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

表格标签

场景：在网页中以表格（行、列）形式整齐展示数据，如：班级表。

<table> 定义表格整体，可以包裹多个<tr>

border：规定表格边框的宽度

width：规定表格的宽度

cellspacing：规定单元之间的空间。

<tr> 表格的行，可以包裹多个<td>

<td) 表格单元格(普通)，可以包裹内容如果是表头单元格，可以替换为<th>

表单标签

场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。

标签：<form>

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

<input>：定义表单项，通过type属性控制输入形式

<select>：定义下拉列表

<textarea>：定义文本域

属性：

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

method:规定用于发送表单数据的方式。GET、POST

JavaScript

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。

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

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

ECMAScript6(ES6)是最新的JavaScript版本（发布于2015年）。

JavaScript引入方式

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

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

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

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

<script>

alert("Hello JavaScript")

</script>

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

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

2.<scrip>标签不能自闭合

书写语法

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

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

●注释：

单行注释：//注释内容

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

●大括号表示代码块

//判断

if(count == 3){

alert(count);

}

输出语句

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

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

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

window.alert("HelloJavaScript");//浏览器弹出警告框

document.write("Hello JavaScript");//写入HTML,在浏览器展示

console.log("Hello JavaScript");//写入浏览器控制台

</script>

变量

JavaScript中用var关键字（variable的缩写）来声明变量。

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

var a = 20;

a="张三：

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

组成字符可以是任何字母、数字、下划线（）或美元符号（$）

数字不能开头

建议使用驼峰命名

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

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

数据类型

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

原始类型

number:数字（整数、小数、NaN(Not a Number))

string:字符串，单双引皆可

boolean:布尔。true,false

null:对象为空

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

运算符

算术运算符：+，-，/，%，++，--

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

比较运算符：>，<，>=,<=,==，===

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

三元运算符：条件表达式?true_value:false_value

函数

介绍：函数（方法）是被设计为执行特定任务的代码块

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

function functionName(参数1，参数2..){

//要执行的代码

}

注意：

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

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

调用：函数名称（实际参数列表）

定义方式二：

var functionName=function(参数1,参数2..）{

//要执行的代码

}

Array

javaScript中Array对象用于定义数组。

var变量名=new Array（元素列表）；//方式一

var变量名=[元素列表]；//方式二

访问

arr[索引]=值;

属性

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

方法

forEach() 遍历数组中的每个有值的元素，并调用一次传入的函数

push() 将新元素添加到数组的末尾，并返回新的长度。

splice() 从数组中删除元素。

charAt() 返回在指定位置的字符。

indexOf() 检索字符串。

trim() 去除字符串两边的空格

substring() 提取字符串中两个指定的索引号之间的字符。

JSON

概念：JavaScript Object Notation，JavaScript对象标记法。

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

JSON-基础语法

定义

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

例子

var userStr =‘{"name":"Jerry", "age":18, “addr”：["北京”，“上海”，”西安”]}；

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.可以省略。window.alert("Hello Window");

alert("Hello window");

history:对History对象的只读引用。请参阅History对象。

location:用于窗口或框架的 Location对象。请参阅Location对象。

navigator:对Navigator对象的只读引用。请参阅Navigator对象。

方法

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

confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。

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

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

Location

介绍：地址栏对象。

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

window.location.属性；

href：设置或返回完整的URL。 ="https:

DOM

概念：Document Object Model，文档对象模型。

将标记语言的各个组成部分封装为对应的对象：Document：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

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.getElementsByTagName('div');

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

var hobbys = document.getElementsByName(‘hobby');

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

var clss = document.getElementsByClassName('cls');

<script>

//1、点亮灯泡：src 属性值

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

img.src="img/on.gif";

//2.将所有div标签的内容后面加上：very good (红色字体) <font color='red'></font> 

var divs=dòcument.getElementsByTagName('div');

for (let i=0;i< divs.length;i++){

const div = divs[i];

div.innerHTML+="<font color='red'>verygood</font>";

}

//3.使所有的复选框呈现选中状态

var ins=document.getElementsByName('hobby')

for (let i=0;i< ins.length; i++){

const check= ins[i];

check.checked = true://选中

}

</script>

事件监听

事件：HTML事件是发生在HTML元素上的“事情”。比如：

按钮被点击

鼠标移动到元素上

按下键盘按键

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

事件绑定

方式一：通过 HTML标签中的事件属性进行绑定

function on(){

alert（'我被点击了！'）；

}

</script>

方式二：通过DOM元素属性绑定

document.getElementById('btn').οnclick=function(){

alert（'我被点击了！'）；

}

</script>

常见事件

事件名说明

onclick 鼠标单击事件

onblur 元素失去焦点

onfocus 元素获得焦点

onload 某个页面或图像被完成加载

onsubmit 当表单提交时触发该事件

onkeydown 某个键盘的键被按下

onmouseover 鼠标被移到某元素之上

onmouseout 鼠标从某元素移开

Vue

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

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

官网：https://v2.cn.vuejs.org/

Vue快速入门

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

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

new Vue({

el:"#app"，

data:{

message:"Hello Vue!"

}

})

</script>

编写视图

</div>

插值表达式{{表达式}}

常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for...

v-bind 为HTML标签绑定属性值，如设置 href，css样式等

v-model 在表单元素上创建双向数据绑定

v-on 为HTML标签绑定事件

v-if

v-else-if 条件性的渲染某元素，判定为true时渲染，否则不渲染

v-else

v-show 根据条件展示某元素，区别在于切换的是display属性的值

v-for 列表渲染，遍历容器的元素或者对象的属性

☆v-bind

☆v-model

new Vue({

el:“#app”，

data:{url:"https://www.ting.cn"

}

})

v-model

</script>

v-on 为HTML标签绑定事件

new Vue({

el:"#app”,

data:{

//……

methods：{

handle:function(){

alert（'我被点击了’）；

})

</script>

v-if

年龄{{age}} ，经判定为：

年龄{{age}} ，经判定为：

v-for 列表渲染，遍历容器的元素或者对象的属性

v-for

<div v-fAjax

概念：Asynchronous JavaScript And XML，异步的JavaScript和XML。

作用：

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

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

原生Ajax

1.准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list

2.创建XMLHttpRequest对象：用于和服务器交换数据

3.向服务器发送请求

4. 获取服务器响应数据

<body>

</body>

function getData(){

//1.创建XMLHttpRequest

var xmlHttpRequest = new(MLHttpRequest();

//2.发送异步请求

xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list);

xmlHttpRequest.send()://发送请求

//3.获取服务响应数据

xmlHttpRequest.onreadystatechange= function(){

if(xmlHttpRequest.readyState = 4 && xmlHttpRequest.status == 200){

document.getElementByid('div1').innerHTML= xmlHttpRequest.responseText;

}

}}

</script>

Axios

介绍：Axios对原生的Ajax进行了封装，简化书写，快速开发。

Axios入门

1. 引入Axios的js文件

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

axios{(

method: "get",

url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"

)}.then((result) => {

console.log(result.data);

});

axios{(

method:"post",

url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById"

data:"id=1"

}).then((result) => {

console.log(result.data);

});

发送GET请求

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{

console.log(result.data);

});

发送POST请求

axios.post（"http://yapi.smart-xwork.cn/mock/169327/emp/deleteByld","id=1").then((result)=>{

console.log(result.data);

});

前端工程化-环境准备

vue-cli

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

Vue-cli提供了如下功能：

统一的目录结构

本地调试

热部署

单元测试

集成打包上线

依赖环境：NodeJS

安装NodeJS vuecli

const {defineConfig} = require('@vue/cli-service')

module.exports = defineConfig({

transpileDependencies: true,

devServer:{

port:7000,

}

})

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

ElementUI

在当前工程的目录下），在命令行执行指令：

npm install element-ui@2.15.3

引入ElementUI组件库

import ElementUI from'element-ui';

import'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI); main

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

Axios

Vue项目中使用Axios:

在项目目录下安装axios:npm iastall axios;

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

Vue Router

介绍：Vue Router是Vue的官方路由。

组成：

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

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

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

or="addr in addrs">{{addr}}</div>

<div v-for="(addr,index)in addrs">{{index +1}} :{{addr}}</div>

data:{

addrs：['北京’，’上海'，广州’，'深圳’，'成都’，'杭州’]

Ajax

概念：Asynchronous JavaScript And XML，异步的JavaScript和XML。

作用：

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

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

原生Ajax

1.准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list

2.创建XMLHttpRequest对象：用于和服务器交换数据

3.向服务器发送请求

4. 获取服务器响应数据

<body>

</body>

function getData(){

//1.创建XMLHttpRequest

var xmlHttpRequest = new(MLHttpRequest();

//2.发送异步请求

xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list);

xmlHttpRequest.send()://发送请求

//3.获取服务响应数据

xmlHttpRequest.onreadystatechange= function(){

if(xmlHttpRequest.readyState = 4 && xmlHttpRequest.status == 200){

document.getElementByid('div1').innerHTML= xmlHttpRequest.responseText;

}

}}

</script>

Axios

介绍：Axios对原生的Ajax进行了封装，简化书写，快速开发。

Axios入门

1. 引入Axios的js文件

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

axios{(

method: "get",

url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"

)}.then((result) => {

console.log(result.data);

});

axios{(

method:"post",

url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById"

data:"id=1"

}).then((result) => {

console.log(result.data);

});

发送GET请求

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{

console.log(result.data);

});

发送POST请求

axios.post（"http://yapi.smart-xwork.cn/mock/169327/emp/deleteByld","id=1").then((result)=>{

console.log(result.data);

});

前端工程化-环境准备

vue-cli

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

Vue-cli提供了如下功能：

统一的目录结构

本地调试

热部署

单元测试

集成打包上线

依赖环境：NodeJS

安装NodeJS vuecli

const {defineConfig} = require('@vue/cli-service')

module.exports = defineConfig({

transpileDependencies: true,

devServer:{

port:7000,

}

})

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

ElementUI

在当前工程的目录下），在命令行执行指令：

npm install element-ui@2.15.3

引入ElementUI组件库

import ElementUI from'element-ui';

import'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI); main

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

Axios

Vue项目中使用Axios:

在项目目录下安装axios:npm iastall axios;

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

Vue Router

介绍：Vue Router是Vue的官方路由。

组成：

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

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

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

wishkejdn

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫