HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页和网页样式的基石。在这份“css\html语法详解”中，我们将深入探讨这两个关键领域的基本概念、语法以及常见用法。
HTML是一种标记语言，用于描述网页内容的结构和意义。它的主要任务是组织网页上的文本、图像、链接等元素。以下是一些核心的HTML标签和属性：
1. **文档声明**：`<!DOCTYPE html>` 指定文档类型为HTML5。
2. **HTML元素**：`<html>` 是整个文档的根元素。
3. **头部信息**：`<head>` 包含元信息，如字符集设置`<meta charset="UTF-8">`。
4. **主体内容**：`<body>` 包含可见的网页内容。
5. **标题**：`<h1>`到`<h6>` 表示不同级别的标题。
6. **段落**：`<p>` 用于创建段落。
7. **链接**：`<a href="URL">` 创建超链接。
8. **图像**：`<img src="image_path" alt="description">` 插入图像。
9. **列表**：`<ul>` 和 `<ol>` 用于无序和有序列表，`<li>` 创建列表项。
10. **容器元素**：`<div>` 用于分组其他元素，常与CSS配合使用。
11. **表单元素**：`<form>`, `<input>`, `<textarea>`, `<select>` 和 `<button>` 用于创建用户交互的表单。
CSS则负责网页的样式和布局。以下是一些核心的CSS概念：
1. **选择器**：如 `element`, `.class`, `#id` 用于选取HTML元素。
2. **属性**：如 `color`, `font-size`, `background-color` 等定义元素的样式。
3. **值**：如 `red`, `14px`, `url(image.jpg)` 分别对应颜色、尺寸和背景图片。
4. **盒模型**：包括 `margin`, `border`, `padding` 和 `content`，影响元素的大小和位置。
5. **定位**：`position` 属性（如 `static`, `relative`, `absolute`, `fixed`）控制元素的定位方式。
6. **响应式设计**：使用 `media queries` 根据设备屏幕尺寸调整样式。
7. **Flexbox** 和 **Grid** 布局：现代CSS布局解决方案，用于创建复杂的弹性或网格布局。
8. **选择器层次**：后代选择器（`parent > child`）、子选择器（`parent child`）、通用兄弟选择器（`~`）和相邻兄弟选择器（`+`）等增强选择器的精确性。
9. **CSS预处理器**：如Sass、Less和Stylus，提供变量、嵌套规则、混合等特性，提高CSS代码的可维护性。
10. **CSS单位**：包括绝对单位（如 `px`）和相对单位（如 `%`, `em`, `rem`）。
在前端笔记中，你可能会找到关于这些概念的更深入讲解，包括实例和最佳实践，帮助你更好地理解和应用HTML和CSS。学习并熟练掌握这两种语言，能让你构建出美观且功能完善的网页。通过持续实践和学习，你将能够创造出更加复杂和动态的用户体验。
