HTML CSS Javascript前端基础

内容包括HTML、CSS和JavaScript

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为

文章目录

HTML
- HTML重点内容
CSS
- CSS 的3种引入方式
- CSS的3种选择器
- 常用的css样式名
JavaScript
- JavaScript的3种引入方式
- JavaScript的7种变量类型
- Javascript 变量申明
- JavaScript运算符
- JavaScript的条件语句
- JavaScript的switch语句
- JavaScript循环语句
- JavaScript中的方法
- Promise
- JSON

HTML

需掌握内容：

HTML是什么：超文本标记语言
HTML语言特点（标签的写法）
HTML常用标签
HTML注释的写法

HTML重点内容

HTML标签的写法：使用<和>包裹标签名，作为标签的开始，并使用</和>包裹标签名，作为标签的结束。每一个标签都必须有开始和结束标志。
```
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>前端教程</title></head><body><h1>我是标题</h1><p>我是段落。</p></body>
</html>
```

常用标签：html、head、body、h1到h6、p、a、img、table、tr、td、ol、ul、li、style、link、script

<img src="my.jpg" alt="" />
<table><tr><td>我是表格第一格</td><td>我是表格第二格</td></tr>
</table>

表单：表单标签form，输入标签input，按钮标签button，选择框标签select，多行文本标签textarea

<form name="input" action="" method="get"><select name="sel"><option>选择项1</option><option>选择项2</option></select>用户名: <input type="text" name="user"><input type="submit" value="提交按钮">
</form>

属性

样式属性style
```
<p style="color:red">我是段落</p>
```

事件属性onclick，onmouseover，onmouseout

<p onclick="alert('你好');">我是段落</p>

标签属性：如src，href，value，type
```
<img src="my.jpg" alt="" />
```

CSS

CSS是什么：CSS 指层叠样式表 (Cascading Style Sheets)。

CSS的注释写法：/* 我是注释内容 */

CSS 的3种引入方式

外部css文件，使用link标签引入

<link rel="stylesheet" href="my.css" type="text/css" />

HTML内部的样式代码块，使用style标签

<style>
body {background-color: red}    /*定义body的背景颜色为红色*/
</style>

内联样式，在html标签的style属性里写样式
```
<p style="color: red"></p>
```

CSS的3种选择器

标签选择器：直接为HTML标签编写代码，可以为body、h1-h6、p、table、img等标签写代码

如：body{background-color: red}
class选择器：使用.+样式名称的写法，定义样式，并在HTML标签里通过class属性调用

如：.hanhan{color: red}
调用方式：<p class="hanhan">我是憨憨<p>
id选择器：在HTML标签里定义id属性，并在样式里使用#+ID名称的写法，定义样式

HTML标签：<p id="hanhan2">我是憨憨2号</p>

样式定义：#hanhan2{color: purple}

常用的css样式名

颜色：color 颜色，background-color：背景色
背景：background背景
- background-color：背景颜色
- background-image：背景图像
字体：font
- font-size：字体大小
- font-family：字体名称，指定显示的字体
- font-weight：字体的粗细
尺寸：
- width：宽
- height：高

JavaScript

JavaScript也叫代码，使用script标签引入到html文件里。

需要掌握什么是变量、方法，以及如何定义一个变量和方法

JavaScript的3种引入方式

外部js文件，使用script标签配合src属性引入
例如：
```
<script src="my.js"></script>
```

HTML内部的脚本代码块，使用script标签

<script>
function myfun() {//我是js注释/*我是多行注释*/alert('你好');
}
</script>

内联脚本，在html标签的事件属性里写脚本

<button onclick="alert('你好')">我是按钮</button>

JavaScript的7种变量类型

数字
数字包括整数和小数，数字相关的方法：parseInt、parseFloat、toFixed
- parseInt: 将字符串转换为整数
- parseFloat: 将字符串转换为小数
- toFixed: 保留小数点位数，例如num.toFixed(2)保留2位小数
Math对象：Math.random, Math.max, Math.min等方法
- Math.random: 返回0-1的随机小数
- Math.max：获取两个数中的最大数
- Math.min：获取两个数中的最小数
字符串
使用'和"包裹字符串内容

字符串常用属性：length，返回字符串的长度

字符串常用方法：substring、substr、indexOf、toLowerCase、toUpperCase、split
- substring：截取字符串的一部分
- substr：截取字符串的一部分
- indexOf：在字符串中查找，并返回搜索到的索引的位置
- toLowerCase：将字符串转换为小写
- toUpperCase：将字符串转换为大写
- split：使用指定的分隔符，把字符串转换为数组
数组
使用[和]包裹数组元素，多个数组元素中间使用英文的逗号分隔；

常用方法：pop, push, shift, unshift, indexOf, splice, join, concat, reverse, sort
- pop：删除并返回数组的最后一个元素
- push：像数组的后面附加新的元素
- shift ：删除并返回数组的第一个元素
- unshift：像数组的前面插入新的元素
- indexOf：查询指定元素在数组中的位置
- splice(index, length[, item1, item2, ……])：删除数组中指定索引index开始长度为length的元素，并插入item1，item2等元素
- join：将数组按指定分隔符拼接成一个字符串
- concat：合并2个数组
- reverse：反转数组里元素的顺序
- sort：数组排序

对象

使用{和}申请对象，对象包括属性和方法，属性(方法)名称和属性(方法)值使用:分隔，多个属性或方法使用英文的逗号分隔

对象示例：
//创建一个对象
var person = {name: 'Farrah',age: 10
}
//访问对象属性
var age = person.age;//修改对象的属性
person.age = 11;
Set对象

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
//申请Set对象
var set = new Set();//从数组转换为Set对象，注意会忽略数组中重复的内容
var set = new Set(['a', 'b', 'a']);  //返回{'a', 'b'}//添加元素
set.add('test')//删除元素
set.delete('test');//清空所有
set.clear();//转换为数组
var arr = [...set];
Map对象

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
var myMap = new Map();
var keyString = "a string";
var keyFunc = function () {}, // 函数
var keyObj = {}, myMap.set(keyString, "和键'a string'关联的值");
myMap.set(keyFunc, "和键'a string'关联的值");
myMap.set(keyObj, "和键'a string'关联的值");myMap.get(keyString);    // "和键'a string'关联的值"
myMap.get("a string");   // "和键'a string'关联的值"

布尔值

表示对和错，或者是和否，只有true和false两种值
null

在 JavaScript 中 null 表示 “什么都没有”。

null是一个只有一个值的特殊类型。表示一个空对象引用。
undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。

Javascript 变量申明

使用var，let和const关键字声明变量。

var name1 = 'farrah';
let name2 = 'farrah';
const name3 = 'farrah';

说明：

var：可以使用var来申明变量，但是此声明变量方式，子代码块的申明会覆盖父级的申明。
let：变量只在申明的代码块内有效，不会覆盖父级的变量内容，且在相同代码块内不可以重复申明相同名称的变量
const：用来申明静态，不可修改的变量。

JavaScript运算符

常用的赋值运算符：=、--、++、+=、-=、*=、/=

常用的比较运算符：==、===、!=、!==、>、<

JavaScript的条件语句

if(条件1) {当条件1为真时执行的语句
} else if(条件2) {当条件2为真时执行的语句
} else {当条件1为假并且条件2为假的时候执行的语句
}

JavaScript的switch语句

如果使用了return，则不需要加break;

var d=new Date().getDay();
switch (d)
{ case 0:x="今天是星期日"; break; case 1:x="今天是星期一"; break; case 2:x="今天是星期二"; break; case 3:x="今天是星期三"; break; case 4:x="今天是星期四"; break; case 5:x="今天是星期五"; break; case 6:x="今天是星期六"; break;
}

JavaScript循环语句

Javascript里包括for循环和do while循环

for循环

for(var i = 0; i < 10; i++) {执行的代码
}

while循环

while(条件) {需执行的代码
}

do while循环

do
{需要执行的代码
}
while (条件);

JavaScript中的方法

需要掌握，方法定义以及方法的调用。

方法第一种定义：

function myfun(p1, p2) {return p1 * p2;
}

方法的第二种定义：

var myfun = function(p1, p2) {return p1 * p2;
}

方法调用：

myfun(2, 4);

Promise

Promise的三种状态： Pending(初始状态), Fulfilled(已成功完成), Rejected(出错了).

//创建Promise
var p = new Promise((reslove, reject) => {setTimeout(() => {reslove('ok')}, 1000)
});
p.then(data => {console.log(data);
}).catch(err => {console.error(err);
})

JSON

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）

JSON 是存储和交换文本信息的语法，类似 XML。

JSON 比 XML 更小、更快，更易解析。

{"persons": [{ "name":"Farrah" , "age": 15 },{ "name":"Joy" , "age": 39 },{ "name":"Ady" , "age": 39 }]
}

书写JSON时，需要注意：

JSON使用是键值对的方式出现。
键名必须使用双引号包裹。
值可以是字符串、数字、Boolean、数组和对象

常用方法：

JSON.parse：将JSON字符串转换为对象
JSON.stringify：将javascript对象转换为JSON字符串