HTML篇分享之三

紧接着上一篇，继续进行知识点的总结和分享：

一、表格

 

表格的标记：

<table>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

 

</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

 

</table>

 

结构标记的说明：

 <table></table>它表示表格

<tr></tr>它表示表格中的行  一个表格中有多少行 就应该有多少对tr标记

<td></td>它表示行中的单元格   一行中有多少个单元格 就应该有多少对td标记

 <th></th>它也是表示行中的单元格 它表示的是标题单元格 它里面的文字会加粗和居中显示

 

table标记的属性

 border：表格的边框   取值：1~n

 borderColor：表格中边框的颜色

width：设置表格的宽度  取值：固定值或者百分比    百分比它是相对于当前元素的

 父元素来作为标准

 height：设置表格的高度   但是这个属性一般不建议使用

 align：设置表格的水平对齐方式   取值：left(默认值)|right|center

 bgColor：设置表格的背景颜色

 background：设置表格的背景图片  

 cellpadding：表格中单元格里面的内容到单元格边框之间的距离

 cellspacing：表格中单元格与单元格之间的距离

 

 

注意：表格默认是没有边框的  表格默认是有cellpadding与cellspacing 

 

tr的常见属性

 bgColor：设置行的背景颜色

 background：设置行的背景图片l width：设置行的宽度   

 height：设置行的高度

 align：设置行中的内容水平方向对齐方式   取值：left(默认值)|center|right

 valign：设置行中的内容垂直方向对齐方式  取值：top(顶部对齐)|middle(默认值) 中间对齐 |bottom  底部对齐

 

td或者th的常见属性

width：设置单元格的宽度

height：设置单元格的高度

bgColor：设置单元格的背景颜色

background：设置单元格的背景图片

rowspan：跨行合并单元格

colspan：跨列合并单元格

 

注意：

 首先要明确是跨行还是跨列  

 其实要开始在第一个合并单元格里面写属性

 要减去对应的单元格的数量  n-1

 

表格的标题标记

<caption></caption>  这个表示是table的子标记 它是用于来设置表格的标题

 

表格的隐藏标记

<thead></thead>  表示表格的头部

<tbody></tbody>  表示表格的主体部分    可以有多个  

<tfoot></tfoot>    表示表格的尾部    它一般是用来做统计用

 

很细的边框的表格

 

二、图像热点

给一张图片增加多个超级链接  

给一张图片设置一个超级链接

<a href=”#”><img src=”图片”/></a>

 

一定先要有图片  

格式：

<img  src=”图片的地址”  usemap=”#名称”>

<map  name=”它要和img标记里面的usemap的属性值一样”>

<area  shape   coords=””  href=””  title=”当鼠标放上图片上面时显示的文字”/>

<area />

<area />

</map>

 

area标记的属性：

shape：表示区域里面的形状   取值：rect(矩形)、circle(圆形)、poly(多边形)

coords：坐标值

如果形状设置为 rect(矩形)时  那么坐标值应该有4个:x1,y1,x2,y2

如果形状设置为 circle(圆形)时  那么坐标值应该有3个:x1,y1,r

如果形状设置为 poly(多边形)时  那么坐标值应该有根据多少边来决定

 

三、多媒体标记

<embed />  HTML5

常见的属性：

src：要引入的源文件地址

width：设置宽度

height：设置高度

 

 

 

 

四、表单

表单的主要作用：

它主要是用来收集用户的数据！然后将这些收集的数据经过一系列的合法性验证

 

表单的标记

<form>

 

</form>

 

 

• form标记的常见属性：

n action

u 表单的数据的处理程序   将表单的数据交给“谁”来进行处理

u 如果说没有填写action这个属性 那么则表示提交给当前的页面来进行处理

u 如果有写 则表示交给指定的程序来进行处理

 

• method

n 表单数据的提交方式   取值：GET|POST

n 如果method这个属性没有填写  那么表单数据它默认是以GET方式进行提交

GET方式提交：

它会将表单的数据显示在浏览器的地址栏中

显示的格式：

表单的处理程序?name的属性值=用户输入的数据& name的属性值=用户输入的数据

 

GET的方式的缺点：

1、 数据不安全 因为浏览器地址栏看的见

2、 它提交的数据量非常小

 

 

POST方式进行提交数据

1、 表单数据不会显示在浏览器的地址栏中  它是经过一定的加密后直接发送给PHP程序来进行处理

2、 相对安全一些  但是不是绝对的安全

3、 它能够处理大量的数据  比如说上传图像时 一定要使用POST方式  

 

 

• enctype

n 它是用来规则 表单数据的编码方式

n 取值有两个

n application/x-www-form-urlencoded   默认编码方式  一般情况下不用写

n multipart/form-data   这个属性值它只有上传文件的时候才使用

问？如果是上传文件时  现在method的属性值要设置为什么 ？method=”POST”

<form action=”index.php”  enctype=”multipart/form-data”  method=”POST”>

文件上传<>

</form>

表单控件

注意：

n 表单控件只有放上form标记里面它们才有表单的效果  

n 如果说需要将某个表单数据提交给PHP程序来进行处理的话 那么一定要写name属性  如果说某个表单数据不想让其提交给PHP程序来进行处理的话 那么就不要写name属性

单行文本框：

<input  type=”text”  name=”名称”  value=”值”  size=”设置长度”/>

在这里value属性值指的是用户输入的数据

明文显示出来

 

单行密码框：

<input  type=”password”  name=”名称”  value=”值”  size=”设置长度”>

以小黑点显示的

 

单选按钮：

<input  type=”radio”  name=”名称”  value=”值”  disabled=”disabled”/>

一组单选按钮它应该是一组相互排斥的按钮  只能选一个  

一组单选按钮要实现只能选择一个  只需要将这一组单选按钮 name属性值要一样

 

单选按钮与多选按钮独有属性

checked  这个属性没有属性值  为了满足XHTML的规范 要让其值等于自身  它表示默认选中的意思

 

n disabled：这个属性没有属性值  为了满足XHTML的规范 要让其值等于自身disabled=”disabled”  这表示当前的表单控件不可以用

n enabled：这个属性没有属性值  为了满足XHTML的规范 要让其值等于自身

enabled =” enabled”  这表示当前的表单控件可用   默认值

n readonly 这个属性没有属性值  为了满足XHTML的规范 要让其值等于自身

readonly =” readonly”  这表示当前的表单控件不可以用

 

 

disabled与readonly之间的区别：

它们两个属性都表示表单控制不可用

加了disabled的表单控件 它不能将表单数据发送给PHP程序进行处理

加了readonly的表单控件 它能将表单数据发送给PHP程序进行处理

 

多选按钮：

可以选取多个

<input  type=”checkbox”  name=”名称”  value=”值”  />

 

提交按钮：

<input  type=”submit”  value=”内容”  name=”名称” />