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

HTMLCSS 学习总结

news 2025/6/6 18:14:24

一、HTML核心概念

三大前端技术作用

HTML基础结构

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

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

三、CSS核心技术

1. 三种引入方式对比

2. 核心选择器

3. 布局三大神器

4. 盒子模型详解

实战案例：注册表单

总结要点

一、HTML核心概念

三大前端技术作用
- HTML：网页结构骨架（标题/段落/表单等）
- CSS：视觉样式美化（颜色/布局/动画）
- JavaScript：动态交互逻辑（表单验证/事件响应）

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>

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

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

必装插件清单：

插件名	作用	使用场景
`Auto Rename Tag`	自动修改配对的HTML标签	编辑标签时自动同步闭合标签
`Live Server`	实时预览页面并热更新	保存代码后自动刷新浏览器
`Prettier`	代码自动格式化	统一团队代码风格
`HTML CSS Support`	CSS类名智能提示	编写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>`	行内容器（同排显示）
特殊字符	` `	-	`空格占位符`	不间断空格
	`<` `>`	-	`<div>` → 显示为`<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/border`	`div { 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>