4.1 KiB
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
bad87fee1348bd9aede08817 | Nidificare un elemento di ancoraggio all'interno di un paragrafo | 0 | 18244 | nest-an-anchor-element-within-a-paragraph |
--description--
Puoi annidare i link all'interno di altri elementi di testo.
<p>
Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow.
</p>
Andiamo a scomporre l'esempio. Il testo normale viene inserito nell'elemento p
:
<p> Here's a ... for you to follow. </p>
Poi viene l'elemento anchor<a>
(che richiede un tag di chiusura </a>
):
<a> ... </a>
target
è un attributo tag di ancoraggio che specifica dove aprire il collegamento. Il valore _blank
specifica di aprire il collegamento in una nuova scheda. L' href
è un attributo tag di ancoraggio che contiene l'indirizzo URL del collegamento:
<a href="https://www.freecodecamp.org" target="_blank"> ... </a>
Il testo, link to www.freecodecamp.org
all'interno dell'elemento a
si chiama testo di ancoraggio, e mostrerà il link sul quale cliccare:
<a href=" ... " target="...">link to freecodecamp.org</a>
L'output finale dell'esempio sarà simile a questo:
Here's a link to www.freecodecamp.org for you to follow.
--instructions--
Annida l'elemento a
esistente all'interno di un nuovo elemento p
. Il nuovo paragrafo dovrebbe contenere un testo che dice View more cat photos
, dove cat photos
è un collegamento, e il resto è testo semplice.
--hints--
Dovresti avere un solo elemento a
.
assert(
$('a').length === 1
);
L'elemento a
dovrebbe essere collegato a "https://www.freecatphotoapp.com
".
assert(
$('a[href="https://www.freecatphotoapp.com"]').length === 1
);
Il tuo elemento a
dovrebbe avere il testo di ancoraggio: cat photos
assert(
$('a')
.text()
.match(/cat\sphotos/gi)
);
Dovresti creare un elemento p
. Ci dovrebbe essere almeno 3 tag p
nel tuo codice HTML
assert($('p') && $('p').length > 2);
Il tuo elemento a
dovrebbe essere annidato nel nuovo elemento p
.
assert(
$('a[href="https://www.freecatphotoapp.com"]').parent().is('p')
);
Il tuo elemento p
dovrebbe avere il testo View more
(con uno spazio dopo di esso).
assert(
$('a[href="https://www.freecatphotoapp.com"]')
.parent()
.text()
.match(/View\smore\s/gi)
);
Il tuo elemento a
non dovrebbe contenere il testo View more
.
assert(
!$('a')
.text()
.match(/View\smore/gi)
);
Ognuno dei tuoi elementi p
dovrebbe avere un tag di chiusura.
assert(
code.match(/<\/p>/g) &&
code.match(/<p/g) &&
code.match(/<\/p>/g).length === code.match(/<p/g).length
);
Ognuno dei tuoi elementi a
dovrebbe avere un tag di chiusura.
assert(
code.match(/<\/a>/g) &&
code.match(/<a/g) &&
code.match(/<\/a>/g).length === code.match(/<a/g).length
);
--seed--
--seed-contents--
<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.</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--
<h2>CatPhotoApp</h2>
<main>
<p>View more <a target="_blank" href="https://www.freecatphotoapp.com">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>