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

day25——HTML CSS 前端开发

backend 2025/7/31 9:24:22

文章目录

- 一、HTML基础：网页结构之本
- - 1. 元素解剖学
  - 2. 文档结构框架
- 二、HTML核心元素详解
- - 1. 文本内容元素
  - 2. 多媒体元素
  - 3. 表格元素
- 三、表单：用户交互核心
- - 1. 表单基础结构
  - 2. 常用表单项类型
  - 3. 表单数据格式对比
- 四、CSS：样式与布局艺术
- - 1. 样式引入方式
  - 2. 核心选择器系统
  - 3. 盒子模型详解
  - 4. 布局技术演进
  - - 传统布局
    - 现代布局
  - 5. 响应式设计核心
- 五、最佳实践指南
- - 1. 语义化HTML原则
  - 2. CSS架构建议
  - 3. 性能优化策略
  - 4. 调试与验证工具
- 六、学习资源推荐

本文全面梳理HTML与CSS核心知识点，涵盖语法规则、常用元素、布局技术及最佳实践，帮助开发者构建语义化、响应式的现代网页

一、HTML基础：网页结构之本

1. 元素解剖学

<!-- 完整元素结构 -->
<元素名 属性名="属性值">内容</元素名><!-- 空元素简写 -->
<img src="logo.png" alt="Logo">

元素特征：

标签对包围内容（开始标签+结束标签）
属性提供附加信息（名称/值对）
空元素可自闭合（如<img>、<br>）
嵌套规则：正确嵌套（<p><b>文本</b></p>），避免交叉（<p><b>文本</p></b>）

2. 文档结构框架

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title><link rel="stylesheet" href="styles.css">
</head>
<body><!-- 可见内容区域 --><header>页眉</header><main>主体内容</main><footer>页脚</footer>
</body>
</html>

关键区域：

<!DOCTYPE html>：声明HTML5文档
<head>：元数据容器（不可见内容）
<body>：可视化内容容器
语义化标签：<header>、<nav>、<main>、<article>、<section>、<footer>

二、HTML核心元素详解

1. 文本内容元素

<!-- 标题分级 -->
<h1>主标题</h1> 
<h2>二级标题</h2>
...
<h6>六级标题</h6><!-- 段落与格式 -->
<p>普通段落 <em>强调文本</em></p>
<p><strong>重要内容</strong> <mark>标记文本</mark></p><!-- 列表系统 -->
<ul><li>无序列表项</li>
</ul><ol><li>有序列表项</li>
</ol><dl><dt>定义术语</dt><dd>术语描述</dd>
</dl>

2. 多媒体元素

<!-- 图像元素 -->
<img src="image.jpg" alt="替代文本" width="600" height="400"><!-- 视频播放器 -->
<video controls width="800"><source src="movie.mp4" type="video/mp4">您的浏览器不支持视频标签
</video><!-- 音频播放器 -->
<audio controls><source src="audio.mp3" type="audio/mpeg">
</audio>

路径类型：

绝对路径：https://example.com/images/logo.png
相对路径：
- images/photo.jpg（同级目录）
- ../assets/icon.png（上级目录）

3. 表格元素

在这里插入图片描述

<table border="1"><caption>员工信息表</caption><thead><tr><th>姓名</th><th>职位</th></tr></thead><tbody><tr><td>张三</td><td>前端工程师</td></tr></tbody><tfoot><tr><td colspan="2">共1人</td></tr></tfoot>
</table>

表格结构：

<table>：表格容器
<caption>：表格标题
<thead>/<tbody>/<tfoot>：语义化分区
<tr>：表格行
<th>：表头单元格
<td>：标准单元格

三、表单：用户交互核心

在这里插入图片描述

1. 表单基础结构

<form action="/submit" method="POST" enctype="application/x-www-form-urlencoded"><!-- 表单项 --><input type="submit" value="提交">
</form>

关键属性：

action：数据提交目标URL
method：HTTP方法（GET/POST）
enctype：编码类型
- application/x-www-form-urlencoded（默认）
- multipart/form-data（文件上传）

2. 常用表单项类型

<!-- 文本输入 -->
<input type="text" name="username" placeholder="用户名"><!-- 选择控件 -->
<select name="city"><option value="bj">北京</option><option value="sh">上海</option>
</select><!-- 单选/复选框 -->
<input type="radio" name="gender" value="male"> 男
<input type="checkbox" name="hobby" value="reading"> 阅读<!-- 按钮组 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button><!-- 文本域 -->
<textarea name="comment" rows="4" cols="50"></textarea>

3. 表单数据格式对比

编码类型	格式示例	适用场景
application/x-www-form-urlencoded	`name=John&age=30`	文本数据提交
multipart/form-data	多部分边界分隔数据	文件上传
application/json	`{"name":"John","age":30}`	AJAX API请求

四、CSS：样式与布局艺术

1. 样式引入方式

<!-- 内联样式（不推荐） -->
<p style="color: red;">文本</p><!-- 内部样式表 -->
<style>p {color: blue;}
</style><!-- 外部样式表（最佳实践） -->
<link rel="stylesheet" href="styles.css">

2. 核心选择器系统

/* 元素选择器 */
p {font-size: 16px;
}/* 类选择器 */
.highlight {background-color: yellow;
}/* ID选择器 */
#main-header {border-bottom: 1px solid #ccc;
}/* 属性选择器 */
input[type="text"] {border: 1px solid #999;
}/* 伪类选择器 */
a:hover {color: red;
}

在这里插入图片描述

选择器优先级：

!important
内联样式（1000）
ID选择器（100）
类/属性/伪类选择器（10）
元素/伪元素选择器（1）

3. 盒子模型详解

在这里插入图片描述

.box {width: 300px;         /* 内容宽度 */height: 200px;        /* 内容高度 */padding: 20px;        /* 内边距 */border: 5px solid #000; /* 边框 */margin: 15px;         /* 外边距 */box-sizing: border-box; /* 盒模型计算方式 */
}

4. 布局技术演进

传统布局

/* 浮动布局 */
.float-left {float: left;width: 50%;
}.clearfix::after {content: '';display: block;clear: both;
}/* 定位布局 */
.position-relative {position: relative;top: 10px;left: 20px;
}.position-absolute {position: absolute;top: 0;right: 0;
}

现代布局

/* Flexbox布局 */
.container {display: flex;justify-content: space-between;align-items: center;
}.item {flex: 1;
}/* Grid网格布局 */
.grid-container {display: grid;grid-template-columns: 1fr 2fr 1fr;gap: 20px;
}

5. 响应式设计核心

/* 媒体查询 */
@media (max-width: 768px) {.sidebar {display: none;}.content {width: 100%;}
}/* 流动布局 */
.container {max-width: 1200px;margin: 0 auto;
}/* 响应式图片 */
img {max-width: 100%;height: auto;
}

五、最佳实践指南

1. 语义化HTML原则

使用恰当的内容标签（<article>、<nav>等）
避免<div>滥用
为图像添加有意义的alt属性
使用<label>关联表单元素

2. CSS架构建议

采用BEM命名规范（Block__Element–Modifier）
创建模块化CSS组件
使用CSS变量统一设计系统
遵循层叠顺序管理

3. 性能优化策略

/* 使用高效选择器 */
/* 避免 */
div ul li a {...}/* 推荐 */
.nav-link {...}/* 精简代码 */
/* 避免 */
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;/* 推荐 */
padding: 10px;/* 使用CSS精灵图 */
.icon-home {background: url('sprite.png') -10px -20px;width: 20px;height: 20px;
}