表格的基本语法结构如下所示: <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(自动)。