本人大二，大一学习过一些Html.css基础由于要在两周内通过ai和其他开发工具创造一个功能齐全的前后端数据库交互系统所以今天开始重新复习Html，css和js，学习vue和springboot，这是我第一天速成复习Html，css和js笔记希望可以收获一些建议。

vscode常用快捷键

 HTML超文本标记语言

<h1>—<h6>标题标签

<b>字体加粗<i>斜体<u>下划线<s>删除线

列表

 <a>标签：超链接   target属性：点击超链接后打开的位置

div和span总结：
div 是块级，独占一行；span 是行内，跟文字并排。
 
- div
块级元素，自动换行，用来划分大区域、布局。
- span
行内元素，不换行，用来给一小段文字/内容改样式。
 form 表单

作用：收集用户输入，提交给后端（登录、注册、搜索都用它）

1. 核心属性

-  action ：提交到哪个地址

-  method ：提交方式

-  get ：数据放网址里，适合查询

-  post ：数据隐藏，适合登录、上传

2. 常用表单项（input）

-  text ：普通文本

-  password ：密码

-  radio ：单选

-  checkbox ：多选

-  submit ：提交按钮

-  button ：普通按钮 

3. 必记关键点

- 每个输入项要有 name，后端才能拿到数据

- 一般用  label  关联文字和输入框

- 点击  submit  会自动提交表单

一句话：form 套住各种 input，用来收数据、发数据。

for用来绑ID，点击文字就能选输入框

CSS层叠样式表

引入CSS可以有三种方法

内联样式

内部样式

外部样式

 1. 元素选择器
 
- 用法：直接用 HTML 标签名，如  p 、 div 、 span 
 
- 示例： p { color: red; } 
 
- 场景：统一设置某类标签的基础样式，比如所有段落文字颜色、所有链接样式。
 
2. 类选择器
 
- 用法：以  .  开头，对应元素的  class  属性，如  .box 
 
- 示例： .active { font-weight: bold; } 
 
- 场景：复用样式，给多个不同标签的元素应用相同样式，比如“按钮样式”“高亮文本”。
 
3. ID 选择器
 
- 用法：以  #  开头，对应元素的  id  属性，如  #header 
 
- 示例： #main-title { font-size: 24px; } 
 
- 场景：针对页面中唯一的元素设置样式，如页面头部、唯一的导航栏。
 
4. 通用选择器
 
- 用法：用  *  表示所有元素
 
- 示例： * { margin: 0; padding: 0; } 
 
- 场景：全局重置样式，清除浏览器默认的内外边距，或统一字体。
 
5. 子元素选择器
 
- 用法：用  >  连接，只选择直接子元素，如  div > p 
 
- 示例： .container > .item { border: 1px solid #000; } 
 
- 场景：精确控制直接子元素，不影响更深层的后代元素，避免样式污染。
 
6. 后代选择器（包含选择器）
 
- 用法：用空格连接，选择所有后代元素（子、孙、曾孙…），如  div p 
 
- 示例： .article p { line-height: 1.6; } 
 
- 场景：给某个容器内所有相关元素统一样式，比如文章里的所有段落。
 
7. 并集选择器（兄弟选择器）
 
- 用法：
 
-  + ：选择紧接在后面的第一个兄弟元素，如  h2 + p 
 
-  ~ ：选择后面所有同级兄弟元素，如  h2 ~ p 
 
- 示例： h2 + p { margin-top: 0; } 
 
- 场景：调整相邻元素的间距或样式，比如标题后的第一段段落。
 
8. 伪类选择器
 
- 用法：以  :  开头，选择元素的特定状态，如  :hover 、 :active 、 :first-child 
 
- 示例： a:hover { text-decoration: underline; } 
 
- 场景：处理交互状态，如鼠标悬浮、按钮点击、列表第一项/最后一项样式。

CSS 盒子模型 📦
 
核心概念
 
每个 HTML 元素都可以看作一个矩形盒子，这个盒子由以下四个部分从内到外构成：
 
- 内容 (content)：元素实际显示的内容，如文字、图片。
 
- 内边距 (padding)：内容与边框之间的空白区域。
 
- 边框 (border)：包裹在内边距外的线条。
 
- 外边距 (margin)：盒子与其他元素之间的空白区域。

 一、浮动 float

 

- 属性： left  /  right 

 

- 作用：让块元素并排、文字环绕

 

- 特点：

 

- 脱离标准流，但文字会环绕它

 

- 会造成父元素高度塌陷

 

- 必须：浮动要清除浮动

 

- 场景：导航、多列布局、图文环绕

二、定位 position（4 个）
 
1. 静态定位 static（默认）
 
- 标准流，从上到下，不能用  top/left 
 
2. 相对定位 relative
 
- 相对于自己原来位置移动
 
- 不脱标，原位置还占着
 
- 常用：给子元素当爹（绝对定位参照物）
 
3. 绝对定位 absolute
 
- 相对于最近有定位的父级
 
- 完全脱标，不占位置
 
- 场景：悬浮按钮、角标、弹窗
 
4. 固定定位 fixed
 
- 相对于浏览器窗口
 
- 滚动页面不动
 
- 场景：回到顶部、侧边栏、固定导航