当前位置： 首页 > article >正文

HTMLCSS 学习总结

article 2025/6/10 2:08:02

目录

​​​一、HTML核心概念​​

​​三大前端技术作用​​

​​HTML基础结构​​

开发工具：VS Code 专业配置​​​​安装步骤​​：

​​二、HTML标签大全（含表格）​​

​​三、CSS核心技术​​

1. 三种引入方式对比

2. 核心选择器

3. 布局三大神器

4. 盒子模型详解

​​实战案例：注册表单​​

​​总结要点​​

​​​一、HTML核心概念​​

  1. ​​三大前端技术作用​​

    • ​​HTML​​：网页结构骨架（标题/段落/表单等）
    • ​​CSS​​：视觉样式美化（颜色/布局/动画）
    • ​​JavaScript​​：动态交互逻辑（表单验证/事件响应）

  2. ​​HTML基础结构​​

    <!DOCTYPE html>  <!-- 必须首行声明 -->
<html lang="zh-CN"> <!-- 根标签，lang定义语言 -->
<head><meta charset="UTF-8"> <!-- 字符编码 --><title>网页标题</title> <!-- 浏览器标签页显示 --><link rel="stylesheet" href="style.css"> <!-- 引入CSS -->
</head>
<body><!-- 可见内容区域 --><h1>欢迎学习HTML</h1><p>这是我的第一个网页</p>
</body>
</html>

  3. 开发工具：VS Code 专业配置​​
    ​​安装步骤​​：

    1. 访问官网下载：Visual Studio Code - Code Editing. Redefined
    2. 安装时注意：
      • 路径避免中文/空格（如 D:\DevTools\VSCode）
      • 勾选"添加到PATH"（命令行快速启动）

    ​​必装插件清单​​：

    ​​插件名​​​​作用​​​​使用场景​​
    Auto Rename Tag自动修改配对的HTML标签编辑标签时自动同步闭合标签
    Live Server实时预览页面并热更新保存代码后自动刷新浏览器
    Prettier代码自动格式化统一团队代码风格
    HTML CSS SupportCSS类名智能提示编写class时自动提示样式
    vscode-icons文件图标主题直观区分文件类型
    IntelliJ IDEA Keybindings复用IDEA快捷键提升Java开发者效率
    Chinese Language Pack中文界面英语基础薄弱开发者

    ​​优化设置​​（设置 > 搜索）：

    • 字体大小：Editor: Font Size → 16
    • 自动保存：Auto Save → afterDelay
    • 关闭折叠：Explorer: Compact Folders → 取消勾选
    • 缩进调整：Tree: Indent → 20px

​​二、HTML标签大全（含表格）​​

​​分类​​​​标签​​​​核心属性​​​​示例代码​​​​说明​​
​​文本结构​​<h1>-<h6>-<h2>二级标题</h2>标题标签，h1最重要
<p>-<p>这是一个段落</p>段落分隔
<br>-第一行<br>第二行强制换行（单标签）
​​列表​​<ul>-<ul><li>苹果</li></ul>无序列表
<ol>start="3"<ol start="3"><li>第三步</li></ol>有序列表（从3开始）
​​多媒体​​``src, alt, width``替代文本必填
<audio>controls, loop<audio src="bgm.mp3" controls loop>显示控制面板+循环播放
<video>width, autoplay<video src="intro.mp4" width="500" autoplay>自动播放（需静音）
​​表格​​<table>border="1"<table border="1">...</table>显示边框
<tr>-<tr><td>A1</td><td>A2</td></tr>表格行
<td>rowspan, colspan<td colspan="2">跨两列</td>​​重点​​：合并单元格
<th>-<th>姓名</th>表头单元格（加粗居中）
​​表单​​<form>action="/submit", method="POST"<form action="/login" method="POST">数据提交容器
<input>type, name, placeholder<input type="text" name="user" placeholder="用户名">​​重点​​：文本输入
type="password"<input type="password" name="pwd">密码掩码输入
type="radio", checked<input type="radio" name="gender" checked>单选按钮（同name分组）
type="checkbox"<input type="checkbox" name="hobby">多选按钮
<select>-<select name="city"><option>北京</option></select>下拉选择框
<textarea>rows, cols<textarea rows="5" cols="30">留言</textarea>多行文本输入
<button>type="submit"<button type="submit">提交</button>表单提交按钮
​​布局​​<div>id, class<div id="header">顶部区域</div>块级容器（独占一行）
<span>style<span style="color:red">红色文本</span>行内容器（同排显示）
​​特殊字符​​&nbsp;-空格占位符不间断空格
&lt; &gt;-&lt;div&gt; → 显示为<div>避免被解析为标签

​​表格使用技巧​​：

  • 复杂表头：用 <th colspan="3">季度销量</th> 合并多列表头
  • 数据分组：<thead>, <tbody>, <tfoot> 划分表格区域

​​三、CSS核心技术​​

1. 三种引入方式对比
​​方式​​​​代码示例​​​​优先级​​​​适用场景​​
行内式<p style="color:red;">文本</p>最高快速调试/少量样式
内嵌式<style> body { background: #f5f5f5; } </style>中单页面专用样式
外部式<link rel="stylesheet" href="global.css">最低​​推荐​​：多页面复用
2. 核心选择器
​​类型​​​​示例​​​​权重​​​​说明​​
元素选择器p { }1选中所有<p>标签
类选择器.btn { }10​​最常用​​：复用样式
ID选择器#header { }100唯一元素
属性选择器input[type="text"]10精准定位特定元素
3. 布局三大神器
​​技术​​​​核心属性​​​​代码示例​​​​应用场景​​
​​浮动布局​​float: left/right;img { float: left; }图文混排/导航栏
​​定位布局​​position: relative/absolute/fixed;.popup { position: fixed; top: 0; }弹窗/固定导航
​​盒子模型​​margin/padding/borderdiv { padding: 20px; border: 1px solid #ddd; }控制元素间距
4. 盒子模型详解
.box {width: 300px;         /* 内容宽度 */height: 200px;        /* 内容高度 */padding: 20px;        /* 内边距（内容与边框间距） */border: 2px solid red;/* 边框（粗细+样式+颜色） */margin: 30px auto;    /* 外边距（元素间距离，auto水平居中） */
}

​​布局公式​​：
元素实际宽度 = width + 左右padding + 左右border
元素占据空间 = 实际宽度 + 左右margin

​​实战案例：注册表单​​

<!DOCTYPE html>
<html>
<head><title>用户注册</title><style>.form-container {width: 400px;margin: 50px auto;padding: 20px;border: 1px solid #ccc;border-radius: 5px;}.input-group {margin-bottom: 15px;}label {display: inline-block;width: 100px;}input[type="text"], input[type="password"] {width: 250px;padding: 8px;}.submit-btn {background: #4CAF50;color: white;padding: 10px 20px;border: none;border-radius: 4px;cursor: pointer;}</style>
</head>
<body><div class="form-container"><h2>用户注册</h2><form><div class="input-group"><label>用户名：</label><input type="text" name="username" required></div><div class="input-group"><label>密码：</label><input type="password" name="password" required></div><button type="submit" class="submit-btn">注册</button></form></div>
</body>
</html>

​​总结要点​​

  1. ​​HTML核心​​：
    • 掌握表格跨行跨列（rowspan/colspan）
    • 表单元素必须设置 name 属性用于数据提交
  2. ​​CSS精髓​​：
    • 优先使用 ​​类选择器​​ 实现样式复用
    • ​​浮动布局​​需清除浮动（父元素加 overflow:hidden）
  3. ​​开发效率​​：
    • VS Code + Live Server 实时预览
    • Prettier 自动格式化保持代码整洁
  4. ​​学习资源​​：
    • W3School参考：w3school 在线教程
    • 免费练习平台：https://codepen.io/

相关文章：

HTMLCSS 学习总结

目录 ​​​一、HTML核心概念​​ ​​三大前端技术作用​​ ​​HTML基础结构​​ 开发工具&#xff1a;VS Code 专业配置​​​​安装步骤​​&#xff1a; ​​二、HTML标签大全&#xff08;含表格&#xff09;​​ ​​三、CSS核心技术​​ 1. 三种引入方式对比 2.…...

编程日记 2025/6/10 2:08:02

【设计模式】1.简单工厂、工厂、抽象工厂模式

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 以下是 简单工厂模式、工厂方法模式 和 抽象工厂模式 的 Python 实现与对比&#xff0c;结合代码示例和实际应用场景说明&#xff1a; 1. 简单工厂模式&a…...

编程日记 2025/6/10 2:06:59

成工fpga（知识星球号）——精品来袭

&#xff08;如需要相关的工程文件请关注知识星球&#xff1a;成工fpga&#xff0c;https://t.zsxq.com/DMeqH&#xff0c;关注即送200GB学习资料&#xff0c;链接已置顶&#xff01;&#xff09; 《孩子都能学会的FPGA》系列是成工完成的第一个系列&#xff0c;也有一年多的时…...

编程日记 2025/6/10 2:05:54

spring中的@KafkaListener 注解详解

KafkaListener 是 Spring Kafka 提供的一个核心注解&#xff0c;用于标记一个方法作为 Kafka 消息的消费者。下面是对该注解的详细解析&#xff1a; 基本用法 KafkaListener(topics "myTopic", groupId "myGroup") public void listen(String message)…...

编程日记 2025/6/10 2:04:50

C#调用Rust动态链接库DLL的案例

C#调用Rust动态链接库DLL的案例 项目概述 这是一个演示C#调用Rust动态链接库DLL的项目&#xff0c;包含&#xff1a; C#主程序 (Program.cs)Rust动态链接库 (rust_to_csharp目录) 使用C#创建一个net9的控制台项目&#xff0c;不使用顶级语句 dotnet new console --framewo…...

编程日记 2025/6/10 2:03:28

win11部署suna

参考链接 项目链接 沙盒链接 数据库链接 本文介绍 本文只为项目的辅助&#xff0c;手把手太麻烦 执行步骤 1.下载代码 git clone https://github.com/kortix-ai/suna.git cd suna2.配置环境&#xff08;在Anaconda Prompt上执行&#xff09; python setup.py3.运行代码 …...

编程日记 2025/6/10 2:02:24

Kafka深度解析与原理剖析

文章目录 一、Kafka核心架构原理1. **分布式协调与选举**2. **ISR、OSR与HW机制**3. **高性能存储设计**4. **刷盘机制 (Flush)**5. **消息压缩算法**二、高可用与消息可靠性保障1. **数据高可用策略**2. **消息丢失场景与规避**3. **顺序消费保证**三、Kafka高频面试题精析1. …...

编程日记 2025/6/10 2:01:20

NoSQL——Redis配置与优化

目录 关系型&非关系型数据库 一、核心原理对比‌ ‌二、核心特性对比‌ ‌三、关键区别剖析‌ ‌四、典型产品示例‌ ‌总结‌ Redis Redis核心原理 核心特性 技术意义 配置文件解析 1. 基础配置 2. 持久化配置 3. 内存管理 4. 高可用配置 5. 性能调优 6.…...

编程日记 2025/6/10 2:00:09

CKA考试知识点分享(2)---ingress

CKA 版本&#xff1a;1.32 第二题是涉及ingress相关。本文不是题目&#xff0c;只是为了学习相关知识点做的实验。 1. 环境准备 需要准备一套K8S集群。 1.1 安装ingress-nginx 下载deploy文件&#xff1a; wget -O controller-v1.12.2.yaml https://raw.githubusercontent…...

编程日记 2025/6/10 1:59:02

动态生成element-plus的scss变量；SCSS中实现动态颜色变体生成

文章目录 一、动态css变量1.生成内容2.动态生成css变量2.1新增_color-utils.scss&#xff08;不推荐&#xff09;2.2新增_color-utils.scss&#xff08;推荐&#xff09;2.3theme.scss引入使用 一、动态css变量 1.生成内容 在我们修改element-plus主题色时候&#xff0c;会自…...

编程日记 2025/6/10 1:57:56

Clickhouse统计指定表中各字段的空值、空字符串或零值比例

下面是一段Clickhouse SQL代码&#xff0c;用于统计指定数据库中多张表的字段空值情况。代码通过动态生成查询语句实现自动化统计&#xff0c;处理逻辑如下&#xff1a; 从系统表获取指定数据库&#xff08;替换your_database&#xff09;中所有表的字段元数据根据字段类型动态…...

编程日记 2025/6/10 1:56:44

Linux 内核内存管理子系统全面解析与体系构建

一、前言: 为什么内存管理是核心知识 内存管理是 Linux 内核最核心也最复杂的子系统之一&#xff0c;其作用包括&#xff1a; 为软件提供独立的虚拟内存空间&#xff0c;实现安全隔离分配/回收物理内存资源&#xff0c;维持系统稳定支持不同类型的内存分配器&#xff0c;最优…...

编程日记 2025/6/10 1:55:39

Tableau for mac 驱动

Tableau 驱动程序安装指南 对于希望在 Mac OS 上使用 Tableau 进行数据分析的用户来说&#xff0c;确保正确安装相应的驱动程序至关重要。Tableau 支持多种数据库连接方式&#xff0c;并提供官方文档指导如何设置这些连接。 安装适用于 Mac 的 JDBC 或 ODBC 驱动程序 为了使…...

编程日记 2025/6/10 1:54:21

fast-reid部署

配置设置&#xff1a; 官方库链接&#xff1a; https://github.com/JDAI-CV/fast-reid# git clone https://github.com/JDAI-CV/fast-reid.git 安装依赖&#xff1a; pip install -r docs/requirements.txt 编译&#xff1a;切换到fastreid/evaluation/rank_cylib目录下&a…...

编程日记 2025/6/10 1:53:13

Steam爬取相关游戏评测

## 因为是第一次爬取Steam。所以作为一次记录发出&#xff1b;有所错误欢迎指出。 无时间指定爬取 import requests import time import csv import osappid "553850" # 这里你也可以改成 #appid int(input()) max_reviews 10000 # 想爬多少条 # max_reviews…...

编程日记 2025/6/10 1:52:03

《开篇：课程目录》

大家好&#xff01;我是一名.NET技术开发者&#xff0c;长期以来积累了比较多的项目实战经验&#xff0c;现在把它分享给大家&#xff0c;希望能够帮助到大家&#xff0c;同时为.NET社区提供一份力量&#xff0c;让更多的开发者参与进来。 要讲解的课程如下&#xff1a; 《介绍…...

编程日记 2025/6/10 1:50:53

大陆4D毫米波雷达ARS548调试

本文介绍了大陆ARS548毫米波雷达的调试与测试流程&#xff0c;主要包括以下内容&#xff1a; 设备参数&#xff1a;最大检测距离301m&#xff08;可调93-1514m&#xff09;&#xff0c;支持gPTP时间同步。 接线调试&#xff1a; Windows需使用USB-RJ45转换器 Linux可直接连接网…...

编程日记 2025/6/10 1:49:37

Qt Quick模块功能及架构

Qt 6.0 中的 Qt Quick 模块是构建现代、动态用户界面的核心框架&#xff0c;基于声明式编程&#xff08;QML&#xff09;和 JavaScript&#xff0c;专注于高性能、流畅的动画和跨平台 UI 开发。、 一、主要功能改进 1. Qt Quick 核心架构 QML 引擎升级&#xff1a;Qt 6.0 使用…...

编程日记 2025/6/10 1:48:32

C++信息学竞赛中常用函数的一般用法

在C 信息学竞赛中&#xff0c;有许多常用函数能大幅提升编程效率。下面为你介绍一些常见函数及其一般用法&#xff1a; 一、比较函数 1、max()//求出a&#xff0c;b的较大值 int a10,b5,c;cmax(a,b);//得出的结果就是c等于10. 2、min()//求出a&#xff0c;b的较小值 int a1…...

编程日记 2025/6/10 1:47:21

大语言模型解析

1. Input Embedding embedding&#xff1a;将自然语言翻译成index 每个index对应一个embedding&#xff0c;embedding需要训练&#xff0c;embedding是一个数组...

编程日记 2025/6/10 1:46:09

全面解析网络端口：概念、分类与安全应用

在计算机网络的世界里&#xff0c;数据的传输与交互如同一场繁忙的物流运输&#xff0c;而网络端口就是其中不可或缺的 “货运码头”。无论是日常浏览网页、收发邮件&#xff0c;还是运行各类网络服务&#xff0c;都离不开网络端口的参与。本文将深入介绍网络端口的相关知识&am…...

编程日记 2025/6/10 1:44:35

Python网页自动化测试，DrissonPage库入门说明文档

&#x1f6f0;️ 基本逻辑​ 操作浏览器的基本逻辑如下&#xff1a; 创建浏览器对象&#xff0c;用于启动或接管浏览器获取一个 Tab 对象使用 Tab 对象访问网址使用 Tab 对象获取标签页内需要的元素对象使用元素对象进行交互 除此以外&#xff0c;还能执行更为复杂的操作&am…...

编程日记 2025/6/10 1:40:11

C++.OpenGL （9/64）摄像机（Camera）

颜色（Color） 颜色理论在OpenGL中的应用 #mermaid-svg-dKNDfS4EKDUmG4Ts {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-dKNDfS4EKDUmG4Ts .error-icon{fill:#552222;}#mermaid-svg-dKNDfS4EKDUmG4Ts .error-text…...

编程日记 2025/6/10 1:39:00

民锋视角下的资金流效率与账户行为建模

民锋视角下的资金流效率与账户行为建模 在当前复杂多变的金融环境中&#xff0c;资金流效率已成为衡量一家金融服务机构专业能力的重要指标。民锋在账户管理与资金调配的实战经验中&#xff0c;逐步建立起一套以资金流路径为核心的行为建模方法&#xff0c;用以评估客户行为、交…...

编程日记 2025/6/10 1:36:04

python打卡第48天

知识点回顾&#xff1a; 随机张量的生成&#xff1a;torch.randn函数卷积和池化的计算公式&#xff08;可以不掌握&#xff0c;会自动计算的&#xff09;pytorch的广播机制&#xff1a;加法和乘法的广播机制 ps&#xff1a;numpy运算也有类似的广播机制&#xff0c;基本一致 **…...

编程日记 2025/6/10 1:34:59

matlab实现DBR激光器计算

DBR激光器计算程序。非常值得参考的程序。DBR激光器程序 DBR计算/1.txt , 2056 DBR计算/4.asv , 22 DBR计算/4.txt , 32 DBR计算/GetDeviceEfficiency.asv , 2012 DBR计算/GetDeviceEfficiency.m , 2014 DBR计算/GetOneLayerArray.asv , 837 DBR计算/GetOneLayerArray.m , 836…...

编程日记 2025/6/10 1:33:49

Java在word中指定位置插入图片。

Java使用&#xff08;Poi-tl&#xff09; 在word&#xff08;docx&#xff09;中指定位置插入图片 Poi-tl 简介Maven 依赖配置Poi-tl 实现原理与步骤1. 模板标签规范2.完整实现代码3.效果展示 Poi-tl 简介 Poi-tl 是基于 Apache POI 的 Java 开源文档处理库&#xff0c;专注于…...

编程日记 2025/6/10 1:32:32

uni-app学习笔记三十--request网络请求传参

request用于发起网络请求。 OBJECT 参数说明 参数名类型必填默认值说明平台差异说明urlString是开发者服务器接口地址dataObject/String/ArrayBuffer否请求的参数App 3.3.7 以下不支持 ArrayBuffer 类型headerObject否设置请求的 header&#xff0c;header 中不能设置 Refere…...

编程日记 2025/6/10 1:31:26

可视化图解算法48：有效括号序列

牛客网 面试笔试 TOP101 | LeetCode 20. 有效的括号 1. 题目 描述 给出一个仅包含字符(,),{,},[和],的字符串&#xff0c;判断给出的字符串是否是合法的括号序列 括号必须以正确的顺序关闭&#xff0c;"()"和"()[]{}"都是合法的括号序列&…...

编程日记 2025/6/10 1:28:40

Continue 开源 AI 编程助手框架深度分析

Continue 开源 AI 编程助手框架深度分析 一、项目简介 Continue 是一个模块化、可配置、跨平台的开源 AI 编程助手框架&#xff0c;目标是让开发者能在本地或云端环境中&#xff0c;快速集成和使用自定义的 LLM 编程辅助工具。它通过支持 VS Code 与 JetBrains 等主流 IDE 插件…...

编程日记 2025/6/10 1:27:27