声明:需要讲解的留言哈,表单必过,死记硬背也得过哈
特殊字体 (选择题偶尔考考,要认识哈)
![](https://i-blog.csdnimg.cn/blog_migrate/561614acf52c0862a135ff1f074d34a7.png)
表格
格在网站中应用常用场景通常是金融类的网站,数据做统计,后台管理系统等
1.相关标签
画图说明,table是一个表格的模块,里面有行,光有行不行,里面要有列,在html中不叫列,叫单元格,再有很多行,就组成了表格-------》table标签包含行tr---》再包含单元格td
表格:<table></table>
行:<tr></tr>
单元格:<td></td>
每列的标题:<th></th>
表格标题:<caption></caption>【操作题常考,要会哈】
表格的边框 语法
<tableborder=1>
</table>
注意:border这个属性一定加在table标签上,加在td上不生效
2.对齐方式
a) 水平对齐
语法:align="center/left/right"
b) 垂直对齐
语法:valign="top/middle/bottom"
3.单元格间距和填充
单元格间距(cellspacing):单元格和单元格距离,默认是2像素
单元格填充(cellpadding):单元格和内容的距离,默认是1像素
合并单元格(选择操作常搞)
这种合并是上下合并,所以合并的是行。如果是左右合并,那就是合并的列
合并行(rowspan):把不同的行合并起来,写在上面的单元格上面
合并列(colspan):把不同列合并起来,写在左边的单元格上面
取值是数值,需要合并几个单元格就写数字几就行,一旦合并了单元格,就需要将多余的单元格删掉
注意:合并以后一定要把多余的单元格td删掉
两个排版标签
这两个标签没有语义
div标签:一般用于存放图片、文字、视屏等网页内容----存放一切内容------用作盒子
span标签:一般只用于存放文字--------存放文字
标签的通用属性
1.id属性
id属性是标签的唯一标识,一个页面中可以有很多id属性,但是每个标签的id属性的值必须是唯一的
多学一招:通常用在写动态效果-----javascript
2.class属性----类
通常用来使用class属性值给标签设置样式,样式一样的标签可以设置同样的class
3.name属性
设置标签的名字,可以有同样的名字
多学一招:通常用在表单中
4.style属性
设置标签样式
表单
表单的作用就是用来收集用户输入的信息
表单的组成:表单域,表单元素
表单域标签:<form></form>,放置所有的表单元素
表单元素:
1.文本框
可输入明文内容的输入框----用户名
<input type="text" maxlength="6">
多学一招:maxlength属性可以限制最大输入长度,为了让服务器端接收到输入的数据,表单元素都需要加name属性
2.密码框
输入密文的输入框----密码
<input type="password">
密码框的属性和使用和文本框一样
3.单选框
只能选择一项的表单----性别选择
<input type="radio" value="0">
注意:要想单选框的单选功能生效,必须添加name属性,并且name属性的值必须一样,这种无法输入的表单元素必须赋值:value="值",默认选中项使用checked="checked"属性
代码
<inputtype="radio"name="sex"value="0">男
<inputtype="radio"name="sex"value="1"checked>女
4.复选框
可以选择多项的表单----爱好选择
<input type="checkbox" value="0">
使用方式和属性与单选框一样
5.文件上传
<input type="file">
6.下拉菜单
通常用于选择籍贯或收货地址中的省市区
<select>
<option>江苏</option>
<option>浙江</option>
<option>安徽</option>
</select>
默认选中项使用selected="selected"
多学一招:下拉菜单可以分组展示
<select>
<optgroup label="省份">
<option value="1">山东省</option>
<option value="2">河北省</option>
<option value="3" selected>河南省</option>
</optgroup>
<optgroup label="行业">
<option value="1">IT互联网</option>
<option value="2">制造业</option>
<option value="3" selected>零售业</option>
</optgroup>
<optgroup label="薪资范围">
<option value="1">1000~3000元/月</option>
<option value="2">3000~5000元/月</option>
<option value="3" selected>5000~8000月</option>
</optgroup>
</select>
![](https://i-blog.csdnimg.cn/blog_migrate/caa0fce479a333fe3f06455f48a21bb9.png)
7.文本域
可以输入很多的内容----qq的留言输入框
<textarea></textarea>
多学一招:文本域可以通过两个属性来设置大小,宽度使用cols属性,高度使用rows属性(选择题常考)
8.普通按钮
点击不会有任何效果
<input type="button" value="普通按钮">
![](https://i-blog.csdnimg.cn/blog_migrate/bfbe757f13353377bb60ff6e0f4b939e.png)
9.提交按钮
用于提交表单的按钮
<input type="submit">
![](https://i-blog.csdnimg.cn/blog_migrate/4bd3bac835a86964d6f913b3228358eb.png)
多学一招:该按钮点击后默认会将表单的数据提交
10.重置按钮
将表单的输入状态还原的按钮
<input type="reset">
![](https://i-blog.csdnimg.cn/blog_migrate/1cd29d8f8b1d6b26190dc3c6162922bc.png)
表单域
标签:<form></form>
作用:将表单元素的值收集起来,发送给服务器,form标签的action属性的值就是数据提交的地址
第一次提交,没有数据,因为很多表单元素都没有name属性,服务器接收数据靠的就是表单的name属性
注意:form是一个双标签,里面包含所有需要一次性提交给服务器的表单元素
![](https://i-blog.csdnimg.cn/blog_migrate/5e6965f1383c9522486648612abaa7cc.png)
只考过选择题