0403作业-HTML 链接/列表/表格/表单 使用举例

0403 作业-HTML 链接/列表/表格/表单 使用举例

HTML 链接(<a>标签)

1. 用来链接其他页面/站点

   • 跳转到其他站点: <a href="//www.baidu.com">点我将跳转到百度</a>

   • 打开站点页面: <a href="hello.html" target="_blank">在新页面渲染hello.html页面</a>

2. 用来生成文件下载链接

   • 生成文件下载链接: <a href="php_study.zip">点我下载"php_study.zip"压缩包</a>

   • 生成文件下载链接并指定下载后文件重命名的名称: <a href="php_study.zip" download="xp.zip">点我下载"xp.zip"压缩包</a>

3. 用来生成一些特殊动作链接

   • 拨打某个电话的链接: <a href="tel:13777778888">联系我们</a>
   • 给指定邮箱地址发送邮件的链接: <a href="mailto:php_cn@qq.com">联系我们</a>
4. 做锚点跳转

  <div id="top">
    |<a href="#info">商品简介</a>|<a href="#comments">商品评价</a>|<a href="#package">商品包装</a>|
  </div>
  <div id="info">
    <p>这里是商品简介...</p>
    <a href="#top">返回顶部</a>
  </div>
  <div id="comments" style="margin-top: 1000px;">
    <p>这里是商品评价...</p>
    <a href="#top">返回顶部</a>
  </div>
  <div id="package" style="margin-top: 2000px;">
    <p>这里是商品包装...</p>
    <a href="#top">返回顶部</a>
  </div>

列表

1. 无序列表

   <!-- 使用无序列表做图书目录 -->
   <h3>目  录</h3>
   <ul>
    <li>
      <p>第一章</p>
      <ul>
        <li>第1节</li>
        <li>第2节</li>
      </ul>
    </li>
    <li>第二章</li>
    <li>
      <p>第三章</p>
      <ul>
        <li>第1节</li>
        <li>第2节</li>
        <li>第3节</li>
      </ul>
    </li>
   </ul>

2. 有序列表

   <!-- 使用有序列表做排行榜 -->
   <h3>月度点击量排行榜</h3>
   <ol>
    <li>詹姆斯精彩进球集锦</li>
    <li>欧文叫你运球教程</li>
    <li>科比意外失事经过</li>
    <li>库里变态准3分合集</li>
    <li>总决赛精彩回放</li>
   </ol>

3. 自定义列表

   <!-- 使用自定义列表做导航菜单 -->
   <dl>
    <dt>新闻频道</dt>
    <dd>
      <dl>
        <dt>国内新闻</dt>
        <dd>社会焦点</dd>
        <dd>地方新闻</dd>
      </dl>
    </dd>
    <dd>国际新闻</dd>
    <dd>
      <dl>
        <dt>体育新闻</dt>
        <dd>篮球</dd>
        <dd>足球</dd>
        <dd>排球</dd>
      </dl>
    </dd>
   </dl>

   表格

• 使用表格做数据列表页

  <table width="500" cellspacing="0" cellpadding="10" align="center" border="1">
     <!-- 表格标题 -->
    <caption>
      <h3>管理员信息表</h3>
    </caption>
    <!-- 表格项目 -->
    <thead style="background-color: aqua;">
      <tr>
        <th>ID</th>
        <th>账号</th>
        <th>姓名</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
    </thead>
    <!-- 表格表体部分, 管理员信息 -->
    <tbody>
      <tr>
        <td>1</td>
        <td>admin</td>
        <td>超级管理员</td>
        <td>正常</td>
        <td style="text-align: center;">
          <a href="#">编辑</a>
          <span>    </span>
          <a href="#">停用</a>
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>zhangsan</td>
        <td>张三</td>
        <td>正常</td>
        <td style="text-align: center;">
          <a href="#">编辑</a>
          <span>    </span>
          <a href="#">停用</a>
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td>admin</td>
        <td>李四</td>
        <td style="color: red;">停用</td>
        <td style="text-align: center;">
          <a href="#">编辑</a>
          <span>    </span>
          <a href="#">启用</a>
        </td>
      </tr>
    </tbody>
    <!-- 表格底部, 用作人数汇总 -->
    <tfoot style="background-color:bisque;">
      <tr>
        <td colspan="5">管理员人数: 3人</td>
      </tr>
    </tfoot>
  </table>

表单

• 使用表单做数据填报

  <h3>增加管理员</h3>
  <form action="" method="post">
    <section>
      <label for="username">账       号:</label>
      <input type="text" name="username" id="username" size="20" required autofocus placeholder="账号长度应在6-20位之间">
    </section>
    <section>
      <label for="password">密       码:</label>
      <input type="password" name="password" id="password" size="20" rquired placeholder="密码长度应在6-20位之间">
    </section>
    <section>
      <label for="password">密码确认:</label>
      <input type="password" name="password" id="password" size="20" rquired placeholder="密码长度应在6-20位之间">
    </section>
    <section>
      <label for="realname">姓       名:</label>
      <input type="text" name="realname" id="realname">
    </section>
    <section>
      <label for="in_use">账号状态:</label>
      <input type="radio" name="status" id="in_use" value="in_use" checked><label for="in_use">启用</label>
      <input type="radio" name="status" id="stop" value="stop"><label for="stop">停用</label>
    </section>
  </form>