3.1清单
格式:
<ul>
<li>...</li>
</ul>
<li>的属性:
type disc 实心圆(默认)
circle 空心圆
square 实心方块
<ol>
<li>...</li>
</ol>
ol的属性:
type 1 1.2.3表示
a a.b.c
A A.B.C
i i.ii.iii
I I.II.III
表格
4.1表格的基本格式
格式:
<table>
<tr>
<th>...</th>
</tr>
<tr>
<td>...</td>
</tr>
</table>
4.2<table>下的常用属性
属性:
border 像素 设置表格边线
cellspacing 像素 绝对设置 存储格框线宽度
百分比 相对设置 ......
cellpadding 像素 ....... 数据与框线的距离
百分比 ....... 数据与框线的距离
width 像素 ....... 表格宽度
百分比 ....... 表格宽度
height 像素 ....... ....高度
百分比 ....... ....高度
align lefr 表格往左靠(默认)
center 居中
right 右
bgcolor 英文/十六进制 表格的背景颜色
background URL 表格的背景图片
bordercolor 英文/十六进制 边框颜色
bordercolorlight ............ 边框亮度
bordercolordark ....... 暗色
4.3<table>下的边框设置
frame above 显示表格的上边线
rules all 显示全部格框线
4.4<tr><th><td>下的成语属性
width 1 10% 宽
height 1 10% 高
bgcolor red #f00 数据栏内的颜色
align 水平方向 left 数据靠左
center 居中
right 右
valign 垂直方向 top 上
middle 中
bottom 下
nowrap 无 在单元格中换行
4.5拆分与合并单元格
colspan 1 向两边扩展栏位
rowspan 1 下
4.6表格的结构化、直列化、标题
结构化:
<table>
<thead></thead> 表头区
<tbody></tbody> 表体区
<tfoot></tfoot> 表尾区
</table>
直列化:<colgrounp></colgrounp>
align left 靠左
center 中
right 右
valign top 上
middle 中
bottom 下
span 1 直列数目
width 1px 10% 宽度
个别直列设置:
<col>和<colgrounp>一样
标题:
<table>
<caption>表格标题</caption>
</table>
align top 标题在表格上方
bottom 标题在表格下方
结构化:
<table>
<thaed>...</thaed>
<tbody>...</tbody>
..................
<tfoot>...</tfoot>
</table>
图像
在body标签上加入background=“url”
图片插入网页中
<img src=“url”>
alt 文字 图片注释
width
height
border
align left 图左文右
right 图右文左
top 文上
middle 文中
bottom 文下
空隙
vspace 像素 垂直属上下两端与物的距离
hspace 像素 水平
超链接
用图片做超链接
就是超链接嵌套<img src>
地图索引
<map nane="xxx">
<img src="url"usemap="#xxx">
<area shape="截图的形状"coords="坐标"href="地址">
选中的区块 rect 矩形 4点
circle 圆 3点
poly 多边形 几边形就几点
</map>
图片索引
用表格来定位,在消除表格边线与边距。加上超链接就行了。
scheme://host[:post]/path/filename
一共7种↓IP地址 服务端口 文件路径 文件名
↓ 常用的四种
http
<a href="http://www.baidu.com">网页地址</a>
file
<a href="file:///e:/160/代码/xxx.jpg">图片上传</a>
e盘
ftp
<a href="ftp://192.168.4.21">id进入</a>
mailto
<a href="mailto:bnbbs@163.com">进入邮箱</a>
相对链接、绝对链接
a标签套上文件位置
<a href="文件"> 正常
<a href="page/文件"> page就是文件的目录
page/top/......
../........... ../就是向上翻一层
../page/......... 向上翻一层的page目录
书签链接
瞄点<a name="书签">第一章</a>
链接点<a href="#书签">第一章</a>
链接到其他网页的书签
瞄点<a name="书签">第一章</a>
链接点<a href="其他网页目录名#书签">其他第一章</a>
基准参考点
在head中插入<base href="c:/"> c盘
超链接颜色
<body link="yellow"alink="red"vlink="green">
link:还没点过的
alink:点了但没放开
vlink:已经点过了
7表单
7.1功能结构
主标记结构:<form>...</form>
属性:
name 字符 名字
method post 传输方式
action url 传输目标 value="123"
7.2文本框、密码栏、隐藏栏
文本栏:<input type="text" name="栏位名称" value="栏内值" size="宽度" maxlength="输入最多数">
密码栏:<input type="password" name="名称" value="栏内值" size="宽度"
maxlength="输入最多数">
隐藏栏:<input type="hidden" name="名称" value="栏内值">
7.3复选栏、单选栏
多重勾选栏位:<input type="checkbox" name="名称" value="栏内值" checked="checked(默认项)" disabled="disabled(必选项)">
单选:<input type="radio" name="名称" value="栏内值"checked="checked(默认项)" disabled="disabled(必选项)" >
7.4窗体栏、区块栏
窗体选项栏:
<select name="名称" size="数字"multiple(多选)>
<option value="上海" selected(首选项)>上海
<option value="北京">北京
</select>
<select name="名称"> (多组)
<optgroup label="上海">
<option value="普陀区">普陀区
<option value="宝山区">宝山区
</optgroup>
</select>
文字区块栏:
<textarea cols="设置长度" rows="设置宽度">
.............
</textarea>
7.5按钮、图像设置
按钮设置:
<input type="submit" value="按钮中显示的文字">
<input type="reset" value="按钮中显示的文字">
按钮图像: ↑
<button name="提交或重置" 统一“图像形态”>
<img src="URL">
</button>
图像按钮:<input type="image"src="URL" alt="文本">
7.6允许上传文件
上传栏位:<input type="file"name="file">
7.7加上外框和标题
外框:<fieldset>......</fieldset>
标题:<legend>.......</legend>
7.8元件的次序和快捷键
accesskey="w" (alt+w)(ctrl+w)
tabindex="n"
8.窗框
8.1基本结构
格式:<frameset>
<frame>
<frame>
</frameset>
<frameset>的属性:
cols 像素百分比 窗框环境(竖)
rows 像素百分比 窗框环境(橫)
border 像素 边框的宽度
framespacing 1或0 页面与页面的边距
属性格式:<frameset cois="120,80,">
80%,20%
<frame>的属性:
src URL 链接页面
noresize true 允许自行改变大小
false 不允许
scrolling yes 不管大小,都有滚动条
no 不管大小,都没有滚动条
auto 自动判断是否有滚动条
marginheight 像素 垂直,窗体内容与边界距离
marginwidth 像素 水平,.................
frameborder 0/1 不出现框边
属性格式:<frame src="URL">
<frame noresize>
8.2多窗体设置
格式:<frameset rows="20%,80%">
<frame src="URL">
<frameset cols="20%,80%">
<frame src="URL">
<frame src="URL">
</frameset>
</frameset>
8.3多框架与超链接
格式:<frame name="文件名称">
<a>超链接 <a href="URL" target="窗体名称">
多窗体链接的属性:
target _blank 打开一个新页面
8.4悬浮窗体的设置
格式:<ifame>......</ifame>
<ifame>属性:
height 像素 相对 高度
width 像素 相对 宽度
9.1FLASH动画的插入
格式:
<embed>...</embed>
属性:
src URL fiash路径
width 像素 fiash宽度
height 像素 fiash高度
wmode window fiash自身矩形窗口播放
opakue fiash隐藏页面位于后面
transparent fiash某一部分透明
格式:
<object>...</object>
属性:
type application/x-shockwave-flash flash类型
data URL flash路径
width 像素 flash宽度
height 像素 flash高度
必须使用子标签<param>
属性:
name 属性 flash属性
value 值 flash值
9.2MP3及WMV视频的插入
格式:
<embed>...</embed>
属性:
autostart true/false 自动/非自动播放
loop 数字 音乐循环的次数
前身:<bgsound src="URL" loop="次数">
格式:
<object>...</object>
属性:
name src(路径) 音乐路径
autoplay(true/false) 是否自动播放
9.3网络流媒体视频的插入
优酷、土豆