【Javaweb学习|实训总结|Week1】html基础，CSS（选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画），js（基本类型、运算符典例）

开学前三周先进行企业实训，主要学习Javaweb并实现一些小的项目，本篇笔记主要记录第一周实训的知识总结以及个人遇到的问题及解答，用于日后复习回顾和知识巩固，希望可以帮到同样在学Javaweb的大家

D1

html基础

文本居中：text-align:center

无序链表：<ul><li> 快捷键 ul>li*3

换行：<br>

空元素：<br/>

表结构：快捷键 table>tr*2>td{单元格}

• <table>标签创建表格，<tr>定义行，<th><td>定义单元格
• 使用border-collapse: collapse优化边框显示
• 表头行通过background-color设置背景色
• border：设置表格的边框
• width：设置表格的宽度
• height：设置表格的高度

加粗：<strong>或font-weight: bold或<b>

图片：

• 路径使用技巧：
  • 同一目录下直接写文件名：src="pic.jpg"
  • 上级目录使用../：src="../images/pic.jpg"
  • 子目录直接写目录名：src="images/pic.jpg"
  • object-fit: cover保持图片比例并填充容器

超链接：

• <a>标签创建超链接，href属性指定链接目标
• target="_blank"使链接在新窗口打开
• 去除下划线：text-decoration: none

图片链接：

• 将<img>标签嵌套在<a>标签内部即可实现图片链接
• 去除图片链接默认边框：border: none
• cursor: pointer使鼠标悬停时显示手型图标

D2

块元素与行内元素

• 块元素特性：
  • 每个块元素独占一行（自动换行）
  • 可设置width和height属性
  • margin和padding的上下左右都有效
  • 默认宽度为父容器的 100%
• 行内元素特性：
  • 多个行内元素并排显示（不自动换行）
  • 设置width和height无效
  • margin和padding仅左右有效，上下无效
  • 宽度由内容本身决定

元素类型转换

/* 行内元素转块元素 */
.inline-to-block {
    display: block;
}
/* 块元素转行内元素 */
.block-to-inline {
    display: inline;
    width: 200px; /* 无效 */
    height: 40px; /* 无效 */
}
/* 块元素转行内块元素 */
.block-to-inline-block {
    display: inline-block;
}

• display: block：行内元素拥有块元素特性（独占一行 + 可设宽高）
• display: inline：块元素拥有行内元素特性（并排显示 + 宽高无效）
• display: inline-block：兼具两者特性（并排显示 + 可设宽高）

CSS选择器

基础选择器

/* 1. 元素选择器：通过标签名选择元素 */
p {
    color: #333;
    line-height: 1.6;
}
/* 2. 类选择器：通过class属性选择元素（.开头） */
.highlight {
    background-color: #fff3cd;
    padding: 5px;
}
/* 3. ID选择器：通过id属性选择元素（#开头，唯一） */
#special {
    color: #dc3545;
    font-weight: bold;
    border-left: 3px solid #dc3545;
    padding-left: 10px;
}
/* 4. 多类选择器：同时匹配多个class */
.highlight.important {
    border: 2px dashed #ffc107;
}
/* 5. 通配符选择器：选择所有元素（*） */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

组合选择器

/* 1. 后代选择器：选择父元素内的所有后代元素（空格分隔） */
.parent p {
    color: #28a745;
}
/* 2. 子选择器：仅选择父元素的直接子元素（>连接） */
.parent > p {
    font-style: italic;
    border-bottom: 1px solid #28a745;
}
/* 3. 相邻兄弟选择器：选择紧接在指定元素后的兄弟元素（+连接） */
h3 + p {
    color: #17a2b8;
    margin-top: 5px;
}
/* 4. 通用兄弟选择器：选择指定元素后的所有兄弟元素（~连接） */
h3 ~ p {
    margin-left: 10px;
}

还有伪类选择器和属性选择器

子选择器vs后代选择器：

.container > div（子选择器）

css.container > div {
  border-radius: 10px;
}

• 只选择 .container 的直接子元素（一级子元素）
• 不包括更深层的嵌套元素
• 是一种严格的父子关系

.container div（后代选择器）

css.container div {
  border-radius: 10px;
}

• 选择 .container 内部的所有 div 元素（无论嵌套多深）
• 包括直接子元素和间接子元素
• 是一种包含关系

外观样式

字体：font-family: "Microsoft YaHei", sans-serif; /* 优先使用微软雅黑，无则用系统默认无衬线字体 */

字体大小：font-size: 18px; /* 字体大小，单位px/em/rem等 */

加粗：font-weight: bold; /* 加粗，可选值：normal/bold/100-900 */

斜体：font-style: italic; /* 斜体，可选值：normal/italic/oblique */

行高：line-height: 1.8; /* 行高，可设数值、百分比或长度单位 */

背景颜色：background-color: #3498db;

背景图片：

background-image: url('https://picsum.photos/200/80'); /* 背景图片 */

background-position: center; /* 背景图片居中显示 */

background-size: cover; /* 背景图片覆盖容器，可能裁剪 */

文本颜色：color: #e74c3c;

文本对齐方式：text-align: center; /* left/center/right/justify */

文本装饰：text-decoration: underline; /* none/underline/overline/line-through */

大小写转换：text-transform: uppercase; /*none/uppercase/lowercase/capitalize */

首行缩进：text-indent: 2em; /*2em表示2个字符宽度 */

字符间距：letter-spacing: 3px;

盒子模型

（1）标准盒子模型（W3C 盒子模型）

• 总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
• 总高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
• 说明：width 和 height 仅作用于内容区，不包含内边距和边框。

（2）怪异盒子模型（IE 盒子模型）

• 总宽度 = width + margin-left + margin-right（width 已包含内容区、内边距和边框）
• 总高度 = height + margin-top + margin-bottom（height 已包含内容区、内边距和边框）
• 说明：通过 box-sizing: border-box 可将元素设置为怪异盒子模型（实际开发中更常用）。

D3

弹性盒布局

注意：

在最低级div的class中，前面加一个box，之后在css中定义一个box就可以给所有区块统一设置颜色

<div class="box right-small"></div>

--------------------------------------
.box {
    background-color: #66b1ff; /* 教学一专属浅蓝色，区分教学二灰色系 */
    border-radius: 4px; /* 可选：添加圆角，优化视觉效果 */
}

/* 全局样式重置：消除默认边距，统一盒模型 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

• box-sizing: border-box：让元素的width和height包含内边距（padding）和边框（border），避免尺寸计算偏差，简化布局调试。

/* 外层容器：作为弹性盒根节点，控制整体垂直布局 */
.container {
    width: 75%;
    margin: 20px auto; /* 上下留白20px，左右自动居中 */
    padding: 15px;
    display: flex; /* 开启弹性盒布局 */
    flex-direction: column; /* 子元素垂直排列（从上到下） */
    gap: 12px; /* 各子区域（如顶部色块、行容器）之间的间距 */
    border: 1px solid #eee; /* 可选：添加边框便于观察容器范围 */
}

• display: flex + flex-direction: column：构成页面纵向骨架，使.container内的顶部色块、各row、底部色块按垂直顺序排列，符合效果图整体结构。
• gap：替代传统margin控制元素间距，避免 “外边距折叠” 问题，且仅作用于弹性盒子元素，布局更精准。

D4

CSS定位

圆角与阴影

圆角

/* 统一设置四个角的圆角半径 */
.element {
    border-radius: 10px; /* 所有角都是10px圆角 */
}
/* 分别设置四个角（顺时针：上左、上右、下右、下左） */
.element {
    border-radius: 5px 10px 15px 20px;
}
/* 圆形效果（宽高相等时） */
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* 半径为宽高的一半，形成正圆 */
}
/* 椭圆效果（宽高不等时） */
.oval {
    width: 200px;
    height: 100px;
    border-radius: 50%; /* 形成椭圆 */
}

阴影

/* 基础阴影：水平偏移 垂直偏移 模糊半径 阴影大小 颜色 内外阴影 */
.element {    
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 外阴影 */
}
/* 内阴影（添加inset关键字） */
.element {    
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2); /* 内阴影 */
}
/* 多重阴影（用逗号分隔） */
.element {    
    box-shadow: 0 0 10px #f00, /* 红色发光效果 */                
                5px 5px 15px rgba(0, 0, 0, 0.3); /* 黑色阴影 */
}

参数说明：

• 水平偏移（必选）：正数向右，负数向左
• 垂直偏移（必选）：正数向下，负数向上
• 模糊半径（可选）：值越大阴影越模糊
• 阴影大小（可选）：值越大阴影范围越大
• 颜色（可选）：默认与文本颜色一致，建议用 rgba 设置透明度
• inset（可选）：添加后为内阴影，默认外阴影

文本阴影（text-shadow）

用于给文本添加阴影效果。

/* 基础文本阴影：水平偏移 垂直偏移 模糊半径 颜色 */
.text {    
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
/* 多重文本阴影 */
.text {    
    text-shadow: 1px 1px 2px #000, /* 黑色阴影 */                 0 0                  10px #fff; /* 白色发光效果 */
}

动画

D5 js

基本类型

Undefined、Null、Boolean、Number、String

• Number (数字类型) 3 3.3 -4
• String (字符串) ‘’ “”
• Boolean (布尔) true false

运算符

案例

<!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>
  <script>
  // 算术运算符：
  console.log(2 * 3);          //6
  console.log(2 * '3');        //6
  console.log('2' * '3');      //6
  //*（乘法）时，JS 引擎会强制把两边的操作数都转成数字，然后再相乘。
  // 也就是说：* 只能用于数字之间的运算，所以 JS 会自动尝试把字符串转成数字
  console.log(2 * '3a');       //NaN
  /* '3a' 是一个字符串，包含非数字字符 a,JS 试图用 Number('3a') 转换它
      Number('3a') → NaN（因为 3a 不是有效数字）
      2 * NaN → NaN  */
  // 任何数与 NaN 运算都得 NaN
  //NaN 表示：一个本该是数字，但无法表示为有效数字的值
  // 它是 number 类型的一个“异常值”
  console.log(2 * true);       //2
  //true 是布尔值,JS 用 Number(true) 转换 → 1
  console.log(2 * false);      //0
  console.log(2 * null);       //0
  console.log(2 * undefined);  //NaN
  //undefined 表示“未定义”,Number(undefined) → NaN
  console.log(5 % 2);          //1
  console.log(5 % 5);          //0
  console.log(5 % '2');        //1
  console.log(5 % true);       //0
  console.log(5 % false);      //NaN
  //任何数对 0 取模都是“未定义”的
  console.log(2 % 5);          //2
  console.log(3 % 5);          //3



  // 关系运算符：
  console.log(3 > 2);          //true
  console.log(1 >= '1');       //true    Number('1') → 1
  console.log(0 >= 'false')    //false   Number('false') → NaN
  console.log(0 <= false);     //true    false 是布尔值 Number(false) → 0
  console.log(0 >= null);      //true    Number(null) → 0
  console.log('100' > '2')     //false   两边都是字符串 → 按字典序（字符串比较）
  console.log(2 > NaN);        //false   任何比较中出现 NaN，结果都是 false
  console.log(2 == '2');       //true    == 是宽松相等，会进行类型转换
  console.log(2 === '2');      //false   === 是严格相等，不会进行类型转换
  console.log(2 != '2');       //false   != 是松散不等，会进行类型转换
  console.log(2 !== '2');      //true    !== 是严格不等 2 === '2' 是 false → 所以 2 !== '2' true
  console.log(null == 0);      //false   null == 0：null 不会转换为 0 来比较,null 只在 == undefined 时为 true
  console.log(null == false);  //false   null和false类型不同 Number(null) → 0，但 == 不会自动转成数字比较
  console.log(null == '');     //false   null 和空字符串 '' 类型不同，Number('') → 0，但 null == '' 没有特殊规则
  console.log(null == undefined);      //true
  console.log(null === undefined);     //false   === 严格相等：类型必须相同
  console.log(NaN === NaN);           //false    NaN 表示“不是一个有效数字”它不等于任何值，包括它自己
  
  console.log(11111111111111111111111111111111111111111111111111111111111111);// 分割线
  
  // 逻辑运算符：
  console.log(!0);            //true
  console.log(!false);        //true
  console.log(!'');           //true
  console.log(!null);         //true
  console.log(!undefined);    //true
  console.log(!NaN);          //true
  console.log(!8);            //false
  console.log(!-8);           //false
  console.log(!!8);           //true
  
  // 赋值运算符：
  var i = 5;
  var a = 3;
  a += ++i + ++i - i++ + i++; //a = 17
  var b=a++ + i++ + ++a + a++ + "a++"; //a = 20 
  // 求：i、a、b的值分别是多少？
  console.log(i,a,b);
  // i = 10, a = 20, b = "64a++"
  //加法从左到右执行，当遇到字符串时，会触发字符串拼接
  
  // 特殊运算符：
  console.log(typeof 3);         //number
  console.log(typeof '3');       //string
  console.log(typeof true);      //boolean
  console.log(typeof null);      //object
  console.log(typeof undefined); //undefined
  </script>
</body>
</html>

undefined和null

let a;
console.log(a);           // undefined（声明了但没赋值）

function foo() { }
console.log(foo());       // undefined（函数没有 return）

let obj = {};
console.log(obj.b);       // undefined（属性不存在）

👉 undefined 表示：这里应该有个值，但现在还没有

let person = null;        // 明确表示“现在没有人”

let element = document.getElementById('not-exist');
console.log(element);     // null（DOM 查询不到元素）

// 清空对象引用
let data = { name: '张三' };
data = null;              // 明确释放内存

👉 null 表示：我特意把这个值设为空

document.getElementById('result').textContent = advice;

把变量 advice 的值，显示在网页中 id 为 'result' 的 HTML 元素内部

• let vs var：let 有块级作用域，而 var 有函数作用域
• let vs const：let 声明的变量可以重新赋值，而 const 声明的是常量，不能重新赋值