目录
1.table表格
table表格标签 tr一行 td一列
bgcolor 背景颜色
table标签的常用属性:
border 边框宽度 默认是0
width 宽度
height 高度
align ='left | center | right' 表格在页面中的对齐方式
cellspacing 单元格之间的间距
cellpadding 单元格内部的内容到单元格周围的距离
tr标签的常用属性:
align ='left | center |right' 当前行文本的横向对齐方式
valign ='top | center | bottom' 当前行文本垂直对齐方式
td标签的常用属性:
align ='left | center |right' 当前单元格文本的横向对齐方式
valign = 'top | center |bottom' 当前单元格文本垂直对齐方式
<table border="2" width="400" height="400" align="center" bgcolor="red">
<tr valign="top" bgcolor="green">
<td>姓名</td>
<td>年龄</td>
</tr>
</table>
2.细线表格
<style>
table{
border-collapse: collapse;
}
</style>
<table border="2" width="400" height="400">
3.表格标题及表格语义化
caption 表格标题标签
thead tbody tfoot:标签本身没有什么效果 但是代表一定的结构 让表格结构更清晰
4.合并单元格
rowspan=''合并的行数 高度变高
clospan=''合并的列数 宽度变宽
<table>
<tr>
<td colspan="2">1-1</td>
<td rowspan="3">1-3</td>
</tr>
</table>
5.表单
作用:收集用户信息,把这些信息发送给服务器
表单分类:
表单域
form标签 所有的表单控件都要放到表单域里面
form表单的action属性 填写服务器地址
表单控件
标签名:input
input标签的type属性不同表示不同的控件
type='text'普通输入框
type='password'密码输入框
type='radio'单选框 相同的name属性 互相单选
type='checkbox'多选框
下拉列表:
select option:多选菜单 在select标签上面添加multiple属性
按钮:
input type='button' 普通按钮 按钮的value属性定义按钮文字
input type='reset'重置按钮
input type='submit'提交按钮
多行文本:
textarea
表单提交:把表单域里面的表单控件收集到的用户信息
提交给form标签action属性所指向的服务器的地址
前提:
表单域内必须有提交按钮 点击时会自动提交
form表单的属性:
action 填写服务器地址
method 提交方式
目前阶段大概了解 常用方式get post 默认值get
带有name属性的表单控件可以被表单域提交
?username=su&pwd=123
?键1=值1&键2=值2....
get提交方式:默认在地址栏通过?拼接 以键值对的方式提交给后台
<form action="https://www.baidu.com" method="get">
<p>
用户名:
<input type="text" name="username">
</p>
<p>
密码:
<input type="password" name="pwd">
</p>
<p>
<input type="submit">
</p>
</form>
6.表单控件的通用属性
表单控件的通用属性:
name:有name的表单控件才会被提交
value:表单提交时 根据name提交value name-value
disabled表单控件被禁用 不会被提交
type='text' 输入框
常用属性:
readonly 只读表示输入框内容不可修改
placeholder 输入框占位提示文字
value 输入框默认输入内容
type='password' 密码框
常用属性:和上面一模一样
type='radio'单选框
value属性是用来被提交的值 选中哪一个提交哪一个的value
以上两个默认被选中需要添加checked
select 下拉菜单
name写到select标签上面
option的value是被提交的值
哪一个被option选中 就提交哪一个option标签的value值
若option没有定义value 则默认提交标签内部文本
文本控件
input type = file 可以选取本地文件 进行文件上传
图片提交按钮
input type = image src 关联图片的地址
label信息提交控件
for属性 可以关联一个表单控件的id属性 和控件之间联动
按钮的另一个标签:
button 内部定义按钮
默认是提交按钮的功能
type属性:控制按钮的功能
type = 'submit' 默认值 提交按钮
type = 'reset' 重置按钮
type = 'button' 普通按钮
7.html语义化标签
无语义化标签
div 独占一行
span
语义化标签:
标签本身没有什么效果 但是代表了一个意境或者代表了一定的结构
header main footer nav