Web开发基础 2024.7.19

南大课程笔记 Web

字数统计: 732阅读时长: 3 min

 2024/07/27 

7.19 下午

Web 技术栈演化

HTML
JavaScript
CSS

纯HTML时代
前端设计 + 后端开发
Dram web (所见即所得) + JSP/php/asp.net
MVC时代The Model-View-Controller architecture
为了将html的框架和具体内容进一步解耦

控制器决定客户端和哪一个服务端进行交互

spa时代
前端开发 + 后端开发
spa时代 single page application:只有请求一次HTML,通过JavaScript修改path
浏览器请求服务器拿到一个HTML和相应的资源
大前端开发 基于Node的全栈时代

浏览器 + 展示层 <-> Node服务器 + 展示层 <-> 业务服务器

什么是HTML

超文本标记语言 Hyper-Text Markup Language

开标签 <标签名>
闭标签 </标签名>
<标签名/> 表示不能有内容体
只能有一个html标签,且不能有和他同级的其他标签
<tag>element</tag>

<html>
    <head></head>
    <body>
    ......
    </body>
</html>

html有哪些标签

<head>metadata</head>为SEO(搜索引擎优化)服务
<title></title>
<style></style> 样式
<meta/>
<link/> 链接
<script></script> 脚本

meta标签

在开标签中可以定义属性

<meta charset="UTF-8">

href

```<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>``` JavaScript标签


<b>
This is <sub> subscript </sub> and <sup> superscript </sup>
</b>


**HTML样式**
```<tagname style="property:value;">```


### CSS Box Model
把每一个标签都看成一个没有大小的盒子
可以定义width和height从而定义出border大小

margin:离另一个box的相对位置
border:box的大小
padding:文字显示区域

```html
    <style>
        .area{
            background-color: tomato;
            color: white;
            border: 2px solid black;
            margin: 20px;
            padding: 20px;
        }
        </style>

    <div class="area">
        <h2>London</h2>
        <p>London is the capital of England.</p>
    </div>

JavaScript语法

声明
- var
  - 会出现暂时性死区问题TDZ
- let
- const
变量命名
- 以字母_$为起始符
- 后接字母或数字
变量类型
- 弱类型语言统一用let声明
- 在赋值时才确定类型值有类型而变量没有类型
- boolean
- null
- undefined 没有声明变量console.log(b) Uncaught ReferenceError: b is not defined
- number 不区分整型和浮点数
- bigint
- string
- symbol
对象
1
2
3
4
{
a=1;
b=2;
}
函数声明

参数和返回值都没有数据类型

function name(parameter){

    return;
}

特殊的地方 = VS. == VS. ===

= 赋值
== 逻辑判断,会进行强制类型转化
=== 还会判断类型

将函数赋值给变量 lamda表达式

const fibonacci = n => {
    let a=0, b=1, c=0;
    for (let i=2; i<= n; i++){
        c = a+b;
        a = b;
        b = c;
    }
    return c;
}

fibonacci(n);