公告

HTML、CSS、JavaScript 前端基础

HTML前端基础编程课程

课程内容包括HTML、CSS和JavaScript

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

HTML

需掌握内容：

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

HTML重点内容

HTML标签的写法：使用<和>包裹标签名，作为标签的开始，并使用</和>包裹标签名，作为标签的结束。每一个标签都必须有开始和结束标志。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前端教程</title>
	</head>
    <body>
        <!--我是html注释-->
        <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字符串

posted on 2021-09-13 18:57 JhtFH 阅读(70) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

JhtFH DevOps

公告