表格
基本的表格结构:
<table>:创建表格
<tr>:每行的开始,(table row)
<td>:表格中的每个单元格
表格的标题:
<th>:用法与<td>类似,表示列或行的标题(table heading),没有内容的话就是空单元格。
scope特性:元素是列标题还是行标题
<th scope="col">xxxx</th> #列标题
<th scope="row">xxxx</th> #行标题
跨列:
在<th>或<td>元素中用colspan特性表明单元格索要跨越的列数。
<td colspan="2">xxxx</td> #跨越了两个单元格
跨行:
在<th>或<td>元素中用rowspan特性表明单元格索要跨越的行数。
<td rowspan="2">xxxx</td> #跨越了两列单元格
长表格:
<thead>:表格标题
<tbody>:表格主题部分
<tfoot>:表格脚注
宽度和间隔:
<table>标签的特性:
width:表格的宽度
cellpadding:表格中的每个单元格增加内边距
cellspacing:每个单元格之间设置间隔
<table width="400" cellpadding="10" cellspacing="5">
边框和背景:
<table>、<td>标签的特性:
border:指定边框宽度
bgcolor:为整个表格或是单独的单元格指定背景颜色(十六进制代码)
表单
表单控件:
添加文本
单行文本框(text input):用于单行文本,电子邮件地址和姓名
密码框(password input):掩盖输入字符
文本域(text area):用于较长的文本,消息和评论
进行选择:
单选按钮(radio buttons):用户必须选择一个选项
复选框(checkboxes):可以选择一个或者多个选项
下拉列表(drop-down boxes):用户从一个选项列表中挑选期中之一
提交表单:
提交按钮(submit buttons):从你的表单向另一个网页提交数据
图像按钮(image buttons):类似于提交按钮,不过允许使用图片
上传文件:
允许把文件上传到网站
表单结构
<form>标签的特性: action:每个<form>元素都需要一个action特性,特性值是服务器上一个页面的URL,这个页面用来在用户提交表单时接收表单的信息
method:表单提交的方式(get和post)
get(默认):短表单(搜索框)、中从web服务器上检索数据的情形
post: 允许用户上传文件、非常长、包含敏感信息(密码)、向数据库中添加信息,或是从数据库中删除信息
id:表单进行唯一标识
单行文本框
<input>创建多种不同的表单控件:
type:创建那种控件
单行文本框,对表单控件进行识别并与输入的信息一同传送到服务器,文本框的宽度,限制用户在文本区域输入字符的数量
<input type="text" name="username" size="15" maxlength="30"/>
密码框,对表单控件进行识别并与输入的信息一同传送到服务器,文本框的宽度,限制用户在文本区域输入字符的数量
<input type="password" name="password" size="15" maxlength="30"/>
单选按钮,与输入的信息一同传送到服务器,指定了被选中时要发送到服务器的值,未选择时默认选项(一共三个选择rock,pop,jazz)
<input type="radio" name="genre" value="rock" checked="checked"/>rock
<input type="radio" name="genre" value="pop" />pop
<input type="radio" name="genre" value="jazz" />jazz
复选框,与输入的信息一同传送到服务器,指定了被选中时要发送到服务器的值,未选择时默认选项(一共三个选择itunes,lastfm,Spotify)
<input type="checkbox" name="service" value="itunes" checked="checked"/>itunes
<input type="checkbox" name="service" value="lastfm" />Last.fm
<input type="checkbox" name="service" value="spotify" />spotify
文件上传域
<input type="file" name="user-song"/>
提交按钮(将表单发送到服务器)
name不是必须的特性,value控制按钮上显示的文本
<input type="submit" name="subscribe" value="subscribe"/>
图片按钮
<input type="image" src="" art="" width="" height=""/>
隐藏控件
不会显示在页面上,运行网页设计人员向表单添加用户不能看到的值,方便网页设计人员在提交表单时位于那个页面
<input type="hidden" name="bookmark" value="lyrics"/>
按钮
更好的控制用户按钮的显示方式
<button><img src="" alt="" width="" height=""/>add</button>
日期控件
<input type="date" name="depart"/>
电子邮件和url输入
<input type="email" name="email"/>
<input type="url" name="website"/>
搜索输入控件
<input type="search" name="search" placeholder="enter keyword"/> #placeholder(在文本框类显示的文本提示)
文本域(多行文本框)
<textarea name="comments" clos="20" rows="4">enter your comments....</textarea>下拉列表框<select name="devices"> #创建下拉列表框,包含两个或多个<option><option value="ipod">ipod</option><option value="radio">radio</option><option value="computer">computer</option></select>多选框<select name="instruments" size="3" multiple="multiple"> #size(将下拉列表框变成一个能显示多个选项的列表框)、multiple(允许用户选择多项)<option value="guitar" selected="selected">guitar</option><option value="drums">drums</option><option value="keyboard" selected="selected">keyboard</option><option value="bass">bass</option></select>标签表单控件两种方式使用<label>标签:<label>age:<input type="text" name="age"/></label> <br/> gender: <input id="female" type="radio" name="gender" value="f"> <label for="female">female</label> <input id="male" type="radio" name="gender" value="m"> <label for="male">male</label>
(1)将文本说明和表单输入框全部包围起来(2)与表单控件分开,使用for特性来指明<label>元素所关联的表单控件for特性与控件的id特性进行匹配
组合表单元素<fieldset>:可将相关的表单控件分成一组<legend>:跟着<fieldset>标签后面并包含一个标题,帮助用户理解控件组的用途