10岁小朋友暑期HTML前端基础编程课程暑期10岁小朋友的前端基础课程内容, 课程内容包括HTML、CSS和JavaSc

暑期小朋友的前端基础课程内容，每天学习时长0.5-1小时，课程用时大概1个月时间（包含几个练手的小页面）。

课程内容参考了w3school和runoob:

HTML: www.w3school.com.cn/html/index.…

JavaScript: www.w3school.com.cn/js/index.as…

CSS: www.w3school.com.cn/css/index.a…

Markdown: www.runoob.com/markdown/md…

编辑器：

VSCode

Typora

课程实践：

翻译使用了百度的翻译API；用时大概2课时

贪食蛇代码相对小朋友比较复杂，部分内容我协助了她；用时大概6课时

脑经急转弯和笑话大全使用了markdown语法，配合Typora导出HTML。

翻译

贪食蛇

脑筋急转弯

笑话大全

课程内容包括HTML、CSS和JavaScript, Markdown

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为
MarkDown 最后学习，比较简单的写文档格式。

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字符串