技能目标
掌握表格的基本用法
掌握表单的用法
掌握CSS的高级选择器的用法
表格的基本结构 <table>
行 <tr>
列
单元格 <td>
表格的基本语法
<table border=1px>
<tr> 这里表示1行有2列
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
表格的跨行和跨列
<table width="100%" border="1">
<tr>
<td colspan="3">学院成线</td> 跨列
</tr>
<tr>
<td rowspan="2">白杨</td> 跨行
<td>语文</td>
<td>98</td>
</tr>
五行三列
<table border=”1”>
<tr>
<td colspan=”3”>三年级五班学院的语文成绩和数学成绩</td>
</tr>
<tr>
<td rowspan=”2”>白杨</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>96</td>
</tr>
<tr>
<td rowspan=”2”>杨晨</td>
<td>语文</td>
<td>92</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
表单是用来搜集用户数据
表单的应用场景
表单在网页中的应用有哪些?
注册、登录
个人信息记录
....
表单的基本结构
表单元素:单选框,复选框,按钮,文本框,密码框,提交按钮...等
Action=”” 提交到该网站的服务器进行处理,检测用户是否存在...等
Action=”#”提交给本页面
Method=”post”表单数据以post提交
<form method=”get” action=”#”>
用户名:<input type="text" name=”username”><br/>
密码:<input type="password" name=”password”><br/>
<input type="submit"> 此处显示的是一个"提交"按钮,若要改按钮内的值则加属性value="登录"
</form>
填写用户名和密码按提交后,执行后呈现这样的效果:
结论:以get方式提交,表单的数据能通过地址栏获得。因此数据提交会不安全
若method=”post”,填写用户名和密码按提交后则效果为
结论:以post方式提交,表单数据并不是通过地址栏来传递的,因此表单数据是安全的
第一点是表单数据的安全,第二点是当表单数据过多的时候,例如需要注册时用到”性别”、”爱好”等,若以“get”方式提交,则地址栏会呈现一大长串的数据,但地址栏会有字节数限制,存在有些表单数据没传到的情况,出现数据不完整的情况。
So,在真正做表单提交的时候,post方式更常用,在与后台交互JavaScript等时通常用get
1、表单元素还有哪些属性?
2、还有哪些常用表单元素
表单元素
<input type="text" name="fname" value="text">
类型 名称 值
这里的name,将来通过这个名称拿到对应的值
这里的value,指的是文本框默认的内容
Check复选框 radio单选框 reset重置按钮 file文件框
爱好:<input type="checkbox" name="hobby" value="1"/>吃
<input type="checkbox" name="hobby" value="2"/>喝
<input type="checkbox" name="hobby" value="3"/>嫖
<input type="checkbox" name="hobby" value="4"/>赌
上传文件:<input type="file" name=”file”/>
重置<input type="reset"/> 变为表单的初始状态并不等于清空(例如:我原先在type=”text”还加上一个value=”请输入用户名”)
<input type="image" src="img/1.jpg"/> 定义图像形式的提交按钮,src指的是图像的路径
<input type=”button” > 普通的按钮并且框里面什么东西都没有,点击后无任何行为(可通过地址栏看看后缀是否有多加的数据),要使按钮框里有内容,在加入value属性
Size 指的是元素的宽度,即文本框或密码框的长度
而maxlength指的是内容限制的长度,即文本内容的长度
Checked=”checked” 这里前提条件是type为radio或checkbox时,然后这个选项导致网页的初始状态已经显示了那个默认选项。
注意:
1、<input type="radio"/>男<input type="radio"/>女
如果单单上面这行是起不了单选框的作用,即男 女都可以选,要想达到互斥的效果,这个时候需要给标签在加一个name属性
<input type="radio" name=”sex”/>男<input type="radio" name=”sex”/>女
2、当type的属性值是checkbox时,value的值是日后传输给数据库的,服务器拿到的是你选择的选项就比如是1和2(你选择了吃和喝)与当type的属性值是text时,value的值是显示默认的文本内容不同的
列表框应用于下拉选项的,例:你所在的年级,选项有大一、大二、大三
<select name="名称" size="行数">
<option value="值" selected="selected">
...
</option>
<option value="值">...</option>
</select>
Select标签代表列表框 selected=”selected”代表默认选中项(比如填写的这个居多,方便)option代表选项
多行文本域,例如应用在签网页的协议 我同意、个人简介
<textarea name="showText" cols="x" rows="y">
文本内容
</textarea>
textarea代表多行文本域,cols代表显示的列数,rows代表显示的行数
注意:多行文本域的”文本内容”和<input type=”text” value=”文本内容”>中的文本内容位置不一致
表单的高级应用
隐藏域
type="hidden"
只读
readonly="readonly"
禁用
disabled="disabled"
<input type=”hidden”> 一般用于动态网页,运用在什么地方呢?
用户名:<input type=”text” value=”请输入用户名” readonly=”readonly”>
这里鼠标点击后无光标没办法修改
<input type=”submit” value=”登录” disabled=”disabled”>
这里网页的初始状态,这个按钮是灰色的不可点击状态,当填写完这个页面内容,这个状态还是灰色的。要想使其变为可点击状态,要用到JavaScript脚本与HTML相结合。
什么是表单语义化
1、符合W3C标准
2、语义化的标签
3、结构合理、代码简洁
简而言之,每一个标签都有自己的含义、范围,选择最合适的标签搭配最合适的事
<input type="radio" name="sex" id="man"/><lable for="man">男</label>
这句话的效果是单击字“男”前面的圆圈或单击字“男”都能使圆圈勾选