search

博客列表 >html中的列表、表格和表单

html中的列表、表格和表单

祥子弟弟
祥子弟弟原创
2020年12月11日 02:04:08911浏览

一、列表

类别 构成(标签)
有序列表 \<ul>+\<li>
无序列表 \<ol>+\<li>
自定义列表 \<dl>+\<dt>+\<dd>
  1. 有序列表
    有序列表的文字图象是可以变的，默认是一个小黑点
    通过修改\<ul>标签的 type 属性可以修改:
    type=”disc”是一个小黑点
    type=”circle”是一个小空心圆
    type=”square”是一个小实心正方形
  1. <h3>购物车</h3>
  2. <ul>
  3.   <li>苹果</li>
  4.   <li>手机</li>
  5.   <li>玩具</li>
  6.   <li>零食</li>
  7. </ul>

浏览器效果如下

无序列表示例

  1. 无序列表
  1. <h3>购物车</h3>
  2. <ol>
  3.   <li>土豆</li>
  4.   <li>香蕉</li>
  5.   <li>梨</li>
  6. </ol>

浏览器效果如下
有序列表示例

  1. 自定义列表
  1. <h3>尾页</h3>
  2. <dl>
  3.   <dt>名称</dt>
  4.   <dd>pHp中文网</dd>
  5.   <dt>地址</dt>
  6.   <dd>xxxxxxxx</dd>
  7.   <dt>联系方式</dt>
  8.   <dd>电话:<a href="tel: 16512****">16512****</a></dd>
  9.   <dd>邮箱:<a href="mailto:admin@php.com">admin@php.com</a></dd>
  10. </dl>

浏览器效果如下

  • 导航
  1. <div class="menu">
  2.   <!-- ul对于语义化非常友好，自定义div视觉效果更好一些 -->
  3.   <li><a href="">首页</a></li>
  4.   <li><a href="">教学视频</a></li>
  5.   <li><a href="">社区问答</a></li>
  6.   <li><a href="">资料下载</a></li>
  7.   <li><a href="">登录</a></li>
  8. </div>

浏览器效果如下

  • 图文列表
  1. <ul class="list">
  2.   <li>
  3.     <a href=""
  4.       ><img
  5.         src="https://img.php.cn/upload/course/000/000/003/5a699f1b2da2b398.jpg"
  6.         alt="phpStudy视频教学"
  7.     /></a>
  8.     <a href="">phpstudy急速入门视频教程</a>
  9.   </li>
  10.   <li>
  11.     <a href=""
  12.       ><img
  13.         src="https://img.php.cn/upload/course/000/000/003/5a699f1b2da2b398.jpg"
  14.         alt="phpStudy视频教学"
  15.     /></a>
  16.     <a href="">phpstudy急速入门视频教程</a>
  17.   </li>
  18. </ul>

浏览器效果如下

二、表格

表格由 \<table> 标签来定义。每个表格均有若干行（由 \<tr> 标签定义，每行被分割为若干单元格（由 \<td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
\<table>标签拥有 border 属性，这个是表格的边框属性，一般不设置，是用 css 来美化表格的时候顺便设置的。

  • 表格的行/列的合并
方式 实现
行合并 rowspan=”value”
列合并 colspan=”value”

其中 value 的值是需要合并的行或者列数
实例演示

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>表格</title>
  6.     <link rel="stylesheet" href="style/table.css" />
  7.   </head>
  8.   <body>
  9.     <table class="life">
  10.       <caption>
  11.         某人的生活作息表
  12.       </caption>
  13.       <thead>
  14.         <tr>
  15.           <th colspan="2"></th>
  16.           <!-- <th></th> -->
  17.           <th>星期一</th>
  18.           <th>星期二</th>
  19.           <th>星期三</th>
  20.           <th>星期四</th>
  21.           <th>星期五</th>
  22.         </tr>
  23.       </thead>
  24.       <tbody>
  25.         <tr>
  26.           <td rowspan="4">上午</td>
  27.           <td>6:30</td>
  28.           <td>起床洗漱</td>
  29.           <td>起床洗漱</td>
  30.           <td>起床洗漱</td>
  31.           <td>起床洗漱</td>
  32.           <td>起床洗漱</td>
  33.         </tr>
  34.         <tr>
  35.           <!-- <td>上午</td> -->
  36.           <td>7:30</td>
  37.           <td>学习</td>
  38.           <td>学习</td>
  39.           <td>学习</td>
  40.           <td>学习</td>
  41.           <td>学习</td>
  42.         </tr>
  43.         <tr>
  44.           <!-- <td>上午</td> -->
  45.           <td>9:30</td>
  46.           <td>休息30分钟</td>
  47.           <td>休息30分钟</td>
  48.           <td>休息30分钟</td>
  49.           <td>休息30分钟</td>
  50.           <td>休息30分钟</td>
  51.         </tr>
  52.         <tr>
  53.           <!-- <td>上午</td> -->
  54.           <td>12:30</td>
  55.           <td>吃饭</td>
  56.           <td>吃饭</td>
  57.           <td>吃饭</td>
  58.           <td>吃饭</td>
  59.           <td>吃饭</td>
  60.         </tr>
  61.         <tr>
  62.           <td class="rest" colspan="7">中午休息</td>
  63.         </tr>
  64.         <tr>
  65.           <td rowspan="3">下午</td>
  66.           <td>14:30</td>
  67.           <td>练习</td>
  68.           <td>练习</td>
  69.           <td>练习</td>
  70.           <td>练习</td>
  71.           <td>练习</td>
  72.         </tr>
  73.         <tr>
  74.           <!-- <td>下午</td> -->
  75.           <td>16:30</td>
  76.           <td>休息30分钟</td>
  77.           <td>休息30分钟</td>
  78.           <td>休息30分钟</td>
  79.           <td>休息30分钟</td>
  80.           <td>休息30分钟</td>
  81.         </tr>
  82.         <tr>
  83.           <!-- <td>下午</td> -->
  84.           <td>18:30</td>
  85.           <td>吃饭</td>
  86.           <td>吃饭</td>
  87.           <td>吃饭</td>
  88.           <td>吃饭</td>
  89.           <td>吃饭</td>
  90.         </tr>
  91.         <tr>
  92.           <td colspan="2">晚上19:30</td>
  93.           <td colspan="5">上课</td>
  94.         </tr>
  95.       </tbody>
  96.     </table>
  97.   </body>
  98. </html>

浏览器效果如下(这里用到了 css 来装饰)

三、表单

form 表单的作用是向 web 服务器提交信息，它所拥有的几个常用属性及作用如下：

  • action 属性

处理表单提交的 URL。

  • method 属性

浏览器使用这种 HTTP 方式来提交 表单. 可能的值有：
POST: 指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。
GET: 指的是 HTTP GET 方法；表单数据会附加在 action 属性的 URL 中，并以 ‘?’ 作为分隔符，没有副作用时使用这个方法。在有隐密信息或者所传信息较大时不推荐使用。
dialog: 如果表单在 \<dialog> 元素中，提交时关闭对话框。

  • enctype

当 method 属性值为 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型 。可能的取值有：
application/x-www-form-urlencoded: 未指定属性时的默认值。
multipart/form-data: 当表单包含 type=”file” 的\<input> 元素时使用此值。
text/plain: 出现于 HTML5，用于调试。

  • name

表单的名称。该值必须是所有表单中独一无二的，而且不能是空字符串。

实例: 用\<form>表单设计一个用户提交信息的简单页面

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>用户信息提交</title>
  6.     <link rel="stylesheet" href="style/form.css" />
  7.   </head>
  8.   <body>
  9.     <h3 class="title">用户注册</h3>
  10.     <form
  11.       action=""
  12.       method="POST"
  13.       class="register"
  14.       enctype="multipart/form-data"
  15.     >
  16.       <label for="username">账号:</label>
  17.       <input
  18.         type="text"
  19.         id="username"
  20.         name="username"
  21.         value=""
  22.         placeholder="username"
  23.         required
  24.       />
  25.       <label for="email">邮箱:</label>
  26.       <input
  27.         type="email"
  28.         id="email"
  29.         name="email"
  30.         value=""
  31.         placeholder="admin@email.com"
  32.         required
  33.       />
  34.       <label for="psd">密码:</label>
  35.       <input
  36.         type="password"
  37.         id="psd"
  38.         name="password"
  39.         value=""
  40.         placeholder="不少于6位"
  41.         required
  42.       />
  43.       <label for="secret">性别:</label>
  44.       <div>
  45.         <input type="radio" name="gender" value="male" id="male" /><label
  46.           for="male"
  47.           >男</label
  48.         >
  49.         <input type="radio" name="gender" value="female" id="female" /><label
  50.           for="female"
  51.           >女</label
  52.         >
  53.         <input
  54.           type="radio"
  55.           name="gender"
  56.           value="secret"
  57.           id="secret"
  58.           checked
  59.         /><label for="secret">秘密</label>
  60.       </div>
  61.       <label for="#">兴趣:</label>
  62.       <div>
  63.         <input type="checkbox" name="hobby[]" value="game" id="game" /><label
  64.           for="game"
  65.           >游戏</label
  66.         >
  67.         <input
  68.           type="checkbox"
  69.           name="hobby[]"
  70.           value="program"
  71.           id="program"
  72.         /><label for="program">编程</label>
  73.         <input type="checkbox" name="hobby[]" value="music" id="music" /><label
  74.           for="music"
  75.           >音乐</label
  76.         >
  77.         <input
  78.           type="checkbox"
  79.           name="hobby[]"
  80.           value="exercise"
  81.           id="eercise"
  82.         /><label for="exercise">运动</label>
  83.       </div>
  84.       <label for="edu">学历:</label>
  85.       <select name="edu" id="edu">
  86.         <!-- 修改默认项用selected属性 -->
  87.         <option value="1">初中</option>
  88.         <option value="2">高中</option>
  89.         <option value="3">本科</option>
  90.         <option value="4">研究生</option>
  91.         <!-- label属性的优先级大与option内部的文本 -->
  92.         <option value="5" label="老司机">自学成才</option>
  93.       </select>
  94.       <label for="user-pic">头像:</label>
  95.       <input type="hidden" name="MAX_FILE_SIZE" value="80000" />
  96.       <input type="file" name="user_pic" id="user-pic" />
  97.       <div class="user-pic" style="grid-column: span 2"></div>
  98.       <label for="user-resume">简历:</label>
  99.       <input type="hidden" name="MAX_FILE_SIZE" value="80000" />
  100.       <input type="file" name="user_resume" id="user-resume" />
  101.       <div class="user-resume" style="grid-column: span 2"></div>
  102.       <label for="comment">备注:</label>
  103.       <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
  104.       <button>提交</button>
  105.     </form>
  106.   </body>
  107. </html>

浏览器效果如下

  • \<form>表单控件的 form 属性

可以在书写表单时，将表单的控件书写在表单的范围之外，然后用表单控件的 form 属性来将其与对应的 form 表单绑定起来。但是绝不提倡这样做，一是影响布局，二是代码混乱，好处是 js 中获取数据很方便。

示例如下

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>表单控件的form属性</title>
  6.   </head>
  7.   <body>
  8.     <h3 class="title">用户注册</h3>
  9.     <form action="check.php" method="GET" id="register"></form>
  10.     <!-- 使用form属性，将控件与它所属的表单进行关联/绑定 -->
  11.     <div class="box">
  12.       <label for="username">账号:</label>
  13.       <input
  14.         type="text"
  15.         name="username"
  16.         id="username"
  17.         placeholder="不能为空"
  18.         required
  19.       />
  20.       <label for="email">邮箱:</label>
  21.       <input
  22.         type="email"
  23.         name="email"
  24.         id="email"
  25.         placeholder="admin@email.com"
  26.         required
  27.       />
  28.       <label for="psd">密码:</label>
  29.       <input
  30.         type="password"
  31.         name="password"
  32.         id="psd"
  33.         placeholder="不少于6位"
  34.         required
  35.       />
  36.       <button>提交</button>
  37.     </div>
  38.   </body>
  39. </html>
上一条：day3-1210作业 iframe后台与css优先级初尝下一条：iframe后台与CSS优先级及元素样式来源
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多