小白前端入门笔记（17），在input标签内设置默认文本

大家好，欢迎来到freecodecamp HTML专题第17篇。

今天的挑战依然关于input标签，我们要为标签设置默认文本。

背景知识

默认文本的英文叫做placeholder text，placeholder是预留位置的意思。这个词在编程当中经常出现，有一些变量或者是工具库支持我们在正式赋值之前设置一个默认值，或者是一个占位符。比如TensorFlow框架当中就经常用到，它们虽然用途不完全相同，但是核心”占位“的意思是一样的。

在前端当中，我们用placeholder属性来为input标签设置默认内容。

我们来看一个例子：

<input type="text" placeholder="this is placeholder text">

呈现的效果是这样的：

当我们什么都没输入的时候，它会展示我们设置好的文本用来提示用户。这个功能我们在各种网站的注册用户界面应该都见到过。

题意

今天的题意非常简单，就是为代码当中的input标签设置placeholder，设置为"cat photo URL"

要求

1. 你需要在input元素当中添加placeholder属性
2. 你需要将placeholder属性设置成'cat photo URL'
3. input标签不需要closing tag
4. input标签的语法正确

编辑器

<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">
</main>

解法

我们按照题意的说明加上placeholder这个属性即可。

<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>

想要亲自动手尝试一下的同学不要忘了点击文末的阅读原文进行跳转哦~

文章就到这里，给个三连再走吧~