前端基础笔记

主要部分

• HTML: 用于构建网站的基础结构的 (骨架)
• CSS: 用于美化页面的 (美化)
• JS: 实现网页和用户的交互 (交互)

框架

• Vue: 主要用于将数据填充到html页面上的
• Element: 主要提供了一些非常美观的组件

CSS和JS都是嵌入在HTML代码中的，一切都是为页面服务。

1. 先用HTML写出页面基本骨架(在body中)；
2. 然后用CSS进行页面美化，也就是调整位置、增加色彩特效等(一般在head中写style标签，也可用link标签引入外部的css文件)；
3. 最后用JS实现前后端的交互(一般在body最下面写script标签)。

---

目录

HTML 

基础标签 

布局标签

列表 

表格

容器 

表单 

文本框 

下拉框 & 文本域

CSS 

引入方式 

CSS选择器 

CSS样式 

JS

基础语法

引入方式 

测试输出语句 

变量 & 数据类型 

运算符 

流程控制 

函数

事件

绑定方式 

常用对象

数组

字符串 

Math 

**JS对象** 

**JSON** 

BOM对象

Window 

Location

DOM对象 

Ajax

---

HTML 

使用一些标签组装出网页的语言，标签不区分大小写

• 基础标签 

<!-- 1-6字体越来越小, align为对齐方式 center居中 left左对齐 right右对齐 -->
<h1 align="center">标题</h1>
<!-- 生成横线, color设置颜色, width线长度 -->
<hr color="red" width="300px">
<!-- 换行 -->
<br>
<!-- 分段, 文字上下留空 -->
<p>内容</p>
<!-- 中文空格 = 3个英文空格 -->
&emsp;
<!-- 英文空格 -->
&nbsp;
<!-- 加粗 -->
<b>文字</b>
<!-- 斜体 -->
<i>文字</i>
<!-- 下划线 -->
<u>文字</u>
<!-- 文字居中 -->
<center>文字</center>
<!-- 字体设置 face改字体 size改大小(1-7) color改颜色-->
<font face="微软雅黑" size="7" color="red">文字</font>
<!-- 超链接    target:_blank新页跳转 _self当前页跳转 -->
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
<!-- 引入图片    title：鼠标悬停时展示的文字    alt：图片丢失时要显示的文字提示 -->
<img src="../img/cj.jpg" width="400px" title="图片" alt="图片无法显示">
<!-- 引入音频    controls：显示播放控件 -->
<audio src="../img/jq.mp3" controls></audio>
<!-- 引入视频    controls：显示播放控件 -->
<video src="../img/ds.mp4" controls width="400px"></video>

• 布局标签

• 列表 

<!-- 列表不是表格, 而是在页面上整齐排列展示的数据 -->
<!-- 无序列表 -->
<ul>
    <li>芒果</li>
    <li>香蕉</li>
</ul>
<!-- 有序列表    前面自带数字(顺序编号) -->
<ol>
   <li>芒果</li>
   <li>香蕉</li>
</ol>
<!-- 定义列表    dt为列表头 dd为列表项 -->
<dl>
    <dt>选购指南</dt>
    <dd>手机</dd>
</dl>

• 表格

<!-- 表格 -->
<!-- boder: 边框的宽度    width：表格的宽度    height: 表格高度    bgcolor: 设置背景色
     cellspacing: 外边距
     cellpadding: 内边距 -->
<table border="20px" width="500px" align="center" 
    cellspacing="20px" cellpadding="0px" bgcolor="red" height="100px">
    <!-- tr:行    td:单元格    th:表头单元格 -->
    <tr bgcolor="blue">
        <th bgcolor="green">1</th>
        <th>2</th>
        <th>3</th>
    </tr>
</table>

合并单元格步骤: 

1. 绘制出基本表格
2. 确定要合并的是行还是列(同一行的两个属于不同列，进行列合并；反之同理)
3. （rowspan 行合并    colspan列合并）
4. 找到合并开始的单元，在单元格上添加合并属性
5. 删掉被合并的单元

<!-- 合并单元格 -->
<table width="300px" height="200px" align="center" border="1" 
    cellpadding="0" cellspacing="0">
    <tr align="center">
        <td>1-1</td>
        <td colspan="2">1-2</td>  <!-- 合并关键步骤 -->

    </tr>
    <tr align="center">
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
</table>

• 容器 

存储内容，分为块级(block)，行内(inline)，行内块(inline-block)

通常与css和js结合使用，便于对代码块进行美化和交互操作

特性： 

• 块级元素：独占一行，可设宽高        (div  p  标题  列表)
• 行内元素：一行可以显示多个，无法设置宽高        (span a b u i)
• 行内块元素：一行可以显示多个，可设宽高        (img  input)

注：html所有的标签广义上都可称为容器，都分别属于以上三种类型，需要合理利用它们的特性转换操作（可通过css属性display完成相互的转换）

<!-- 可设置宽高 -->
<div>块级元素,独自占用一行</div>
<!-- 不可设置宽高 -->
<span>行内元素,内容有多大，就占用多少</span>  

表单 

用于采集用户在页面上填入的数据 ，如注册、登录页面

form表示表单，它只是一个容器，作用是包裹其他的表单项

• action：当前表单请求的目标地址
• method：请求方式，支持get和post，默认就是get
  • get：提交参数通过地址栏, 参数有大小限制
  • post：提交参数通过请求体, 安全性稍高, 参数没有大小限制

<form action="#" method="get">

</form>

• 文本框 

input标签, 使用type属性来区分不同的文本框 

1. text：普通文本框，name定义键，value定义值一般不写死，placeholder定义提示语
2. password：密码框，不会直接显示输入的内容，而是使用...进行替换
3. date/datetime：日期时间框，直接选择即可
4. radio：单选框，必须写全name和value，相同name值的单选框是一组，一组只能同时选中一个；checked让框默认选中
5. 特殊标签：<lable></lable> 将中间的文字和按钮绑定，增大点击范围
6. checkbox：复选框，必须写全name和value，相同name值得单选框是一组，一组可以同时选中多个；checked让框默认选中
7. file：文件框，默认只能选择一个；如果要 选择多个，需要加个multipe属性
8. submit：提交按钮，作用是将当前表单中的name和value(有意义)值提交出去
9. reset：重置按钮，让当前表单中所有的项回复到默认值；value表示按钮文字
10. button：普通按钮，配合js才有价值；value表示按钮文字
11. hidden：隐藏域，作用是将一些内容偷偷的提交给后台

<form>
    用户名: <input type="text" name="username" placeholder="输入用户名"><br>
    密码: <input type="password" name="password" placeholder="请输入密码"><br>
    日期: <input type="date" name="date"><br>
    性别: <label>男<input type="radio" name="gender" value="man" checked></label>
         <label>女<input type="radio" name="gender" value="woman"></label><br>
    爱好: 抽烟<input type="checkbox" name="hobby" value="smoke" checked>
         喝酒<input type="checkbox" name="hobby" value="drink" checked><br>
    照片: <input type="file" name="picture" multiple><br>
    <input type="submit" value="提交按钮">
    <input type="button" value="普通按钮">
    <input type="reset" value="重置按钮"><br>
    <input type="hidden" name="hid" value="11">
</form>

• 下拉框 & 文本域

select标签，表示下拉框。加multipe属性可多选，下图的专业为添加该属性效果。

        option标签，定义下拉框中的具体内容，selected属性定义默认选中

textarea标签，表示文本域，是一个多行输入文本的表单控件

<form>
    学历:
    <select name="education">
        <option value="0">小学</option>
        <option value="1">初中</option>
        <option value="2" selected>高中</option>
    </select>
    个人简介:
    <!-- rows：定义行数    cols：定义列数 -->
    <textarea name="desc" cols="30" rows="10">111</textarea>
</form>

 

---

CSS 

Cascading Style Sheets 层叠样式表，用于美化HTML页面 

释：通过制作style标签表对各部分代码块进行各种样式（字号、字体、颜色等 ）的添加

• 引入方式 

1. 行内样式：定义在标签的属性中
2. 内部样式：定义在页面的head部分
3. 外部样式：定义在页面外部，通过link标签引入到页面中

优先级：行内样式 > (内部样式 / 外部样式----->后面覆盖前面) 

<!-- 引入外部的css -->
<link href="../css/my.css" rel="stylesheet">
<!-- 当前页面上所有h1标签,颜色蓝色 -->
<style>
    h1 {
        color: blue;
    }
</style>
<!-- 行内样式 -->
<h1 style="color: red;">行内样式</h1>

• CSS选择器 

作用：找到需要美化操作的一组特定代码块 

<style>
/* 基础选择器 */
    /* 1.标签选择器：标签名 { css样式 } */
    span {
        color: red;
    }
    /* 2.类选择器：.class属性值{ css样式 } */
    .women {
        color: green;
    }
    /* id选择器：#id值 { css样式 } */
    #boss {
      color: purple;
    }
    /* 通配符选择器(改变所有)：*{ css样式 } */
    * {
      font-size: 30px;
    }
/* 复合选择器 */
    /* 后代选择器(子孙都被选)：父选择器  子选择器 { css样式 } */
    div span {
        color: red;
    }
    /* 子选择器(一级子代)：父选择器 > 子选择器 { css样式 } */
    div>span {
        color: green;
    }
    /* 并集选择器：选择器1, 选择器2, …  { css样式 } */
    div,span{
        color: blue;
    }
/* 伪选择器：选中元素的某个状态设置样式 */
    /* 一般伪类选择器：选择器:状态{ css样式 } */
    /* 状态有四种：link-访问前  visited-访问后  hover-鼠标悬停  active-点击时 */
    /* 给超链接设置以上四个状态，需要按 LVHA 的顺序书写 */
    a:link{
        text-decoration: none;/* 去除下划线 */
    }
    a:visited{
        text-decoration: none;
    }
    a:hover{
        text-decoration: none;
    }
    a:active{
        text-decoration: none;
    }
    /* 结构伪类选择器：查找有数学关系的标签 */
    /* ul第一个li子代 */
    ul li:first-child{
        background-color: red;
    }
    /* ul最后一个li子代 */
    ul li:last-child{
        background-color: red;
    }
    /* 偶数行 */
    ul li:nth-child(2n){
        background-color: green;
    }
    /* 奇数行 */
    ul li:nth-child(2n+1){
        background-color: blue;
    }
    /* 伪元素选择器：在元素前或后添加伪元素 */
    /* 必须设置 content: ""属性，用来设置伪元素的内容 */
    span::before{
        content: "111";
    }
    span::after{
        content: "222";
    }   
</style>

<body>
    <div>
        <span>古力娜扎</span>
        <p>
            <span>钢铁侠</span>
        </p>
    </div>
    <span class="women">迪丽热巴</span>
    <span id="boss">灭霸</span>
    <a href="#">a 标签</a>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

• CSS样式 

/* 字体样式 */
font-size: 20px; /* 设置字号 */
font-family: '楷体'; /* 设置字体 */
font-weight: bold; /* 设置文字加粗（ normal:正常[默认],  bold:粗体,   数值 ) */
font-style: italic; /* 设置文字倾斜（ normal:正常[默认],  italic:倾斜  ） */
color：red; /* 设置字体颜色 */
line-height: 40px; /* 设置行高 */
text-indent: 40px; /* 设置段落的首行缩进 */
text-align: center; /* 设置元素水平位置 */
text-decoration: none; /* 设置修饰线(无，下划线，上划线，横穿线)

/* 背景样式 */
background-color: red; /* 设置背景颜色 */
background-image: url('图片位置'); /* 设置背景图,背景图默认平铺效果 */
background-repeat: repeat; /* no-repeat:不平铺  repeat:平铺  repeat-x:水平平铺 */
background-position: 50px -100px; 
/* 背景图位置 水平：正数向右，负数向左  垂直：正数向下，负数向上  */

---

JS

JavaScript，用来实现页面交互的一门脚本语言，用于控制网页行为

注：内部引用时一般在body底部script标签中编写

• 基础语法

• 引入方式 

1. 内部引入：<script> js代码 </script>
2. 外部引入：<script src="../js/my.js"></script>    (标签之间不能再写js代码)

• 测试输出语句 

1. 浏览器弹框输出字符   alert('哈哈')
2. 输出html内容到页面(document 文档)   document.write('呵呵')
3. 输出到浏览器控制台   console.log('嘻嘻')

• 变量 & 数据类型 

let声明变量，可存放不同类型的值

const声明常量，值不能被改变

数据类型 ：

• string：字符串类型（单引号  双引号）
• number：数值类型（整数、小数、NaN）
• boolean：布尔型
• undefined：未定义的
• object： 对象和null

let n = 10;
//typeof返回 n 的数据类型
console.log(typeof n) //number

• 运算符 

与java基本一致

注： 

• / ：除法中，按照日常习惯进行运算，不区分整数和小数  eg：10/3 = 3.3333
• 字符串在参与运算的时候，会尝试自动转为numble类型。( '+' 除外，因为加法前后如果存在字符串，会是拼接效果)
• == ：比较两边的值，忽略数据类型
• === ：恒等，比较的是两边的值和数据类型

• 流程控制 

与java基本一致

注：for循环不同，且在js中表示真假的表达式有很多

类型	真	假
boolean	true	false
number	非0	0
string	非空	空
object	真实对象	null
undefined		√

//普通for循环
for(let i = 0; i < 10; i++){
    需要执行的代码;
}
//增强for循环
for(let obj of array){
    需要执行的代码;
}

•  函数

函数也可以称为js方法（类似于Java中的方法）

与java不一样的：

1. 形参不需要数据类型，因为let可以存放所有类型，没必要
2. 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
3. 如果出现同名的方法，后面的会覆盖前面的，不会重载

//定义
function 函数名(形参1, 形参2){
    方法实现
}
let 函数名  = function(形参1, 形参2){
    方法实现
}

//调用
函数名(实参1,实参2)

• 事件

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

通过事件，将HTML上的元素（按钮等，主要是表单控件）跟函数绑定在一起来完成一些具体的功能

• 绑定方式 

//方式1：通过 HTML标签中的事件属性进行绑定
<input type="button" onclick="on()" value="按钮1">
<script>
    function on(){
        alert('点击!');
    }
</script>

//方式2：通过 DOM 元素属性在js中直接添加事件
<input type="button" id="btn" value="按钮2">
<script>
    document.getElementById('btn').onclick=function(){
        alert('我被点击了!');
    }
</script>

• 常用对象

• 数组

JS数组不区分数据类型，而且其长度可以随意改变，与Java中的集合类似

let arr1 = [1, 2, 3, "hello", new Date(), true, null];
//遍历数组中的有值元素
arr1.forEach(e => {
    console.log(e);
})
//遍历所有元素
for(let item of arr1){
    console.log(item);
}
//向数组添加元素
arr1.push('呵呵');
//从数组中删除元素，从哪个索引开始，删几个
arr1.splice(2,3);

• 字符串 

注：字符串长度与java不一样，java为length()方法，js为length属性 

let str1 = " Hello World ";
//删除首尾空白并打印
console.log(str1.trim());

• Math 

 Math对象的方法：

1. round()  四舍五入
2. floor()  向下取整
3. ceil()   向上取整
4. random() 产生随机数 ：返回 [0,1) 之间的随机数。

let n = 1234.567
//四舍五入
console.log(Math.round(n));//1235

• **JS对象** 

        创建JS对象，也就是JS对象实例化，给属性赋值必须使用冒号而不是等号；多个属性之间用逗号隔开。其中可以有属性和方法。

let stu = {
    name: 'aa',
    age: 18,
    show: function () {
    	console.log("姓名：" + stu.name + ",年龄：" + stu.age);
    }
};

• **JSON** 

        JSON本质上就是一种数据存储格式，显化形式就是JS对象中属性(数据)部分的字符串形式。其用简单且固定的数据格式将数据装起来放在字符串中，在网络中进行传输，方便前后端传递解析。

主要支持三种类型的数据：

1. 简单类型：数字、字符串、布尔、时间、null
2. 数组：使用 [] 表示，let studentName = ["张三","李四","王五"];
3. 对象：使用 {} 表示，let user = {"name":"Jerry","age":18};

{
    //简单类型
    'name':'韦小宝',
    'age':27,
    //数组
    'wife':[
        {'name':'建宁','age':20,'address':'北京'},
        {'name':'双儿','age':22,'address':'扬州'}
    ],
    //对象
    'shifu':{
        'name':'陈近南','age':60
    }
}

JS属性与JSON的转换： 

原因：        

• 要用JSON的原因是其格式简单、解析快、交互方便，因此在传输数据时需要将数据转为JSON。
• 但JSON的字符串中的数据只是样子，不能直接使用，因此要用其中的数据需要将其解析出来。

作用：

        用于传递和展示数据。如用于浏览器存储，在浏览器存储数据时，其只能接收字符串类型，而展示页面提取数据时需要JS字面量对象(属性)。

//JSON字符串转为JS对象
let jsObject = JSON.parse(userStr);
//JS对象转为JSON字符串
let jsonStr = JSON.stringify(jsObject);

• BOM对象

        浏览器对象模型，其作用是把浏览器抽象成为一个对象模型，然后可以使用js模拟浏览器的一些功能（如window的定时器等等）。  

• Window 

Window对象可以实现两种定时器：

1. 周期性任务：let ds1 = setInterval(任务函数, 间隔时间);  clearInterval(ds1);（停止）
2. 一次性任务：let ds2 = setTimeout(任务函数, 延迟时间);  clearTimeout(ds2);（停止）

//一次性任务
setTimeout(function(){//定时5秒之后在控制台打印当前时间
    console.log(new Date());
}, 5000);
//周期性任务
setInterval(function(){//每隔2秒在控制台打印当前时间
    console.log(new Date());
}, 2000);

• Location

Location对象是浏览器的地址栏，主要作用是：使用href属性完成地址的获取和跳转

//点击此按钮可以完成跳转    作用与超链接的本页跳转类似
<button onclick="jump()"> 跳转页面(重点)</button>

//获取当前地址栏地址
function addr(){
    console.log(location.href);
}
//设置当前地址栏地址
function jump(){
    location.href = 'https://www.baidu.com/';
}

• DOM对象 

文档对象模型

作用是把HTML页面内容抽象成一个Document对象，然后可以使用js动态修改页面内容。  

//获取元素对象
document.getElementById(id属性值)
document.getElementsByTagName(标签名)
document.getElementsByClassName(class属性值)
document.getElementsByName(name属性值)
//读取和设置dom对象的value属性  所有属性都可更改
对象.value
对象.value=""
//读取和设置dom对象中的文本
对象.innerHTML
对象.innerHTML=""

• Ajax

        通过Ajax可以给服务器发送请求，并获取服务器响应的数据，然后在不重新加载整个页面的情况下，更新网页的部分区域。

注：Ajax的原生语法十分繁琐，直接学习一个封装好的ajax的框架，Axios

//完整形式
//axios 发送get请求	
axios({
   method: "get",
   url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
}).then((result) => {//结果回来之后,做事情
   console.log(result.data);
});
//axios发送post请求
axios({
    method: "post",
    url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
    data: "id=1"
}).then((result) => {
    console.log(result.data);
});

//axios 发送get请求	
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(resp=>{
   resp.data;//返回结果
});
// axios发送post请求
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(resp=>{
   resp.data;
});