Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html标签（列表、表格、表单）002
Blogger Information
Blog 40
fans 0
comment 1
visits 34615
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html标签（列表、表格、表单）002
景云
Original
1049 people have browsed it

1.列表

  • 无序列表 ul li
  • 有序列表 ol li 
    1.   其中ol的属性start可以定义开始值
  • 自定义列表 dl dt dd

2.表格

  • table 表格
  • caption 标题
  • thead 表头-每组表格必须要写一个，且只能有一个
  • tbody 主体-魅族表格可以有多个主体
  • 格式
    1.       <caption>标题</caption>
    2.       <thead>
    3.           <tr>
    4.               <th>表头1</th>
    5.               <th>表头2</th>
    6.               <th>表头3</th>
    7.           </tr>
    8.       </thead>
    9.       <tbody>
    10.           <tr>
    11.               <td>主体1</td>
    12.               <td>主体2</td>
    13.               <td>主体3</td>
    14.           </tr>
    15.       </tbody>
    16.   </table>
  • 表格行合并:colspan=””
  • 表格列合并:rowspan=””

3.表单

  • 表单控件的form属性：使用form属性将控件与它所属的表单进行绑定；在控件中添加form=”form的id值”即可。虽然可以用，但是尽量不要使用，缺点：影响布局、代码混乱；优点：用在js中，获取数据将会变得非常方便。
  • action 处理表单的属性
  • method 表单提交类型 默认为GET：数据直接放在url地址中；POST：数据在请求头中。
  • type 常见控件类型:
    1.   text(文本框)
    2.   password(密码框)
    3.   radio(单选框) 一组单选框应该用同一个name名称
    4.   checkbox(复选框) checked 设置默认值 复选框的name值应该写成数组的格式
    5.   file(文件域) 使用文件域上传文件需要将form中enctype属性设置为"multipart/form-data";请求类型必须是POST,get方式传输数据大小有限制而且不全。
    6.   submit(提交按钮)
    7.   button(普通按钮)
    8.   reset(重置按钮)
    9.   hidden(隐藏域) 前端看不到，仅供后端使用
    10.   textarea(长文本框)
    11.   select(下拉框) multiple 设置多选 size=""设置多选显示个数 option内的label属性优先级大于其内部的文本(使用较少)
    12.   image(图片框)
  • type html5新增类型：
    1.    url 自动验证url域的值
    2.    tel 用来输入电话号码
    3.    search 搜索框
    4.    email e-mail地址输入域
    5.    color 颜色选择器
    6.    number 数字字段
    7.    range 处理包含在一定范围内的数字输入
    8.    month 年月控件 选取月、年
    9.    date 日期控件 选取日、月、年
    10.    datetime 日期加时间控件 用于选取时、日、月、年(UTC时间)
    11.    datetime-local 日期加时间控件（不带时区） 选取时、日、月、年(本地时间)
    12.    time 时间控件 用于选取时、分
    13.    week 周年控件 用于选取周、年

required 必选属性
readonly 只读属性
disabled 禁用属性

4.课程实例

  • 实例
    课程表

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title></title>
    7.   <style>
    8.       table{
    9.           border-collapse: collapse;
    10.           text-align: center;
    11.       }
    12.       td,th{
    13.           border: 1px solid gray;
    14.       }
    15.   </style>
    16. </head>
    17. <body>
    18.   <table width="100%">
    19.       <caption>课程表</caption>
    20.       <thead>
    21.           <tr bgcolor="#c0c0c0">
    22.               <th></th>
    23.               <th>一</th>
    24.               <th>二</th>
    25.               <th>三</th>
    26.               <th>四</th>
    27.               <th>五</th>
    28.           </tr>
    29.       </thead>
    30.       <tbody>
    31.           <tr>
    32.               <td rowspan="4">上午</td>
    33.               <td>数学</td>
    34.               <td>文综</td>
    35.               <td>语文</td>
    36.               <td>理综</td>
    37.               <td>自习</td>
    38.           </tr>
    39.           <tr>
    40.               <td>文综</td>
    41.               <td>语文</td>
    42.               <td>数学</td>
    43.               <td>自习</td>
    44.               <td>理综</td>
    45.           </tr>
    46.           <tr>
    47.               <td>理综</td>
    48.               <td>语文</td>
    49.               <td>数学</td>
    50.               <td>自习</td>
    51.               <td>文综</td>
    52.           </tr>
    53.           <tr>
    54.               <td>语文</td>
    55.               <td>自习</td>
    56.               <td>数学</td>
    57.               <td>文综</td>
    58.               <td>理综</td>
    59.           </tr>
    60.           <tr>
    61.               <td colspan="6" bgcolor="#v1c1c1">午休</td>
    62.           </tr>
    64.           <tr>
    65.               <td rowspan="4">下午</td>
    66.               <td>数学</td>
    67.               <td>文综</td>
    68.               <td>语文</td>
    69.               <td>自习</td>
    70.               <td>理综</td>
    71.           </tr>
    72.           <tr>
    73.               <td>文综</td>
    74.               <td>语文</td>
    75.               <td>数学</td>
    76.               <td>自习</td>
    77.               <td>理综</td>
    78.           </tr>
    79.           <tr>
    80.               <td>理综</td>
    81.               <td>语文</td>
    82.               <td>数学</td>
    83.               <td>自习</td>
    84.               <td>文综</td>
    85.           </tr>
    86.           <tr>
    87.               <td colspan="2">体育</td>
    88.               <td colspan="1">美术</td>
    89.               <td colspan="2">自由活动</td>
    90.           </tr>
    91.       </tbody>
    92.   </table>
    93. </body>
    94. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post