From 58588a5a5cfa90f37928d486d4a05c359c7107f5 Mon Sep 17 00:00:00 2001 From: Zen <107134031+effozen@users.noreply.github.com> Date: Thu, 26 Dec 2024 09:36:16 +0900 Subject: [PATCH 01/26] =?UTF-8?q?[ko]=20Working=20with=20the=20History=20A?= =?UTF-8?q?PI=20=EB=B2=88=EC=97=AD=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= =?UTF-8?q?=20(#25139)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [ko] Working with the History API 번역 업데이트 * [ko] Working with the History API 번역 오류 교정 --- .../working_with_the_history_api/index.md | 192 +++++++++++++----- 1 file changed, 136 insertions(+), 56 deletions(-) diff --git a/files/ko/web/api/history_api/working_with_the_history_api/index.md b/files/ko/web/api/history_api/working_with_the_history_api/index.md index 09611d4c398e62..46bab2ed5521e2 100644 --- a/files/ko/web/api/history_api/working_with_the_history_api/index.md +++ b/files/ko/web/api/history_api/working_with_the_history_api/index.md @@ -2,108 +2,188 @@ title: History API로 작업하기 slug: Web/API/History_API/Working_with_the_History_API l10n: - sourceCommit: 55de68017f98094f45addb3ebaa0f7f52024f60b + sourceCommit: bc7e82aa6db60568d7146ee285918550bbe4b8ce --- {{DefaultAPISidebar("History API")}} -{{DOMxRef("History.pushState","pushState()")}} 및 {{DOMxRef("History.replaceState","replaceState()")}}메서드는 각각 히스토리 항목을 추가하고 수정합니다. 이 메서드들은 {{domxref("Window/popstate_event", "popstate")}} 이벤트와 함께 작동합니다. +History API는 웹사이트가 브라우저의 세션 기록과 상호작용할 수 있게 해줍니다. 세션 기록이란 사용자가 특정 창에서 방문한 페이지들의 목록을 말합니다. 예를 들어 사용자가 링크를 클릭하여 새로운 페이지를 방문하면, 그 새로운 페이지들이 세션 기록에 추가됩니다. 사용자는 브라우저의 "뒤로" 및 "앞으로" 버튼을 사용하여 기록을 앞뒤로 이동할 수도 있습니다. -## 히스토리 항목 추가 및 수정 +History API에서 정의된 주요 인터페이스는 {{domxref("History")}} 인터페이스이며, 이 인터페이스는 두 가지 전혀 다른 메서드 집합을 정의합니다. -{{DOMxRef("History.pushState","pushState()")}}을 사용하면 상태를 변경한 후 생성된 {{domxref("XMLHttpRequest")}}객체의 HTTP 헤더에 사용되는 리퍼러가 변경됩니다. 리퍼러는 {{domxref("XMLHttpRequest")}} 객체를 생성할 때 창이 `this`인 문서의 URL이 됩니다. +1. 세션 기록의 페이지로 이동하는 메서드 -### pushState() 메서드 예제 + - {{domxref("History.back()")}} + - {{domxref("History.forward()")}} + - {{domxref("History.go()")}} -`https://mozilla.org/foo.html`이 다음 JavaScript 코드를 실행한다고 가정합니다. +2. 세션 기록을 수정하는 메서드 -```js -const stateObj = { - foo: "bar", -}; - -history.pushState(stateObj, "page 2", "bar.html"); -``` + - {{domxref("History.pushState()")}} + - {{domxref("History.replaceState()")}} -이렇게 하면 URL 표시줄에 `https://mozilla.org/bar.html`이 표시되지만, 브라우저가 `bar.html`를 로드하거나 `bar.html`이 존재하는지 확인하지는 않습니다. +이 가이드에서는 더 복잡한 동작을 가지는 두 번째 메서드 집합에만 초점을 맞출 것입니다. -이제 사용자가 `https://google.com`로 이동한 다음 **뒤로가기**버튼을 클릭한다고 가정해 보겠습니다. 이 시점에서 URL 표시줄에 `https://mozilla.org/bar.html`이 표시되고 `history.state`에 `stateObj`가 포함됩니다. 페이지가 새로고침되었기 때문에 `popstate` 이벤트는 발생하지 않습니다. 페이지 자체는 `bar.html`처럼 보일 것입니다. +`pushState()` 메서드는 세션 기록에 새 항목을 추가하고, `replaceState()` 메서드는 현재 페이지의 세션 기록 항목을 업데이트합니다. 이 두 메서드는 모두 `state` 매개변수를 사용하며, 이는 어떤 {{Glossary("Serializable_object", "직렬화 가능한 객체")}}도 포함할 수 있습니다. 브라우저가 이 히스토리 항목으로 네비게이트할 때, 브라우저는 이 항목과 연관된 상태 객체를 포함하는 {{domxref("Window.popstate_event", "popstate")}} 이벤트를 발생시킵니다. -사용자가 **뒤로가기**를 다시 한 번 클릭하면, URL이 `https://mozilla.org/foo.html`로 변경되고 이번에는 문서에 `null` 상태 객체가 포함된 `popstate` 이벤트가 발생합니다. 여기서도 뒤로 돌아간다고 해서 문서의 내용이 이전 단계의 내용과 바뀌지는 않지만 문서가 `popstate` 이벤트를 수신하면 내용을 수동으로 업데이트할 수 있습니다. +이 API의 주요 목적은 {{Glossary("SPA", "싱글 페이지 애플리케이션")}}와 같은 웹사이트를 지원하는 것입니다. 이러한 웹사이트는 {{domxref("Window/fetch", "fetch()")}}와 같은 JavaScript API를 사용하여 전체 새로운 페이지를 로드하는 대신 새로운 콘텐츠로 페이지를 업데이트합니다. -### pushState() 메서드 +## 싱글 페이지 애플리케이션과 세션 기록 -`pushState()`는 **state object**, **title**(현재 무시됨), **URL**(선택사항)의 세 가지 매개변수를 가집니다. +전통적으로, 웹사이트는 페이지 모음으로 구현됩니다. 사용자가 링크를 클릭하여 사이트의 다른 부분으로 이동할 때마다 브라우저는 매번 완전한 새 페이지를 로드합니다. -이 세 가지 매개변수를 각각 자세히 살펴보겠습니다. +이는 많은 사이트에 적합하지만, 몇 가지 단점이 있을 수 있습니다. -- **state object** - - : 상태 객체는 `pushState()`에 의해 생성된 새 기록 항목과 연관된 JavaScript 객체입니다. 사용자가 새 상태로 이동할 때마다 `popstate` 이벤트가 발생하고 이벤트의 `state` 속성에는 기록 항목의 상태 개체 복사본이 포함됩니다. 상태 객체는 직렬화할 수 있는 모든 것이 될 수 있습니다. 상태 객체는 사용자가 브라우저를 재시작한 후 복원할 수 있도록 사용자의 디스크에 저장되므로 상태 객체의 직렬화된 표현에 640k라는 크기 제한을 적용합니다. 직렬화된 표현이 이보다 큰 상태 객체를 `pushState()`에 전달하면 메서드는 예외를 던집니다. 이보다 더 많은 공간이 필요한 경우, `sessionStorage` 또는 `localStorage`사용을 권장합니다. -- **title** - - : [Safari를 제외한 모든 브라우저는 현재 이 매개변수를 무시](https://github.com/whatwg/html/issues/2174)하지만 향후 이 매개변수를 사용할 수 있습니다. 여기에 빈 문자열을 전달하면 향후 메서드 변경에 대비하여 안전할 것입니다. 또는 이동하려는 상태에 대한 짧은 제목을 전달할 수도 있습니다. -- **URL** - - : 새 기록 항목의 URL은 이 매개변수에 의해 지정됩니다. 브라우저는 `pushState()`를 호출한 후에는 이 URL을 로드하려고 시도하지 않지만, 사용자가 브라우저를 다시 시작한 후와 같이 나중에 URL을 로드하려고 시도할 수 있습니다. 새 URL은 절대 URL일 필요는 없으며, 상대 URL인 경우 현재 URL을 기준으로 확인됩니다. 새 URL은 현재 URL과 동일한 출처여야 합니다. 그렇지 않으면 `pushState()`가 예외를 던집니다. 이 매개변수는 선택 사항이며, 지정하지 않으면 문서의 현재 URL로 설정됩니다. +- 페이지의 일부만 업데이트해야 할 때마다 전체 페이지를 로드하는 것은 비효율적일 수 있습니다. +- 페이지 간 네비게이션 시 애플리케이션 상태를 유지하기 어렵습니다. -어떤 의미에서 `pushState()`를 호출하는 것은 현재 문서와 연결된 다른 히스토리 항목도 생성하고 활성화한다는 점에서 `window.location = "#foo"`를 설정하는 것과 유사합니다. +이러한 이유로 웹 애플리케이션에서 인기 있는 패턴은 {{Glossary("SPA", "싱글 페이지 애플리케이션")}}(SPA)이며, 이 경우 사이트는 단일 페이지로 구성되고 사용자가 링크를 클릭할 때 페이지는 다음과 같이 동작합니다. -하지만 `pushState()`에는 몇 가지 장점이 있습니다. +1. 새 페이지를 로드하는 기본 동작을 방지합니다. +2. {{domxref("Window/fetch", "Fetches", "", "nocode")}} 새로운 콘텐츠를 가져옵니다. +3. 새로운 콘텐츠로 페이지를 업데이트합니다. -- 새 URL은 현재 URL과 동일한 원본에 있는 모든 URL이 될 수 있습니다. 반면, `window.location`을 설정하면 해시만 수정하는 경우에는 동일한 {{ domxref("document") }}로 유지됩니다. -- 원하지 않는 경우 URL을 변경하지 않아도 됩니다. 반대로, `window.location = "#foo";`를 설정하면 현재 해시가 `#foo`가 아닌 경우에만 새 기록 항목이 생성됩니다. -- 임의의 데이터를 새 기록 항목에 연결할 수 있습니다. 해시 기반 접근 방식을 사용하면 모든 관련 데이터를 짧은 문자열로 인코딩해야 합니다. -- 만약 이후 `title` 브라우저에서 제목을 사용하는 경우, 해시와 무관하게 이 데이터를 활용할 수 있습니다. +다음의 예시를 살펴봅시다. -새 URL이 이전 URL과 해시만 다르더라도 `pushState()`는 이벤트를 발생시키지 않는다는 점에 유의해야 합니다. +```js +document.addEventListener("click", async (event) => { + const creature = event.target.getAttribute("data-creature"); + if (creature) { + // 새 페이지가 로드되지 않도록 방지 + event.preventDefault(); + try { + // 새로운 콘텐츠 가져오기 + const response = await fetch(`creatures/${creature}.json`); + const json = await response.json(); + // 새로운 콘텐츠로 페이지 업데이트 + displayContent(json); + } catch (err) { + console.error(err); + } + } +}); +``` -다른 문서에서는 `null` 네임스페이스 URI를 가진 요소를 생성합니다. +이 클릭 핸들러에서, 링크에 `"data-creature"` 데이터 속성이 포함되어 있다면, 해당 속성의 값을 사용하여 페이지의 새로운 콘텐츠를 포함하는 JSON 파일을 가져옵니다. -### replaceState() 메서드 +JSON 파일은 다음과 같을 수 있습니다. -`history.replaceState()`는 `history.pushState()`와 똑같이 작동하지만, `replaceState()`는 새 항목을 만드는 대신 현재 기록 항목을 수정한다는 점이 다릅니다. 이렇게 해도 전역 브라우저 기록에 새 항목이 생성되는 것을 막지는 못합니다. +```json +{ + "description": "대머리 독수리는 실제로 대머리가 아닙니다.", + "image": { + "src": "images/eagle.jpg", + "alt": "대머리 독수리" + }, + "name": "독수리" +} +``` -`replaceState()`는 특정 사용자 작업에 대한 응답으로 현재 기록 항목의 상태 개체 또는 URL을 업데이트하려는 경우에 특히 유용합니다. +`displayContent()` 함수는 JSON으로 페이지를 업데이트합니다. -### replaceState() 메서드 예제 +```js +// 새로운 콘텐츠으로 페이지 업데이트 +function displayContent(content) { + document.title = `생물: ${content.name}`; -`https://mozilla.org/foo.html`이 다음 JavaScript 코드를 실행한다고 가정합니다. + const description = document.querySelector("#description"); + description.textContent = content.description; -```js -const stateObj = { - foo: "bar", -}; -history.pushState(stateObj, "page 2", "bar.html"); + const photo = document.querySelector("#photo"); + photo.setAttribute("src", content.image.src); + photo.setAttribute("alt", content.image.alt); +} ``` -위의 두 줄에 대한 설명은 [pushState() 메서드 예제](<#pushState()_메서드_예제>) 섹션에서 확인할 수 있습니다. +문제는 이것이 브라우저의 "뒤로" 및 "앞으로" 버튼의 예상 동작을 깨뜨린다는 것입니다. + +사용자의 관점에서는 링크를 클릭하고 페이지가 업데이트되었으므로 새 페이지처럼 보입니다. 그런 다음 브라우저의 "뒤로" 버튼을 누르면 링크를 클릭하기 전 상태로 돌아가길 기대합니다. + +하지만 브라우저의 관점에서는 마지막 링크가 새 페이지를 로드하지 않았으므로 "뒤로" 버튼을 누르면 사용자가 SPA를 열기 전에 로드된 페이지로 이동하게 됩니다. -다음으로 `https://mozilla.org/bar.html`이 다음 JavaScript 코드를 실행한다고 가정합니다. +이것이 `pushState()`, `replaceState()`, 그리고 `popstate` 이벤트가 해결하는 문제입니다. 이들은 역사 항목을 합성하고, 현재 세션 기록 항목이 이러한 항목 중 하나로 변경될 때(예를 들어, 사용자가 "뒤로" 또는 "앞으로" 버튼을 눌렀을 때)를 알 수 있게 해줍니다. + +## `pushState()` 사용하기 + +위의 클릭 핸들러에 역사 항목을 추가할 수 있습니다. ```js -history.replaceState(stateObj, "page 3", "bar2.html"); +document.addEventListener("click", async (event) => { + const creature = event.target.getAttribute("data-creature"); + if (creature) { + event.preventDefault(); + try { + const response = await fetch(`creatures/${creature}.json`); + const json = await response.json(); + displayContent(json); + // 새로운 역사 항목을 추가합니다. + // 이는 새 페이지를 로드하는 것을 시뮬레이션합니다. + history.pushState(json, "", creature); + } catch (err) { + console.error(err); + } + } +}); ``` -이렇게 하면 URL 표시줄에 `https://mozilla.org/bar2.html`이 표시되지만 브라우저가 `bar2.html`를 로드하거나 `bar2.html`이 존재하는지 확인하지는 않습니다. +여기서 우리는 세 가지 인수로 `pushState()`를 호출하고 있습니다. + +- `json`: 방금 가져온 콘텐츠입니다. 이는 역사 항목과 함께 저장되며, 나중에 사용자가 A로 네비게이션할 때 `popstate` 이벤트 핸들러에 전달되는 인수의 {{domxref("PopStateEvent.state", "state")}} 속성으로 포함됩니다. +- `""`: 이는 레거시 사이트와의 하위 호환성을 위해 필요하며, 항상 빈 문자열이어야 합니다. +- `creature`: 이는 항목의 URL로 사용됩니다. 브라우저의 URL 표시줄에 표시되며, 페이지가 수행하는 모든 HTTP 요청에서 {{httpheader("Referer")}} 헤더의 값으로 사용됩니다. 이는 페이지와 {{Glossary("Same-origin policy", "동일 출처 정책")}}이어야 합니다. -이제 사용자가 `https://www.microsoft.com`로 이동한 다음 **뒤로가기**버튼을 클릭한다고 가정하겠습니다. 이 시점에서 URL 표시줄에 `https://mozilla.org/bar2.html`이 표시됩니다. 이제 사용자가 **뒤로가기**버튼을 다시 클릭하면 URL 표시줄에 `https://mozilla.org/foo.html`가 표시되고 `bar.html`이 완전히 우회됩니다. +## `popstate` 이벤트 사용하기 -### popstate 이벤트 +사용자가 다음과 같이 동작한다고 가정해 봅시다. -활성 기록 항목이 변경될 때마다 창에 `popstate` 이벤트가 전송됩니다. 활성화 중인 기록 항목이 {{DOMxRef("History.pushState","pushState")}} 호출에 의해 생성되었거나 {{DOMxRef("History.replaceState","replaceState")}} 호출의 영향을 받은 경우, `popstate` 이벤트의 `state` 속성에는 기록 항목의 상태 객체 복사본이 포함됩니다. +1. SPA에서 링크를 클릭하여 페이지를 업데이트하고 `pushState()`를 사용하여 역사 항목 A를 추가합니다. +2. SPA에서 다른 링크를 클릭하여 페이지를 업데이트하고 `pushState()`를 사용하여 역사 항목 B를 추가합니다. +3. "뒤로" 버튼을 누릅니다. -샘플 사용법은 {{domxref("Window/popstate_event", "popstate")}}에서 확인하시면 됩니다. +이제 새로운 현재 역사 항목은 A가 되므로, 브라우저는 `popstate` 이벤트를 발생시키고, 이벤트 핸들러 인수는 A로 네비게이션할 때 `pushState()`에 전달했던 JSON을 포함합니다. 이는 다음과 같은 이벤트 핸들러를 사용하여 올바른 콘텐츠를 복원할 수 있음을 의미합니다. + +```js +// 앞으로/뒤로 버튼 처리 +window.addEventListener("popstate", (event) => { + // 상태가 제공된 경우, "시뮬레이션된" 페이지가 있으며 현재 페이지를 업데이트합니다. + if (event.state) { + // 이전 페이지 로드를 시뮬레이션합니다. + displayContent(event.state); + } +}); +``` -### 현재 상태 읽기 +## `replaceState()` 사용하기 -페이지가 로드될 때 non-null 상태가 아닌 객체가 있을 수 있습니다. 예를 들어 페이지에서 상태 객체를 설정한 후 ({{DOMxRef("History.pushState","pushState()")}} 또는 {{DOMxRef("History.replaceState","replaceState()")}}사용)사용자가 브라우저를 재시작하는 경우 이런 일이 발생할 수 있습니다. 페이지가 다시 로드되면 페이지에 `onload` 이벤트가 수신되지만 `popstate` 이벤트는 수신되지 않습니다. 그러나 {{DOMxRef("History.state","history.state")}} 속성을 읽으면 `popstate`가 발생했을 때 얻을 수 있는 상태 객체를 다시 얻을 수 있습니다. +추가해야 할 한 가지가 더 있습니다. 사용자가 SPA를 로드할 때, 브라우저는 역사 항목을 추가합니다. 이 항목은 실제 페이지 로드였기 때문에 상태가 연관되어 있지 않습니다. 따라서 사용자가 다음과 같이 동작한다고 가정해 봅시다. -다음과 같이 {{DOMxRef("History.state","history.state")}} 속성을 사용하여 `popstate` 이벤트를 기다리지 않고 현재 기록 항목의 상태를 읽을 수 있습니다. +1. SPA를 로드합니다. 브라우저는 역사(History) 항목을 추가합니다. +2. SPA 내의 링크를 클릭하여 페이지를 업데이트하고 `pushState()`를 사용하여 역사 항목을 추가합니다. +3. "뒤로" 버튼을 누릅니다. + +이제 사용자는 SPA의 초기 상태로 돌아가길 원하지만, 이는 같은 문서 내에서의 네비게이션이기 때문에 페이지가 다시 로드되지 않으며, 초기 페이지의 역사 항목에는 상태가 없기 때문에 `popstate`를 사용하여 복원할 수 없습니다. + +해결책은 `replaceState()`를 사용하여 초기 페이지의 상태 객체를 설정하는 것입니다. 예를 들면 다음과 같습니다. ```js -const currentState = history.state; +// 페이지 로드 시 상태를 생성하고 현재 기록을 교체합니다. +const image = document.querySelector("#photo"); +const initialState = { + description: document.querySelector("#description").textContent, + image: { + src: image.getAttribute("src"), + alt: image.getAttribute("alt"), + }, + name: "홈", +}; +history.replaceState(initialState, "", document.location.href); ``` +페이지 로드 시, 사용자가 SPA의 시작 지점으로 돌아갔을 때 복원할 모든 페이지의 부분을 수집합니다. 이는 다른 네비게이션을 처리할 때 가져오는 JSON과 동일한 구조를 가지고 있습니다. 우리는 이 `initialState` 객체를 `replaceState()`에 전달하여 현재 역사 항목에 상태 객체를 효과적으로 추가합니다. + +사용자가 시작 지점으로 돌아가면, `popstate` 이벤트는 이 초기 상태를 포함하게 되며, 우리는 `displayContent()` 함수를 사용하여 페이지를 업데이트할 수 있습니다. + ## 같이 보기 - [History API](/ko/docs/Web/API/History_API) -- [History navigation 예제](/ko/docs/Web/API/History_API/Working_with_the_History_API) - {{domxref("window.history", "history")}} 전역 객체 From af061329d81be7ef817b60c08d42cb345e4370f7 Mon Sep 17 00:00:00 2001 From: Vivi Date: Thu, 26 Dec 2024 09:41:03 +0900 Subject: [PATCH 02/26] =?UTF-8?q?[ko]=20svg=20element=20g=20=EC=8B=A0?= =?UTF-8?q?=EA=B7=9C=20=EB=B2=88=EC=97=AD=20(#25218)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [ko] svg element g 신규 번역 * Update files/ko/web/svg/element/g/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/ko/web/svg/element/g/index.md | 46 +++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 files/ko/web/svg/element/g/index.md diff --git a/files/ko/web/svg/element/g/index.md b/files/ko/web/svg/element/g/index.md new file mode 100644 index 00000000000000..ed55e6e5c1edde --- /dev/null +++ b/files/ko/web/svg/element/g/index.md @@ -0,0 +1,46 @@ +--- +title: +slug: Web/SVG/Element/g +l10n: + sourceCommit: 2f43f506240fa6c866cc3bc2d018364ae49421d9 +--- + +{{SVGRef}} + +**``** [SVG](/ko/docs/Web/SVG) 요소는 다른 SVG 요소를 그룹화한 컨테이너입니다. + +`` 요소에 적용된 변형 속성은 자식 요소들에서 동작합니다. 그리고 그 특성은 자식 요소에게로 상속됩니다. 이는 또한 다중 요소를 그룹화하여 {{SVGElement("use")}} 요소와 함께 참조될 수 있도록 합니다. + +## 예제 + +```css hidden +html, +body, +svg { + height: 100%; +} +``` + +```html + + + + + + + +``` + +{{EmbedLiveSample('Example', 100, '100%')}} + +## 사용 일람 + +{{svginfo}} + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} From bb1dee8e5a87284ff2285c7a4ae41d5007b87804 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Thu, 26 Dec 2024 10:00:16 +0800 Subject: [PATCH 03/26] zh-CN: create `notifications.TemplateType` (#25074) --- .../api/notifications/templatetype/index.md | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/notifications/templatetype/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/notifications/templatetype/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/notifications/templatetype/index.md new file mode 100644 index 00000000000000..9c784fe182ae8f --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/notifications/templatetype/index.md @@ -0,0 +1,47 @@ +--- +title: notifications.TemplateType +slug: Mozilla/Add-ons/WebExtensions/API/notifications/TemplateType +l10n: + sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262 +--- + +{{AddonSidebar}} + +这是表示要创建的通知类型的字符串。有四种通知类型：“basic”、“image”、“list”、“progress”。 + +这将作为 {{WebExtAPIRef("notifications.NotificationOptions", "NotificationOptions")}} 中的 `type` 属性的值传递给 {{WebExtAPIRef("notifications.create()")}} 和 {{WebExtAPIRef("notifications.update()")}}。 + +## 类型 + +该类型的取值是字符串。可能的取值包括： + +- `"basic"`：通知包括： + + - 标题（`NotificationOptions.title`） + - 消息（`NotificationOptions.message`） + - 图标（`NotificationOptions.iconUrl`）{{optional_inline}} + - 额外消息（`NotificationOptions.contextMessage`）{{optional_inline}} + - 最多两个按钮（`NotificationOptions.buttons`）{{optional_inline}} + +- `"image"`：包括 `"basic"` 中的所有内容，以及： + + - 图像（`NotificationOptions.imageUrl`） + +- `"list"`：包括 `"basic"` 中的所有内容，以及： + + - 项目列表（`NotificationOptions.items`） + +- `"progress"`：包括 `"basic"` 中的所有内容，以及： + + - 进度条（`NotificationOptions.progress`） + +目前 Firefox 仅支持“basic”。 + +## 浏览器兼容性 + +{{Compat}} + +{{WebExtExamples}} + +> [!NOTE] +> 该 API 基于 Chromium 的 [`chrome.notifications`](https://developer.chrome.google.cn/docs/extensions/reference/api/notifications) API。 From 66c9d9fe7a56be55d2c328e636c712973a71e883 Mon Sep 17 00:00:00 2001 From: "Dr.XYZ" <121708493+Dr-XYZ@users.noreply.github.com> Date: Thu, 26 Dec 2024 10:07:43 +0800 Subject: [PATCH 04/26] [zh-TW]: create CSS/--* (#25166) --- files/zh-tw/web/css/--_star_/index.md | 87 +++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 files/zh-tw/web/css/--_star_/index.md diff --git a/files/zh-tw/web/css/--_star_/index.md b/files/zh-tw/web/css/--_star_/index.md new file mode 100644 index 00000000000000..8e6b391448ff2b --- /dev/null +++ b/files/zh-tw/web/css/--_star_/index.md @@ -0,0 +1,87 @@ +--- +title: 自訂屬性（--*）：CSS 變數 +slug: Web/CSS/--* +l10n: + sourceCommit: 50c8e290f11b061bbf2267e1a3279f28180a5fcb +--- + +{{CSSRef}} + +以 `--` 為前綴的屬性名稱，例如 `--example-name`，代表包含值的*自訂屬性*，可以使用 {{cssxref("var", "var()")}} 函數在其他宣告中使用。 + +自訂屬性作用於其宣告的元素，並參與層疊：這類自訂屬性的值是由層疊演算法決定的宣告值。 + +{{CSSInfo}} + +## 語法 + +```css +--some-keyword: left; +--some-color: #0000ff; +--some-complex-value: 3px 6px rgb(20 32 54); +``` + +- `` + - : 此值匹配一個或多個標記的序列，只要該序列不包含任何不允許的標記。它代表有效宣告可以具有的值的全部內容。 + +> [!NOTE] +> 自訂屬性名稱區分大小寫——`--my-color` 與 `--My-color` 將被視為不同的自訂屬性。 + +## 範例 + +### HTML + +```html +

這段文字應該有藍色背景和黃色文字。

+

這段文字應該有黃色背景和藍色文字。

+
+

這段文字應該有綠色背景和黃色文字。

+
+``` + +### CSS + +```css +:root { + --first-color: #16f; + --second-color: #ff7; +} + +#firstParagraph { + background-color: var(--first-color); + color: var(--second-color); +} + +#secondParagraph { + background-color: var(--second-color); + color: var(--first-color); +} + +#container { + --first-color: #290; +} + +#thirdParagraph { + background-color: var(--first-color); + color: var(--second-color); +} +``` + +### 結果 + +{{EmbedLiveSample('範例', 500, 130)}} + +## 規範 + +{{Specifications}} + +## 瀏覽器相容性 + +{{Compat}} + +## 參見 + +- {{cssxref("var", "var()")}} 函數 +- {{cssxref("@property")}} @ 規則 +- [使用 CSS 自訂屬性（變數）](/zh-TW/docs/Web/CSS/Using_CSS_custom_properties)指南 +- [CSS 自訂屬性用於層疊變數](/zh-TW/docs/Web/CSS/CSS_cascading_variables)模組 From 7d60b7cc5314231a91207c622be8fe3564061e74 Mon Sep 17 00:00:00 2001 From: Melxy97 <861889629@qq.com> Date: Thu, 26 Dec 2024 10:45:04 +0800 Subject: [PATCH 05/26] zh-CN: create the `import()` operator (#25167) Co-authored-by: A1lo --- .../reference/operators/import/index.md | 198 ++++++++++++++++++ 1 file changed, 198 insertions(+) create mode 100644 files/zh-cn/web/javascript/reference/operators/import/index.md diff --git a/files/zh-cn/web/javascript/reference/operators/import/index.md b/files/zh-cn/web/javascript/reference/operators/import/index.md new file mode 100644 index 00000000000000..06162465d7d2d9 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/operators/import/index.md @@ -0,0 +1,198 @@ +--- +title: import() +slug: Web/JavaScript/Reference/Operators/import +l10n: + sourceCommit: eb7cf694c19b31ee8826f22eaac6c12e808b1e50 +--- + +{{jsSidebar("Operators")}} + +**`import()`** 语法（通常被称为*动态导入*）是一种允许异步和动态地将 ECMAScript 模块加载到一个潜在的非模块环境中的类函数表达式。 + +跟[与之对应的声明式风格](/zh-CN/docs/Web/JavaScript/Reference/Statements/import)不同，动态导入只有在被需要时才会求值，并提供了更强大的语法灵活性。 + +## 语法 + +```js-nolint +import(moduleName) +import(moduleName, options) +``` + +`import()` 调用是一个类似于函数调用的语法，但 `import` 本身是一个关键字，而不是一个函数。你不能像 `const myImport = import` 那样为其添加别名，这会抛出 {{jsxref("SyntaxError")}}。 + +只有在运行时也支持 `options` 时，[尾后逗号](/zh-CN/docs/Web/JavaScript/Reference/Trailing_commas)才被允许使用。请查看[浏览器兼容性](#浏览器兼容性)部分。 + +### 参数 + +- `moduleName` + - : 要导入的模块。标识符的求值是宿主特异的（host-specified），但始终遵循与静态的 [import 声明](/zh-CN/docs/Web/JavaScript/Reference/Statements/import)相同的算法。 +- `options` + - : 一个包含了导入选项的对象。以下是可识别的键： + - `with` + - : [import 属性](/zh-CN/docs/Web/JavaScript/Reference/Statements/import/with)。 + +### 返回值 + +返回一个 promise： + +- 如果引用的模块被成功加载和求值，则兑现为一个[模块命名空间对象](#模块命名空间对象)：一个包含 `moduleName` 中所有导出的对象。 +- 如果对 `moduleName` 做[字符串强制转换](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#字符串强制转换)时抛出错误，则以抛出的错误拒绝。 +- 如果 `moduleName` 引用的模块不存在，则以实现定义的错误拒绝（Node 使用通用的 `Error`，而所有浏览器使用 `TypeError`）。 +- 如果引用的模块在求值时抛出错误，则以抛出的错误拒绝。 + +> **备注：** `import()` 从来不会同步地抛出错误。 + +## 描述 + +import 声明语法（`import something from "somewhere"`）是静态的，并且总是会在一加载时就对导入的模块求值。动态导入允许绕过 import 声明的语法刚性（syntactic rigidity），并有条件地或按需加载模块。以下是你可能需要使用动态导入的一些原因： + +- 当静态导入显著减慢你的代码加载，或增加你的程序内存使用时，那么你很可能不需要正要导入的代码，或者以后才会需要它。 +- 当你正要导入的模块在加载时并不存在时。 +- 当导入标识符字符串需要动态构建时。（静态导入仅支持静态标识符。） +- 当你正要导入的模块有副作用，并且你仅在某些条件下才希望有这些副作用。（建议模块中不要有任何副作用，但有时模块的依赖项中是否有副作用也无法控制） +- 当你处于非模块化的环境（例如，`eval` 或脚本文件）时。 + +仅在必要时使用动态导入。静态导入更适合加载初始依赖项，并且可以更容易地从静态分析工具和[摇树优化](/zh-CN/docs/Glossary/Tree_shaking)中获益。 + +如果你的文件不是作为模块运行的（如果它在 HTML 文件中被引用，脚本标签必须有 `type="module"` 属性），你将无法使用静态导入声明。而另一方面，异步的动态导入语法却始终可用，它允许你将模块导入到非模块环境中。 + +`options` 参数允许不同类型的导入选项。例如 [import 属性](/zh-CN/docs/Web/JavaScript/Reference/Statements/import/with)： + +```js +import("./data.json", { with: { type: "json" } }); +``` + +动态模块导入并不在所有执行上下文中都可使用。例如，`import()` 可以在主线程、共享/专用 worker 中使用，但如果在 [service worker](/zh-CN/docs/Web/API/Service_Worker_API) 或 [worklet](/zh-CN/docs/Web/API/Worklet) 中调用，则会抛出错误。 + +### 模块命名空间对象 + +*模块命名空间对象*是一个描述模块所有导出的对象。它是一个静态对象，在模块被求值时创建。有两种方式可以访问模块的模块命名空间对象：通过[命名空间导入](/zh-CN/docs/Web/JavaScript/Reference/Statements/import#命名空间导入)（`import * as name from moduleName`）或通过动态导入的兑现值。 + +模块命名空间对象是一个[密封](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed)的、具有 [`null` 原型](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object#null_原型对象)的对象。也就是说，对象的所有字符串键对应于模块的导出，并且永远不会有额外的键。所有键都是以字典序[可枚举的](/zh-CN/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)（即 [`Array.prototype.sort()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#描述) 的默认行为），默认导出以名为 `default` 的键可用。此外，模块命名空间对象具有一个值为 `"Module"` 的 [`[Symbol.toStringTag]`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) 属性，在 {{jsxref("Object.prototype.toString()")}} 中被使用。 + +在使用 {{jsxref("Object.getOwnPropertyDescriptors()")}} 获取它们的描述符时会发现，字符串属性是不可配置的和可写入的。然而它们实际上是只读的，因为你不能给属性重新赋一个新的值。这些值可以由导出它们的模块重新赋值，但不能由导入它们的模块重新赋值——这种行为反映了静态导入所创建的“[实时绑定](/zh-CN/docs/Web/JavaScript/Reference/Statements/import#导入的值只能由导出者修改)”。属性的可写入性反映了值是可能发生变化的，因为不可配置和不可写入的属性必须是常量。例如，你可以重新给一个导出的变量赋值，并且可以在模块命名空间对象中观察到新的值。 + +每个模块标识符对应一个唯一的模块命名空间对象，所以下面的代码通常是正确的： + +```js +import * as mod from "/my-module.js"; + +import("/my-module.js").then((mod2) => { + console.log(mod === mod2); // true +}); +``` + +除了一个奇怪的情况：由于 promise 对象永远不会兑现为 [thenable](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise#thenable)，如果 `my-module.js` 模块恰好导出了一个名为 `then()` 的函数，那么该函数将在动态导入的 promise 兑现时自动被调用，因为这是 [promise 解决](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise#resolve_函数)处理流程的一部分。 + +```js +// my-module.js +export function then(resolve) { + console.log("then() 已被调用"); + resolve(1); +} +``` + +```js +// main.js +import * as mod from "/my-module.js"; + +import("/my-module.js").then((mod2) => { + // 打印“then() 已被调用” + console.log(mod === mod2); // false +}); +``` + +> [!WARNING] +> 不要从模块中导出名为 `then()` 的函数。这将导致模块在动态导入和静态导入时的行为不同。 + +## 示例 + +### 仅导入模块以获取其副作用 + +```js +(async () => { + if (somethingIsTrue) { + // 导入模块以获取其副作用 + await import("/modules/my-module.js"); + } +})(); +``` + +如果你的项目使用导出 ESM 的包，你也可以仅导入它们以获取其副作用。这将仅运行包的入口点文件（以及它导入的任何文件）中的代码。 + +### 导入默认值 + +如果你正在解构导入的模块命名空间对象，那么你必须重命名 `default` 键，因为 `default` 是保留字。 + +```js +(async () => { + if (somethingIsTrue) { + const { + default: myDefault, + foo, + bar, + } = await import("/modules/my-module.js"); + } +})(); +``` + +### 根据用户操作按需导入 + +这个示例展示了如何根据用户操作（在本例中为按钮点击）将功能加载到页面上，然后在该模块中调用一个函数。这不是实现此功能的唯一方式。`import()` 函数也支持 `await`。 + +```js +const main = document.querySelector("main"); +for (const link of document.querySelectorAll("nav > a")) { + link.addEventListener("click", (e) => { + e.preventDefault(); + + import("/modules/my-module.js") + .then((module) => { + module.loadPageInto(main); + }) + .catch((err) => { + main.textContent = err.message; + }); + }); +} +``` + +### 根据环境导入不同的模块 + +在服务器端渲染等过程中，你可能需要在服务器或浏览器中加载不同的逻辑，因为它们与不同的全局对象或模块交互（例如，浏览器代码可以访问 `document` 和 `navigator` 等 Web API，而服务器代码可以访问服务器文件系统）。你可以通过条件动态导入来实现这一点。 + +```js +let myModule; + +if (typeof window === "undefined") { + myModule = await import("module-used-on-server"); +} else { + myModule = await import("module-used-in-browser"); +} +``` + +### 使用非字面量标识符导入模块 + +动态导入允许任何表达式作为模块标识符，而不仅仅是字符串字面量。 + +这里，我们同时加载 10 个模块（如 `/modules/module-0.js`、`/modules/module-1.js` 等），并调用每个模块导出的 `load` 函数。 + +```js +Promise.all( + Array.from({ length: 10 }).map( + (_, index) => import(`/modules/module-${index}.js`), + ), +).then((modules) => modules.forEach((module) => module.load())); +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [`import`](/zh-CN/docs/Web/JavaScript/Reference/Statements/import) From 1a98f47caee29a011c7e5e2fd539b4679d5162e1 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 26 Dec 2024 11:47:01 +0000 Subject: [PATCH 06/26] build(deps): bump markdownlint-cli2 from 0.16.0 to 0.17.0 (#25237) --- package.json | 2 +- yarn.lock | 164 +++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 148 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index d1009dfdbe7c90..ee398e4ff17bea 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "husky": "9.1.7", "lint-staged": "15.2.11", "markdown-it": "^14.1.0", - "markdownlint-cli2": "0.16.0", + "markdownlint-cli2": "0.17.0", "markdownlint-rule-search-replace": "1.2.0", "mdast-util-from-markdown": "^2.0.2", "ora": "^8.1.1", diff --git a/yarn.lock b/yarn.lock index 79602d6053cbbb..88463a3988a5da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -35,6 +35,11 @@ dependencies: "@types/ms" "*" +"@types/katex@^0.16.0": + version "0.16.7" + resolved "https://registry.yarnpkg.com/@types/katex/-/katex-0.16.7.tgz#03ab680ab4fa4fbc6cb46ecf987ecad5d8019868" + integrity sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ== + "@types/mdast@^4.0.0": version "4.0.4" resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-4.0.4.tgz#7ccf72edd2f1aa7dd3437e180c64373585804dd6" @@ -52,6 +57,11 @@ resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.3.tgz#acaab0f919ce69cce629c2d4ed2eb4adc1b6c20c" integrity sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q== +"@types/unist@^2.0.0": + version "2.0.11" + resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.11.tgz#11af57b127e32487774841f7a4e54eab166d03c4" + integrity sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA== + ansi-escapes@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-7.0.0.tgz#00fc19f491bbb18e1d481b97868204f92109bfe7" @@ -154,11 +164,21 @@ chalk@^5.3.0, chalk@~5.3.0: resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.3.0.tgz#67c20a7ebef70e7f3970a01f90fa210cb6860385" integrity sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w== +character-entities-legacy@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz#76bc83a90738901d7bc223a9e93759fdd560125b" + integrity sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ== + character-entities@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22" integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ== +character-reference-invalid@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9" + integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw== + cld@^2.10.0: version "2.10.0" resolved "https://registry.yarnpkg.com/cld/-/cld-2.10.0.tgz#b65aa393e96a19e5db2be0994c54f54b992eb455" @@ -214,6 +234,11 @@ colorette@^2.0.20: resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a" integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w== +commander@^8.3.0: + version "8.3.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66" + integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww== + commander@~12.1.0: version "12.1.0" resolved "https://registry.yarnpkg.com/commander/-/commander-12.1.0.tgz#01423b36f501259fdaac4d0e4d60c96c991585d3" @@ -425,6 +450,24 @@ inherits@2: resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== +is-alphabetical@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-2.0.1.tgz#01072053ea7c1036df3c7d19a6daaec7f19e789b" + integrity sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ== + +is-alphanumerical@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz#7c03fbe96e3e931113e57f964b0a368cc2dfd875" + integrity sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw== + dependencies: + is-alphabetical "^2.0.0" + is-decimal "^2.0.0" + +is-decimal@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-2.0.1.tgz#9469d2dc190d0214fd87d78b78caecc0cc14eef7" + integrity sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A== + is-extglob@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2" @@ -454,6 +497,11 @@ is-glob@^4.0.1: dependencies: is-extglob "^2.1.1" +is-hexadecimal@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz#86b5bf668fca307498d319dfc03289d781a90027" + integrity sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg== + is-interactive@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-2.0.0.tgz#40c57614593826da1100ade6059778d597f16e90" @@ -504,6 +552,13 @@ jsonc-parser@3.3.1: resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.3.1.tgz#f2a524b4f7fd11e3d791e559977ad60b98b798b4" integrity sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ== +katex@^0.16.0: + version "0.16.18" + resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.18.tgz#20781284288bc52805c519e48ac756163ad4b1f3" + integrity sha512-LRuk0rPdXrecAFwQucYjMiIs0JFefk6N1q/04mlw14aVIVgxq1FO0MA9RiIIGVaKOB5GIP5GH4aBBNraZERmaQ== + dependencies: + commander "^8.3.0" + lilconfig@~3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.3.tgz#a1bcfd6257f9585bf5ae14ceeebb7b559025e4c4" @@ -580,23 +635,18 @@ markdownlint-cli2-formatter-default@0.0.5: resolved "https://registry.yarnpkg.com/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.5.tgz#b8fde4e127f9a9c0596e6d45eed352dd0aa0ff98" integrity sha512-4XKTwQ5m1+Txo2kuQ3Jgpo/KmnG+X90dWt4acufg6HVGadTUG5hzHF/wssp9b5MBYOMCnZ9RMPaU//uHsszF8Q== -markdownlint-cli2@0.16.0: - version "0.16.0" - resolved "https://registry.yarnpkg.com/markdownlint-cli2/-/markdownlint-cli2-0.16.0.tgz#95c599e28aff8e4286fbf08003e7fc1282ec0cac" - integrity sha512-oy5dJdOxGMKSwrlouxdEGf6N4O2Iz8oJ4/HO2Ix67o4vTK1AQNGjZUNwTIzfa5x+XbJ++dfgR1gLfILajsW+1Q== +markdownlint-cli2@0.17.0: + version "0.17.0" + resolved "https://registry.yarnpkg.com/markdownlint-cli2/-/markdownlint-cli2-0.17.0.tgz#1a93fa0c1708981a8f12b175e53d899fe7b448d1" + integrity sha512-8Xz7wkkkV4wJTf+pvryU3J/fT3BZWD3ZykcjYBR0GuH0GHvrCbswaCdurbuUuAPDGFZy4cxBGYCJSAOW8jM4aQ== dependencies: globby "14.0.2" js-yaml "4.1.0" jsonc-parser "3.3.1" - markdownlint "0.36.1" + markdownlint "0.37.2" markdownlint-cli2-formatter-default "0.0.5" micromatch "4.0.8" -markdownlint-micromark@0.1.12: - version "0.1.12" - resolved "https://registry.yarnpkg.com/markdownlint-micromark/-/markdownlint-micromark-0.1.12.tgz#8fc055f4588039654e5af75f1b9fc492da64c76a" - integrity sha512-RlB6EwMGgc0sxcIhOQ2+aq7Zw1V2fBnzbXKGgYK/mVWdT7cz34fteKSwfYeo4rL6+L/q2tyC9QtD/PgZbkdyJQ== - markdownlint-micromark@0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/markdownlint-micromark/-/markdownlint-micromark-0.1.2.tgz#5520e04febffa46741875a2f297509ffdb561f5c" @@ -616,13 +666,19 @@ markdownlint-rule-search-replace@1.2.0: dependencies: markdownlint-rule-helpers "0.21.0" -markdownlint@0.36.1: - version "0.36.1" - resolved "https://registry.yarnpkg.com/markdownlint/-/markdownlint-0.36.1.tgz#86491d35ad6eda89e1290404850a574da3e64490" - integrity sha512-s73fU2CQN7WCgjhaQUQ8wYESQNzGRNOKDd+3xgVqu8kuTEhmwepd/mxOv1LR2oV046ONrTLBFsM7IoKWNvmy5g== +markdownlint@0.37.2: + version "0.37.2" + resolved "https://registry.yarnpkg.com/markdownlint/-/markdownlint-0.37.2.tgz#72461a7abfef2e01ae7f3b596cdc083a25856571" + integrity sha512-m8QhYnRA1ptbhIjhVVBUkKQcUelVxuyO/yXyLewnc1+xs4eXhST/+hIy29goO+EYVLmWtknH4SmYQ4s0caoKqw== dependencies: markdown-it "14.1.0" - markdownlint-micromark "0.1.12" + micromark "4.0.1" + micromark-extension-directive "3.0.2" + micromark-extension-gfm-autolink-literal "2.1.0" + micromark-extension-gfm-footnote "2.1.0" + micromark-extension-gfm-table "2.1.0" + micromark-extension-math "3.1.0" + micromark-util-types "2.0.1" mdast-util-from-markdown@^2.0.2: version "2.0.2" @@ -686,6 +742,67 @@ micromark-core-commonmark@^2.0.0: micromark-util-symbol "^2.0.0" micromark-util-types "^2.0.0" +micromark-extension-directive@3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/micromark-extension-directive/-/micromark-extension-directive-3.0.2.tgz#2eb61985d1995a7c1ff7621676a4f32af29409e8" + integrity sha512-wjcXHgk+PPdmvR58Le9d7zQYWy+vKEU9Se44p2CrCDPiLr2FMyiT4Fyb5UFKFC66wGB3kPlgD7q3TnoqPS7SZA== + dependencies: + devlop "^1.0.0" + micromark-factory-space "^2.0.0" + micromark-factory-whitespace "^2.0.0" + micromark-util-character "^2.0.0" + micromark-util-symbol "^2.0.0" + micromark-util-types "^2.0.0" + parse-entities "^4.0.0" + +micromark-extension-gfm-autolink-literal@2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz#6286aee9686c4462c1e3552a9d505feddceeb935" + integrity sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw== + dependencies: + micromark-util-character "^2.0.0" + micromark-util-sanitize-uri "^2.0.0" + micromark-util-symbol "^2.0.0" + micromark-util-types "^2.0.0" + +micromark-extension-gfm-footnote@2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz#4dab56d4e398b9853f6fe4efac4fc9361f3e0750" + integrity sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw== + dependencies: + devlop "^1.0.0" + micromark-core-commonmark "^2.0.0" + micromark-factory-space "^2.0.0" + micromark-util-character "^2.0.0" + micromark-util-normalize-identifier "^2.0.0" + micromark-util-sanitize-uri "^2.0.0" + micromark-util-symbol "^2.0.0" + micromark-util-types "^2.0.0" + +micromark-extension-gfm-table@2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.0.tgz#5cadedfbb29fca7abf752447967003dc3b6583c9" + integrity sha512-Ub2ncQv+fwD70/l4ou27b4YzfNaCJOvyX4HxXU15m7mpYY+rjuWzsLIPZHJL253Z643RpbcP1oeIJlQ/SKW67g== + dependencies: + devlop "^1.0.0" + micromark-factory-space "^2.0.0" + micromark-util-character "^2.0.0" + micromark-util-symbol "^2.0.0" + micromark-util-types "^2.0.0" + +micromark-extension-math@3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/micromark-extension-math/-/micromark-extension-math-3.1.0.tgz#c42ee3b1dd5a9a03584e83dd8f08e3de510212c1" + integrity sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg== + dependencies: + "@types/katex" "^0.16.0" + devlop "^1.0.0" + katex "^0.16.0" + micromark-factory-space "^2.0.0" + micromark-util-character "^2.0.0" + micromark-util-symbol "^2.0.0" + micromark-util-types "^2.0.0" + micromark-factory-destination@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz#8fef8e0f7081f0474fbdd92deb50c990a0264639" @@ -830,12 +947,12 @@ micromark-util-symbol@^2.0.0: resolved "https://registry.yarnpkg.com/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz#e5da494e8eb2b071a0d08fb34f6cefec6c0a19b8" integrity sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q== -micromark-util-types@^2.0.0: +micromark-util-types@2.0.1, micromark-util-types@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/micromark-util-types/-/micromark-util-types-2.0.1.tgz#a3edfda3022c6c6b55bfb049ef5b75d70af50709" integrity sha512-534m2WhVTddrcKVepwmVEVnUAmtrx9bfIjNoQHRqfnvdaHQiFytEhJoTgpWJvDEXCO5gLTQh3wYC1PgOJA4NSQ== -micromark@^4.0.0: +micromark@4.0.1, micromark@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/micromark/-/micromark-4.0.1.tgz#294c2f12364759e5f9e925a767ae3dfde72223ff" integrity sha512-eBPdkcoCNvYcxQOAKAlceo5SNdzZWfF+FcSupREAzdAh9rRmE239CEQAiTwIgblwnoM8zzj35sZ5ZwvSEOF6Kw== @@ -936,6 +1053,19 @@ ora@^8.1.1: string-width "^7.2.0" strip-ansi "^7.1.0" +parse-entities@^4.0.0: + version "4.0.2" + resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-4.0.2.tgz#61d46f5ed28e4ee62e9ddc43d6b010188443f159" + integrity sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw== + dependencies: + "@types/unist" "^2.0.0" + character-entities-legacy "^3.0.0" + character-reference-invalid "^2.0.0" + decode-named-character-reference "^1.0.0" + is-alphanumerical "^2.0.0" + is-decimal "^2.0.0" + is-hexadecimal "^2.0.0" + path-is-absolute@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" From ac86d8ebc32fdb89e825268fdfd06d548640b8bd Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Thu, 26 Dec 2024 21:03:35 +0800 Subject: [PATCH 07/26] zh-CN: create `notifications.onClosed` (#25072) Co-authored-by: A1lo --- .../api/notifications/onclosed/index.md | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/notifications/onclosed/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/notifications/onclosed/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/notifications/onclosed/index.md new file mode 100644 index 00000000000000..34c9eae5befba0 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/notifications/onclosed/index.md @@ -0,0 +1,59 @@ +--- +title: notifications.onClosed +slug: Mozilla/Add-ons/WebExtensions/API/notifications/onClosed +l10n: + sourceCommit: 1c0dda60cb2b680a753264b538e2c46776ecd837 +--- + +{{AddonSidebar}} + +当通知被关闭（无论是系统关闭还是用户关闭）时触发。 + +## 语法 + +```js-nolint +browser.notifications.onClosed.addListener(listener) +browser.notifications.onClosed.removeListener(listener) +browser.notifications.onClosed.hasListener(listener) +``` + +事件有三个函数： + +- `addListener(listener)` + - : 为此事件添加监听器。 +- `removeListener(listener)` + - : 停止监听此事件。`listener` 参数是要移除的监听器。 +- `hasListener(listener)` + - : 检查是否已为此事件注册了 `listener`。若正在监听，返回 `true`，否则返回 `false`。 + +## addListener 语法 + +### 参数 + +- `listener` + + - : 当此事件发生时调用的函数。该函数需要你传递下列参数： + + - `notificationId` + - : `string`。被关闭的通知的 ID。 + - `byUser` + - : `boolean`。如果通知是由用户关闭的，则为 `true`，如果是由系统关闭的，则为 `false`。在 Firefox 中该参数不受支持。 + +## 浏览器兼容性 + +{{Compat}} + +## 示例 + +在这个简单的示例中，我们为 `notifications.onClosed` 事件添加一个监听器，以监听系统通知的关闭。当发生这种情况时，我们将打印一段适当的消息到控制台中。 + +```js +browser.notifications.onClosed.addListener((notificationId) => { + console.log(`通知 ${notificationId} 被关闭。`); +}); +``` + +{{WebExtExamples}} + +> [!NOTE] +> 该 API 基于 Chromium 的 [`chrome.notifications`](https://developer.chrome.google.cn/docs/extensions/reference/api/notifications) API。 From 7680b19444a9ab242c3bf2acb80172efc2b58e19 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Thu, 26 Dec 2024 21:04:07 +0800 Subject: [PATCH 08/26] zh-CN: create `omnibox.OnInputEnteredDisposition` (#25080) Co-authored-by: A1lo --- .../oninputentereddisposition/index.md | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/omnibox/oninputentereddisposition/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/omnibox/oninputentereddisposition/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/omnibox/oninputentereddisposition/index.md new file mode 100644 index 00000000000000..2027015f7a9f89 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/omnibox/oninputentereddisposition/index.md @@ -0,0 +1,30 @@ +--- +title: omnibox.OnInputEnteredDisposition +slug: Mozilla/Add-ons/WebExtensions/API/omnibox/OnInputEnteredDisposition +l10n: + sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262 +--- + +{{AddonSidebar}} + +**`omnibox.OnInputEnteredDisposition`** 类型描述了扩展应如何处理用户在地址栏的下拉菜单中的推荐中的选择。 + +它将与选择本身一起传递到 {{WebExtAPIRef("omnibox.onInputEntered")}} 事件监听器中。 + +## 类型 + +该类型的取值是字符串，可以取以下值之一： + +- "currentTab" + - : 在当前标签页中打开选择的内容。 +- "newForegroundTab" + - : 在新标签页中打开选择的内容，并将新标签页置于前台。 +- "newBackgroundTab" + - : 在新后台标签页中打开选择的内容，并保持当前标签页在前台。 + +## 浏览器兼容性 + +{{Compat}} + +> [!NOTE] +> 该 API 基于 Chromium 的 [`chrome.omnibox`](https://developer.chrome.google.cn/docs/extensions/reference/api/omnibox) API。 From 520582cb79c4815a16423e762569362be9410a95 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Thu, 26 Dec 2024 21:04:32 +0800 Subject: [PATCH 09/26] zh-CN: create `notifications.getAll()` (#25075) Co-authored-by: A1lo --- .../api/notifications/getall/index.md | 79 +++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/notifications/getall/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/notifications/getall/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/notifications/getall/index.md new file mode 100644 index 00000000000000..283672c2078a88 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/notifications/getall/index.md @@ -0,0 +1,79 @@ +--- +title: notifications.getAll() +slug: Mozilla/Add-ons/WebExtensions/API/notifications/getAll +l10n: + sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262 +--- + +{{AddonSidebar}} + +获取由当前扩展创建的所有当前活动通知。 + +这是一个返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let gettingAll = browser.notifications.getAll() +``` + +### 参数 + +无。 + +### 返回值 + +[`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，将会以一个对象兑现。所有的活动通知都会是该对象的一个属性，其中属性名为通知 ID 而属性值为描述该通知的 {{WebExtAPIRef("notifications.NotificationOptions")}} 对象。 + +需要注意，你可以通过将 ID 传递给 {{WebExtAPIRef("notifications.create()")}} 来显式定义通知的 ID。如果你不这样做，浏览器会生成一个 ID。显式指定的 ID 是字符串，而生成的 ID 是数字。 + +## 浏览器兼容性 + +{{Compat}} + +## 示例 + +下属示例在用户点击浏览器操作时显示一个通知（如果通知已经在显示了则会清除这一通知）。它使用 `getAll()` 来判断通知是否正在显示： + +```js +const myNotification = "my-notification"; + +function toggleAlarm(all) { + const ids = Object.keys(all); + if (ids.includes(myNotification)) { + browser.notifications.clear(myNotification); + } else { + console.log("显示"); + + browser.notifications.create(myNotification, { + type: "basic", + title: "一个令人印象深刻的标题", + message: "一些有意思的文本内容", + }); + } +} + +function handleClick() { + console.log("被点击"); + browser.notifications.getAll().then(toggleAlarm); +} + +browser.browserAction.onClicked.addListener(handleClick); +``` + +下述示例则打印所有活动通知的标题： + +```js +function logNotifications(all) { + for (const id in all) { + console.log(`标题：${all[id].title}`); + } +} + +browser.notifications.getAll().then(logNotifications); +``` + +{{WebExtExamples}} + +> [!NOTE] +> 该 API 基于 Chromium 的 [`chrome.notifications`](https://developer.chrome.google.cn/docs/extensions/reference/api/notifications) API。 From e2d0b6f8c75544922e3aca8684e7183e49566b23 Mon Sep 17 00:00:00 2001 From: KKangHHee <137751841+KKangHHee@users.noreply.github.com> Date: Fri, 27 Dec 2024 09:02:39 +0900 Subject: [PATCH 10/26] =?UTF-8?q?[ko]=20Status-412=20=EC=8B=A0=EA=B7=9C=20?= =?UTF-8?q?=EB=B2=88=EC=97=AD=20(#25101)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 412 status translate to ko * Remove unneeded * docs: translated status-412 example * Update files/ko/web/http/status/412/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/ko/web/http/status/412/index.md | 53 +++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 files/ko/web/http/status/412/index.md diff --git a/files/ko/web/http/status/412/index.md b/files/ko/web/http/status/412/index.md new file mode 100644 index 00000000000000..d99b1c77dedbfc --- /dev/null +++ b/files/ko/web/http/status/412/index.md @@ -0,0 +1,53 @@ +--- +title: 412 Precondition Failed +slug: Web/HTTP/Status/412 +l10n: + sourceCommit: ba53fe04589c36a2210d7549c003f3016093ef8e +--- + +{{HTTPSidebar}} + +HTTP **`412 Precondition Failed`** [클라이언트 오류](/ko/docs/Web/HTTP/Status#client_error_responses) 상태 코드는 대상 리소스에 대한 액세스가 거부되었음을 나타냅니다. 이는 {{HTTPMethod("GET")}} 또는 {{HTTPMethod("HEAD")}} 이외의 메서드에 대한 [조건부 요청](/ko/docs/Web/HTTP/Conditional_requests)에서 {{HTTPHeader("If-Unmodified-Since")}} 또는 {{HTTPHeader("If-Match")}} 헤더에 정의된 조건이 충족되지 않을 때 발생합니다. 이 경우 요청(일반적으로 리소스 업로드 또는 수정)을 수행할 수 없으며 이 오류 응답이 다시 전송됩니다. + +## 상태 + +```http +412 Precondition Failed +``` + +## 예제 + +### Precondition failed + +```http +ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4" +ETag: W/"0815" +``` + +### Avoiding mid-air collisions + +`ETag`와 {{HTTPHeader("If-Match")}} 헤더를 사용하면 충돌이나 공중 충돌을 방지할 수 있습니다. 예를 들어, 일부 위키 페이지를 편집할 때 콘텐츠가 해시되어 성공적인 응답의 `ETag`에 입력됩니다. + +```http +ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4" +``` + +위키 페이지에 변경 사항을 저장할 때(데이터를 게시할 때), {{HTTPMethod("POST")}} 요청에는 클라이언트가 마지막 편집에서 저장한 ETag 값이 포함된 {{HTTPHeader("If-Match")}} 헤더가 포함되어 서버에서 리소스의 최신 상태를 확인합니다. + +```http +If-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4" +``` + +해시 값이 일치하지 않으면 문서가 그 사이에 편집되었음을 의미하며, 이 경우 `412 Precondition Failed` 오류가 발생합니다. + +## 명세서 + +{{Specifications}} + +## 같이 보기 + +- [HTTP 상태 코드](/ko/docs/Web/HTTP/Status) +- [HTTP 조건부 요청](/ko/docs/Web/HTTP/Conditional_requests) +- {{HTTPStatus("304")}} +- {{HTTPHeader("If-Unmodified-Since")}}, {{HTTPHeader("If-Match")}} +- {{HTTPStatus("428")}} From f680575848908ce31c07fb90c5687b5b81c302ff Mon Sep 17 00:00:00 2001 From: Firefly <45487685+Snoopy1866@users.noreply.github.com> Date: Fri, 27 Dec 2024 09:30:25 +0800 Subject: [PATCH 11/26] [es] fix the broken image link (#25230) --- .../extensions/forms/your_first_form/index.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/files/es/learn_web_development/extensions/forms/your_first_form/index.md b/files/es/learn_web_development/extensions/forms/your_first_form/index.md index fca7b0b0d843fa..96e7fe3a728744 100644 --- a/files/es/learn_web_development/extensions/forms/your_first_form/index.md +++ b/files/es/learn_web_development/extensions/forms/your_first_form/index.md @@ -14,7 +14,7 @@ El primer artículo de nuestra serie te proporciona una primera experiencia de c Prerrequisitos: Conocimientos básicos de informática y de - lenguaje HTML. + lenguaje HTML. @@ -47,7 +47,7 @@ Diseñar formularios es un paso importante cuando creas un sitio web o una aplic En este artículo, vamos a crear un formulario de contacto sencillo. Hagamos un esbozo. -![Esbozo aproximado del formulario que vamos a construir](/files/4579/form-sketch-low.jpg) +![Esbozo aproximado del formulario que vamos a construir](form-sketch-low.jpg) Nuestro formulario va a tener tres campos de texto y un botón. Le pedimos al usuario su nombre, su correo electrónico y el mensaje que desea enviar. Al pulsar el botón sus datos se enviarán a un servidor web. @@ -57,7 +57,7 @@ De acuerdo, intentemos crear el HTML para nuestro formulario. Vamos a utilizar l Antes de continuar, haz una copia local de nuestra [plantilla HTML simple](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html): introduce aquí tu formulario HTML. -### El elemento {{HTMLelement("form")}} +### El elemento `form` Todos los formularios comienzan con un elemento {{HTMLelement("form")}}, como este: @@ -65,7 +65,7 @@ Todos los formularios comienzan con un elemento {{HTMLelement("form")}}, como es
``` -Este elemento define formalmente un formulario. Es un elemento contenedor, como un elemento {{HTMLelement("section")}} o {{HTMLelement("footer")}}, pero específico para contener formularios; también admite algunos atributos específicos para la configuración de la forma en que se comporta el formulario. Todos sus atributos son opcionales, pero es una práctica estándar establecer siempre al menos los atributos [`action`](/es/docs/Web/HTML/Attributes/action) y [`method`](/es/docs/Web/HTML/Attributes/method): +Este elemento define formalmente un formulario. Es un elemento contenedor, como un elemento {{HTMLelement("section")}} o {{HTMLelement("footer")}}, pero específico para contener formularios; también admite algunos atributos específicos para la configuración de la forma en que se comporta el formulario. Todos sus atributos son opcionales, pero es una práctica estándar establecer siempre al menos los atributos [`action`](/es/docs/Web/HTML/Element/form#action) y [`method`](/es/docs/Web/HTML/Element/form#method): - El atributo `action` define la ubicación (URL) donde se envían los datos que el formulario ha recopilado cuando se validan. - El atributo `method` define con qué método HTTP se envían los datos (generalmente `get` o `post`). @@ -75,7 +75,7 @@ Este elemento define formalmente un formulario. Es un elemento contenedor, como Por ahora, añade el elemento {{htmlelement("form")}} anterior a tu elemento HTML {{htmlelement("body")}}. -### Los elementos {{HTMLelement("label")}}, {{HTMLelement("input")}} y {{HTMLelement("textarea")}} +### Los elementos `