学习html第二天
表格
table:表格标签,包含多个tr
tr:表格中的行,包含多个td
td :表格中的单元格,写内容
table和tr只能打见表格结构,不能存放实际内容
td存放单元格数据
th表头单元格,一般第一行标题使用,和td一样可以存放内容,但内容呢会加粗并居中
-
表格属性:
**属性名** **属性值** **描述** align left、center、right 表示对齐方式左中右 border 宽度像素值或“” 表示边框,默认“”无边框 width 像素值 宽度 height 像素值 高度 cellspaing 像素值 单元格之间的距离,默认2像素 cellpadding 像素值 内容与边框之间的距离,默认1像素
-
表格结构标签
thead:定义表格头部(标题行),必须拥有tr标签 ,一般位于第一行
tbody:定义i表格的主题,通常包含标题下方的表格数据区域
thead和tbody只是用来划分表结构的,用来区分标题行和数据区域,不能替代tr、th、td、标签的作用
表格中实际要显示的内容,需要放在th和td标签中,其他标签偶爱你进士用来搭建表格结构或者增强表情结构的语义的
三种列表
ul:无序列表,只允许包含多个li标签
li:用于存放列表项内容
:有序列表
ol:有序列表,只允许包含多个li标签
li:用于存放列表项内容
dl:自定义列表,只允许包含dt和dd标签
dt:关键词(term)内容,和dd是并列关系,后续dd都跟随前面的dt
dd:存放前面dt关键词对应的列表项内容
列表是独占一行的
虽然一个dl中可包含多个dt,但是在实际开发中通常只包含一个dt,因为这样更方便布局
表单
在开发网站时,可以使用表单***收集用户信息,统一提交给后台***处理
form:统一汇总要收集的数据,统一提交给后台,例如包含姓名、性别等完整的用户信息记录
**属性** **属性值** **作用**
action URL地址 用于指定接受并处理表单数据的服务程序的URL地址
method GET/PSOT 用于设置表单数据的提交方式,取值为GET、POST等
name 名称 用于指定表单没名称,用以区分一个页面中的多个表单域
-
表单控件
表单控件(表单元素):与用户交互,允许用户输入或者选择单个具体的信息,以达到通过扁担手机信息的目的
input:输入
type属性是input标签的必须属性,用来指定input控件的类型
**控件特点 属性值 描述** 输入 text 输入文字 输入 password 密码 选择 radio 单选按钮,多选一 选择 checkbox 复选框(打勾) 点击选择文件 file 文件上传使大狗用 点击 button 按钮 点击 image 按钮 表单操作 submit 提交,会把数据发送给服务器 表单操作 reset 重置,会清空表单所有数据
通过value属性可以指定提交或重置按钮中的文字
name可以把表单控件去分开,多个单选按钮设置相同的name属性,能狗实现用户单选,同一组单选按钮或复选框,那么属性的值应该一致
value属性可以记录用户在空间中输入的值或者选择的结果
如果用户要修改之前保存过的信息,checked属性可以选中用户之前的选择,例如:修改个人信息
checked属性可以默认选择某个单选或复选框,在H5中 checked=“checked” 可以简写为 checked
maxlength属性可以限制输入框中输入项的长度
特殊符号 &emsp ; 是一个全角的中文空格,在界面布局时有时候非常有用
在开发时,无论是单选还是复选,都不适合提供太多选项——惠然那个用户出现选择障碍
label标签
label可以和表单中的元素绑定,增加点击范围,提高用户体验
给要绑定的input标签设置唯一的id属性值,使用
-
<label for="控件id">标签文字</label>
让 label 标签与对应控件绑定,
或者用-
<label>标签文字按钮</label>
label标签和input标签是并列关系,通过label标签的for属性和对应id的input标签建立联系
select:选择
select:下拉列表
option:下拉列表选项,用于存放选项内容
使用selected属性能够默认选中某一项,和checked类似,在H5中,
selected=“selected”可以简写问selectedtextarea:文本域
如有需要输入大量文字并且需要换行时,可以使用文本域,例如:个人简介、留言板、评论
卸载双标签内部的文字就是文本域的默认值,一般默认值从后台加载,开发时我无需指定初始值
文本域双标签内部的空格会被完全还原,所以开始标签和结束标签需要写在一行
-