高数习题
高数习题

HTML表格与表单

HTML表格与表单

  • HTML5表格
    • 1）表格初始化
    • 2）属性
    • 3）
      • 和
      的属性
    • 4） 表格的结构化与直列化
      • 1. 表格的结构化
      • 2. 表格的直列化
    • HTML5表单
      • 1）表单起始
        • 1.
          • （1）常用属性
        • 2. input输入框
          • 基本属性
          • 不同type属性值对应的输入框
        • 3.其他表单元素
          • （1）select下拉选择
          • （2）textarea文本域
      • 2）HTML5智能表单
        • 1. 表单分组
        • 2. HTML5表单新增元素与属性
        • 3. input新增属性
        • 4. input新增输入类型

      • HTML5表格

      1）表格初始化

      表格由

      定义，行由定义，列由
      定义，即数据单元格的内容。如果第一行为表头，则标签被替换掉。（只代表一个单元格，而非整个标题行）

      2）属性

      border：定义表格边框；当border的值增大，只有表格最外框线增加，每个单元格上的边框并不会变化。

      width/height：定义整个表格的宽度和高度；

      bgcolor：定义表格的背景色；

      background：定义表格的背景图；（背景图会覆盖掉背景色）

      bordercolor：定义边框颜色；

      cellpadding：定义单元格的内边距，即单元格中的文字与单元格边框之间的距离；

      cellspacing：定义表格单元格与单元格之间的间距；（cellspacing=0时，单元格之间没有间距，但是并不能合并相邻的两个边框，此时边框是两条线的宽度）合并边框需要CSS：

      <table border="1" style="border-collapse:collapse;">table>

      PS： border-collapse属性设置表格边框是否被合并为一个单一的边框；

      ​默认值：separate，边框会被分开；collapse：如果可能，边框会合并，且忽略 border-spacing 和 empty-cells 属性；inherit：从父元素继承border-collapse属性的值。

      3）

      和的align属性可以控制一行中所有单元格的水平对齐方式。（left/center/right）

      valign：控制单元格中内容的垂直位置；（top/center/bottom）

      colspan/rowspan：单元格合并属性；

      colspan表示跨列，当某格跨N列时，其右侧N-1个单元格需删除；同理rowspan表示跨行，当某格跨N行时，其下方N-1个单元格需删除。

      <table border="1">
  <tr>
    <td colspan="3">矩形数据td>  
  tr>
  <tr>
    <td rowspan="2">矩形1td>     
    <td>宽度td>
    <td>20td>
  tr>
  <tr>
    
    <td>长度td>
    <td>50td>
  tr>
  <tr>
    <td rowspan="2">矩形2td>
    <td>宽度td>
    <td>40td>
  tr>
  <tr>
    <td>长度td>
    <td>60td>
  tr>
table>

      HTML表格与表单_第1张图片

      4） 表格的结构化与直列化

      1. 表格的结构化

      将表格分为表头（thead）、表体（tbody）以及表尾（tfoot）三部分。

      一个完整的表格包含四个部分：

      caption：表格的标题，通常出现在表格的顶部；

      thead：表格表头，通常为标题行；

      tbody：定义表格主题，一个表格可以有多个主体，可以按照行来分组；

      tfoot：定义表格尾。

      PS：无论行代码顺序如何，网页显示总是先

      后显示。

      2. 表格的直列化

      设置表格的直列化，对表格的列进行分组，对其进行格式化；

      <colgroup style="background-color: yellow;"> 
<col /> 
<col /> 
colgroup>
<col style="background-color: blue;"/>

      格式化后正常编写table内部代码即可。另：

      只能在table内部使用。

      HTML5表单

      1）表单起始

      表单用于让用户填写信息并提交给服务器进行处理；

      1.

      表单包含用户填写信息部分和表单提交按钮；内容由包含。

      （1）常用属性

      action：指定表单提交地址，即服务器地址；

      method：指定表单提交数据的方法；

      enctype：指定表单发送的编码方式（当method=post时有效）： a. application/x-www-form-urlencoded（默认值）b. multipart/form-data（不对字符编码，用于上传文件使用） c. text/plain 将空格转换为+，但不编码特殊字符；一般在将表单发送到电子邮箱时使用。

      2. input输入框

      基本属性

      type：输入框的类型；（默认为text，但type的属性值并不是所有浏览器都支持）

      name：输入框的名称；传递数据时使用name=value形式传递

      value：输入框的默认值；

      placeholder：输入框中的提示信息，当输入框有value属性时，提示内容消失，转为显示value属性值；

      PS：

      1. 在type=checkbox时，即为复选框时，checked="true"初始情况被选中；默认时为false。

      2. disabled="disabled"设置控件不可用，用在按钮上则其不能单击；输入框则为不能修改，且其内信息不能向后台传递；

      3. hidden="hidden"设置隐藏控件。

      不同type属性值对应的输入框

      1. text：文本输入框

      默认宽度为20个字符； （ maxlength：最大字符长度；size：可显示的字符数；）

      2. password：密码输入框

      输入内容会被小黑点代替，避免密码泄露；

      3. radio：单选按钮

      name和value属性需要同时存在，提交时提交value中的属性值；

      radio凭借name属性区分是否属于同一组，同一组中只能选择一个；

      checked属性设置默认状态；

      4. checkbox：复选按钮

      5. file：文件上传按钮

      用于上传文件；
      在这里插入图片描述

      6. submit：表单提交按钮

      用于提交表单数据；

      value属性定义按钮显示的文字；

      7. reset：重置按钮

      将表单数据重置为初始状态，通常用语清空表单已填内容；

      8. image：图形提交按钮

      美化网页，作用与submit一致，但是提交按钮变成设定的图片；

      9. button：可单击按钮

      可单击的按钮，通常用于启动JavaScript脚本；

      3.其他表单元素

      （1）select下拉选择

      创建一个下拉式的列表或带有滚动条的列表；

      <select name="nums">
     <option value="1">1option>
     <option value="2">2option>
     <option value="3">3option>
select>

      的属性

      width/height：设置单元格的宽和高；当表格属性和行列属性冲突时，以行列属性为准。

      bgcolor：定义单元格的背景色；

      align：控制单元格中内容的水平位置；