chore: seed chinese traditional (#42005)
Seeds the chinese traditional files manually so we can deploy to staging.
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
e46e80e08f
commit
3da4be21bb
@ -0,0 +1,113 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08830
|
||||
title: 給表單添加提交按鈕
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cp2Nkhz'
|
||||
forumTopicId: 16627
|
||||
dashedName: add-a-submit-button-to-a-form
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
讓我們來給表單添加一個 `submit`（提交）按鈕。 點擊提交按鈕時，表單中的數據將會被髮送到 `action` 屬性指定的 URL 上。
|
||||
|
||||
例如：
|
||||
|
||||
```html
|
||||
<button type="submit">this button submits the form</button>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `form` 的底部創建一個按鈕，按鈕的類型爲 `submit`，文本爲 `Submit`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的 `form` 裏面應該有一個 `button`。
|
||||
|
||||
```js
|
||||
assert($('form').children('button').length > 0);
|
||||
```
|
||||
|
||||
按鈕的 `type` 屬性值應爲 `submit`。
|
||||
|
||||
```js
|
||||
assert($('button').attr('type') === 'submit');
|
||||
```
|
||||
|
||||
提交按鈕的文本應爲 `Submit` 。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('button')
|
||||
.text()
|
||||
.match(/^\s*submit\s*$/gi)
|
||||
);
|
||||
```
|
||||
|
||||
`button` 元素應有結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/button>/g) &&
|
||||
code.match(/<button/g) &&
|
||||
code.match(/<\/button>/g).length === code.match(/<button/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08812
|
||||
title: 給網站添加圖片
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EbJf2'
|
||||
forumTopicId: 16640
|
||||
dashedName: add-images-to-your-website
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你可以使用 `img` 元素來爲你的網站添加圖片，其中 `src` 屬性指向圖片的地址。
|
||||
|
||||
例如：
|
||||
|
||||
```html
|
||||
<img src="https://www.freecatphotoapp.com/your-image.jpg">
|
||||
```
|
||||
|
||||
注意：`img` 元素是沒有結束標籤的。
|
||||
|
||||
所有的 `img` 元素**必須**有 `alt` 屬性。 `alt` 的屬性值有兩個作用，第一個作用是讓屏幕閱讀器可以知曉圖片的內容，這會對網頁的可訪問性有很大提升；另一個作用是當圖片無法加載時，頁面需要顯示的替代文本。
|
||||
|
||||
**注意：**如果圖片是純裝飾性的，把 `alt` 的屬性值設置爲空是最佳實踐。
|
||||
|
||||
理想情況下，`alt` 屬性不應該包含特殊字符，除非有特殊需要。
|
||||
|
||||
讓我們給上面例子的 `img` 添加 `alt` 屬性。
|
||||
|
||||
```html
|
||||
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
讓我們給網站添加圖片：
|
||||
|
||||
在 `main` 元素裏，給 `p` 元素前面插入一個 `img` 元素。
|
||||
|
||||
現在設置 `src` 屬性，以便它指向網址 `https://bit.ly/fcc-relaxing-cat`
|
||||
|
||||
最後，不要忘記給 `img` 加上 `alt` 屬性。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的網頁上應該有一張圖片。
|
||||
|
||||
```js
|
||||
assert($('img').length);
|
||||
```
|
||||
|
||||
你的圖片應該有一個 `src` 屬性，其值爲貓咪圖片的 url。
|
||||
|
||||
```js
|
||||
assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($('img').attr('src')));
|
||||
```
|
||||
|
||||
你的圖片元素的 `alt` 屬性值不應爲空。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').attr('alt') &&
|
||||
$('img').attr('alt').length &&
|
||||
/<img\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(
|
||||
__helpers.removeWhiteSpace(code)
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,108 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08830
|
||||
title: 給輸入框添加佔位符文本
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cKdJDhg'
|
||||
forumTopicId: 16647
|
||||
dashedName: add-placeholder-text-to-a-text-field
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
佔位符文本用戶在 `input` 輸入框中輸入任何東西前的預定義文本。
|
||||
|
||||
你可以像這樣創建一個佔位符：
|
||||
|
||||
```html
|
||||
<input type="text" placeholder="this is placeholder text">
|
||||
```
|
||||
|
||||
**注意：**別忘了 `input` 元素是 "自閉和標籤"，即不需要結束標籤。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 `input` 輸入框的 `placeholder` 佔位符文本設置爲 "cat photo URL"。
|
||||
|
||||
# --hints--
|
||||
|
||||
給現有的 `input` 輸入框添加一個 `placeholder` 屬性。
|
||||
|
||||
```js
|
||||
assert($('input[placeholder]').length > 0);
|
||||
```
|
||||
|
||||
設置 `placeholder` 屬性的值爲 `cat photo URL`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input') &&
|
||||
$('input').attr('placeholder') &&
|
||||
$('input')
|
||||
.attr('placeholder')
|
||||
.match(/cat\s+photo\s+URL/gi)
|
||||
);
|
||||
```
|
||||
|
||||
`input` 元素不該有結束標籤。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<input.*\/?>.*<\/input>/gi));
|
||||
```
|
||||
|
||||
`input` 輸入框的語法必須正確。
|
||||
|
||||
```js
|
||||
assert($('input[type=text]').length > 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text">
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,104 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08835
|
||||
title: 給單選按鈕和複選框添加默認選中項
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cWk3Qh6'
|
||||
forumTopicId: 301094
|
||||
dashedName: check-radio-buttons-and-checkboxes-by-default
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
用 `checked` 屬性把第一個複選框和單選按鈕都設置爲默認選中。
|
||||
|
||||
在一個 input 元素裏面添加 `checked` 這個詞，即可實現。 例如:
|
||||
|
||||
```html
|
||||
<input type="radio" name="test-name" checked>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
把第一個單選按鈕和第一個複選框都設置爲默認選中。
|
||||
|
||||
# --hints--
|
||||
|
||||
表單的第一個多選按鈕應被默認選中。
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').prop('checked'));
|
||||
```
|
||||
|
||||
表單的第一個複選框應被默認選中。
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]').prop('checked'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08804
|
||||
title: 給 HTML 添加註釋
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cGyGbca'
|
||||
forumTopicId: 16782
|
||||
dashedName: comment-out-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
記住：註釋的開始標記是 `<!--`，結束標記是 `-->`。
|
||||
|
||||
現在你需要在 `h2` 元素開始前終止註釋。
|
||||
|
||||
# --instructions--
|
||||
|
||||
註釋掉 `h1` 元素和 `p` 元素，保留 `h2` 元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
應註釋掉 `h1` 元素，這樣它就從網頁上消失了。
|
||||
|
||||
```js
|
||||
assert($('h1').length === 0);
|
||||
```
|
||||
|
||||
`h2` 元素應保持原樣，這樣網頁上還能看到它。
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
應註釋掉 `p` 元素，這樣它就從網頁上消失了。
|
||||
|
||||
```js
|
||||
assert($('p').length === 0);
|
||||
```
|
||||
|
||||
每一個註釋都應以 `-->` 結尾。
|
||||
|
||||
```js
|
||||
assert(code.match(/[^fc]-->/g).length > 1);
|
||||
```
|
||||
|
||||
不要更改 `h1` 元素、`h2` 元素、`p` 元素的順序。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[0] === '<h1>' &&
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[1] === '<h2>' &&
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[2] === '<p>'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!--
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
-->
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!--<h1>Hello World</h1>-->
|
||||
<h2>CatPhotoApp</h2>
|
||||
<!--<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> -->
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08827
|
||||
title: 創建一個無序列表
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cDKVPuv'
|
||||
forumTopicId: 16814
|
||||
dashedName: create-a-bulleted-unordered-list
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML 有一個特定的元素用於創建<dfn>無序列表</dfn>。
|
||||
|
||||
無序列表以 `<ul>` 開始，中間包含一個或多個 `<li>` 元素， 最後以 `</ul>` 結束。
|
||||
|
||||
例如:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>milk</li>
|
||||
<li>cheese</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
會創建一個要點列表，包括 `milk` 和 `cheese`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請刪除頁面底部的兩個 `p` 元素，然後在底部創建一個無序列表，其中包含你認爲貓咪最喜歡的三件東西。
|
||||
|
||||
# --hints--
|
||||
|
||||
應存在一個 `ul` 無序列表。
|
||||
|
||||
```js
|
||||
assert($('ul').length > 0);
|
||||
```
|
||||
|
||||
應在 `ul` 無序列表中添加三個 `li` 條目。
|
||||
|
||||
```js
|
||||
assert($('ul li').length > 2);
|
||||
```
|
||||
|
||||
確保 `ul` 無序列表有結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ul>/gi) &&
|
||||
code.match(/<ul/gi) &&
|
||||
code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length
|
||||
);
|
||||
```
|
||||
|
||||
確保每個 `li` 條目都有結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/li>/gi) &&
|
||||
code.match(/<li[\s>]/gi) &&
|
||||
code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length
|
||||
);
|
||||
```
|
||||
|
||||
每個 `li` 元素不應只包含空字符串或只包含空格。
|
||||
|
||||
```js
|
||||
assert($('ul li').filter((_, item) => !$(item).text().trim()).length === 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<ul>
|
||||
<li>milk</li>
|
||||
<li>mice</li>
|
||||
<li>catnip</li>
|
||||
</ul>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,107 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08830
|
||||
title: 創建一個表單
|
||||
challengeType: 0
|
||||
forumTopicId: 16817
|
||||
dashedName: create-a-form-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
我們可以只通過 HTML 來實現發送數據給服務器的表單， 只需要給 `form` 元素添加 `action` 屬性即可。
|
||||
|
||||
例如：
|
||||
|
||||
```html
|
||||
<form action="/url-where-you-want-to-submit-form-data">
|
||||
<input>
|
||||
</form>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
把現有的 `input` 輸入框放到一個新建的表單 `form` 裏，然後設置 `form` 元素的 `action` 屬性值爲 `"https://freecatphotoapp.com/submit-cat-photo"`。
|
||||
|
||||
# --hints--
|
||||
|
||||
現有的 `input` 輸入框應位於新創建的 `form` 表單裏面。
|
||||
|
||||
```js
|
||||
const inputElem = document.querySelector('form input');
|
||||
assert(
|
||||
inputElem.getAttribute('type') === 'text' &&
|
||||
inputElem.getAttribute('placeholder') === 'cat photo URL'
|
||||
);
|
||||
```
|
||||
|
||||
`form` 的 `action` 屬性值應設置爲 `https://freecatphotoapp.com/submit-cat-photo`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('form').attr('action') === 'https://freecatphotoapp.com/submit-cat-photo'
|
||||
);
|
||||
```
|
||||
|
||||
`form` 元素應有開始標籤和結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/form>/g) &&
|
||||
code.match(/<form [^<]*>/g) &&
|
||||
code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,135 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08835
|
||||
title: 創建一組複選框
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cqrkJsp'
|
||||
forumTopicId: 16821
|
||||
dashedName: create-a-set-of-checkboxes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>checkboxes</dfn>（複選框）就好比多項選擇題，正確答案有多個。
|
||||
|
||||
複選框是 `input` 選擇框的一種類型。
|
||||
|
||||
每一個複選框都應該嵌套在它自己的 `label`（標籤）元素中。 這樣，我們相當於給 `input` 元素和包裹它的 `label` 元素建立起了對應關係。
|
||||
|
||||
所有關聯的複選框應該擁有相同的 `name` 屬性。
|
||||
|
||||
使得 `input` 與 `label` 關聯的最佳實踐是在 `label` 元素上設置 `for` 屬性，讓其值與相關聯的 `input` 複選框的 `id` 屬性值相同。
|
||||
|
||||
下面是一個複選框的例子：
|
||||
|
||||
```html
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
請給表單添加三個複選框， 每個複選框都被嵌套進 `label` 元素中。 並且它們的 `name` 屬性均爲 `personality`。
|
||||
|
||||
# --hints--
|
||||
|
||||
表單中應存在三個複選框。
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]').length > 2);
|
||||
```
|
||||
|
||||
每個複選框都應該被嵌套進 `label` 元素中。
|
||||
|
||||
```js
|
||||
assert($('label > input[type="checkbox"]:only-child').length > 2);
|
||||
```
|
||||
|
||||
確保 `label` 元素有結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/label>/g) &&
|
||||
code.match(/<label/g) &&
|
||||
code.match(/<\/label>/g).length === code.match(/<label/g).length
|
||||
);
|
||||
```
|
||||
|
||||
複選框的 `name` 屬性值均應爲 `personality`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label > input[type="checkbox"]').filter('[name="personality"]').length > 2
|
||||
);
|
||||
```
|
||||
|
||||
每個複選框都應該在 `form` 標籤內。
|
||||
|
||||
```js
|
||||
assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label for="playful"><input id="playful" type="checkbox" name="personality">Playful</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox"
|
||||
name="personality">Lazy</label>
|
||||
<label for="evil"><input id="evil" type="checkbox"
|
||||
name="personality">Evil</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,160 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08834
|
||||
title: 創建一組單選按鈕
|
||||
challengeType: 0
|
||||
forumTopicId: 16822
|
||||
dashedName: create-a-set-of-radio-buttons
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>radio buttons</dfn>（單選按鈕）就好比單項選擇題，正確答案只有一個。
|
||||
|
||||
單選按鈕是 `input` 選擇框的一種類型。
|
||||
|
||||
每一個單選按鈕都應該嵌套在它自己的 `label`（標籤）元素中。 這樣，我們相當於給 `input` 元素和包裹它的 `label` 元素建立起了對應關係。
|
||||
|
||||
所有關聯的單選按鈕應該擁有相同的 `name` 屬性。 創建一組單選按鈕，選中其中一個按鈕，其他按鈕即顯示爲未選中，以確保用戶只提供一個答案。
|
||||
|
||||
下面是一個單選按鈕的例子：
|
||||
|
||||
```html
|
||||
<label>
|
||||
<input type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
```
|
||||
|
||||
最佳實踐是在 `label` 元素上設置 `for` 屬性，讓其值與相關聯的 `input` 單選按鈕的 `id` 屬性值相同。 這使得輔助技術能夠在標籤和相關的 `input` 元素之間建立關聯關係。 例如：
|
||||
|
||||
```html
|
||||
<input id="indoor" type="radio" name="indoor-outdoor">
|
||||
<label for="indoor">Indoor</label>
|
||||
```
|
||||
|
||||
我們也可以在 `label` 標籤中嵌入 `input` 元素：
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
在表格中添加一對單選按鈕，每個按鈕嵌套在自己的 `label` 元素中。 一個選項應該是 `indoor` ，另一個選項應該是 `outdoor`。 兩個按鈕的 `name` 屬性都是 `indoor-outdoor`，以創建一組單選按鈕。
|
||||
|
||||
# --hints--
|
||||
|
||||
頁面上應存在兩個 `radio` 按鈕元素。
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').length > 1);
|
||||
```
|
||||
|
||||
應設置單選按鈕的 `name` 屬性值爲 `indoor-outdoor`。
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
|
||||
```
|
||||
|
||||
每個單選按鈕都應嵌套進它自己的 `label` 元素中。
|
||||
|
||||
```js
|
||||
assert($('label > input[type="radio"]:only-child').length > 1);
|
||||
```
|
||||
|
||||
每一個 `label` 元素都有結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/label>/g) &&
|
||||
code.match(/<label/g) &&
|
||||
code.match(/<\/label>/g).length === code.match(/<label/g).length
|
||||
);
|
||||
```
|
||||
|
||||
其中一個單選按鈕的文本爲 `indoor`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label')
|
||||
.text()
|
||||
.match(/indoor/gi)
|
||||
);
|
||||
```
|
||||
|
||||
其中一個單選按鈕的文本爲 `outdoor`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label')
|
||||
.text()
|
||||
.match(/outdoor/gi)
|
||||
);
|
||||
```
|
||||
|
||||
所有的單選按鈕都應該包含在 `form` 標籤中。
|
||||
|
||||
```js
|
||||
assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,89 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08829
|
||||
title: 創建一個輸入框
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c2EVnf6'
|
||||
forumTopicId: 16823
|
||||
dashedName: create-a-text-field
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
現在讓我們來創建一個 Web 表單。
|
||||
|
||||
`input` 輸入框可以讓你輕鬆獲得用戶的輸入。
|
||||
|
||||
你可以像這樣創建一個文本輸入框：
|
||||
|
||||
```html
|
||||
<input type="text">
|
||||
```
|
||||
|
||||
注意 `input` 輸入框是沒有結束標籤的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在列表下面創建一個類型爲 `text` 的 `input` 輸入框。
|
||||
|
||||
# --hints--
|
||||
|
||||
網頁中應存在一個類型爲 `text` 的 `input` 輸入框。
|
||||
|
||||
```js
|
||||
assert($('input[type=text]').length > 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
|
||||
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form>
|
||||
<input type="text">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,157 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08828
|
||||
title: 創建一個有序列表
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cQ3B8TM'
|
||||
forumTopicId: 16824
|
||||
dashedName: create-an-ordered-list
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML 中有用於創建<dfn>有序列表</dfn>的特定元素。
|
||||
|
||||
有序列表以 `<ol>` 開始，中間包含一個或多個 `<li>` 元素。 最後以 `</ol>` 結束。
|
||||
|
||||
例如:
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>Garfield</li>
|
||||
<li>Sylvester</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
將創建一個包含 `Garfield` 和 `Sylvester` 的編號列表。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請創建一個有序列表，內容是貓咪最討厭的三樣東西。
|
||||
|
||||
# --hints--
|
||||
|
||||
應包含一個有序列表，內容是貓咪最討厭的三樣東西（`Top 3 things cats hate:`）。
|
||||
|
||||
```js
|
||||
assert(/Top 3 things cats hate:/i.test($('ol').prev().text()));
|
||||
```
|
||||
|
||||
應包含有一個無序列表，內容是貓咪最喜歡的東西（`Things cats love:`）。
|
||||
|
||||
```js
|
||||
assert(/Things cats love:/i.test($('ul').prev().text()));
|
||||
```
|
||||
|
||||
頁面應只包含一個 `ul` 元素。
|
||||
|
||||
```js
|
||||
assert.equal($('ul').length, 1);
|
||||
```
|
||||
|
||||
頁面應只包含一個 `ol` 元素。
|
||||
|
||||
```js
|
||||
assert.equal($('ol').length, 1);
|
||||
```
|
||||
|
||||
`ul` 無序列表中應包含 3 個 `li` 元素。
|
||||
|
||||
```js
|
||||
assert.equal($('ul li').length, 3);
|
||||
```
|
||||
|
||||
`ol` 有序列表應該包含 3 個 `li` 元素。
|
||||
|
||||
```js
|
||||
assert.equal($('ol li').length, 3);
|
||||
```
|
||||
|
||||
`ul` 無序列表應有結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ul>/g) &&
|
||||
code.match(/<\/ul>/g).length === code.match(/<ul>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
`ol` 有序列表應有結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ol>/g) &&
|
||||
code.match(/<\/ol>/g).length === code.match(/<ol>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
`li` 元素應有結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/li>/g) &&
|
||||
code.match(/<li>/g) &&
|
||||
code.match(/<\/li>/g).length === code.match(/<li>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
無序列表裏的 `li` 元素內容不應爲空。
|
||||
|
||||
```js
|
||||
$('ul li').each((i, val) =>
|
||||
assert(__helpers.removeWhiteSpace(val.textContent))
|
||||
);
|
||||
```
|
||||
|
||||
有序列表裏的 `li` 元素內容不應該爲空。
|
||||
|
||||
```js
|
||||
$('ol li').each((i, val) =>
|
||||
assert(!!__helpers.removeWhiteSpace(val.textContent))
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>hate 1</li>
|
||||
<li>hate 2</li>
|
||||
<li>hate 3</li>
|
||||
</ol>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aed
|
||||
title: 聲明 HTML 的文檔類型
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cra98AJ'
|
||||
forumTopicId: 301095
|
||||
dashedName: declare-the-doctype-of-an-html-document
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
之前的挑戰涵蓋了一些 HTML 元素和它們的用法。 另外有些元素爲頁面提供了整體結構，每個 HTML 文檔中都應該有這些元素。
|
||||
|
||||
在文檔的頂部，我們需要告訴瀏覽器網頁所使用的 HTML 的版本。 HTML 是一個在不停發展的語言，大部分瀏覽器都支持 HTML 的最新標準，也就是 HTML5。 大部分主流瀏覽器都支持最新的 HTML5 規範。 但是一些陳舊的網頁可能使用的是老版本的 HTML。
|
||||
|
||||
你可以通過 `<!DOCTYPE ...>` 來告訴瀏覽器頁面上使用的 HTML 版本，"`...`" 部分就是版本號。 `<!DOCTYPE html>` 對應的就是 HTML5。
|
||||
|
||||
`!` 和大寫的 `DOCTYPE` 是很重要的，尤其是對那些老的瀏覽器。 但 `html` 無論大寫小寫都可以。
|
||||
|
||||
所有的 HTML 代碼都必須位於 `html` 標籤中。 其中 `<html>` 位於 `<!DOCTYPE html>` 之後，`</html>` 位於網頁的結尾。
|
||||
|
||||
這是一個網頁結構的列子。 你的 HTML 代碼會在兩個 `html` 標籤之間。
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
請在代碼編輯器的頂部添加一個 `DOCTYPE` 爲 HTML5 的聲明。 在它下面添加 `html` 開始和結束標籤，其中包裹一個 `h1` 元素。 標題可以包括任何文本。
|
||||
|
||||
# --hints--
|
||||
|
||||
網頁中應包含 `<!DOCTYPE html>` 標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
|
||||
```
|
||||
|
||||
網頁中應只存在一個 `html` 元素。
|
||||
|
||||
```js
|
||||
assert($('html').length == 1);
|
||||
```
|
||||
|
||||
`h1` 元素應該位於 `html` 元素內部。
|
||||
|
||||
```js
|
||||
assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<h1> Hello world </h1>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aec
|
||||
title: 定義 HTML 文檔的 head 和 body
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
|
||||
forumTopicId: 301096
|
||||
dashedName: define-the-head-and-body-of-an-html-document
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`html` 的結構主要分爲兩大部分：`head` 和 `body`。 網頁的描述應放入 `head` 標籤， 網頁的內容（向用戶展示的）則應放入 `body` 標籤。
|
||||
|
||||
比如 `link`、`meta`、`title` 和 `style` 都應放入 `head` 標籤。
|
||||
|
||||
這是網頁佈局的一個例子：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
標記文本的結構主要分爲兩大部分：`head` 和 `body`。 `head` 元素應只包含 `title`，`body` 元素應該包含 `h1` 和 `p`。
|
||||
|
||||
# --hints--
|
||||
|
||||
網頁應只有一個 `head` 元素。
|
||||
|
||||
```js
|
||||
const headElems = code.replace(/\n/g, '').match(/\<head\s*>.*?\<\/head\s*>/g);
|
||||
assert(headElems && headElems.length === 1);
|
||||
```
|
||||
|
||||
網頁應只有一個 `body` 元素。
|
||||
|
||||
```js
|
||||
const bodyElems = code.replace(/\n/g, '').match(/<body\s*>.*?<\/body\s*>/g);
|
||||
assert(bodyElems && bodyElems.length === 1);
|
||||
```
|
||||
|
||||
`head` 應爲 `html` 的子元素。
|
||||
|
||||
```js
|
||||
const htmlChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<html\s*>(?<children>.*)<\/html\s*>/);
|
||||
let foundHead;
|
||||
if (htmlChildren) {
|
||||
const { children } = htmlChildren.groups;
|
||||
|
||||
foundHead = children.match(/<head\s*>.*<\/head\s*>/);
|
||||
}
|
||||
assert(foundHead);
|
||||
```
|
||||
|
||||
`body` 應爲 `html` 的子元素。
|
||||
|
||||
```js
|
||||
const htmlChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<html\s*>(?<children>.*?)<\/html\s*>/);
|
||||
let foundBody;
|
||||
if (htmlChildren) {
|
||||
const { children } = htmlChildren.groups;
|
||||
foundBody = children.match(/<body\s*>.*<\/body\s*>/);
|
||||
}
|
||||
assert(foundBody);
|
||||
```
|
||||
|
||||
`title` 應爲 `head` 的子元素。
|
||||
|
||||
```js
|
||||
const headChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<head\s*>(?<children>.*?)<\/head\s*>/);
|
||||
let foundTitle;
|
||||
if (headChildren) {
|
||||
const { children } = headChildren.groups;
|
||||
foundTitle = children.match(/<title\s*>.*?<\/title\s*>/);
|
||||
}
|
||||
assert(foundTitle);
|
||||
```
|
||||
|
||||
`h1` 和 `p` 都應爲 `body` 的子元素。
|
||||
|
||||
```js
|
||||
const bodyChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<body\s*>(?<children>.*?)<\/body\s*>/);
|
||||
let foundElems;
|
||||
if (bodyChildren) {
|
||||
const { children } = bodyChildren.groups;
|
||||
const h1s = children.match(/<h1\s*>.*<\/h1\s*>/g);
|
||||
const ps = children.match(/<p\s*>.*<\/p\s*>/g);
|
||||
const numH1s = h1s ? h1s.length : 0;
|
||||
const numPs = ps ? ps.length : 0;
|
||||
foundElems = numH1s === 1 && numPs === 1;
|
||||
}
|
||||
assert(foundElems);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>The best page ever</title>
|
||||
|
||||
<h1>The best page ever</h1>
|
||||
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>The best page ever</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>The best page ever</h1>
|
||||
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,56 @@
|
||||
---
|
||||
id: bad87fed1348bd9aedf08833
|
||||
title: 刪除 HTML 元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/ckK73C9'
|
||||
forumTopicId: 17559
|
||||
dashedName: delete-html-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
手機屏幕的空間是有限的。
|
||||
|
||||
讓我們刪除不必要的元素，開始設計我們的 CatPhotoApp。
|
||||
|
||||
# --instructions--
|
||||
|
||||
任務：刪除 `h1` 元素以簡化視圖。
|
||||
|
||||
# --hints--
|
||||
|
||||
應刪除 `h1` 元素。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
|
||||
```
|
||||
|
||||
應保留 `h2` 元素。
|
||||
|
||||
```js
|
||||
assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
|
||||
```
|
||||
|
||||
應保留 `p` 元素。
|
||||
|
||||
```js
|
||||
assert(code.match(/<p>[\w\W]*<\/p>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2><p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
@ -0,0 +1,50 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08833
|
||||
title: 用佔位符文本填充空白
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cgR7Dc7'
|
||||
forumTopicId: 18178
|
||||
dashedName: fill-in-the-blank-with-placeholder-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Web 開發者通常用 <dfn>lorem ipsum text</dfn> 來做佔位符。 lorem ipsum text 是從古羅馬西塞羅的一段著名經文中隨機抽取的。
|
||||
|
||||
Lorem ipsum text 自 16 世紀以來就在排版中被用作佔位符，這一習慣也在 Web 開發中得以延續。
|
||||
|
||||
五個世紀已經很久遠了。 因爲我們正在構建一個 CatPhotoApp，所以我們使用 “kitty ipsum” 文本。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`p` 元素的內容文本應包含 `Kitty ipsum`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的 `p` 元素應包含 “kitty ipsum” 文本的前面幾個詞。
|
||||
|
||||
```js
|
||||
assert.isTrue(/Kitty(\s)+ipsum/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Hello Paragraph</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff</p>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf0887a
|
||||
title: 用 h2 元素代表副標題
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gqf3'
|
||||
forumTopicId: 18196
|
||||
dashedName: headline-with-the-h2-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在接下來的幾節課裏，我們將會一步一步地製作一個展示貓咪圖片的 HTML5 app。
|
||||
|
||||
這節課中，我們將會爲頁面引入作爲第二級標題的 `h2` 元素。
|
||||
|
||||
這些元素用來告訴瀏覽器網站的結構是什麼樣子。 `h1` 元素通常被用作主標題，`h2` 元素通常被用作副標題， 還有 `h3`、`h4`、`h5`、`h6` 元素，它們分別用作不同級別的標題。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在內容爲 "Hello World" 的 `h1` 元素下面創建一個 `h2` 元素，其內容爲 “CatPhotoApp”。
|
||||
|
||||
# --hints--
|
||||
|
||||
應創建一個 `h2` 元素。
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
`h2` 元素應該有結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/h2>/g) &&
|
||||
code.match(/<\/h2>/g).length === code.match(/<h2>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
`h2` 元素的內容應爲：`CatPhotoApp`。
|
||||
|
||||
```js
|
||||
assert.isTrue(/cat(\s)?photo(\s)?app/gi.test($('h2').text()));
|
||||
```
|
||||
|
||||
`h1` 元素的內容應爲：`Hello World`。
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
```
|
||||
|
||||
`h1` 元素應出現在 `h2` 元素之前。
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1>\s*?.*?\s*?<\/h1>\s*<h2>\s*?.*?\s*?<\/h2>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
```
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08801
|
||||
title: 用 p 元素代表段落
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/ceZ7DtN'
|
||||
forumTopicId: 18202
|
||||
dashedName: inform-with-the-paragraph-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`p` 元素是網站上段落文本使用的元素。 `p` 是“paragraph（段落）”的縮寫。
|
||||
|
||||
你可以像這樣創建一個段落：
|
||||
|
||||
```html
|
||||
<p>I'm a p tag!</p>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `h2` 元素下方添加一個 `p` 元素，其內容是 `Hello Paragraph`。
|
||||
|
||||
**注意：**按照慣例，所有 HTML 標籤都應該是小寫字母，例如應使用 `<p></p>`，而不會使用 `<P></P>`。
|
||||
|
||||
# --hints--
|
||||
|
||||
應包含一個 `p` 元素。
|
||||
|
||||
```js
|
||||
assert($('p').length > 0);
|
||||
```
|
||||
|
||||
`p` 元素的內容文本應爲 `Hello Paragraph`。
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+paragraph/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
`p` 元素應有結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
<p>Hello Paragraph</p>
|
||||
```
|
||||
@ -0,0 +1,98 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecf08801
|
||||
title: HTML5 元素介紹
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cBkZGpt7'
|
||||
forumTopicId: 301097
|
||||
dashedName: introduction-to-html5-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 引入了很多更具描述性的 HTML 元素， 包括 `main`、`header`、`footer`、`nav`、`video`、`article`、`section` 等等。
|
||||
|
||||
這些元素讓 HTML 更易讀，同時有助於搜索引擎優化和無障礙訪問。 `main` 元素讓搜索引擎和開發者能很快地找到網頁的主要內容。
|
||||
|
||||
舉個例子，下面的 `main` 元素嵌套了兩個子元素：
|
||||
|
||||
```html
|
||||
<main>
|
||||
<h1>Hello World</h1>
|
||||
<p>Hello Paragraph</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
**提示：**在後面的應用無障礙課程中我們會接觸到更多新的 HTML5 元素，以及明白它們的用處。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請在現有的 `p` 之後創建一個新的 `p` 元素，內容爲：`Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.`
|
||||
|
||||
然後，請添加一個 `main` 元素，作爲現有的兩個 `p` 元素的父級元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
頁面中應該有兩個 `p` 元素。
|
||||
|
||||
```js
|
||||
assert($('p').length > 1);
|
||||
```
|
||||
|
||||
每個 `p` 元素都應有結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
新建的`p` 元素應包含 `kitty ipsum text` 的前面幾個詞。
|
||||
|
||||
```js
|
||||
assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
應該存在 `main` 元素。
|
||||
|
||||
```js
|
||||
assert($('main').length === 1);
|
||||
```
|
||||
|
||||
`main` 元素應有兩個段落元素作爲它的子元素。
|
||||
|
||||
```js
|
||||
assert($('main').children('p').length === 2);
|
||||
```
|
||||
|
||||
`main` 的開始標籤應位於第一個段落之前。
|
||||
|
||||
```js
|
||||
assert(code.match(/<main>\s*?<p>/g));
|
||||
```
|
||||
|
||||
`main` 的結束標籤應位於第二個段落之後。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/p>\s*?<\/main>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08816
|
||||
title: 用 a 實現網頁間的跳轉
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EkncB'
|
||||
forumTopicId: 18226
|
||||
dashedName: link-to-external-pages-with-anchor-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你可以用 `a`（Anchor，簡寫爲 a）來實現網頁間的跳轉。
|
||||
|
||||
`a` 需要一個 `href` 屬性指向跳轉的目的地。 同時，它還應有內容。 例如：
|
||||
|
||||
```html
|
||||
<a href="https://freecodecamp.org">this links to freecodecamp.org</a>
|
||||
```
|
||||
|
||||
瀏覽器將顯示文本 `this links to freecodecamp.org`，這是一個可點擊的鏈接。 你可以通過這個鏈接訪問 `https://www.freecodecamp.org`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
創建一個內容文本爲 “cat photos” 的 `a` 元素，鏈接指向 `https://freecatphotoapp.com`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`a` 元素應有錨文本 `cat photos`。
|
||||
|
||||
```js
|
||||
assert(/cat photos/gi.test($('a').text()));
|
||||
```
|
||||
|
||||
你的 `a` 元素應鏈接到 `https://freecatphotoapp.com`
|
||||
|
||||
```js
|
||||
assert(/^https?:\/\/freecatphotoapp\.com\/?$/i.test($('a').attr('href')));
|
||||
```
|
||||
|
||||
確保 `a` 元素有結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<a href="https://freecatphotoapp.com">cat photos</a>
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,120 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08816
|
||||
title: 用 a 實現網頁內部跳轉
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cyrDRUL'
|
||||
forumTopicId: 301098
|
||||
dashedName: link-to-internal-sections-of-a-page-with-anchor-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`a`（*anchor*）元素也可以用於創建內部鏈接，跳轉到網頁內的各個不同部分。
|
||||
|
||||
要創建內部鏈接，你需要將鏈接的 `href` 屬性值設置爲一個哈希符號 `#` 加上你想內部鏈接到的元素的 `id`，通常是在網頁下方的元素。 然後你需要將相同的 `id` 屬性添加到你鏈接到的元素中。 `id` 是描述網頁元素的一個屬性，它的值在整個頁面中唯一。
|
||||
|
||||
當用戶點擊了 `Contacts` 鏈接，頁面就會跳轉到網頁的 **Contacts** 區域。
|
||||
|
||||
```html
|
||||
<a href="#contacts-header">Contacts</a>
|
||||
...
|
||||
<h2 id="contacts-header">Contacts</h2>
|
||||
```
|
||||
|
||||
當用戶點擊 `Contacts` 鏈接，可以訪問網頁中帶有 **Contacts** 標題元素的部分。
|
||||
|
||||
# --instructions--
|
||||
|
||||
通過修改 `href` 屬性值爲 `"#footer"`，同時修改文本 `cat photos` 爲 `Jump to Bottom`，來更改外部鏈接爲內部鏈接。
|
||||
|
||||
然後添加一個 `<footer>` 元素，並將它的 `id` 屬性值設置爲 `footer`。
|
||||
|
||||
然後給頁面底部的 `<footer>` 元素添加一個 `id` 屬性，值爲 `footer`。
|
||||
|
||||
# --hints--
|
||||
|
||||
頁面中應只存在一個 `footer` 元素。
|
||||
|
||||
```js
|
||||
assert($('a').length == 1);
|
||||
```
|
||||
|
||||
`a` 的 `href` 屬性值應爲 `#footer`。
|
||||
|
||||
```js
|
||||
assert($('footer').length == 1);
|
||||
```
|
||||
|
||||
`a` 不應有 `target` 屬性。
|
||||
|
||||
```js
|
||||
assert($('a').eq(0).attr('href') == '#footer');
|
||||
```
|
||||
|
||||
`a` 的內容文本應爲 `Jump to Bottom`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof $('a').eq(0).attr('target') == typeof undefined ||
|
||||
$('a').eq(0).attr('target') == true
|
||||
);
|
||||
```
|
||||
|
||||
`footer` 元素的 `id` 屬性值應爲 `footer`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.eq(0)
|
||||
.text()
|
||||
.match(/Jump to Bottom/gi)
|
||||
);
|
||||
```
|
||||
|
||||
`footer` 標籤應該有一個 `id` 屬性，值爲 “footer”。
|
||||
|
||||
```js
|
||||
assert($('footer').eq(0).attr('id') == 'footer');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
|
||||
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>Copyright Cat Photo App</footer>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="#footer">Jump to Bottom</a>
|
||||
|
||||
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
|
||||
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer id="footer">Copyright Cat Photo App</footer>
|
||||
```
|
||||
@ -0,0 +1,58 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08817
|
||||
title: '用 # 號來創建鏈接佔位符'
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cMdkytL'
|
||||
forumTopicId: 18230
|
||||
dashedName: make-dead-links-using-the-hash-symbol
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
有時你想爲網站添加一個 `a` 元素，但還不確定要將它鏈接到哪裏。
|
||||
|
||||
當你使用 `JavaScript` 更改鏈接的指向時，這也很方便，我們將在後面的課程中介紹。
|
||||
|
||||
# --instructions--
|
||||
|
||||
目前，`href` 的屬性值是 "`https://freecatphotoapp.com`"。 請將 `href` 屬性的值替換爲`#`，以此來創建鏈接佔位符。
|
||||
|
||||
例如: `href="#"`
|
||||
|
||||
# --hints--
|
||||
|
||||
`a` 的 `href` 屬性值應爲 "#"。
|
||||
|
||||
```js
|
||||
assert($('a').attr('href') === '#');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a>.</p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#" target="_blank">cat photos</a>.</p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,164 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08817
|
||||
title: 將 a 嵌套在段落中
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cb6k8Cb'
|
||||
forumTopicId: 18244
|
||||
dashedName: nest-an-anchor-element-within-a-paragraph
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你可以在其他文本元素內嵌套鏈接。
|
||||
|
||||
```html
|
||||
<p>
|
||||
Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.
|
||||
</p>
|
||||
```
|
||||
|
||||
讓我們來拆解一下這個例子。 通常，文本是被包裹在 `p` 元素內：
|
||||
|
||||
```html
|
||||
<p> Here's a ... for you to follow. </p>
|
||||
```
|
||||
|
||||
接下來是*錨點*元素 `<a>`（它需要結束標籤 `</a>`）：
|
||||
|
||||
```html
|
||||
<a> ... </a>
|
||||
```
|
||||
|
||||
`target` 是錨點元素的一個屬性，它用來指定鏈接的打開方式。 屬性值 `_blank` 表示鏈接會在新標籤頁打開。 `href` 是錨點元素的另一個屬性，它用來指定鏈接的 URL：
|
||||
|
||||
```html
|
||||
<a href="http://freecodecamp.org"> ... </a>
|
||||
```
|
||||
|
||||
`a` 元素內的文本 `link to freecodecamp.org` 叫作<dfn>錨文本</dfn>，會顯示爲一個可以點擊的鏈接：
|
||||
|
||||
```html
|
||||
<a href=" ... ">link to freecodecamp.org</a>
|
||||
```
|
||||
|
||||
此示例的最終輸出結果是這樣：
|
||||
|
||||
Here's a [link to freecodecamp.org](http://freecodecamp.org) for you to follow.
|
||||
|
||||
# --instructions--
|
||||
|
||||
創建一個新的段落 `p` 元素來包裹 `a` 元素。 新段落應有文本 `View more cat photos`，其中 `cat photos` 是一個鏈接，其餘是純文本。
|
||||
|
||||
# --hints--
|
||||
|
||||
應該只有一個 `a` 元素。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a').length === 1
|
||||
);
|
||||
```
|
||||
|
||||
`a` 元素應該鏈接到 “`https://freecatphotoapp.com`”。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://freecatphotoapp.com"]').length === 1
|
||||
);
|
||||
```
|
||||
|
||||
`a` 元素應有錨文本 `cat photos`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.text()
|
||||
.match(/cat\sphotos/gi)
|
||||
);
|
||||
```
|
||||
|
||||
應該創建一個新的 `p` 元素。 頁面中應至少包含 3 個 `p` 標籤。
|
||||
|
||||
```js
|
||||
assert($('p') && $('p').length > 2);
|
||||
```
|
||||
|
||||
`a` 應嵌套在新創建的 `p` 元素內。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://freecatphotoapp.com"]').parent().is('p')
|
||||
);
|
||||
```
|
||||
|
||||
`p` 元素應該包含文本 `View more`（在它後面有一個空格）。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://freecatphotoapp.com"]')
|
||||
.parent()
|
||||
.text()
|
||||
.match(/View\smore\s/gi)
|
||||
);
|
||||
```
|
||||
|
||||
`a` 元素 <em>不</em> 應有文本 `View more`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
!$('a')
|
||||
.text()
|
||||
.match(/View\smore/gi)
|
||||
);
|
||||
```
|
||||
|
||||
確保每個 `p` 元素有結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<p/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
確保每個 `a` 元素有結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<a/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="https://freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>View more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a></p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,121 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08835
|
||||
title: 元素嵌套
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cNW4kC3'
|
||||
forumTopicId: 18246
|
||||
dashedName: nest-many-elements-within-a-single-div-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`div` 元素也叫內容劃分元素，是一個包裹其他元素的通用容器。
|
||||
|
||||
它也是 HTML 中出現頻率最高的元素。
|
||||
|
||||
和其他普通元素一樣，你可以用 `<div>` 來標記一個 `div` 元素的開始，用 `</div>` 來標記一個 `div` 元素的結束。
|
||||
|
||||
# --instructions--
|
||||
|
||||
將你的列表“貓喜歡的三件事”和“貓最討厭的三件事”放入同一個 `div` 元素中。
|
||||
|
||||
提示：你可以在第一個 `<p>` 之前插入 `div` 開始標記，在 `</ol>` 之後插入 `div` 結束標籤。 這樣，所有的列表都會位於 `div` 之內。
|
||||
|
||||
# --hints--
|
||||
|
||||
所有的 `p` 元素都應嵌套在 `div` 元素中。
|
||||
|
||||
```js
|
||||
assert($('div').children('p').length > 1);
|
||||
```
|
||||
|
||||
所有的 `ul` 元素都應嵌套在 `div` 元素中。
|
||||
|
||||
```js
|
||||
assert($('div').children('ul').length > 0);
|
||||
```
|
||||
|
||||
所有的 `ol` 元素都應嵌套在 `div` 元素中。
|
||||
|
||||
```js
|
||||
assert($('div').children('ol').length > 0);
|
||||
```
|
||||
|
||||
`div` 元素應有結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,60 @@
|
||||
---
|
||||
id: bd7123c8c441eddfaeb5bdef
|
||||
title: 向 HTML 元素問好
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gpt2'
|
||||
forumTopicId: 18276
|
||||
dashedName: say-hello-to-html-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
歡迎訪問 freeCodeCamp 的 HTML 編程挑戰。 這些挑戰將會幫助你逐步掌握 Web 開發。
|
||||
|
||||
首先，我們來用 HTML 製作一個簡單的網頁。 你可以直接在網頁內置的代碼編輯器中編輯代碼。
|
||||
|
||||
你看到編輯器中的 `<h1>Hello</h1>` 了嗎？ 那是一個 HTML 元素。
|
||||
|
||||
大部分 HTML 元素都有一個開始標籤和一個結束標籤。
|
||||
|
||||
開始標籤像這樣：
|
||||
|
||||
```html
|
||||
<h1>
|
||||
```
|
||||
|
||||
結束標籤像這樣：
|
||||
|
||||
```html
|
||||
</h1>
|
||||
```
|
||||
|
||||
開始標籤和結束標籤的唯一區別就是結束標籤多了一個斜槓。
|
||||
|
||||
每個挑戰都有測試，任何時候你點擊“運行測試”按鈕，就可以運行測試。 如果代碼通過測試，將會彈出一個窗口，你就可以進入下一個挑戰。
|
||||
|
||||
# --instructions--
|
||||
|
||||
要通過這個挑戰的測試，需要修改 `h1` 元素的文本爲 `Hello World`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 元素的內容文本應爲 `Hello World`。
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
```
|
||||
@ -0,0 +1,80 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08820
|
||||
title: 給圖片添加鏈接
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cRdBnUr'
|
||||
forumTopicId: 18327
|
||||
dashedName: turn-an-image-into-a-link
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你可以通過把元素嵌套進 `a` 裏使其變成一個鏈接。
|
||||
|
||||
如果我們要把圖片嵌套進 `a` 元素， 可以這樣寫：
|
||||
|
||||
```html
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>
|
||||
```
|
||||
|
||||
如果把 `a` 的 `href` 屬性值設置爲 `#`，創建的是一個死鏈接（不跳轉到其他畫面）。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請把現存的圖片嵌套進 `a`（ *錨點*）元素中。
|
||||
|
||||
完成後，請你把鼠標光標懸停在你的圖像上， 鼠標光標將變成點擊光標。 於是圖片就變成了鏈接。
|
||||
|
||||
# --hints--
|
||||
|
||||
應將 `img` 嵌套進 `a` 元素中。
|
||||
|
||||
```js
|
||||
assert($('a').children('img').length > 0);
|
||||
```
|
||||
|
||||
`a` 的 `href` 屬性值應爲 `#`。
|
||||
|
||||
```js
|
||||
assert(new RegExp('#').test($('a').children('img').parent().attr('href')));
|
||||
```
|
||||
|
||||
每個 `a` 元素都應該有一個結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<a/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08802
|
||||
title: 去除 HTML 的註釋
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cBmG9T7'
|
||||
forumTopicId: 18329
|
||||
dashedName: uncomment-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
註釋的作用是給代碼添加一些說明，方便團隊合作或日後自己查看，但又不影響代碼本身。
|
||||
|
||||
註釋的另一個用途就是在不刪除代碼的前提下，讓代碼不起作用。
|
||||
|
||||
在 HTML 中，註釋的開始標籤是 `<!--`，結束標籤是 `-->`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
現在我們反其道而行之，去掉 `h1` 元素、`h2` 元素、`p` 元素的註釋。
|
||||
|
||||
# --hints--
|
||||
|
||||
頁面上應存在 `h1` 元素。
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0);
|
||||
```
|
||||
|
||||
頁面上應存在 `h2` 元素。
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
頁面上應存在 `p` 元素。
|
||||
|
||||
```js
|
||||
assert($('p').length > 0);
|
||||
```
|
||||
|
||||
應刪除註釋的結束標籤 `-->`。
|
||||
|
||||
```js
|
||||
assert(!$('*:contains("-->")')[1]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!--
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
-->
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08830
|
||||
title: 給表單添加一個必填字段
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cMd4EcQ'
|
||||
forumTopicId: 18360
|
||||
dashedName: use-html5-to-require-a-field
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
當你設計表單時，你可以指定某些字段爲必填項（required），只有當用戶填寫了該字段後，纔可以提交表單。
|
||||
|
||||
如果你想把文本輸入框設置爲必填項，在 `input` 元素中加上 `required` 屬性就可以了，例如：`<input type="text" required>`
|
||||
|
||||
# --instructions--
|
||||
|
||||
請給 `input` 元素加上 `required` 屬性，這樣用戶就必須先在輸入框裏填入內容，然後纔可以提交表單。
|
||||
|
||||
然後嘗試在不輸入任何文本的情況下提交表單， 看看 HTML5 表單是如何通知你這個字段是必填的。
|
||||
|
||||
# --hints--
|
||||
|
||||
`input` 元素應有 `required` 屬性。
|
||||
|
||||
```js
|
||||
assert($('input').prop('required'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" required placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,148 @@
|
||||
---
|
||||
id: 5c6c06847491271903d37cfd
|
||||
title: 使用單選框和複選框的 value 屬性
|
||||
challengeType: 0
|
||||
forumTopicId: 301099
|
||||
dashedName: use-the-value-attribute-with-radio-buttons-and-checkboxes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
提交表單時，所選項的值會發送給服務端。 `radio` 和 `checkbox` 的 `value` 屬性值決定了發送到服務端的實際內容。
|
||||
|
||||
例如：
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
<label for="outdoor">
|
||||
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
|
||||
</label>
|
||||
```
|
||||
|
||||
這裏有兩個 `radio` 單選框。 當用戶提交表單時，如果 `indoor` 選項被選中，表單數據會包含：`indoor-outdoor=indoor`。 也就是所選項的 `name` 和 `value` 屬性值。
|
||||
|
||||
如果沒有指明 `value` 屬性值，則會使用默認值做爲表單數據提交，也就是 `on`。 在這種情況下，如果用戶選中 "indoor" 選項然後提交表單，表單數據則會包含 `indoor-outdoor=on`。 這樣的表單數據看起來不夠直觀，因此最好將 `value` 屬性值設置爲一些有意義的內容。
|
||||
|
||||
# --instructions--
|
||||
|
||||
給每一個 `radio` 和 `checkbox` 輸入框添加 `value` 屬性。 使用輸入標籤的文本，小寫形式，作爲屬性的值。
|
||||
|
||||
# --hints--
|
||||
|
||||
應有一個單選按鈕的 `value` 屬性值爲 `indoor`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Indoor") > input[type="radio"]').filter("[value='indoor']")
|
||||
.length > 0
|
||||
);
|
||||
```
|
||||
|
||||
應有一個單選按鈕的 `value` 屬性值爲 `outdoor`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Outdoor") > input[type="radio"]').filter(
|
||||
"[value='outdoor']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
應有一個複選框的 `value` 屬性值爲 `loving`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Loving") > input[type="checkbox"]').filter(
|
||||
"[value='loving']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
應有一個複選框的 `value` 屬性值爲 `lazy`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Lazy") > input[type="checkbox"]').filter("[value='lazy']")
|
||||
.length > 0
|
||||
);
|
||||
```
|
||||
|
||||
應有一個複選框的 `value` 屬性值爲 `energetic`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Energetic") > input[type="checkbox"]').filter(
|
||||
"[value='energetic']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
Reference in New Issue
Block a user