4月21日 web学习笔记

一、响应式设计与移动端优化
响应式设计原则
视口设置：使用 。
弹性布局：使用百分比、flexbox 和 grid 实现弹性布局。
媒体查询：根据设备屏幕大小调整样式。
示例：
css

/* 基础样式 */
.container {
width: 100%;
padding: 0 15px;
}

/* 平板设备 */
@media (min-width: 768px) {
.container {
max-width: 750px;
margin: 0 auto;
}
}

/* 桌面设备 */
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
移动端优化
触摸事件：使用 touchstart、touchmove 和 touchend。
图片优化：使用响应式图片和现代格式（如 WebP）。
性能优化：减少资源加载，使用懒加载技术。
框架与工具
Bootstrap：响应式设计框架。
Tailwind CSS：实用类优先的 CSS 框架。
示例（Bootstrap）：
HTML

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
二、Web 表单与用户交互 表单验证 HTML5 验证：使用 required、pattern 等属性。 JavaScript 验证：自定义验证逻辑。 示例： HTML
用户名至少需要3个字符

表单提交与处理
AJAX 提交：异步提交表单。
文件上传：使用 和 FormData。
示例：
JavaScript

document.getElementById('userForm').addEventListener('submit', async function(e) {
e.preventDefault();
const formData = new FormData(this);
try {
const response = await fetch('/api/submit-form', {
method: 'POST',
body: formData,
});
const result = await response.json();
alert('表单提交成功: ' + result.message);
} catch (error) {
console.error('表单提交失败:', error);
}
});
表单库（React Hook Form）
安装：
bash

npm install react-hook-form
示例：
jsx

import { useForm } from 'react-hook-form';

function UserForm() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = data => console.log(data);

return (
    <form onSubmit={handleSubmit(onSubmit)}>
        <div className="form-group">
            <label>用户名</label>
            <input
                {...register('username', { required: '用户名必填', minLength: { value: 3, message: '用户名至少需要3个字符' } })}
                className={`form-control ${errors.username ? 'is-invalid' : ''}`}
            />
            {errors.username && <div className="invalid-feedback">{errors.username.message}</div>}
        </div>
        <div className="form-group">
            <label>邮箱</label>
            <input
                {...register('email', { required: '邮箱必填', pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, message: '无效的邮箱地址' } })}
                className={`form-control ${errors.email ? 'is-invalid' : ''}`}
            />
            {errors.email && <div className="invalid-feedback">{errors.email.message}</div>}
        </div>
        <button type="submit" className="btn btn-primary">提交</button>
    </form>
);

}

export default UserForm;
三、Web 无障碍（Accessibility）
无障碍设计原则
WCAG（Web Content Accessibility Guidelines）：Web 内容无障碍设计指南。
ARIA（Accessible Rich Internet Applications）：增强无障碍支持的属性。
实现无障碍设计
语义化 HTML：使用语义化标签（如

posted @ 2025-04-21 23:00  头发少的文不识  阅读(2)  评论(0)    收藏  举报