列表概述
1.列表为对某件事物进行步骤的描述,或者一系列有关联的事项的描述的标签,或者对某些名词进行定义。
2. 列表标签为双标签
3. 列表默认情况是一个“块级标签",占据整行。
4. 列表类型:无序列表ul 和 有序列表ol 和 定义列表dl 【注意:他们的子li,dt,dd标签也是块级标签】
type属性
无序列表ul可以通过“type"属性来设置“列表项目符号"的类型
disc 项目符号以实心圆“●"表示,默认值。
circle 项目符号以空心圆“○"表示。
square 项目符号以实心方块“■"表示。
有序列表ol
项前不再是用“●"表示,而是“阿拉伯数字的表现形式。
reversed、start 、type 属性
reversed 规定有序列表的顺序为“倒序"。
start 规定有序列表的起始值【以阿拉伯数字表示各种类型】
type 规定有序列表的序号显示类型,有以下值:
“1",默认,以阿拉伯数字作为列表符号
“A",以大写英文字母作为列表符号
“a",以小写英文字母作为列表符号
“I",以大写罗马数字作为列表符号
“i",以小写罗马数字作为列表符号
有序列表嵌套时,它的“type"属性需要手动设置后才能显示为不同的项目符号,否则全部都为以默认的“阿拉伯数字"显示。
定义列表dl
适用于对名词进行描述,
类似于ul、ol,定义列表的最外层为dl,然后还有dt,dd两个标签。dt用于定义列表中的项目,dd用于描述定义的项目,
在写代码时,dt和dd没有包含关系,他们是同级的。然后它们的显示类型都为“块级元素(block)
表格标签table
概述
1.具有使网页展示表格形式内容的标签
2.表格标签为双标签
3.表格标签默认情况是一个“类似于块级标签的table类型",即在他会占据整行。(虽然有点特殊,给上一个边框他没法完全占据一行,显示的加上display:block,又能独占一行)
完整的表格为:表头+表体+表尾
一般表头表尾都只有一个,但是表体tbody可以写多个
通过属性设置表格样式
① 给表格设置边框【border属性】
② 设置表格单元格之间的距离(cellspacing),
③ 单元格与内容之间的距离 (cellpadding)
④ 设置表格的宽度(width),高度(height)
⑤ 设置表格背景图片【background】与 背景的颜色【bgcolor】
⑥ 设置表格对齐方式或单元格内容的对齐方式【align】
⑦ colspan【跨列】属性 与 rowspan【跨行】属性
表单标签form概述
1.form标签为具有接收用户输入并提交的功能的标签
2.form标签为双标签
3.form默认情况是一个“块级标签",他会占据整行空间
4.它里面的input,button等标签是行内块元素
基本表单
外层的form标签 + 在form里面的表单元素标签其中,表单元素一般要放置于表单标签form中,不然某些表单元素将会失效,如:“提交"按钮和“重置"按钮。
最常用属性
action
规定当提交表单时向何处发送表单数据,它的属性值应该是一个“URL"。这样当我们点击提交按钮后,网页就会跳转到url所代表的站点或页面处。
method
规定用于发送表单数据的方法,值为 : get / post , 默认为get方式.
- 发送数据时,input标签的name属性一定要加上,
否则数据就无法发送出去。 - get / post 的比较
① 可见性
get方式发送的数据会直接附加到表单的action属性所指的URL的后面,用户可见!
post方式发送的数据会放置在header里发送到action属性所指的URL地址处。用户不可见。
② 数据量
get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。
③ 安全与效率
get安全性低于post,但效率高于post
④ 作用
一般而言:get 用于查询居多,post用于更新居多。
target
规定在何处打开“action"中设定的URL。和a标签一样,具有以下值:
_blank 【在新窗口打开】
_self 【就在当前窗口打开】
_parent 【在父窗口打开】
_top 【在顶层窗口打开】
iframe的“name"【在某个iframe中打开】
位于form内的一些标签
label标签
用于显示一些说明/提示信息,行内元素,不会占据整行。
就显示效果上而言,加了和没加并没什么区别,但是对搜索引擎会更加的友好
input标签
用于接收用户输入,为行内块元素。他不仅仅是接收文本的输入,通过type属性的设置我们还可以接收不同类型值的输入。
type属性
input标签的type属性的一些常用可选值
text 普通文本
search 搜索框
password 密码
radio 单选按钮
checkbox 复选框
file 文件上传
image 定义图像作为提交按钮
button 按钮类型
submit 普通提交按钮
reset 重置按钮
hidden 隐藏输入域