4.3<tr><th><td>标签下的常用属性
属性名称 属性值 说明 width height
align(水平方向) right left center
valign(垂直方向) top 数据靠上 middle 数据居中 buttom bgcolor
4.4 拆分与合并单元格 <td>里面的属性
属性名称 属性值 colspan 数字 rowspan 数字 先删掉不要的空格再合并需要的空格 4.5表格的标题 <table>
<caption>.... </caption> </table>
属性有:
属性名称 属性值 align top buttom 5.1背景图片设置
<body background="url">
5.2将图片插入网页中
格式:<img src="url">
功能:将图片插入网页中 单一标签
属性名称 属性值 src url width 像素/百分比 height 像素/百分比 alt 字符串 border 数字 5.3文字图像的排列
属性名称 属性值 align left right top middle buttom 间隙设置
数据靠下 说明
向两边扩展 向上下扩展 说明
图片的路径
图片的宽度(绝对和相对) 图片的高度(绝对和相对) 给图片做注解 图片边框 说明
图像靠左 文字靠右 图像靠右 文字靠左 文字靠上 文字居中 文字靠下
vspace 像素 垂直上下两端与物件的距离 hspace 像素 水平左右两端与物件的距离
5.4 图片超链接
<a href="url"><img src="url"></a>
注意边框问题
5.5地图索引
格式:<img src="url" usemap="#图像名称">
<map name="图片名称" id="图片名称">
<area shape="选取区块的形状" coords="坐标" href="url" alt="文字说明"> </map>
说明:
<map>声明整张图使用地图连接方式进行连接
<area>表示需要连接的某个区块
<shape>表示我们所选择的形状 如:rect矩形 circle圆形 poly 多边形 coords 表示地图的坐标位置
举例:
<img src="bg.jpg" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="136,36,202,102" href="" > <area shape="circle" coords="275,74,27" href="" > <area shape="poly" coords="389,284,426,266,459,"
href="" >
</map>
地图索引最好使用dreamweaver
5.6切片索引
使用firewook来进行,用表格进行定位
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><a href=" src="1.jpg"></a></td><td><a href=" src="2.jpg"></a></td></tr> <tr><td><a href=" src="3.jpg"></a></td><td><a href="
src="4.jpg"></a></td></tr>
</table>
5.6为网站添加图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
6.1超链接的基本格式
格式:
scheme://host[:post]/path/filename
scheme指的是http,ftp,file,mailto, news等
host指的是IP地址或者计算机名
post指的是服务器端口一般为:8080
path指的是文件路径
filename指的是文件名
如:http://localhost/:8080/master/index.php
localhost可以写成计算机机器名或者IP地址
6.2超链接的种类
1.http
声明 <a href="/images/logo.html">网易</a>
2.file 连接本地的文件
声明 <a href=file:///e/images/pic.jpg>图片</a>
3.ftp
声明 <a href="ftp://192.168.4.21/">进入</a>
4.mailto <a href=mailto:bnbbs@163.com>E-MAIL</a>
6.3 相对链接和绝对链接
1.若是6.html和index.html文件在同一目录下
使用 index.html (index.html为连接文件)
<a href="index.html">index.html</a>
2.若index.html文件在6.html文件目录下的文件夹page里面 则使用 page/index.html
<a href="page/index.html">index.html</a>
3.如果index.html在 page文件下page2中
page/page2/index.html
2、3为往后查找文件路径
4.若6.html文件在page文件夹中 则查找index.html
需要向上翻一层查找
../index.html
<a href="../index.html">index.html</a>
5.若是6.html文件在page文件夹里面的page2文件夹里面 则查找连接index.html 使用
../../index.html
4、5为往前查找
5.若6.html在page文件夹中 而index.html在images文件夹中 则6.html要查找连接index.html文件需要
先出page文件夹再进images文件夹
../images/index.html
<a href="../images/index.html">index.html</a>
6.4 书签链接
先在需要跳转的文本地方创建书签点
再进行连接
<a>下的属性
属性名称 属性值
name 字符串
格式:
锚点:<a name="音乐">..</a>
连接点<a href="#音乐">..</a>
连接到别的网页的书签项目
基本格式:
锚点:<a name="音乐">...</a>
连接点:<a href="index.html#音乐">...</a>
先连接到需要连接的网页 再连接到书签
6.5基准参考点
基本格式:
<head>
<base href=".cn/">
</head>
作用:所有的html都会在前面加上这个域名.cn/ 防止跳到别的网站
注意:最后“/”必须要打 错误 :.cn
6.6超链接事件
link 颜色的设置
基本格式: <body link="颜色" alink="颜色" vlink="颜色">
link 超链接尚未选中的文字
alink 超链接选中但是为放开的颜色
vlink 超链接已被选中过的颜色
7.1表单是提供给用户输入,选取,勾选数据,以便提交给服务器数据库的工具 表单的功能结构:
主标记结构:<from>...</from>
属性值 值 说明
name 字符串 给这个表单起的名字
method get/post 表单的传输方式 post有利于信息的保护 不会显示在域名传输地址栏中 get会在域名传输地址中显示所有的信息 不利于信息安全 所以一般设置为post
action url 传输的目标 意为将表单中所有的信息传输到某一个地址去,若是没有指定传输地址 则会传给自己
7.2 文本栏、密码栏、
input是一个单标签 属于插入一个东西 而双标签相当于一个容器 包含一些东西 表单一般是要起名字 因为以后要使用javascript进行激活 使它做一些事件
文本栏:<input type="text" name="栏位名称" value="栏位设置默认值" size="栏位显示的宽度" maxlength="栏位输入数据的最大长度" >
姓名:<input type="text" name="usename" value="小张" size="30" maxlength="10">
密码栏: <input type="password" name="栏位名称" value="栏位设置默认值" size="栏位显示的宽度" maxlength="栏位输入数据的最大长度" >
密码:<input type="password" name="usepassword" size="30">
7.3复选框 单选框
复选框:<input type="checkbox" name="栏位名称" checked disable>
checked 表示已经选定不容修改 disable 表示已经选定不容修改
爱好:<input type="checkbox" name="love">体育<input type="checkbox"
name="love">音乐
单选框: <input type="radio" name="栏位名称" checked disable>
性别:<input type="radio" name="sex">男<input type="radio" name="sex">女
7.4窗体栏和区块
窗体栏就是下拉菜单
<select name="栏位名称">
<option value="栏位设置值">栏位设置值
<option value="栏位设置值">栏位设置值
<option value="栏位设置值">栏位设置值
</select>
举例:地址:<select name="address">
<option value="上海">上海
<option value="南京">南京
<option value="盐城">盐城
</select>
//分组<optgroup label="分组名称"><option>...<option></optgroup> 举例:
address:<select name="address">
<optgroup lable="上海">
<option value="普陀区">普陀区
<option value="宝山区">宝山区
</optgroup>
<optgroup lable="南京">
<option value="下关">下关
<option value="浦口">浦口
</optgroup>
<optgroup lable="盐城">
<option value="亭湖">亭湖
<option value="盐都">盐都
</optgroup>
</select>
7.5文字区块的设置
<textarea cols="设置长度" rows="设置宽度">
.....
</textarea>
请留下您的建议和意见:
<textarea name="content" cols="200" rows="50">
</textarea>
7.6按钮和图像按钮
提交:<input type="submit" value="提交">
重置<input type="reset" value="重置">
按钮图像
<button type="submit" name="提交">
<img src="url">
</button>
7.7 上传文件
<input type="file" name="file">
7.8 外边框和标题
外边框:<fielset>...</fielset>
标题:<legend>...</legend>
<from name="reg" method="post" action="http://baidu.com"> <fielset>
<legend>注册表</legend>
.....
</fielset>
</from>
总结实例:
<from>
<head>
<title>注册表</title>
</head>
<body>
<from name="reg" method="post" action="" > <fieldset >
<legend>注册表</legend>
姓名:<input type="text" name="usename" maxlength="10"> <br>
密码:<input type="password" name="password">
<br>
QQ:<input type="text" name="qq">
<br>
联系电话:<input type="text" name="telephone">
<br>
爱好:<input type="checkbox" name="love" value="体育">体育
<input type="checkbox" name="love" value="计算机">计算机 <input type="checkbox" name="love" value="音乐">音乐 <input type="checkbox" name="love" value="读书">读书 <br>
性别:<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<br>
地址:<select name="address">
<optgroup lable="怀化">
<option value="鹤城区">鹤城区
<option value="溆浦">溆浦
</optgroup>
<optgroup lable="衡阳">
<option value="石鼓区">石鼓区 <option value="雁峰区">雁峰区 </optgroup>
<optgroup lable="长沙">
<option value="雨花区">雨花区 <option value="长沙县">长沙县 </optgroup>
</select>
<br>
<input type="file" name="file"> 请留下你的意见:
<textarea cols="50" rows="20"> </textarea>
<input type="submit" value="提交"> <input type="reset" value="重置"> </fieldset>
</from>
</body>
</from>