HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页的两大核心技术。HTML用于定义网页的结构和内容，而CSS则负责样式和布局，让网页呈现出美观的视觉效果。
### HTML基础
HTML由一系列元素构成，每个元素都有特定的标签。例如，`<html>`标签定义整个文档，`<head>`包含元数据，如标题，而`<body>`则容纳可见的内容。常用的基本元素包括：
- `<h1>`到`<h6>`定义标题等级。
- `<p>`用于段落。
- `<a>`创建链接。
- `<img>`插入图片，需指定`src`属性。
- `<ul>`和`<ol>`创建无序和有序列表，`<li>`定义列表项。
- `<div>`是通用容器，用于组合其他元素。
- `<span>`用于行内元素的分组和样式应用。
### CSS基础
CSS允许开发者分离内容和表现，提高网页的可维护性和适应性。基本语法包括：
- 选择器：如`element`（元素选择器），`.class`（类选择器），`#id`（ID选择器）。
- 属性：如`color`，`font-size`，`background-color`等。
- 值：如`red`，`14px`，`url(image.jpg)`等。
CSS应用方式有三种：
1. **内联样式**：在HTML元素的`style`属性中写入，如`<p style="color:red;">文本</p>`。
2. **内部样式表**：在`<head>`中的`<style>`标签内定义，适用于整个页面。
3. **外部样式表**：使用`<link>`标签引用外部CSS文件，适用于多个页面。
### CSS布局
- `display`属性：控制元素的显示方式，如`block`，`inline`，`flex`或`grid`。
- `position`属性：定义元素定位，如`static`（默认），`relative`，`absolute`，`fixed`。
- `float`属性：使元素浮动，常用于创建多列布局。
- `box-sizing`属性：决定元素边框和内填充如何影响总尺寸。
### CSS选择器进阶
- 类似`:hover`，`:active`，`:focus`的选择器用于交互状态。
- `nth-child()`，`:first-child`，`:last-child`选择特定子元素。
- `.class1.class2`选择同时具有两种类名的元素。
- `[attribute=value]`选择具有特定属性值的元素。
### CSS响应式设计
- 使用`@media`查询根据设备特性应用不同的样式，实现响应式布局。
- `flexbox`和`grid`布局系统提供更灵活的响应式设计。
### CSS预处理器
预处理器如Sass（SCSS）和Less扩展了CSS，引入变量、嵌套规则、混合和函数，使代码更模块化和易于维护。
### 总结
HTML和CSS的学习是成为一名前端开发者的基石。理解基本元素和样式规则，掌握布局技巧，以及了解响应式设计和预处理器的使用，将有助于创建出专业且用户友好的网页。通过不断实践和探索，可以逐步深化对这两门技术的理解，为更高级的前端开发打下坚实的基础。
