前端笔记：HTML与CSS基础及进阶

"HTML, CSS, HTML5, CSS3的学习笔记，由pink老师整理，便于在不同设备间查看和学习前端知识。" 本文将详细介绍HTML、CSS以及它们的最新版本HTML5和CSS3的相关知识点，主要关注HTML中的表单元素及其属性。 ### HTML基础知识 HTML（HyperText Markup Language）是用于创建网页的标准标记语言。在HTML中，表单是收集用户数据的重要工具，通常用于数据提交至服务器。以下是一些关键概念： #### 表单基础 - **表单域（`<form>`）**: 包裹所有表单元素，定义了数据提交的目标（通过`action`属性）。 - **表单元素（`<input>`、`<select>`、`<textarea>`等）**: 用户在其中输入或选择数据的组件。 #### 输入类型（`<input type="">`） - `text`: 文本输入框，如用户名。 - `password`: 密码输入框，显示为星号或圆点。 - `radio`: 单选按钮，同一组内只能选一个。 - `checkbox`: 复选框，可多选。 - `submit`: 提交按钮，触发数据发送。 - `reset`: 重置按钮，清空表单内容。 - `file`: 用于上传文件。 #### 属性 - `minlength` 和 `maxlength`: 控制输入字段的最小和最大长度。 - `name`: 识别表单元素的唯一标识，用于后台处理。 - `value`: 设置按钮、选项或输入字段的默认值。 - `for`: 与`<label>`配合，使点击文字也能选中表单元素。 - `selected` 和 `checked`: 用于设置默认选中的选项或复选框。 ### CSS基础知识 CSS（Cascading Style Sheets）用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。CSS3引入了许多新的特性和改进： #### CSS3新特性 - **选择器增强**: 如`nth-child()`、`nth-of-type()`，更精确地定位元素。 - **边框与背景**: - `border-radius`: 创建圆角边框。 - `box-shadow`: 添加阴影效果。 - **过渡与动画**: `transition`和`@keyframes`允许元素平滑变换。 - **渐变**: 线性渐变(`linear-gradient`)和径向渐变(`radial-gradient`)。 - **多列布局**: `column-count`、`column-gap`等属性简化多列布局。 - **Flexbox**: 弹性盒模型，提供灵活的容器内元素布局。 - **Grid布局**: 网格布局系统，提供二维布局控制。 ### HTML5新特性 HTML5是HTML的最新标准，引入了大量新功能和改进，如： - **离线存储**: `Application Cache`和`Service Worker`支持离线浏览。 - **多媒体支持**: `<audio>`和`<video>`元素，以及新的`srcset`和`sizes`属性优化图片加载。 - **画布（Canvas）**: 通过JavaScript进行2D图形绘制。 - **SVG矢量图**: 支持清晰、可缩放的图形。 - **Geolocation**: 获取用户的地理位置信息。 - **Web Storage**: `localStorage`和`sessionStorage`提供客户端数据存储。 - **表单控件增强**: 新增`date`、`time`、`email`等输入类型。 ### CSS3新特性 CSS3不仅扩展了CSS2的功能，还引入了许多视觉和交互方面的增强，如： - **伪类和伪元素**: `:before`, `:after`, `:hover`, `:active`, `:focus`等。 - **Flexbox布局**: 提供灵活的容器内元素布局。 - **Grid布局**: 网格布局系统，提供二维布局控制。 - **响应式设计**: `media queries`适应不同设备和屏幕尺寸。 通过掌握这些HTML、CSS、HTML5和CSS3的基础知识，开发者可以构建出功能丰富、响应式且美观的网页应用。持续学习和实践，将是提升前端开发技能的关键。