认识软件——Web 开发与博客搭建

自我介绍

微软学生大使（MLSA）
软件学院微软学生俱乐部前副主席
同济大学信安社团、CTF 战队创办人
信息办网络安全助管

Markdown 的局限

功能简单、样式固定

插入视频？更改图片大小？
无数学公式情况下的上标、下标？
居中对齐？多个空行？
更改字体、颜色？

HTML Element

Type 2: Without Content

<img src="https://www.tongji.edu.cn/images/18/05/03/1d0wfqyjja/footlogo.png" />

	<	>	&
&ensp;	<	>	&

注释

<!-- This is a comment. -->

一个标准的 HTML 文件结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

程序结构——分支

let a = 10 - 7
let b
if (a > 5) {
  b = 'a > 5'
} else {
  b = 'a <= 5'
}

console.log(b)

程序结构——循环

for (let i = 0; i < 5; i = i + 1) {
  console.log(i)
}
let i = 0
while (i < 5) {
  console.log(i)
  i = i + 1
}

程序结构——嵌套

let i = 0
while (i < 5) {
  if (i == 3) {
    console.log('Now i is 3')
  } else {
    console.log(i)
  }
  ++i
}

函数

// 函数声明
function some_function_name () {
  console.log('Executed!')
}

// 函数调用
some_function_name()
some_function_name() // 可以重复利用
some_function_name()

函数参数、返回值

function sum_from_1 (n) {
  let sum = 0
  let i = 1
  while (i <= n) {
    sum += i
    ++i
  }
  return sum
}

let result = sum_from_1(3)
console.log(result)

console.log(sum_from_1(50))

函数也是变量！

function foo (n) {
  console.log(`foo is executed, and n is ${n}`)
}

let bar = foo

foo(1)
bar(2)

认识软件之

从 Web 开发到博客搭建

自我介绍

Markdown 的局限

解决方案——

HTML

HTML 功能

语法

HTML Element

举例

Element 嵌套

HTML Element

Attributes（属性）

常用的属性

空白字符（空格、Tab、回车等）

HTML Entity

注释

一个标准的 HTML 文件结构

CSS

JavaScript

执行

编程

JavaScript 语法

变量

声明变量

变量类型

运算

变量转换

程序结构——分支

程序结构——循环

程序结构——嵌套

练习

函数

函数参数、返回值

函数也是变量！

练习

DOM

博客框架——Hexo

三个重要命令