1、在网页中插入图片
(1)背景图案的设置
格式:<body background="URL">
(2)将图片插入到网页中去
格式:<img src="URL">
功能:将图片插入到网页中去 ,是单一标签。
<img>
下的属性:
属性名称 | 属性值 | 说明 |
---|---|---|
src | URL | 图片的路径 |
alt | 字符串 | 给图片做注解 |
width | 像素 | 绝对设置,宽 |
width | 百分比 | 相对设置,宽 |
height | 像素 | 绝对设置,高 |
height | 百分比 | 相对设置,高 |
border | 数字 | 图片边框 |
align | left | 图片靠左,文字靠右 |
align | right | 图片靠右,文字靠左 |
align | top | 文字往上靠 |
align | middle | 文字靠中 |
align | bottom | 文字靠下 |
vspace | 像素 | 图片上下两端与文字的距离 |
hspace | 像素 | 图片左右两端与文字的距离 |
(3) 用图片作为超链接
格式:<a href="URL"><img src="URL"></a>
注意:图片作为超链接会在图片四周出现一个边框,解决办法是将<img>
的border属性值设置为0。
(4)地图索引
格式:
<map name="图片名称" id="图片名称">
<area shape="选取区块的形状" coords="坐标" href="URL" alt="文字说明">
</map>
<img src="URL" USEMAP="#图片名称">
说明:<map>
:声明整张图使用地图链接方式进行链接,name,id属性指此图的名称,<area>
表示我们所要链接的区快,shape表示我们所选择的形状,如:rect表示矩形,circle表示圆,poly表示多边形,coords表示地图的坐标位置。
(5)切片索引
使用Firework进行切片索引,用表格定位切片。
(6)为网站添加图标
<link rel="shortcuticon" href="favicon.ico" type="image/x-icon">
2、超链接
(1)超链接的基本格式
URL格式:scheme://host[:port]/path/filename
scheme指的是 http,ftp,file,mailto,news,gopher,telnet七种。
host指的是IP地址或计算机名称;port指的是服务器端口号;path指的是文件路径;filename指的是文件名。
超链接格式:<a href=scheme://host[:port]/path/filename >…</a>
(2)超链接的种类
一般常用的分为四种:
- http:
<a href=http://www.163.com/images/logo.htm>网易 logo</a>
- file:
<a href=file:///e/images/pic.jpg>图片</a>
- ftp:
<a href=ftp://192.168.4.21/>进入</a>
- mailto:
<a href=mailto:[email protected]>E-MAIL</a>
(3)书签的链接
<a>
下的属性:
属性名称 | 属性值 | 说明 |
---|---|---|
name | 字符串 | 设置超链接的书签 |
基本格式: 瞄点:<a name="音乐">…</a>
,链接点:<a href="#音乐">…</a>
链接到别的网页的书签项目:
基本格式: 瞄点:<a name="音乐">…</a>
,链接点:<a href="index.htm#音乐">…</a>
(4)基准参考点
基本格式:
<head>
<base href="c:\">
</head>
(5)超链接事件
超链接颜色的设置的基本格式:<body link="颜色" alink="颜色" vlink="颜色">
link:超链接尚未被选中的文字,alink:超链接点选但未被放开的颜色,vlink:超链接已被点选过的颜色。
(6)为超链接创建键盘快捷键
accesskey="w" (Windows:Alt+w) (Linux:Ctrl+w)
(7)为超链接设置制表符次序
tabindex="n"
3、表单
(1)表单的功能结构
主标记结构:<form>…</form>
属性 | 值 | 说明 |
---|---|---|
name | 字符串 | 表单的名字 |
method | get/post | 表单的传输方式 |
action | url | 传输到的位置 |
(2)文本栏、密码栏、隐藏栏
文本栏:<input type="text" name="栏位名称" value="栏位内定值" size="栏位显示宽度" maxlength="栏位数据输入最大长度" readonly="readonly">
密码栏:<input type="password" name="栏位名称" value="栏位内定值" size="栏位显示宽度" maxlength="栏位数据输入最大长度" readonly="readonly">
隐藏性栏位:<input type="hidden" name="栏位名称" value="栏位值">
(3)复选栏、单选栏
复选栏:<input type="checkbox" name="栏位名称" value="该选项定值" checked="checked" disabled="disabled">
单选栏:<input type="radio" name="栏位名称" value="内定值" checked="checked" disabled="disabled">
(4)窗体栏位、区块栏位
窗体选项栏位设置:
<select name="栏位名称" size="数字">
<option value="选项值" selected="selected">
<option value="选项值">
<option value="选项值">
</select>
分组:<optgroup label="分组名称"></optgroup>
多选:multiple
文字区块的设置:<textarea cols="设置区块列数" rows="设置区块行数">......</textarea>
(5)按钮、图像按钮
提交与重置按钮:
<input type="submit" value="按钮中显示的文字">
<input type="reset" value="按钮中显示的文字">
按钮图像:
<button name="栏位名称" type="图片类型"> <img src="URL"> </button>
图像按钮:<input type="image" src="url" alt="文本">
(6)上传文件
上传文件框:<input type="file" name="file">
(7)表单加上外框和标题
表单外边框:<fieldset>...</fieldset>
表单标题:<legend>...</legend>
(8)表单元件的快捷键和次序
accesskey="w" (Windows:Alt+w)(Linux:Ctrl+w)
tabindex="n"
4、多窗框
(1)多窗框的基本结构
格式:
<frameset>
<frame>
<frame>
<frame>
</frameset>
功能:<frameset>
用来设置多窗框结构的声明。
<frameset>
下的属性:
属性名称 | 属性值 | 说明 |
---|---|---|
cols | 像素 | 设置直排的多窗框环境 |
cols | 百分比 | 设置直排的多窗框环境 |
rows | 像素 | 设置横排的多窗框环境 |
rows | 百分比 | 设置横排的多窗框环境 |
border | 像素 | 边框的宽度 |
framespacing | 像素 | 页面与页面的边距 |
属性格式:
<frameset cols="120,80,120">
<frameset cols="20%,40%,20%">
<frameset cols="40%,*,*">
<frameset rows="120,80,120">
<frameset rows="20%,40%,20%">
<frameset rows="20%,*,*">
<frame>
下的属性:
属性名称 | 属性值 | 说明 |
---|---|---|
src | URL | 链接的页面 |
noresize | true | 不允许浏览器自行改变框架大小 |
noresize | false | 允许浏览器自行改变框架大小 |
scrolling | yes | 不管网页内容的大小,都出现滚动条 |
scrolling | no | 不管网页内容的大小,都不现滚动条 |
scrolling | auto | 浏览器自动判断,是否需要滚动条 |
marginheight | 像素 | 设置垂直方向,窗体内容与边界的距离 |
marginwidth | 像素 | 设置水平方向,窗体内容与边界的距离 |
frameborder | 0/1 | 不出现框体边线/出现框体边线 |
属性格式:<frame src="URL">
,<frame noresize>
(2)嵌套多窗体设置
格式:
<frameset rows="20%,80%">
<frame src="URL">
<frameset cols="20%,80%">
<frame src="URL">
<frame src="URL">
</frameset>
</frameset>
(3)多框架与超链接
框架式网站的好处就是在同一张页面上可以显示多个页面,而且可以很方便地进行链接。相关属性说明:
<frame>
的命名属性格式:<frame name="窗体名称">
超链接格式:<a href="URL" target="窗体名称">
多窗体链接的属性:
属性名称 | 属性值 | 说明 |
---|---|---|
target | _blank | 打开一个新建的页面 |
(4)悬浮窗体的设置
格式:<iframe>...</iframe>
功能:设置悬浮窗框
属性名称 | 属性值 | 说明 |
---|---|---|
height | 像素/百分比 | 绝对高度/相对高度 |
width | 像素/百分比 | 绝对宽度/相对宽度 |
其他属性除了 noresize 之外,都和 frameset 中的属性用法相同。
5、多媒体
(1)FLASH动画的插入
使用<embed>...</embed>
标记插入FLASH动画
属性 | 值 | 说明 |
---|---|---|
src | url | flash路径 |
width | 像素/百分比 | flash的宽度 |
height | 像素/百分比 | flash的高度 |
wmode | window | 使用flash自身的矩形窗口来播放 |
wmode | opaque | 使flash隐藏于页面上 |
wmode | transparent | 使flash某一部分透明 |
使用<object>...</object>
标记插入FLASH动画
属性 | 值 | 说明 |
---|---|---|
type | application/x-shockwave-flash | flash的类型 |
data | url | flash的路径 |
width | 像素/百分比 | flash的宽度 |
height | 像素/百分比 | flash的高度 |
注意:必须再使用子标签<param>
完成 flash的插入
属性 | 值 | 说明 |
---|---|---|
name | 属性 | flash的属性 |
value | 值 | flash的属性值 |
(2)MP3音频及WMV视频的插入
使用<embed>...</embed>
标记插入FLASH动画:
属性 | 值 | 说明 |
---|---|---|
autostart | true/false | 自动播放/非自动播放 |
loop | 数字 | 音乐循环的次数 |
该标记之前的写法是:<bgsound src="URL" loop="次数">
使用<object>...</object>
标记插入MP3音乐:
属性 | 值 | 说明 |
---|---|---|
name | src(路径) | 音乐路径 |
autoplay | true/false | 是否自动播放 |
(3)网络流媒体视频的插入
主流视频流:优酷网、土豆网、我乐网。
6、<meta>
标记
(1)自动展示网页内容
meta文件头声明格式:<meta http-equiv="refresh" content="time;URL">
http-equiv="refresh"
:表示网页要重新下载显示 ;content="time;URL"
:time表示秒数,URL 网页显示内容。
例:<meta http-equiv="refresh" content="3;url=index.htm">
(2) 如何让别人找到你的网页
<meta>
下的属性:
属性名称 | 属性值 | 说明 |
---|---|---|
name | author | 描述作者资料 |
name | description | 描述网页的内容 |
name | keywords | 关键字,多个可用逗号隔开 |
name | generator | 描述网页是通过哪种软件产生 |
name | revised | 描述网页的版本 |
name | others | 可设置其他网页信息 |
content | 字符串 | 配合name,http-equive设置 |
例:
<meta name="author" content="Lily">
<meta name="description" content="这是我的个人网站">
<meta name="keywords" content="音乐,动漫,博客">
<meta name="generator" content="记事本">
<meta name="revised" content="html4.01">
<meta name="others" content="这个我第一个网站,欢迎大家光临!">
7、活动文字:<marquee>…</marquee>
属性名称 | 属性值 | 说明 |
---|---|---|
behavior | scroll | 从右到左移动 |
behavior | slide | 从右到左停止 |
behavior | alternate | 两边移动 |
direction | left | 向左移动 |
direction | right | 向右移动 |
direction | up | 向上移动 |
direction | down | 向下移动 |
bgcolor | 英文/十六进制 | 背景颜色 |
height | 像素/百分比 | 高度 |
width | 像素/百分比 | 宽度 |
scrollamount | 数字 | 播放的速度 |
vspace | 像素 | 左右两侧间距 |
hspace | 像素 | 上下两侧间距 |
8、在网页中加入脚本程序
<script type="类型" src="URL">
alert("欢迎使用JavaScript 脚本");
varans=prompt("请输入你的性别");
if (ans) {
alert("您的性别为:"+ans);
} else {
alert("您没有输入你的性别!");
}
</script>
9、XML的定义文档
<?xmlversion="1.0" encoding="gb2312"?>
<!DOCTYPE 中华人民共和国 [
<!ELEMENT 中华人民共和国公民 (公民*)>
<!ELEMENT 公民 (身份证号,姓名,籍贯)>
<!ELEMENT 身份证号 (#PCDATA)>
<!ELEMENT 姓名 (#PCDATA)>
<!ELEMENT 籍贯 (#PCDATA)>
]>
<中华人民共和国>
<公民>
<身份证号>01085401</身份证号>
<姓名>张三</姓名>
<籍贯>北京</籍贯>
</公民>
<公民>
<身份证号>01085402</身份证号>
<姓名>李四</姓名>
<籍贯>上海</籍贯>
</公民>
</中华人民共和国>
10、XHTML文档定义
(1)HTML4.01 的文档定义
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
(2)XHTML1.0 的文档定义
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML与XHTML都有三种标准风格:
第一种称为过渡型(transitional),它允许使用废弃的标记。
第二种称为严格型(strict),他禁止使用任何废弃的标记。
第三种是框架型(frameset), 它允许使用废弃的标记和框架。
(3)XHTML1.0 风格标记的改变
- 所有单标记都必须关闭:
<br/>、<hr/>、<option />
等; - 所有的单属性必须等于自身:checked=“checked”、readonly="readonly"等;
- 尽可能不使用废弃标记:
<center>、<font>
等; - 尽可能不使用废弃属性:align、bgcolor。