网硕互联帮助中心目录
一、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 专业配置 安装步骤：
- 路径避免中文/空格（如 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>
总结要点
- 掌握表格跨行跨列（rowspan/colspan）
- 表单元素必须设置 name 属性用于数据提交
- 优先使用 类选择器 实现样式复用
- 浮动布局需清除浮动（父元素加 overflow:hidden）
- VS Code + Live Server 实时预览
- Prettier 自动格式化保持代码整洁
- W3School参考：w3school 在线教程
- 免费练习平台：https://codepen.io/
评论前必须登录！
注册