Top

  1. 部署 Web 服务器及应用环境
  2. 标签案例
  3. HTML 表单

1 部署 Web 服务器及应用环境

1.1 问题

从官网下载 phpStudy 安装程序，部署到 Windows 主机。

1.2 步骤

实现此案例需要按照如下步骤进行。

1）点击文件 phpStudy20161103.exe，并选择解压目录文件夹。

CASE - 图1

图 - 1

2）如过系统启动了防火墙，则设置允许访问。

CASE - 图2

图 - 2

3）安装完成后，会弹出如下对话框，可以点击启动和停止按钮控制 Apache 和 MySQL 的运行状态。可以通过其它菜单选项，完成其它功能。

CASE - 图3

图 - 3

4）安好的目录结构如下图所示，其中 WWW 是 Web 程序的运行目录

CASE - 图4

图 - 4

5）在地址栏栏中，输入 127.0.0.1/phpinfo.php 回车，看到如下内容表示安装完成，并且正确启动。

CASE - 图5

图 - 5

2 标签案例

2.1 问题

通过 HTML 标签，设计如图 - 6 所示新闻列表。

CASE - 图6

图 - 6

2.2 步骤

1）创建文件 ex1.html

2）通过快捷方式生成页面结构

3）添加标题标签、无序列表标签和超级链接标签

  3. 1.  <!DOCTYPE html>
  4. 2.  <head>
  5. 3.      <meta charset="UTF-8">
  6. 4.      <title>Document</title>
  7. 5.  </head>
  8. 6.  <body>
  9. 7.      <h3>新闻列表</h3>
  10. 8.      <ul>
  11. 9.          <li><a href="#">北京“祝福祖国”主题花坛成热门打卡地</a></li>
  12. 10.          <li><a href="#">国庆假期北京不限行，节后限行尾号轮换</a></li>
  13. 11.          <li><a href="#">北京环球影城小黄人乐园景点运营员：日行两万步</a></li>
  14. 12.          <li><a href="#">北京环球度假区周边下架大量民宿?实为违规短租房</a></li>
  15. 13.          <li><a href="#">报名正式开启 官宣！北京马拉松10月31日举行</a></li>
  16. 14.      </ul>
  17. 15.  </body>
  18. 16.  </html>

3 HTML 表单

3.1 问题

通过表单标签和控件，实现如下图所示用户信息页面。

CASE - 图7

图 - 7

3.2 步骤

1）创建文件 ex2.html

2）通过快捷方式生成页面结构

3）添加表单标签、表单控件标签

  3. 1.  <!DOCTYPE html>
  4. 2.  <head>
  5. 3.    <meta charset="UTF-8">
  6. 4.    <title>表单控件使用</title>
  7. 5.  </head>
  8. 6.  <body>
  9. 7.    <form action="" >
  10. 8.      <div>
  11. 9.        姓名:
  12. 10.        <input id="username" name="username" type="text" placeholder="请输入用户名" maxlength="10">
  13. 11.      </div>
  14. 12.      <div>
  15. 13.        密码: <input name="password" type="password">
  16. 14.      </div>
  17. 15.      <div>
  18. 16.        性别: 
  19. 17.        <input name="gender" checked value="0" type="radio">男
  20. 18.        <input name="gender" value="1" type="radio">女
  21. 19.      </div>
  22. 20.      <div>
  23. 21.        爱好:
  24. 22.        <input name="hobby" type="checkbox">抽烟
  25. 23.        <input name="hobby" type="checkbox">喝酒
  26. 24.        <input name="hobby" type="checkbox">烫头
  27. 25.      </div>
  28. 26.      <div>
  29. 27.          地址:
  30. 28.          <select name="address" id="">
  31. 29.              <option value="101">北京</option>
  32. 30.              <option value="102">上海</option>
  33. 31.              <option value="103">深圳</option>
  34. 32.              <option value="104">天津</option>
  35. 33.              <option value="105">西安</option>
  36. 34.        </select>
  37. 35.      </div>
  38. 36.      <div>
  39. 37.        <input type="submit" value="保存">
  40. 38.        <input type="reset" value="重置">
  41. 39.        <input type="button" value="普通按钮">
  42. 40.      </div>
  43. 41.    </form>
  44. 42.  </body>
  45. 43.  </html>

https://tts.tmooc.cn/ttsPage/NTD/NTDTN202109/WEBBASE/DAY01/CASE/01/index.html