1, insert a picture in a web page
Set (1) of the background pattern
format: <body background="URL">
(2) the image into a web page to
the format: <img src="URL">
Function: the image into a Web page to, a single label.
<img>Under the property:
| Property Name | Property Value | Explanation |
|---|---|---|
| src | URL | Picture Path |
| alt | String | To annotate images |
| width | Pixels | Absolute setting, wide |
| width | percentage | Opposite, broad |
| height | Pixels | Absolute setting, high |
| height | percentage | Opposite, high |
| border | digital | Picture frame |
| align | left | Image left, text right |
| align | right | Image right, text left |
| align | top | Up by text |
| align | middle | Text by the |
| align | bottom | Character 靠下 |
| vspace | Pixels | Pictures from the upper and lower ends and text |
| hspace | Pixels | Images and text from the left and right ends |
(3) with a picture as a hyperlink
format: <a href="URL"><img src="URL"></a>
Note: The image will appear as a hyperlink in a border around the image, the solution is to <img>set the border attribute value to 0.
(4) map index
format:
<map name="图片名称" id="图片名称">
<area shape="选取区块的形状" coords="坐标" href="URL" alt="文字说明">
</map>
<img src="URL" USEMAP="#图片名称">
Description: <map>: Declare entire map using the map links on live link, name, id attribute refers to the name of this figure, <area>represents what we want to link the area quickly, shape express our chosen shape, such as: rect rectangle representing, circle represents the circle, poly polygon representing, coords map showing the coordinates of the location.
(5) Slice index
using Firework sliced index, a table positioning sections.
(6) add an icon to your website
<link rel="shortcuticon" href="favicon.ico" type="image/x-icon">
2, hyperlinks
(1) The basic format of the hyperlink
URL format: scheme://host[:port]/path/filename
scheme refers to the http, ftp, file, mailto, news, gopher, telnet seven kinds.
host refers to the computer name or IP address; port is the server port number; path refers to a file path; filename refers to the filename.
Hyperlink format: <a href=scheme://host[:port]/path/filename >…</a>
(2) hyperlinks kind
commonly used are divided into four categories:
- 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) the bookmark link
<a>under the property:
| Property Name | Property Value | Explanation |
|---|---|---|
| name | String | Setting a hyperlink bookmark |
The basic format: aiming point: <a name="音乐">…</a>link point: <a href="#音乐">…</a>
links to other pages of bookmarks:
Basic format: aiming point: <a name="音乐">…</a>the link points: <a href="index.htm#音乐">…</a>
(4) baseline reference point
basic format:
<head>
<base href="c:\">
</head>
(5) hyperlink events
basic formatting hyperlinks colors: <body link="颜色" alink="颜色" vlink="颜色">
Link: Hyperlink is not already selected text, alink: click on a hyperlink but not let go of color, vlink: hyperlinks have been clicked on color .
(6) create a keyboard shortcut for the hyperlink
accesskey="w" (Windows：Alt+w) (Linux：Ctrl+w)
(7) as a hyperlink settings tab order
tabindex="n"
3. Form
(1) forms a functional configuration of
a main mark structure:<form>…</form>
| Attributes | value | Explanation |
|---|---|---|
| name | String | Name of the form |
| method | get/post | Forms of transmission |
| action | url | Transmitted to the position |
(2) text field, password field, hide columns in
text fields: <input type="text" name="栏位名称" value="栏位内定值" size="栏位显示宽度" maxlength="栏位数据输入最大长度" readonly="readonly">
the password field: <input type="password" name="栏位名称" value="栏位内定值" size="栏位显示宽度" maxlength="栏位数据输入最大长度" readonly="readonly">
hidden fields: <input type="hidden" name="栏位名称" value="栏位值">
(3) check column, radio column
check column: <input type="checkbox" name="栏位名称" value="该选项定值" checked="checked" disabled="disabled">
Radio Bar: <input type="radio" name="栏位名称" value="内定值" checked="checked" disabled="disabled">
(4) form fields, block field
form field options settings:
<select name="栏位名称" size="数字">
<option value="选项值" selected="selected">
<option value="选项值">
<option value="选项值">
</select>
Groups: <optgroup label="分组名称"></optgroup>
multiple choice: multiple
text block is provided: <textarea cols="设置区块列数" rows="设置区块行数">......</textarea>
(5) button, image button
submit and reset buttons:
<input type="submit" value="按钮中显示的文字">
<input type="reset" value="按钮中显示的文字">
button images:
<button name="栏位名称" type="图片类型"> <img src="URL"> </button>
image button: <input type="image" src="url" alt="文本">
(6) upload files
uploaded box: <input type="file" name="file">
adding (7) forms the outer frame and title
form outer border: <fieldset>...</fieldset>
title of the form: <legend>...</legend>
shortcuts and order (8) of the form element
accesskey="w" （Windows：Alt+w）（Linux：Ctrl+w）
tabindex="n"
4, multi-window frames
(1) The basic structure of a multi-window frame
format:
<frameset>
<frame>
<frame>
<frame>
</frameset>
Function: <frameset>to set the declaration of a multi-frame structure.
<frameset>Under the property:
| Property Name | Property Value | Explanation |
|---|---|---|
| cols | Pixels | Set straight row of multi-sash environment |
| cols | percentage | Set straight row of multi-sash environment |
| rows | Pixels | Set horizontal multi-sash environment |
| rows | percentage | Set horizontal multi-sash environment |
| border | Pixels | Width of the border |
| framespacing | Pixels | Page and page margins |
Attribute Format:
<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>under the property:
| Property Name | Property Value | Explanation |
|---|---|---|
| src | URL | Linked page |
| noresize | true | Do not allow yourself to change the browser frame size |
| noresize | false | It allows the browser to change the size of the frame itself |
| scrolling | yes | Regardless of the size of the page content, scroll bars appear |
| scrolling | no | Regardless of the size of the page content, not now scroll bar |
| scrolling | auto | The browser automatically determine whether the scroll bar |
| marginheight | Pixels | Setting the distance in the vertical direction, the form and the content of the boundary |
| marginwidth | Pixels | Setting the distance in the horizontal direction, form the boundary of the content |
| frameborder | 0/1 | Frame edges does not appear / emerge frame edges |
属性格式：<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。
