html 表格 字数,HTML--表格

一.表格特殊的显示方式

1.基本语法

tr---table row

td---table data

2.属性

①table

|border="1"

width="200"

height="200"

bgcolor="pink"

bordercolor="purple" 边框颜色

cellpadding="1" 内容到边框的距离

cellspacing="0" 边框到边框之间的距离

align="center" 设置表格本身的水平对齐方式

②tr

align="right" 控制内部内容水平对齐方式

valign="middle" top/middle/bottom 设置内部内容的垂直对齐方式

bgcolor="aquamarine"

③td

width="100"

height="100"

align="right"

valign="bottom"

bgcolor="coral"

列合并/行合并

3.table的原理

早期，我们使用table做页面布局

后来由于表格布局，页面渲染效率极低，不再使用表格布局

现在只有学习的时候，才用表格布局

表格的特点

①表格每一行的总列数相同

②不同行的同一列，宽度必须一致

③同一行的每一列，高度必须一致

④表格尺寸，如果设置的大，内容少，以设置的为准

如果设置的小，内容多，以内容为准

表格的渲染方式

是把所有的表格数据都下载完毕，放入内存计算

然后一次性把表格渲染到页面上

多了存取内存的步骤，所以效率极低

4.不规则的表格

列合并 colspan="n"

当前列，向右合并n个单元格(n包含自己)

把被合并的单元格删除

行合并 rowspan="n"

当前列，向下合并n个单元格(n包含自己)

把被合并的单元格删除

5.可选标记

①表头

使用

替代td，所有td的属性，th都能用

th默认文本加粗并居中

②表标题

必须在

③表格的行分组

把表格的内容，按照行进行分组

如果编写代码的时候，没有设置行分组

浏览器在解析运行的时候，会把所有的行都放入tbody中

6.表格的嵌套

被嵌套的内容，一定要写在td/th中

二、列表

1.列表的组成

有条理的显示数据，现在常用无序列表做布局

①列表类型

有序列表 order list

②列表项

list item

2.列表属性

①有序列表的属性

type="I" 设置列表标识项的类型 默认1，a/A， i/I

start="999" 设置计数开始

②无序列表的属性

type="disc" 实心小圆点

circle 空心小圆点

square 实心小方块

none 去除列表标识项

3.列表的嵌套问题

所有被嵌套的内容，必须放在li中

4.定义列表(h5新标签)

对一段话，做出解释说明

要解释说明的语句

解释说明

三、结构标记

结构标记，作用与div完全一致，但是使用了有语义的关键字

作用：增强语义，显示代码结构

定义网页的头部，或者某个区域的顶端

定义网页的导航部分

定义网页的底部，或者某个区域的底部

定义网页的侧边栏

定义网页的主体内容

定义于文本相关的内容，比如，回复，评论.....

四、表单(重点***********)

1.表单的作用

①提供了用户输入的可视化控件

②可以自动的收集整理用户填入的数据(必须写name属性)

③发送请求

总结：

什么时候用name属性，什么时候用id属性？？(只限于第二阶段知识点)

form表单要提交数据，必须写name属性

ajax提交数据，不使用form表单，就没有自动收集数据的能力了

所以ajax中的控件不需要name属性，使用id

例外：单选和多选按钮，同时使用id和name(name做分组用的)

2.表单

页面上不可见

①action=""

要提交的url接口，如果不填，会默认提交给本页面

②method="get"

设置这个请求的提交方法，默认值为get

get/post/put/delete

restful API get 查询

post 新增

put 修改

delete 删除

③enctype="application/x-www-form-urlencoded"

指定表单数据的提交格式，允许将什么样格式的数据提交给服务器

默认值 application/x-www-form-urlencoded

允许提交任意字符给服务器

text/plain 允许提交普通字符给服务器(不包含= & 等特殊符号)

multipart/form-data 允许提交文件和任意字符给服务器

3.表单控件，在form中与用户进行交互的可视化元素

分类

1.input元素 基础的9种，新input元素10种

2.textarea 多行文本域

3.下拉选择框 select>option

4.其它元素

4.input元素详解

①所有input元素都有的属性

type="" 指定当前input元素的类型(文本框，密码框，单选，多选，按钮)

name="" 给当前元素命名，有name属性的元素才能在form中被提交

后期使用ajax就不用写name属性啦

value="" input控件的值

disabled 无值属性，禁用，只能看不能改，不能提交

②文本框和密码框

type="text" 文本框

type="password" 密码框

专有属性

maxlength="4" 用户最大输入长度

readonly 无值属性，只读，不能修改，但是可以提交

placeholder="" 提示占位符

③按钮相关

type="submit" 提交按钮

type="reset" 重置按钮，恢复到表单的初始状态

type="button" 调用js

value 设置按钮上文本，不会被提交

提交

④单选按钮和多选按钮

type="radio" 单选

type="checkbox" 多选

单选和多选，需要使用name属性来分组，在同一组中进行单选和多选的功能

必须用value属性设置值，不然都是on

checked 无值属性

⑤隐藏域

数据要提交，但是数据不给用户看

type="hidden"

⑥文件选择框

form表单上传文件，前提设置method="post" enctype="multipart/form-data"

5.多行文本域(多行的文本框)

rows="3" cols="5" 控制行数和列数，但是不准确

6.下拉选择框

option没有value,select的value是选中的option的内容区域

option有value, select的value是选中的option的value

属性 select size="n" n=1,下拉选择框

n>1,滚动选择框

multiple 按住ctrl进行多选

option value

selected

7.其它元素

①label

可以替代form中span，盛放文本

关联文本与表单控件

文本

②为控件分组

--------分组，一个大边框

分组标题

练习：

1、完成课程表

课程表.png

2、完成此图

图片2.png

3、完成form表单练习

表单.png

用户基本信息

用户名称：

placeholder="请输入您的用户名称" maxlength="8"/

style="margin-left:16px">

用户名密码：

id="pwd"

type="password"

name="upwd"

placeholder="请输入用户名密码"

value="123456"

readonly

maxlength="12"

/>

用户性别：

男

女

用户爱好：

吃

喝

玩

乐

选择头像：

自我介绍：

工作城市：

天堂

成都

重庆

西安