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。
