html表格结构划分标记,HTML-表格-列表-结构标记-表单

1.表格

1.表格语法

1.标记

1.表格

2.行

--table row

3.单元格/列

--table data

练习：

1.创建一个4行4列的表格

2.在table标记中嵌套tr

3.在tr中嵌套td

2.属性

1.table属性

border:表格边框

width:宽度

height:高度

align:设置表格的水平对齐方式

left/center/right

bgcolor:设置表格的背景颜色

cellpadding:设置单元格的内边距(内容与td之间的间距)

cellspacing:设置单元格外边距(td边框外的间距)

练习：

在练习一的基础上将表格的样式设置如下:

1.设置表格尺寸为400*400px

2.设置背景颜色为orange

3.设置表格水平居中对齐

4.设置内边距为5px

5.设置外边距为10px

2.tr属性

1.align 设置当前行内容的水平对齐方式

left/center/right

2.valign 设置当前行内容的垂直对齐方式

top/middle/bottom

3.bgcolor 设置当前行的背景颜色

练习：在练习二的基础上

1.设置第二行的数据靠右对齐

2.第二行背景颜色为紫色purple

3.设置第三行垂直方向靠上对齐

3.td属性

width:宽度

height:高度

align:水平对齐方式

valign:垂直对齐方式

bgcolor:背景颜色

colspan:跨列

rowspan:跨行

4.表格的复杂应用

1.行分组

可以将连续的几个行，划分到一个组中，并进行统一管理

1.表头行

表格中最上面一行进行分组的话，可以放在表头行中。

2.表主体行

表格中将若干行放在tbody中，进行统一管理

3.表尾行

将表格中最后一行进行分组管理的话，可以放在表尾行中。

2.不规则表格使用

1.跨列

colspan 从指定单元格位置处开始，横向向右合并几个单元格(包含自己)，被合并掉的单元格要删除。

2.跨行

rowspan 从指定单元格位置处开始，纵向向下合并几个单元格(包含自己)，被合并掉的单元格要删除。

注意：

如果表格进行了分组管理，不能将不同组设置跨行操作。

5.可选标记

1.表格标题

如果设置表格标题，则必须将

放于

2.行/列标题

所有的td都可以用th取代

6.表格嵌套

表格的嵌套，在td中取嵌套另一个表格

2.列表

1.列表的作用

按照从上到下(从左到右)的方式来显示所有的数据，并且可以在数据前增加显示的标识。

2.列表组成

1.列表都是由"列表类型"和"列表项"来组成。

1.列表类型

有序列表：

--order list

无序列表：

2.列表项

用于展示数据(嵌套在列表类型中)

--list item

练习：

创建有序列表，4个列表项，每个列表项中分别写上四大名著的名称

2.列表属性

1.有序列表

1.type 指定列表标识的类型。

取值：

1 数字，默认值

a 小写字母

A 大写字母

I 大写罗马数字

i 小写罗马数字

2.start 指定起始编号从第 几 位置开始排序。

2.无序列表

1.type 指定列表的标识类型

取值：

1.disc 实心圆点

2.circle 空心圆

3.square 实心方块

4.none 不显示标识

3.列表嵌套

在一个列表项(li)中去嵌套另一个列表.

语法：

1. • 内容
   • 内容

3.定义列表

1.什么是定义列表

定义列表常用于给出一类事物或对名词的解释说明。

2.语法

1.

表示定义列表

2.

表示定义列表中要解释说明的名词

3.

表示定义列表中对名词解释的内容

名词

解释名词的具体内容

使用场合：图文混排时使用

3.结构标记

1.结构标记的作用

用于描述整个网页的结构(取代div做布局)

提升标记的语义性和可读性。

2.常用的结构标记

1.

作用：定义网页或某部分内容的头部。

2.

作用：定义网页的导航链接部分。

3.

作用：定义网页主体内容。

4.

作用：定义页面中侧边栏的信息，靠近边缘。

5.

作用：定义网页中偏底部的内容，比如：备案号，解释说明，联系方式等。

6.

作用：定义与文字相关的内容，如：论坛帖子，微博条目，用户评论等。

4.表单

1.作用

1.提供可以与用户交互的可视化控件(用户名和密码输入框，登录按钮等)

2.收集用户信息并提交给服务器

2.表单的组成部分

1.前端部分

表单控件，与用户交互的可视化控件

2.服务器端部分

对收集的数据进行提交(提交数据的处理)

3.表单

标记：

属性：

1.action

作用：定义表单被提交时发生的动作，通常定义的是服务器上处理程序的地址(url),默认提交给本页

2.method

作用：指定表单数据的提交方式

取值：

1.get(默认值)

1.明文提交，待提交的数据会显示在浏览器的地址栏中。

2.安全性不高

3.提交数据有大小限制，限制2KB

4.向服务器要数据时使用get方式

2.post

1.隐式提交，提交的数据不会显示在地址栏中。

2.安全性较高

3.提交数据无大小限制

4.要传递数据给服务器时使用。

3.delete 一般禁用

4.put 一般禁用

3.enctype

作用：指定表单数据的编码方式，允许将什么样的数据提交给服务器。

取值：

1.application/x-www-form-urlencoded

默认值，允许将任意的字符提交给服务器(文件无法提交)

2.multipart/form-data

允许将文件提交给服务器

3.text/plain

只能将普通文本提交给服务器

4.表单控件

能够与用户进行交互的可视化控件。

1.分类

1.input 元素

2.textarea-多行文本域元素

3.select和option-选项框元素

4.其它元素

2.input元素

1.作用

在页面中提供各种各样的输入控件。如：文本框，密码框，单选按钮，复选框...

2.语法

1.标记或

2.属性：

1.type 指定创建输入控件的类型

ex:

type="text"

type="password"

2.name 为控件定义名称，服务器端使用(必须值)

3.value 控件的值，服务器端使用

4.disabled 禁用控件，不能操作并且数据也不能提交给服务器。

无值属性，只要出现在标记中，就是禁用。

3.详解

1.文本框和密码框

文本框：

密码框：

属性：

1.maxlength

指定限制输入的字符数

2.readonly

只读，只能看，不能改，但允许被提交。

无值属性，直接将属性放在标记中。

3.placeholder

占位符，即默认显示在控件上的文本。

2.按钮

1.提交按钮

功能：将表单中的数据，提交给服务器程序使用

2.重置按钮

功能：将表单中的数据恢复到初试化状态。

3.普通按钮

没有功能

注意：

属性：value 定义按钮上显示的文字。

3.单选按钮和复习框

单选按钮：

复选框：

属性：

name 除了定义控件的名称之外，还能起到分组的作用。

checked 设置默认被选中，无值属性。