# 前端开发基础 Source: https://codewiki.com/zh/frontend/getting-started/ > - **what**: 前端代码在浏览器中运行：HTML 描述内容与语义，CSS 决定呈现与布局，JavaScript 处理状态和交互。 > - **trap**: 页面看起来正确，不代表结构可访问、布局能适应窄屏，也不代表浏览器收到不可信数据时仍然安全。 > - **fix**: 先写可用的语义化 HTML，再添加有弹性的 CSS 和必要的 JavaScript；用浏览器开发者工具逐层验证。 ## 是什么，为什么存在 前端开发负责用户代理中的界面。对大多数网站而言，这个用户代理就是浏览器；它接收服务器返回的资源，把文档转换成可交互的页面，再把用户操作转换成导航、表单提交或脚本事件。前端不是“做视觉效果”的同义词，它同时处理内容结构、输入方式、状态反馈、网络边界和不同设备上的呈现。 浏览器原生理解三类核心语言。它们可以放进一个 HTML 文件，也可以拆成独立资源，但职责并没有因此改变： - HTML（HyperText Markup Language）描述内容的结构和含义，例如标题、导航、表单与按钮。 - CSS（Cascading Style Sheets）根据选择器、层叠和布局规则计算元素怎样呈现。 - JavaScript 读取和更新页面状态，响应事件，并在需要时通过 Web API 与浏览器或服务器协作。 这三层分工让同一份内容适应不同环境。HTML 可以在样式加载失败时保留阅读顺序，CSS 可以在不改变文档含义的情况下适应屏幕宽度，JavaScript 则可以在基础操作已经成立之后增加即时反馈。把结构、呈现和行为混在一起，会让修改范围扩大，也更难判断故障属于哪一层。 框架不会替代这些基础。React、Vue 或 Svelte 最终仍然生成 DOM 节点、应用 CSS，并通过浏览器事件更新界面。理解平台层以后，你才能判断框架代码为什么出现水合差异、样式溢出、焦点丢失或重复事件处理，而不是只会更换组件写法。 你会在静态内容页、表单、仪表盘和单页应用中遇到同一组基础问题：内容是否有正确语义，布局是否受内容和容器约束，交互是否维护明确状态，以及失败后是否仍有可恢复路径。这些问题应先在浏览器平台上解决，再决定是否需要构建工具或框架。 ## 工作原理 浏览器从一个 URL 开始工作。它解析地址，发出 HTTP 请求并读取响应；HTML 响应还可能引用样式表、脚本、字体和图片，从而触发更多请求。服务器决定返回什么，浏览器决定怎样解析和呈现，二者之间以 HTTP 消息为边界。 页面不是一张被下载的图片。浏览器把 HTML 解析为文档对象模型（Document Object Model，DOM），把适用的 CSS 规则参与样式计算，再为需要显示的盒子执行布局、绘制与合成。JavaScript 可以查询或修改 DOM，修改结果又可能触发后续样式和渲染工作。 ```mermaid flowchart LR A[Request URL] --> B[Receive HTML] B --> C[Parse DOM] B --> D[Fetch CSS and JavaScript] C --> E[Compute styles and layout] D --> E E --> F[Paint and composite] F --> G[Handle user events] G --> C ``` ### HTML 建立文档含义 HTML 元素组成一棵树。父子关系表达内容分组，元素名称表达角色；例如 `

Not following

``` ```text Following | Following Lin Chen ``` `
` 表明这组信息可以独立理解，列表表达同类技能，`

``` ```text 2 notebooks: $25.00 ``` `required`、`min` 和 `max` 提供浏览器内置的第一层约束。脚本保留提交事件作为唯一更新入口，所以用户点击按钮、按 Enter 或代码调用 `requestSubmit()` 都走同一逻辑。真实下单仍要由服务器重新解析数量、查询可信价格并验证库存。 ### 用事件委托管理一组控件 最后一个页面把一个监听器放在按钮列表的共同父元素上。事件冒泡到列表后，`closest()` 找到实际触发操作的按钮；以后增加同类按钮时，不需要再注册一份监听器。 ```html Filter controls

Showing all tasks

``` ```text filter=open; pressed=true ``` 事件委托依赖事件传播，不等于在任意祖先上盲目处理所有点击。守卫条件把处理范围限制在带 `data-filter` 的按钮，并确认按钮仍属于当前列表。可见筛选结果、每个按钮的按下状态和应用中的实际过滤条件还应由同一状态来源派生。 ## 陷阱 ### 用通用容器模拟原生控件 > **陷阱:** 给 `
` 添加点击监听器和按钮样式，并不会让它获得按钮的键盘操作、焦点规则、禁用状态和辅助技术语义。 这种代码常常只能由鼠标完成操作。继续补 `role`、`tabindex` 和键盘监听，会重新实现浏览器已经提供且经过互操作测试的行为。 **修复：**操作使用 `