html学习笔记(2)

31、Web上支持的图片格式

GIF（图形交换格式）：GIF格式文件最多只能保存256中颜色，该格式支持透明色，支持动画效果。

JPEG（联合图像专家组）：该格式不支持透明色及动画，颜色可达1670万种。

PNG（网络可移植格式）：该格式支持透明色，不支持订花，颜色从几万种至1670万种。

32、图片标记：<img src="图片路径">

图片路径：

a、绝对路径：提供目标文档的完整主机名称、路径信息、及文档全称

b、相对路径：从当前文档开始的路径

如果当前文档和目标文档位置平行，则书写目标文档全称

如果当前文档和目标文档所在文件夹位置平行，则书写为文件夹名称/目标文档全称

如果当前文档所在文件夹和目标文档位置平行，则书写为 ../目标文档全称

c、根相对路径：从站点根目录开始的路径，以"/"开头。

图片标记的属性：

属性名称        属性             值说明

src                 URL             图片的路径

alt                  文本             规定图片的替代文本[图片无法显示时]

title                文本             鼠标悬停时显示的内容

width       像素/百分比       设置图片的宽

height      像素/百分比       设置图片的高

border           数字             设置图象边框

align              left                图片靠左，文字靠右

right             图片靠右，文字靠左

top               文字垂直居上靠

middle           文字垂直居中

bottom           文字垂直居下(默认)

vspace           像素              定义图像顶部和底部的空白(垂直边距)

hspace          像素              定义图像左侧和右侧的空白(水平边距)

34、某些html标记，都有默认值

<h1> ~ <h6>内容是默认加粗

35、网页制作过程

1）、先分析页面结构，这个页面内容大概分为那些部分

2）、在适合的html标记中，加入页面的内容（信息）---信息载体---文字、图片

36、传统的网页布局方式-----使用table表格

其实table表格，原来适用于保存数据的，保存这种有格式清晰的数据。

布局思想----排版---

a、从大向小排版

b、从左向右排版，从上向下----按人视觉

因为表格中可以包含任何内容，所以在使用DIV+CSS之前，网页设计师是使用表格对网页内容进行排版与布局的

37、表格标记

<table>  </able> --定义表格

<tr>  </tr> --定义表行

<td>  </td> --定义表列（单元格）

<th>  </th> --定义标题栏（文字加粗，并居中）

表格的属性:<table>

属性                                      用途

<table bgcolor="">                 设置表格的背景色

<table background="">          设置表格的背景图片

<table border="">                  设置边框宽度，若不设置此属性，则边框宽度默认为0

<table cellpadding="">          设置表格单元格与其内部内容之间的大小，默认为2(表格边距)

<table cellspacing="">           设置表格单元格之间空间大小，默认为2(表格边距)

<table bordercolor="">          设置表格边框的颜色

<table bordercolorlight="">    设置边框亮部分颜色(当border的值大于等于1时有效)

<table bordercolordark="">   设置边框暗部分颜色(当border的值大于等于1时有效)

<table align=""> 设置部分的对齐方式(left=左,center=居中,right=右)

<table>标签下的边框设置

属性名称         属性值         说明

frame              void            不要显示表格的边线

above        只显示表格的上边线

below        只显示表格的下边线

hsides       只显示表格的上下边线

vsides       只显示表格的左右边线

lhs             只显示表格的左边线

rhs            只显示表格的右边线

border/box    会显现出表格的所有边线

rules               rows           只显示横行的格框线

cols            只显示直行的格框线

all               显示所有格框线

groups         表示列组合水平部分

none           不显示任何格框线

行的属性：<tr>

属性                       用途

<tr width="">         设置行的宽度

<tr height="">        设置行的高度

<tr bgcolor="">      设置行的背景颜色

<tr align="">          设置水平对齐方式

<tr valign="">        设置垂直对齐方式[top、middle、bottom]

列(单元格)的属性：<td>

属性                         用途

<td width="">            设置单元格的宽度

<td height="">          设置单元格的高度

<td bgcolor="">        设置单元格的背景颜色

<td background=""> 设置单元格的背景图片

<td align="">            设置单元格的水平对齐方式

结构化格式：

<table>

<thead>  </thead>-------表头区

<tbody>  </tbody>------表体区

.............

<tfoot>  </tfoot>--------表尾区

</table>

直列化格式：

<colgoup>  </colgroup>（<col>功能完全和<colgroup>一样）

align  ：left          靠左

center     靠中

right        靠右

valign：top           靠上

middle     靠中

bottom    靠下

span： 数字        直列数

bgcolor：颜色      背景颜色

表格的标题

<table>

<caption>  </caption>

</table>

align：top         标题在表格上方

bottom   标题在表格下方

38、<center>  </center>中所有内容都居中。

39、合并单元格思想，当将多个内容合并时，就会出现多余的东西，合并单元格就是删除多余的td

例如：有三列 3个td，当合并时，就需要删除2个

推出一个合并删除td的公式：删除的个数=合并的个数-1

40、立体表格效果，其实就是将表格的亮边框颜色与暗边框颜色，进行对比。表格自身有边框，单元格自身也有边框。

41、细线表格效果公式：

a、将表格自身border=0,

b、给表格设置背景颜色=细线的颜色

c、给表格设置单元格之间距离 = 细线粗细

42、当<td> </td>中间没有内容时，默认不显示边框，如果想看见边框，在之间加&nbsp。

43、可以通过标签嵌套实现一些复杂布局。

44、超级链接：一个网站是由多个网页组成的，网页之间都是通过链接实现互联的。

链接的概念：实现由当前文档目标文档的一种跳转，链接重要的使用原则，必须是回路，有去有回---优化，相关链接。

链接语法：

<a href=链接目标 title="注释" target="打开链接窗口的形式">显示内容</a>

_blank在新窗口中打开

_self在自身窗口中打开（默认值）

_parent在上一级窗口中打开，框架会经常使用

_top在浏览器的整个窗口中打开，忽略任何框架

链接分类：

a、内部链接：当前文档与目标文档在同一站点内：<a href=目标文档位置及全程>

b、外部链接：当前文档与目标文档不在同一站内：<a href=URL（网址）>

c、E-mail链接：允许访问者向指定的地址发送邮件：<a href=mailto:电子邮件地址>

链接（锚点）：

到同一网页或其他文档中的指定位置。

创建锚点：<a name="#秒点名称">显示内容</a>

链接锚点：<a href="#秒点名称">显示内容</a>

空链接：就是没有目标端点的链接。格式创建锚点：<a href="#">显示内容</a>

例如：

设为首页：<a href="#" onClick="this.style.behavior=‘url(#default#homepage)‘;this.sethomepage(‘http://www.sohu.com‘)">

设为首页</a>

添加收藏<a href="#" onClick="javascript:window.external.addfavorite(‘http://www.sohu.com‘,‘搜狐‘)">加入收藏夹</a>

脚本链接：是一种特殊的链接，当单击设置脚本链接的文本或图像时，可以运行相应的JavaScript语句。

常用到的脚本链接：

例如：<a href="javascript:window.open(‘http://www.163.com‘)">新浪

关闭窗口：输入javascript:window.close()

打开窗口：输入javascript:window.open(‘文件名‘)

45、布局时，可以先输入一些数字，简单文字说明占位.

46、html表单标记

表单的作用是从访问您的Web站点的用户那里获得信息。访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表

单元素输入信息，然后单击某个按钮提交这些信息。客户端与服务器端进行信息交流的途径。

47、form标记用于创建一个表单，定义表单的开始与结束，它是一个容器，用于包含其他表单元素，例如文本框、单选框等。

表单元素必须入在form标记内才有作用。

<form action=url（传送目标，处理表单信息的服务器端应用程序） method=处理表单数据的方法（POST/GET）如果不写

method则默认提交方式为get， name=表单名称>表单元素</form>

POST方法可以传递大量信息

GET方法将值附加到请求该页的URL中。适合传递少量信息（默认方式）

48、单行文本框(如下图：)

<input name="文本框名称“ type="text" value="初始值" size="显示字符数" maxlength="最多容纳字符数"

readonly="readonly"（设置为只读） disabled="disabled"（设置为不可操作）>

49、密码框(如下图：)

<input name="文本框名称" type="password" value="初始值" size="显示字符数">

50、所有的表单元素都必须要放置在表单标签中<form></form>

所有的表单元素，以<input>标签为例，必须包含两个属性

有些表单的属性是相似的。