Day01 学习笔记 —— HTML / CSS / JavaScript

一、Web 开发概览

1.1 什么是 Web

Web（World Wide Web，万维网） ：全球广域网，能够通过浏览器访问的网站。
网站本质是一堆网页资源，由浏览器解析并呈现。

1.2 网站的工作流程

浏览器  ──请求──▶  前端服务器  ──请求──▶  后端服务器(Java)  ──▶  数据库服务器
   ◀──响应──    ◀──响应(前端代码)──    ◀──响应(数据)──

浏览器发出请求，前端页面展示；前端程序调用后端 Java 程序接口（如 http://localhost:8080/item/selectAll），后端访问数据库返回数据。

1.3 网站的开发模式

模式	特点
前后端分离	前端代码与数据分服务器部署，前端通过接口（Ajax/Axios）异步取数
混合开发	页面代码（含数据）由后端直接生成，后端一次返回完整页面

1.4 课程安排（JavaWeb 主线）

前端：HTML、CSS、JavaScript → Vue、Ajax、Axios、Yapi、ElementUI、Nginx
后端：Maven、SpringBoot Web（基础篇 / 开发篇 / 进阶篇）、MySQL、Mybatis

二、Web 前端开发简介

2.1 W3C 标准

W3C（World Wide Web Consortium，万维网联盟） ：1994 年 10 月成立，负责 Web 标准化。
网页三层职责：
- HTML：结构（页面有什么）
- CSS：表现（页面长什么样）
- JavaScript：行为（页面能做什么/交互）
后续框架：Vue（简化 JS 开发的框架）、Element（基于 Vue 的组件库，快速搭页面）。

2.2 开发工具

VS Code：Microsoft 2015 年发布的代码编辑器，对前端支持极强，支持 Java/Python/Go 等，插件生态丰富。
官网：https://code.visualstudio.com
安装文档见 资料/2. VSCode安装/。

三、HTML（结构）

3.1 什么是 HTML

HTML（Hyper Text Markup Language）超文本标记语言。
超文本：超越普通文本限制，可定义图片、音频、视频等内容。
标记语言：由预定义标签构成（如 <img> 展示图片、<video> 展示视频）。
HTML 代码由浏览器直接解析运行。

3.2 快速入门

　　新建文本文件，后缀改为 .html，写结构标签，在 <body> 中填内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 在这里写页面内容 -->
</body>
</html>

　　HTML 语法特点（语法松散）：

文件以 .htm 或 .html 为扩展名。
标签不区分大小写。
标签属性值单引号、双引号均可。

3.3 常见基础标签

标签	描述
`<h1>` ~ `<h6>`	标题，h1 最大、h6 最小
`<font>`	字体（color / size / face 控制颜色、大小、字体）
`<b>`	粗体
`<i>`	斜体
`<u>`	下划线
`<center>`	居中
`<p>`	段落
`<br>`	折行（换行）
`<hr>`	水平分割线

<h1>一级标题</h1>
<font color="#cccccc" size="6" face="楷体">HTML,基础标签</font>
<hr>
<center>HTML</center>
<i>斜体</i> <b>粗体</b> <u>下划线</u>
<p>这是一个段落。</p>

3.4 图片、音频、视频标签

标签	描述	关键属性
`<img>`	图片	`src`（URL）、`height`、`width`
`<audio>`	音频（MP3 / WAV / OGG）	`src`、`controls`（显示播放控件）
`<video>`	视频（MP4 / WebM / OGG）	`src`、`controls`、`height`、`width`

尺寸单位：px（像素）和 %（百分比）。
路径：绝对路径（完整 URL 或盘符路径） / 相对路径（相对于当前文件）。

<img src="img/1.jpg" height="300px" width="400px">
<audio src="audio/王者战歌.mp3" controls></audio>
<video src="video/1.mp4" controls height="300px" width="400px"></video>

3.5 超链接、表格标签

　　**超链接 ** <a>

href：目标资源 URL。
target：_self（默认，当前页面打开）/ _blank（新页面打开）。

　　**表格 ** <table>

border：边框宽度；width：表格宽度；cellspacing：单元格间距。
<tr> 行（align 对齐）；<td> 单元格；<th> 表头单元格。

　　布局标签

<div>：块级区域，常与 CSS 配合做页面布局。
<span>：行内元素，组合行内内容。

<a href="https://www.baidu.com" target="_self">百度</a>
<a href="https://www.itcast.cn" target="_blank">传智教育</a>

<table border="1" width="700px" cellspacing="0">
    <tr>
        <th>序号</th><th>品牌Logo</th><th>品牌名称</th><th>企业名称</th>
    </tr>
    <tr>
        <td>001</td>
        <td><img src="img/1.jpg" width="100px" height="50px"></td>
        <td>华为</td><td>华为技术有限公司</td>
    </tr>
</table>

<div>区域一</div>
<span>元素一</span><span>元素一</span>

3.6 表单标签

**表单 ** <form> ：负责采集用户数据。
- action：提交时数据发往的 URL。
- method：get（数据附在 URL 后，大小有限制）/ post（数据放 HTTP 请求体，大小无限制）。
表单项：
- <input>：type 决定输入形式。
- <label>：为表单项定义标注。
- <select> + <option>：下拉列表。
- <textarea>：文本域。

　　input 的 type 取值：

type	描述
`text`	单行文本（默认）
`password`	密码框
`radio`	单选按钮（同 name 互斥）
`checkbox`	复选框
`file`	文件上传
`hidden`	隐藏域
`submit`	提交按钮（发送表单数据）
`reset`	重置按钮（清空表单）
`button`	普通可点击按钮

<form method="post" action="/xxx">
    姓名: <input type="text" name="name"><br>
    密码: <input type="password" name="pass"><br>
    性别: <input type="radio" name="gender" value="男">男
          <input type="radio" name="gender" value="女">女<br>
    爱好: <input type="checkbox" name="hobby" value="java">java<br>
    学历: <select name="degree">
            <option value="初中">初中</option>
            <option value="高中">高中</option>
          </select><br>
    描述: <textarea name="description" cols="30" rows="5"></textarea><br>
    <input type="hidden" name="username" value="ITCAST">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

四、CSS（表现）

4.1 什么是 CSS

CSS（Cascading Style Sheet）层叠样式表：控制页面的样式（表现）。

4.2 三种引入方式

内联样式：标签内 style 属性。

<div style="color: red; font-size: 50px; text-align: center;">Hello CSS</div>

内部样式：<head> 内 <style> 标签。

<style>
    div { color: red; font-size: 50px; text-align: center; }
</style>

外部样式：<link> 引入独立 .css 文件（推荐，便于复用）。

<link rel="stylesheet" href="css/demo.css">

css/demo.css：

.cls {
    color: red;
    font-size: 50px;
    font-family: 'Courier New';
    text-align: center;
}

4.3 选择器

概念：选取需要设置样式的元素。
分类：

选择器语法说明

元素选择器 div { ... } 按标签名选

id 选择器 #name { ... } 按 id 选（唯一）

类选择器 .cls { ... } 按 class 选（可复用，推荐）

选择器	语法	说明
元素选择器	`div { ... }`	按标签名选
id 选择器	`#name { ... }`	按 id 选（唯一）
类选择器	`.cls { ... }`	按 class 选（可复用，推荐）

div  { color: red; }      /* 元素选择器 */
#name { color: red; }     /* id 选择器  */
.cls  { color: red; }     /* 类选择器   */

4.4 常用属性

　　参考官方文档：https://www.w3school.com.cn/cssref/index.asp

div {
    color: red;            /* 文字颜色 */
    font-size: 50px;       /* 字号 */
    font-family: 'Courier New'; /* 字体 */
    text-align: center;    /* 对齐 */
    line-height: 100px;    /* 行高 */
    border: 1px solid black; /* 边框 */
    width: 50%;            /* 宽度 */
    height: 100px;         /* 高度 */
    margin-bottom: 10px;   /* 外下边距 */
    background-color: aquamarine; /* 背景色 */
}

五、JavaScript（行为）

5.1 什么是 JavaScript

JS：1995 年由 Brendan Eich 发明，1997 年成为 ECMA 标准。
跨平台、面向对象的脚本语言，控制网页行为、实现交互。
与 Java 概念和设计完全不同，但基础语法类似。
ES6（ECMAScript 2015） 是当前主流版本。
ECMAScript：JS 的语法工业标准（变量、函数等基础核心），由 ECMA 标准化，所有浏览器厂商共同遵守。

5.2 引入方式

　　内部脚本：写在 <script></script> 之间。

可放在 HTML 文档任意位置，数量不限。
一般置于 <body> 元素底部，以改善页面显示速度。

<script>
    alert("hello js");          // 弹出框
    document.write("hello js");  // 输出到 HTML 页面
    console.log("hello js");     // 输出到浏览器控制台
</script>

　　外部脚本：JS 代码写在独立 .js 文件中（**只含 JS 代码，不含  <script> ** 标签），再引入。

⚠️ <script> 标签不能自闭合（不能写 <script src="js/demo.js" />）。

<script src="js/demo.js"></script>

　　js/demo.js：

alert("Hello JS");

5.3 书写语法

区分大小写：变量名、函数名及其他一切均区分大小写（与 Java 一致）。
分号可有可无：每行结尾的分号不是必须的。
注释：
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
大括号表示代码块 { ... }。

// 判断
if (count == 3) {
    alert(count);
}

5.4 输出语句

语句	作用
`window.alert("...")`	浏览器弹出警告框
`document.write("...")`	写入 HTML，在浏览器展示
`console.log("...")`	写入浏览器控制台（按 F12 查看）

<script>
    window.alert("Hello JavaScript");   // 浏览器弹出警告框
    document.write("Hello JavaScript");  // 写入 HTML 页面
    console.log("Hello JavaScript");     // 写入浏览器控制台
</script>

5.5 变量

var：用 var 关键字声明变量；JS 是弱类型语言，变量可存放不同类型的值；可重复声明，作用域较宽松（函数级/全局）。
```
var a = 20;
a = "张三";      // 弱类型，可重新赋不同类型
var a = "Tom";  // var 允许重复声明
```
let （ES6） ：用法类似 var，但声明的变量只在 let 所在的代码块内有效（块级作用域），且不允许重复声明。
```
{
    let a = 10;
    a = 20;
}
// 代码块外访问 a 会报错（let 块级作用域）
```
const （ES6） ：声明只读常量，一旦声明值不能改变。
```
const PI = 3.14;
// PI = 3.15;  // 报错：常量不可改
```
命名规则：组成字符可为字母、数字、下划线（_）或美元符号（$）；数字不能开头；建议使用驼峰命名。

5.6 数据类型

JS 中分为原始类型和引用类型两类。

用 typeof(变量) 运算符获取数据类型。

类型	说明
`number`	数字（整数、小数、`NaN` 表示 Not a Number）
`string`	字符串，单双引号皆可
`boolean`	布尔：`true` / `false`
`null`	对象为空
`undefined`	声明变量但未初始化时的默认值
引用类型	如对象（object）等复杂结构

var a = "hello";
alert(typeof(a));   // "string"

var b;
alert(typeof(b));   // "undefined"（未初始化）

5.7 运算符

算术运算符：+ - * / % ++ --
赋值运算符：= += -= *= /= %=
比较运算符：> < >= <= != == ===
逻辑运算符：&& || !
三元运算符：条件表达式 ? true_value : false_value

　　 == ** 与  === ** 的区别（重点）：

var a = 10;
alert(a == "10");   // true  —— == 会先做类型转换再比较
alert(a === "10");  // false —— === 不做类型转换，类型不同即不相等
alert(a === 10);    // true

　　类型转换规则：

其他类型 → 数字：String 将字符串字面量转数字，非数字则转 NaN；Boolean 中 true→1、false→0。
其他类型 → 布尔：
- Number：0 和 NaN 为 false，其余为 true；
- String：空字符串 "" 为 false，其余为 true；
- null / undefined：均为 false。

if (undefined) { alert("OK"); }   // 不弹框，undefined 转布尔为 false

5.8 流程控制语句

if ... else if ... else
switch
for
while
do ... while
参考官方文档：https://www.w3school.com.cn/jsref/jsref_statements.asp

// if ... else if ... else
var score = 85;
if (score >= 90) {
    alert("优秀");
} else if (score >= 60) {
    alert("及格");
} else {
    alert("不及格");
}

// switch
var day = 1;
switch (day) {
    case 1: alert("周一"); break;
    case 2: alert("周二"); break;
    default: alert("其他");
}

// for
for (var i = 0; i < 5; i++) {
    console.log(i);
}

// while
var n = 0;
while (n < 3) {
    console.log(n);
    n++;
}

// do ... while（至少执行一次）
var m = 0;
do {
    console.log(m);
    m++;
} while (m < 3);

5.9 函数

介绍：函数（方法）是被设计为执行特定任务的代码块。
定义：用 function 关键字定义。
- 形式参数不需要类型（JS 弱类型）。
- 返回值也不需要定义类型，函数内直接用 return 返回即可。
调用：函数名称(实际参数列表)。
注意事项：JS 中函数调用可以传递任意个数的参数（实参与形参数量不必一致）。

　　定义方式一：函数声明

function add(a, b) {
    return a + b;
}
var sum = add(10, 20);
alert(sum);

　　定义方式二：函数表达式（赋值给变量）

var add = function(a, b) {
    return a + b;
};
var sum = add(20, 30);
alert(sum);

　　任意参数个数演示：

function demo(a, b) {
    console.log(a, b);
}
demo(1);          // b 为 undefined
demo(1, 2, 3);    // 多传的 3 被忽略（但仍可通过 arguments 访问）

Bam 鸟先飞

Day01学习笔记

Day01 学习笔记 —— HTML / CSS / JavaScript

一、Web 开发概览

1.1 什么是 Web

1.2 网站的工作流程

1.3 网站的开发模式

1.4 课程安排（JavaWeb 主线）

二、Web 前端开发简介

2.1 W3C 标准

2.2 开发工具

三、HTML（结构）

3.1 什么是 HTML

3.2 快速入门

3.3 常见基础标签

3.4 图片、音频、视频标签

3.5 超链接、表格标签

3.6 表单标签

四、CSS（表现）

4.1 什么是 CSS

4.2 三种引入方式

4.3 选择器

4.4 常用属性

五、JavaScript（行为）

5.1 什么是 JavaScript

5.2 引入方式

5.3 书写语法

5.4 输出语句

5.5 变量

5.6 数据类型

5.7 运算符

5.8 流程控制语句

5.9 函数

评论

Bam 鸟先飞

Day01学习笔记

Day01 学习笔记 —— HTML / CSS / JavaScript

一、Web 开发概览

1.1 什么是 Web

1.2 网站的工作流程

1.3 网站的开发模式

1.4 课程安排（JavaWeb 主线）

二、Web 前端开发简介

2.1 W3C 标准

2.2 开发工具

三、HTML（结构）

3.1 什么是 HTML

3.2 快速入门

3.3 常见基础标签

3.4 图片、音频、视频标签

3.5 超链接、表格标签

3.6 表单标签

四、CSS（表现）

4.1 什么是 CSS

4.2 三种引入方式

4.3 选择器

4.4 常用属性

五、JavaScript（行为）

5.1 什么是 JavaScript

5.2 引入方式

5.3 书写语法

5.4 输出语句

5.5 变量

5.6 数据类型

5.7 运算符

5.8 流程控制语句

5.9 函数

支持与分享

评论