zoukankan      html  css  js  c++  java
  • FCC学习笔记(二)

    Nest an Anchor Element within a Paragraph


    作为参考,再次看一看a元素的图示:

    a diagram of how anchor tags are composed with the same text as on the following line

    例如:

    <p>Here's a <a href="https://freecodecamp.cn"> link to FreeCodeCamp中文社区</a> for you to follow.</p>

    Nesting(嵌套)就是把一个元素放在另一个元素里面。

    任务:把你的a元素嵌套进一个新的p元素(紧邻已有的h2元素之后),让段落的文本为View more cat photos,但是其中仅cat photos是一个链接,其余的是普通文本。

     

    Turn an Image into a Link


    你可以通过把某元素嵌套进a元素使其变成一个链接。

    把你的图片嵌套进a元素。举例如下:

    <a href="#"><img src="/images/relaxing-cat.jpg"></a>

    任务:把你的小猫图片插入到一个新的锚点元素中,并把锚点元素的href属性设置为#

    一旦完成,把你的光标悬停在你的图片上。你的光标此时应该由光标指针变成手形指针。图片现在是一个链接了。

    占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本。

    你可以用如下方式创建占位符:

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

    把你的input(输入)框的placeholder的值设置为"cat photo URL"。

     

    Create a Set of Radio Buttons


    类比是最好的学习方式,当你搞不清一个概念时,最好在生活中找到对应的案例。

    单选就是你只能在多个选项中选择一个,就好比你有很多追求者,但却只能选择一个结婚。

    多选一的场景就用radio button(单选按钮)

    单选按钮只是input输入框的一种类型。

    每一个单选按钮都应该嵌套在它自己的label(标签)元素中。

    注意:所有关联的单选按钮应该使用相同的name属性。

    下面是一个单选按钮的例子:

    <label><input type="radio" name="indoor-outdoor"> Indoor</label>

    给你的表单添加两个单选按钮,一个叫indoor,另一个叫outdoor

     

     

  • 相关阅读:
    shell 脚本实现yum安装 LAMP 架构的 wordpress
    redis主从及哨兵和cluster集群
    扫描网段中服务器显示状态
    利用for循环输出九九乘法表
    正则表达式取文件后缀
    利用正则表达式实现yes/no判断
    判断输入的IP地址是否合法
    Shell脚本编程基础之shell脚本条件测试命令
    Shell脚本编程基础之shell脚本逻辑运算
    Shell脚本编程基础之shell脚本算术运算
  • 原文地址:https://www.cnblogs.com/leecoffee/p/9269806.html
Copyright © 2011-2022 走看看