• 表格与表单


    表格的基本语法结构如下所示:
    <table  width="  " border=" ">
      <tr>
          <td>单元格内容</td>
        ......
      </tr>
    </table>
    <table>标记:
    width属性设置的是表格的宽度
    border属性设置的是表格的边框线
           <thead><tbody><tfoot>结构的表格
    从结构上来看,表格可以分成表头、主体和表尾三个部分,分别使用<thead><tbody><tfoot>标签来表示。
    表头和表尾在一张表格只能有一个,而一张表格可以有多个主体。
    <thead><tbody><tfoot>标签内部都必须使用<tr>标签。
    <thead><tbody><tfoot>结构顺序在浏览器中显示,与定义顺序无关
    表格通过border属性设定表格边框线宽度为2像素;
    通过bordercolor属性设定表格边框线的颜色为红色;
    通过width属性设定表格宽度为400像素;
    通过height属性设定表格高度为60像素;
    通过cellspacing属性设定单元格之间的间距是1像素;
    通过cellpadding属性设定单元格的内容与其边框的内边距的间距是2像素;
    通过align属性设定表格的为居中对齐;
    通过background属性设定表格的背景图片文件名“2-3.jpg”;
    通过bgcolor属性设定表格的背景颜色为粉色。
    根据网页布局的需要,还可以单独对表格中的某行和某一个单元格进行属性设置。
    <tr height="行高" a1ign="水平对齐方式" va1ign="垂直对齐方式"  bgco1or="背景颜色">
    <tr height="行高" a1ign="水平对齐方式" va1ign="垂直对齐方式"  bgco1or="背景颜色">
    通过border属性设定表格边框线宽度为2像素;
    通过width属性设定表格宽度为400像素;
    在表格的第二行<tr>标记中,
    通过align属性设定表格水平方向为居中对齐;
    通过height属性设定表格高度为100像素;
    通过valign属性设定该行的垂直方向为居中对齐;
    通过bgcolor属性设定该行的背景颜色为黄色。
    根据网页布局的需要,还可以单独对表格中的某一个单元格进行属性设置。
    跨行和跨列功能可分别通过单元格的 rowspan和 colspan属性来实现
    语法如下:
    <td rowspan="所跨行数" colspan="所跨列数">
    input标记定义的语法格式如下所示:
    <input  type="..."  name="..."  value="...">
    文字输入<input  type="text"  name="..."  value="...">
    密码输入<input  type="password"  name="..."  value="...">
    如果需要限制用户输入数据的最大长度时,在input标记中使用最大长度的属性maxlength。
    复选框:
    <input  type="checkbox"  name="..."  value="...">
    单选框:
    <input  type="radio"  name="..."  value="...">
    “checked”属性表示在初始情况下该单选框或复选框是否被选中
    select标记的语法格式如下所示:
      <select name="" size="" multiple>
        <option value="选项1">选项1
        ...
        <option value="选项n">选项n
      </select>
    select 标记中有几个常用的属性,分别是
          name、size、multiple。
    当有multiple属性时就是多选,用户可以使用组合键shift键或ctrl键,一次可以选中几个选项。
    在表单中,如果需要输入大量的文字时,特别是包括换行文字时,需要使用<textarea>多行文本框标记。
    在HTML中,<textarea>标记的语法格式如下:
    <textarea name="…" cols="…" rows="…" wrap="off/virtual/physical">
    </textarea>
    当用户在输入文本区域中输入文本时,只有用户按下 Enter 键时才产生换行。如果希望启动自动换行功能(word wrapping),需要将 wrap 属性设置为 virtual 或 physical。
    如果需要用户自由输入的同时又给用户一些建议选项,这就需要使用<datalist>元素。
    datalist元素用于定义输入框的选项列表,列表通过 datalist内的option元素进行创建。
    如果用户不希望从列表中选择某项,也可以自行输入其他内容。datalist元素通常与input元素联合使用来
        定义input的取值。
    在使用< datalist>标记时,需要通过id属性为其指定一个唯一标识,然后为input元素指定list属性,将该属性值设置为option元素对应的id属性值即可。
    progress标记的作用是提示任务的进度,这个标记可以用JavaScript脚本动态来改变当前的进度值。该标记的语法结构如下所示:
    <progress value="值" max="值">
    该标记的两个主要属性说明如下:
    max属性:是一个数值,指明任务一共需要多少工作量。
    value属性:是一个数值,规定已经完成多少工作量。
    需要特别强调的是value属性和max属性的值必须大于0,且value的值要小于或等于max属性的值。
    在html中,<meter>标记是用来定义度量衡
    只用于已知最大和最小值的度量(如:磁盘使用情况,查询结果的相关性等)。
    表示在水平方向将浏览器窗口分割成多个窗口,这种方式的分割需要使用<frameset>标记的cols属性。其语法定义格式如下:
    <frameset cols="value1,value2,...">
      <frame src="URL"></frame>
      <frame src="URL"></frame>
      
      ......
    </frameset>
    需要特别强调的是cols属性值的个数决定了< frame>标记的个数,即分割的窗口个数。
    各个值之间使用逗号隔开,各个值定义了相应框架窗口的宽度,可以是数字(单位是像素),也可以是百分比和以“*”号表示的剩余值。
    表示在垂直方向将浏览器窗口分割成多个窗口,这种方式的分割需要使用<frameset>标记的rows属性。其语法定义格式如下:
    <frameset rows="value1,value2,...">
      <frame src="URL"></frame>
      <frame src="URL"></frame>
      
      ......
    </frameset>
    需要特别强调的是rows属性值的个数决定了< frame>标记的个数,即分割的窗口个数。
    各个值之间使用逗号隔开,各个值定义了相应框架窗口的宽度,可以是数字(单位是像素),也可以是百分比和以“*”号表示的剩余值。
    嵌套分割需要在<frameset>标记对内再嵌套<frameset>标记,并且子标记<frameset>将会把父标记<frameset>分割的对应窗口再按所指定的分割方式进行第二次分割。
    其分割语法定义如下:
    <frameset rows="value1,value2,...">
      <frame src="URL"></frame>
      <frameset cols="value1,value2,...">
      </frameset>
    ......
    </frameset>
    < iframe>标记在文档中定义了一个矩形区域,在这个区域中,浏览器会显示一个单独的文档,包括滚动条和边框。该标记的语法如下所示:
    <iframe 属性="属性值"></iframe>
    iframe标记常用属性如下所示:
    (1)frameborder:是否显示边框,1代表是,0代表否。
    (2)height:框架作为一个普通标记的高度,建议使用css设置。
    (3)width:框架作为一个普通标记的宽度,建议使用css设置。
    (4)name:框架的名称,window.frames[name]时专用的属性。
    (5)scrolling:框架的是否滚动,
       其值包括yes(是)、no(否)、auto(自动)。
  • 相关阅读:
    grunt 使用比较
    一些技术要点
    git 使用笔记
    oo的一些概念
    借用构造函数继承非原型
    bower解决js的依赖管理
    需要了解的一些东西
    一些常用的代码
    js模式(一):单例模式
    写给自己的计划
  • 原文地址:https://www.cnblogs.com/tszr/p/15463651.html
Copyright © 2020-2023  润新知