这是姐姐传授给我的恋爱秘籍 —— 投其所好

对她/他的喜好表示感兴趣，并帮其实现。

那么首先要做好的第一件事就是 —— 了解喜好
这次是双方的，所以，我给它取名叫 《喜好互通表》

最终效果

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_html5

注意事项：此设计仅供前端学习使用，你不会真的傻到打印一张表让她填吧？ （笑哭）

哇，看起来不错哦，下面来一起实现它吧！

先完成页面布局（水平居中 + 背景图），这些我们在第4天就学会啦！

​​零基础学前端系列教程 | 和前端谈恋爱的第004天——打扮漂亮​​

<div class="page">
</div>

主体页面的宽和高，设定为和背景图片的宽高比相同！

.page {
  margin: 0px auto;
  width: 512px;
  height: 910px;
  background-image: url(./images/背景_彩虹樱花.jpg);
  background-position: center top;
  background-repeat: no-repeat;
}

艺术字

前端本身并没有太强的艺术字设计能力（CSS顶尖高手除外），一个简单易行的小白套路为——使用在线艺术字生成器

​​https://www.qt86.com/​​

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_前端_02


点背景选项时，按下图操作将背景设置为透明 (以便和背景图片融合) ：

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_html5_03


另一个艺术字生成器操作方式类似：

​​http://www.akuziti.com/​​

下面，将艺术字以图片的方式，作为标题添加到页面中

<div class="titleBox">
  <img height="70" src="./images/艺术字_喜好互通表_.png" />
</div>
.titleBox {
  text-align: center;
  padding: 20px;
}

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_表单_04

表单 form

好，重头戏来啦！

还记得我曾告诉过你，网站有两大核心功能“传播信息”和 “收集信息”

了解喜好，就是在收集信息，这便需要用到 html 中的 form 系列标签来制作表单啦！

先用 ​​fomr​​ 标签绘制一个水平居中，左右留空的表单容器

<form>
这是一个表单容器，在这里添加具体的表单元素
</form>
form {
  margin: 0px auto;
  width: 96%;
}

接着，依次放入表单元素

单行输入框 input

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_html5_05

<div class="formItem">
        <label class="formLabel">人生格言：</label>
        <input />
      </div>
  • ’​​label​​ 标签用于包裹表单中的文字，含义就是“标签”
  • ’​​input'​​ 标签为单行输入框，即只能输入一行文字的输入框，是个单标签。

为了表单元素的对齐和样式的统一，我们为每一个表单元素都添加样式

.formItem {
  margin-bottom: 18px;
}

为每个表单元素前方描述相关功能的标签添加样式：

.formLabel {
  width: 120px;
  text-align: right;
  float: left;
}

这里用到了【CSS 浮动布局】，详见下文的恋爱宝典。

多行输入框 textarea

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_前端_06

<div class="formItem">
  <label class="formLabel">理想伴侣：</label>
  <textarea rows="5"> </textarea>
</div>
  • ’​​textarea'​​ 标签为多行输入框，即可以输入多行文字的输入框
  • 属性​​rows​​可以指定默认的行数，若输入的内容超过默认行数，则会出现垂直滚动条

    • 零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_javascript_07

  • 将鼠标移动到多行输入框的右下角箭头处，还能拖拽调整多行输入框的大小，赶紧试试吧！

单选 radio

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_前端_08

<div class="formItem">
  <label class="formLabel">购物方式：</label>
  <input type="radio" name="buyType" value="web" checked />
  <label>网购</label>
  <input type="radio" name="buyType" value="shop" />
  <label>线下实体店</label>
</div>
  • 通过改变​​input​​​标签的​​type​​​属性可以渲染出各种各样的表单元素，当​​type="radio"​​ 时，便是单选啦，即在多个选项中只能选择一项。
  • 那么怎么知道哪几个选项是存在互斥关系（若已经选择A，则当选择B时，会清除对A的选择）呢？通过​​name​​​属性确定，​​name​​属性值相同的单选标签为一组，最终对应的【数据项】为buyType，彼此间为互斥关系！
  • ​​value​​ 属性顾名思义，表示值，上文的 单行/多行 输入框的值都由用户输入的内容直接决定，但单选不同，如上方例子所示，当选择网购时，最终收集到的值为 web；当选择线下实体店时，最终收集到的值为 shop；

使用英文/数字来代替中文的值，主要是为了节约存储空间，当然，也方便了以后随时修改中文标签名，比如“网购”改成“网上购物”，只是换了个说法，本质意思没变。

多选/复选 checkbox

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_前端_09

<div class="formItem">
  <label class="formLabel">兴趣爱好：</label>
  <input type="checkbox" name="hobbies" value="travel" />
  <label>旅游</label>
  <input type="checkbox" name="hobbies" value="food" />
  <label>美食</label>
  <input type="checkbox" name="hobbies" value="game" />
  <label>游戏</label>
  <input type="checkbox" name="hobbies" value="sport" />
  <label>运动</label>
  <input type="checkbox" name="hobbies" value="read" />
  <label>读书</label>
  <input type="checkbox" name="hobbies" value="makingFriends" />
  <label>交友</label>
</div>
  • 当​​type="checkbox"​​ 时，便是多选啦，即可以同时选择任意数量的选项。
  • ​​name​​​属性值相同的多选标签为一组，最终对应的【数据项】为​​name​​​的属性值 hobbies，最终的值为被选中选项的​​value​​ 属性值构成的【数组】

下拉选择 select

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_输入框_10

<div class="formItem">
  <label class="formLabel">定居城市：</label>
  <select name="city">
    <option value="chengdu">成都</option>
    <option value="wuhan">武汉</option>
    <option value="lanzhou">兰州</option>
  </select>
</div>
  • ​​select​​​ 标签用于渲染下拉选择器，最终对应的【数据项】为​​name​​的属性值 city
  • ​​option​​​ 标签用于渲染下拉选择器的具体选项，页面显示的中文写在​​option​​​ 标签内部，最终的值为被选中选项的​​value​​ 属性值。

    • 零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_表单_11

颜色输入框 color

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_javascript_12

<div class="formItem">
  <label class="formLabel">钟情颜色：</label>
  <input type="color" />
</div>
  • 当​​type="color"​​​ 时，百变的​​input​​ 标签便会渲染成一个颜色输入框，最终会得到一个颜色值。

上传文件 file

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_输入框_13

<div class="formItem">
  <label class="formLabel">手机铃声：</label>
  <input type="file" />
</div>
  • 当​​type="file"​​​ 时，​​input​​ 标签渲染成一个文件选择按钮，点击该按钮，便能从当前电脑中选择一个文件进行上传。

    • 零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_javascript_14


    • 零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_前端_15

数字输入框 number

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_javascript_16

<div class="formItem">
  <label class="formLabel">幸运数字：</label>
  <input type="number" />
</div>
  • 当​​type="number"​​​ 时，​​input​​ 标签渲染为数字输入框（只能输入数字，不能输入中英文等其他字符）。输入状态时，末尾会出现上下箭头，可以便捷实现数字的加减1。

表单组 fieldset

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_前端_17

<fieldset>
  <legend align="center">温馨提示</legend>
  <div class="center">
    <p>输入 520 有惊喜哦！</p>

    <div class="formItem">
      <label>爱情密码：</label>
      <input type="password" />
      <button class="myBtn" onclick="alert('我也爱你!')">查看惊喜</button>
    </div>
  </div>
  <div></div>
</fieldset>
  • ​​fieldset​​​ 标签用于给表单元素分组，表现为如图所示的框线。所有同一组的表单元素，都写在​​fieldset​​ 标签里面。
  • ​​legend​​​ 标签用于给表单组添加上分组的名称，​​align​​​ 属性控制分组名称的位置，另外两个​​align​​ 属性值为 left 和 right ，快自行试试效果吧！

根据页面设计的需求，对 fieldset 和 legend 也添加了样式，主要是加粗和内部元素水平居中

fieldset {
  border: 2px solid black;
}
legend {
  font-weight: bold;
}
.center {
  text-align: center;
}

密码输入框 password

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_html5_18

<div class="formItem">
  <label>爱情密码：</label>
  <input type="password" /> 
</div>
  • 当​​type="password"​​​ 时，​​input​​ 标签渲染为密码输入框（输入的字符都会显示为小黑点，以便在输入时，防止被偷看）

按钮 button

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_表单_19

<button class="myBtn" onclick="alert('我也爱你!')">查看惊喜</button>
  • ​​button​​​ 标签用于渲染按钮，表示该元素可以被点击执行对应的操作，比如保存按钮、取消按钮、提交按钮等，按钮上的文字写在​​button​​ 标签里面。
  • ​​onclick​​​ 表示点击事件，​​alert('我也爱你!')​​ 是一段 【JavaScript】代码，当点击按钮时，便会执行这段代码，效果为弹窗显示如下信息：

    • 零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_输入框_20

  • 按钮的默认样式不太好看，所以通常都需要重新定义样式
.myBtn {
  background: red;
  color: yellow;
  font-weight: bold;
  border: 1px solid red;
}

日期输入框 date

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_html5_21

<div class="infoBox">
  <label>填表日期：</label>
  <input type="date" />
</div>
  • 当​​type="date"​​​ 时，​​input​​ 标签渲染为日期输入框，用于录入标准的日期。
  • 可以通过点击输入框末尾的日历【图标】，来选择目标日期，也可以直接用键盘输入

    • 零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_html5_22

  • 落款通常在右下角，所以给它添加样式
.infoBox {
  margin-top: 20px;
  text-align: right;
}

清除默认样式

每个html标签，在浏览器中都有各自的默认样式，比如下图中的body标签，默认有 8px 的外边距。

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_输入框_23


零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_输入框_24

当这些默认样式和我们的设计不同时，就需要重新设置它们 !

/* 清除默认的body样式 */
body {
  margin: 0px;
}

完工！

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>和前端谈恋爱的第006天——了解喜好</title>
  </head>
  <body>
    <div class="page">
      <div class="titleBox">
        <img height="70" src="../images/艺术字_喜好互通表_.png" />
      </div>

      <form>
        <div class="formItem">
          <label class="formLabel">人生格言：</label>
          <input />
        </div>

        <div class="formItem">
          <label class="formLabel">理想伴侣：</label>
          <textarea rows="5"> </textarea>
        </div>

        <div class="formItem">
          <label class="formLabel">购物方式：</label>
          <input type="radio" name="buyType" value="web" checked />
          <label>网购</label>
          <input type="radio" name="buyType" value="shop" />
          <label>线下实体店</label>
        </div>

        <div class="formItem">
          <label class="formLabel">兴趣爱好：</label>
          <input type="checkbox" name="hobbies" value="travel" />
          <label>旅游</label>
          <input type="checkbox" name="hobbies" value="food" />
          <label>美食</label>
          <input type="checkbox" name="hobbies" value="game" />
          <label>游戏</label>
          <input type="checkbox" name="hobbies" value="sport" />
          <label>运动</label>
          <input type="checkbox" name="hobbies" value="read" />
          <label>读书</label>
          <input type="checkbox" name="hobbies" value="makingFriends" />
          <label>交友</label>
        </div>

        <div class="formItem">
          <label class="formLabel">定居城市：</label>
          <select name="city">
            <option value="chengdu">成都</option>
            <option value="wuhan">武汉</option>
            <option value="lanzhou">兰州</option>
          </select>
        </div>

        <div class="formItem">
          <label class="formLabel">钟情颜色：</label>
          <input type="color" />
        </div>

        <div class="formItem">
          <label class="formLabel">手机铃声：</label>
          <input type="file" />
        </div>

        <div class="formItem">
          <label class="formLabel">幸运数字：</label>
          <input type="number" />
        </div>

        <fieldset>
          <legend align="center">温馨提示</legend>
          <div class="center">
            <p>输入 520 有惊喜哦！</p>

            <div class="formItem">
              <label>爱情密码：</label>
              <input type="password" />
              <button class="myBtn" onclick="alert('我也爱你!')">
                查看惊喜
              </button>
            </div>
          </div>
        </fieldset>

        <div class="infoBox">
          <label>填表日期：</label>
          <input type="date" />
        </div>
      </form>
    </div>

    <style>/* 页面 */
      .page {
        margin: 0px auto;
        width: 512px;
        height: 910px;
        background-image: url(../images/背景_彩虹樱花.jpg);
        background-position: center top;
        background-repeat: no-repeat;
      }

      /* 表单 */
      form {
        margin: 0px auto;
        width: 96%;
      }
      .formItem {
        margin-bottom: 18px;
      }
      .formLabel {
        width: 120px;
        text-align: right;
        float: left;
      }

      /* 标题 */
      .titleBox {
        text-align: center;
        padding: 20px;
      }

      /* 表单组-温馨提示 */
      fieldset {
        border: 2px solid black;
      }
      legend {
        font-weight: bold;
      }
      .center {
        text-align: center;
      }

      /* 按钮 */
      .myBtn {
        background: red;
        color: yellow;
        font-weight: bold;
        border: 1px solid red;
      }
      /* 落款 */
      .infoBox {
        margin-top: 20px;
        text-align: right;
      }

      /* 清除默认的body样式 */
      body {
        margin: 0px;
      }</style>
  </body>
</html>

恋爱宝典

CSS 浮动布局

浮动布局是 CSS 的一种布局方式，主要用于实现图文混排时文字环绕图片的效果。

使用方法：给需要浮动的元素（被文字环绕的元素）添加样式​​float:left​​​ 或 ​​float:right​​

本案例中，则是给所有表单元素的标签添加了​​float:left​​ ，来确保标签在左侧浮动，同时，浮动后的元素会有以下变化：

  1. ​​label​​​标签原本的​​display​​​样式值为​​inline​​​ （内联盒子：无法设置宽度和水平方向的左中右对齐），浮动后display样式值会变为​​block​​（块级盒子：可以设置宽度和水平方向的左中右对齐）
  2. 位置尽量靠上、左浮动则靠左，右浮动则靠右

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_javascript_25

数据项

在表单中，数据项表示通过此表单可以采集到的某一项数据。

比如本案例会获取对方的“幸运数字”、“人生格言”等，那么这个“幸运数字”就是一个数据项。

案例中将决定表单数据项的 ​​name​​ 属性值都设置为英文，主要是为了方便存储。（表单采集来的数据，若想长期保存，通常都会使用数据库，而数据库的设计都是英文的）

数组

多个数据，按照一定的顺序排列，这些数据作为一个整体被称为“数组”。

如本案例中可以多选的兴趣爱好，当我们如下勾选时

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_javascript_26


最终获取到的对方的兴趣爱好就是：旅游、读书、交友

用 【JavaScript】语言来描述就是：

["旅游","读书","交友"]

用一对中括号​​[]​​​表示数组，每个数据之间用逗号 ​​,​​​ 隔开，若是中文则需要加上英文输入法下的引号​​""​​，是不是一目了然，挺好理解的呢 ？

JavaScript

JavaScript（简称“JS”）也是一种编程语言，排行前端开发三剑客（html，css，js）的老三，主要负责页面的逻辑（即实现页面的动态交互 / 特定功能）。

比如本案例中，点击查看惊喜按钮后，弹出“我也爱你！”的弹窗。

再复习一下:

  • html 构建内容（房子）
  • css 调整样式（装修）
  • js 实现功能（家电）

整个前端开发都是建立在这三大语言基础上的，搞定它们，你也就学会前端啦！

图标 i

图标，是具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。

如本案例中的日历图标

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_表单_27


简单明了，一眼就知道它是一个日历。

在 html 中，使用 ​​i​​ 标签来渲染图标，如：

<i style="font-style:normal">☎</i>

最终在页面上会渲染成一个电话的图标

零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_html5_28

  • 这里的样式​​font-style:normal​​ 是必须的，否则整个图标会是倾斜的状态，因为 ​​i​​ 标签的默认样式是斜体。

    • 零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_javascript_29

  • 样式​​font-style​​ 用于描述文本风格，即是否倾斜，当值为​​normal​​ 时不倾斜，当值为​​italic​​时倾斜。
  • ​​&#9742​​ 是特殊字符（如电话图标）在html 中对应的代码，见下表

    • 零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好_html5_30

  • 若想获取其他特殊符号对应的代码，可以在 ​​网页特殊符号(HTML字符实体)大全​​ 中查找。

但你不觉得这样去实现图标非常麻烦，也很受限制吗？
怎样更便捷地获取到无穷无尽的图标代码呢？
下面这两个第三方图标库，可以帮到你！


说不完的情话

  • 于千万人之中遇见你所要遇见的人，于千万年之中，时间的无涯的荒野里，没有早一步，也没有晚一步，刚巧赶上了，那也没有别的话可说，唯有轻轻地问一声：“噢，你也在这里吗？”——张爱玲
  • 是微风、是晚霞、是心跳不止、是无可代替！
  • 你看，这么多人，这么大的世界。我遇到了你，你也遇到了我，真好！
  • 我拼命地想要了解你，只是因为我想一辈子和你在一起！ —— 朝阳