博主信息
博文 58
粉丝 3
评论 0
访问量 76707
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
0403作业-HTML 链接/列表/表格/表单 使用举例
岂几岂几
原创
851人浏览过

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. 做锚点跳转
  1. <div id="top">
  2. |<a href="#info">商品简介</a>|<a href="#comments">商品评价</a>|<a href="#package">商品包装</a>|
  3. </div>
  4. <div id="info">
  5. <p>这里是商品简介...</p>
  6. <a href="#top">返回顶部</a>
  7. </div>
  8. <div id="comments" style="margin-top: 1000px;">
  9. <p>这里是商品评价...</p>
  10. <a href="#top">返回顶部</a>
  11. </div>
  12. <div id="package" style="margin-top: 2000px;">
  13. <p>这里是商品包装...</p>
  14. <a href="#top">返回顶部</a>
  15. </div>

列表

  1. 无序列表
    1. <!-- 使用无序列表做图书目录 -->
    2. <h3>目 录</h3>
    3. <ul>
    4. <li>
    5. <p>第一章</p>
    6. <ul>
    7. <li>第1节</li>
    8. <li>第2节</li>
    9. </ul>
    10. </li>
    11. <li>第二章</li>
    12. <li>
    13. <p>第三章</p>
    14. <ul>
    15. <li>第1节</li>
    16. <li>第2节</li>
    17. <li>第3节</li>
    18. </ul>
    19. </li>
    20. </ul>
  2. 有序列表

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

    1. <!-- 使用自定义列表做导航菜单 -->
    2. <dl>
    3. <dt>新闻频道</dt>
    4. <dd>
    5. <dl>
    6. <dt>国内新闻</dt>
    7. <dd>社会焦点</dd>
    8. <dd>地方新闻</dd>
    9. </dl>
    10. </dd>
    11. <dd>国际新闻</dd>
    12. <dd>
    13. <dl>
    14. <dt>体育新闻</dt>
    15. <dd>篮球</dd>
    16. <dd>足球</dd>
    17. <dd>排球</dd>
    18. </dl>
    19. </dd>
    20. </dl>

    表格

  • 使用表格做数据列表页
    1. <table width="500" cellspacing="0" cellpadding="10" align="center" border="1">
    2. <!-- 表格标题 -->
    3. <caption>
    4. <h3>管理员信息表</h3>
    5. </caption>
    6. <!-- 表格项目 -->
    7. <thead style="background-color: aqua;">
    8. <tr>
    9. <th>ID</th>
    10. <th>账号</th>
    11. <th>姓名</th>
    12. <th>状态</th>
    13. <th>操作</th>
    14. </tr>
    15. </thead>
    16. <!-- 表格表体部分, 管理员信息 -->
    17. <tbody>
    18. <tr>
    19. <td>1</td>
    20. <td>admin</td>
    21. <td>超级管理员</td>
    22. <td>正常</td>
    23. <td style="text-align: center;">
    24. <a href="#">编辑</a>
    25. <span> </span>
    26. <a href="#">停用</a>
    27. </td>
    28. </tr>
    29. <tr>
    30. <td>2</td>
    31. <td>zhangsan</td>
    32. <td>张三</td>
    33. <td>正常</td>
    34. <td style="text-align: center;">
    35. <a href="#">编辑</a>
    36. <span> </span>
    37. <a href="#">停用</a>
    38. </td>
    39. </tr>
    40. <tr>
    41. <td>3</td>
    42. <td>admin</td>
    43. <td>李四</td>
    44. <td style="color: red;">停用</td>
    45. <td style="text-align: center;">
    46. <a href="#">编辑</a>
    47. <span> </span>
    48. <a href="#">启用</a>
    49. </td>
    50. </tr>
    51. </tbody>
    52. <!-- 表格底部, 用作人数汇总 -->
    53. <tfoot style="background-color:bisque;">
    54. <tr>
    55. <td colspan="5">管理员人数: 3人</td>
    56. </tr>
    57. </tfoot>
    58. </table>

表单

  • 使用表单做数据填报
    1. <h3>增加管理员</h3>
    2. <form action="" method="post">
    3. <section>
    4. <label for="username">账 号:</label>
    5. <input type="text" name="username" id="username" size="20" required autofocus placeholder="账号长度应在6-20位之间">
    6. </section>
    7. <section>
    8. <label for="password">密 码:</label>
    9. <input type="password" name="password" id="password" size="20" rquired placeholder="密码长度应在6-20位之间">
    10. </section>
    11. <section>
    12. <label for="password">密码确认:</label>
    13. <input type="password" name="password" id="password" size="20" rquired placeholder="密码长度应在6-20位之间">
    14. </section>
    15. <section>
    16. <label for="realname">姓 名:</label>
    17. <input type="text" name="realname" id="realname">
    18. </section>
    19. <section>
    20. <label for="in_use">账号状态:</label>
    21. <input type="radio" name="status" id="in_use" value="in_use" checked><label for="in_use">启用</label>
    22. <input type="radio" name="status" id="stop" value="stop"><label for="stop">停用</label>
    23. </section>
    24. </form>
批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:很好
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学