一、基础知识

1.静态网页和动态网页

  静态网页 动态网页
编程语言 html html + 高级语言
文件后缀名 *html *htm *.asp *.jsp *.pip *.osp
网页运行 双击文件，直接可直接在浏览器运行 需要配置运行环境，Jsp的运行环境为II或tomcat或resin服务器
运行速度 快 慢
网页数据更新 网页上的数据相对动态变化的，数据大多存放于数据库管理系统中，更新容易 网页上的数据相对静止不变，数据更新困难

2.B/S结构和C/S结构比较

  B/S C/S
系统维护 易更新 更新较麻烦
安全性 较差 较好
应用程序 基于互联网运行的网站 基于局域网运行的管理信息系统（如ERP）

3.域名的特点

易于理解和记忆

使网络服务更易于管理

在应用上与IP等效

二、网页开发工具和开发环境

1.常见网页开发技术

ASP JSP PHP ASP.net

2.网站开发步骤

  1. 需求分析

  2. 网站设计

  3. 编写代码

  4. 测试运行

3.网页内容结构

  1. 头部
  2. 中间主体部分
  3. 尾部（版权声明）
三、HTML

形式<标签名>相应内容<\标签名> 对大小写不敏感

1.文档结构

<html>
 <head>...</head>
 <body> HTML 文件的正文写在这里... ... </body>
</html>

2.body结构

<body bgcolor=# text=# link=# background=# leftmargin=# rightmargin=# topmargin=#>

bgcolor --- 背景色彩

text --- 非可链接文字的色彩

link --- 可链接文字的色彩background --- 当前网页的背景图片

leftmargin --- 页面左边的空白rightmargin --- 页面右边的空白

topmargin --- 页面顶端的空白

  • 色彩 #=rrggbb，用 16 进制的 红－绿－蓝(red-green-blue, RGB) 值或使用颜色的英文来来表示
  • 图片的路径一般采用相对路径，即当前网页文件和图片的相对路径

3.超链接标记

<a href=# target=#>文字或图片</a>

文字或图片

href --- 链接到某个网址或网页文件或 href="exam2.html" 例如：href=www.sina.com

target --- 以何种方式打开此链接

target=blank --- 表示新开窗口打开链接

target=_self --- 表示在本窗口打开链接

target=_parent --- 表示在父窗口打开链接

4.图片标记

<img src=# alt=# align=# border=#>

src --- 图片文件的路径，一般采用相对路径

alt --- 鼠标移到图片上，显示的说明文字

align=left --- 表示图片在网页中左对齐

align=right --- 表示图片在网页中右对齐

align=center --- 表示图片在网页中居中对齐

border--- 表示图片边框的厚度，其值为数字

5.标尺线标记

<hr size=# width=# align=# noshade color=#>

size --- 标尺线的粗细度（用数字表示）

width --- 标尺线的长度（用数字表示）

align --- 标尺线的对齐方式

Color --- 标尺线的颜色

6. 标题字体标记

<h# align=#> 文字</h#> #=1, 2, 3, 4, 5, 6

例：<h1 align=center>今天天气真好！</h1>
今天天气真好！

7.普通字体标记

<font size=9 color=blue face=#>文字</font>

文字

size --- 字体的大小（用数字表示）

color --- 字体的颜色

Face --- 字体的类型

例子： 今天天气真好！

8.物理标记字体

<b>今天天气真好！</b>
<i>今天天气真好！</i>
<u>今天天气真好！</u>
<tt>今天天气真好！</tt>
<sup>今天天气真好！</sup>
<sub>今天天气真好！</sub>
<s>今天天气真好！</s>
<strike>今天天气真好！</strike>

今天天气真好！

今天天气真好！

今天天气真好！

今天天气真好！

今天天气真好！

今天天气真好！

今天天气真好！

今天天气真好！

  • 字体标记的嵌套
<i><font size=5 color=red><b>今天</b> 天气<font size=6 face="times new roman"> 真好good！</font> </font></i>

今天 天气 真好good！

9.段落、行、分区标记

段落标记语法：<p align=#>文字或图片</p>
行标记语法：<br> --- 表示换行
<nobr>--- 表示不换行
分区标记语法：<div align=#>文字或图片</div>
居中标记：<center>文字或图片</center>
空格标记：&nbsp;

10.无序列表标记

<ul><li type=#>...</ul>    ntype=disc或circle或square

#例如
<ul>
   <li type=disc>ONE
   <li type=circle>TWO
   <li type=square>THREE
   </ul>
  • ONE
  • TWO
  • THREE

11.有序列表标记

<ol start=#><li type=#>...</ol>

#例：
： <ol start=5> 
                  <li >ONE-ONE 
                  <li>ONE-TWO 
                         <ol start=10>
                              <li>TWO-ONE
                             <li type=i>TWO-TWO 
                        </ol> 
              </ol>

start=# ---有序列表中的序号起始值

type=A, a, I, i, 1（默认值为1)

12.表格标记

<table><tr><td>文字</td></tr>…
            </table>

#例子：一张两行三列的表格
<table><tr><td>英语</td><td>数学</td><td>语文</td></tr>
<tr><td>85</td><td>90</td><td>80</td></tr>
</table>

tr --- 表示表格的行

td --- 表示表格的列

表格标记的属性

<table width=# height=# bgcolor=# align=# background=# cellspacing=# cellpadding=# border=# bordercolor=#></table>

width --- 表示表格的宽度，可以用数字或百分比表示

height --- 表示表格的高度，可以用数字或百分比表示

bgcolor --- 表示表格的背景颜色

Align--- 表示表格的水平对齐方式

Background--- 表示表格的背景图片，图片文件地址

Cellspacing-- 表示表格的行间距

Cellpadding-- 表示表格的列间距

Border - 表示表格的列间距边框粗细度，=0为无边框

bordercolor - 表示表格若有边框，边框的颜色

列标记和行标记的属性

<tr width=# height=# bgcolor=# align=#  valign=# >
            <td width=# height=# bgcolor=# align=#  valign=# ></td></tr>

width --- 表示行或列的宽度，可以用数字或百分比表示

height --- 表示行或列的高度，可以用数字或百分比表示

bgcolor --- 表示行或列的背景颜色

Align --- 表示行或列的水平对齐方式

Valign --- 表示行或列的垂直对齐方式（top,middle,bottom）

跨多行或多列

<td colspan=#>

#例1：
<table><tr><td>英语</td><td>数学</td><td>语文</td></tr><tr><td>85</td><td>80</td><td>85</td></tr></table>
英语 数学 语文
英语 数学 语文
85 80 85 
语法2（跨多行）： <tr rowspan=#>
#例2：
<table><tr rowspan=2><td>英语</td><td>数学</td><td>语文</td></tr><tr><td >90</td><td>80</td><td>85</td></tr></table>
英语 数学 语文
90 80 85

13.表单标记

<form action=# method=#>输入框标记</form>

action=# --- 输入框里的数据提交到某个网页文件，采用相对路径

Method=get,post --- 数据提交的方式

注意：一个表单内可放置多个输入框。

14.表单中的输入框标记

（1）第一类输入框的标记

<input type=# name=# value=# size=# maxlength=#>

type =text, password, radio, checkbox, button, submit,reset, hidden

name=# --- 表示输入框的名字，取名要有意义

value=# --- 表示输入框的初始值

Size=# --- 表示输入框的长度

Maxlength=# --- 表示输入框能输入的最大字符数

a.文本框和密码框
type = text, password
例子：
<form action=""  method=POST>
 您的姓名: <input type=text name=user_name><br>
 您的主页的网址: <input type=text name=user_url value=http://><br>
 密码: <input type=password name=user_pwd><br> 
</form>
b.单选框和复选框
type =radio,checkbox（同一组单选框或复选框，输入框的名字是一样的）
例子：
您的性别: <input type=radio name=sex value=男>男&nbsp;
 <input type=radio name=sex value=女>女<br>
 您的爱好: <input type=checkbox name=hobby value=唱歌>唱歌&nbsp;
 <input type=checkbox name=hobby value=跳舞>跳舞&nbsp;
 <input type=checkbox name=hobby value=足球>足球&nbsp;
 <input type=checkbox name=hobby value=篮球>篮球
c.按钮
type =button,submit,reset
例子：
<input type=button name=opennew value=打开新窗口>&nbsp;
 <input type=submit name=ok value=确定> &nbsp;
 <input type=reset name=cancel value=取消>
注意：提交按钮和重置按钮必须放在表单内，才起作用
d.隐藏域
type =button,submit,reset
例子：
<input type=button name=opennew value=打开新窗口>&nbsp;
 <input type=submit name=ok value=确定> &nbsp;
 <input type=reset name=cancel value=取消>
注意：提交按钮和重置按钮必须放在表单内，才起作用

（2）第二类输入框（下拉列表框）

语法：<select name=# size=#  multiple >
            <option value=#>选项名</optoin>
            </select>

例子：<select name=career >
            <option value=1>教师</optoin>
           <option value=2>公务员</optoin>
            <option value=3>学生</optoin>
           <option value=3>企业管理人员</optoin>
            </select>

name=# --- 表示下拉列表框的名字，取名要有意义
Size=# --- 表示输入框的长度
multiple --- Ctrl 键配合鼠标实现多选
Value --- 选项的值

（3）第三类输入框（文本区域）

<textarea name=* rows=** cols=**> ...
           </textarea>
           
例1： <marquee direction=left>啦啦啦，我从右向左移！</marquee> <P> <marquee direction=right>啦啦啦，我从右向右移！</marquee> <marquee direction=up>啦啦啦，我从右向上移！</marquee> 
例2： <marquee behavior=scroll>啦啦啦，我一圈一圈绕着走！</marquee> <P><marquee behavior=slide>啦啦啦，我只走一次就歇了！</marquee> <P><marquee behavior=alternate>啦啦啦，我来回走耶！</marquee>
例3：<marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>

name --- 表示文本区域的名字，取名要有意义

Rows --- 表示文本区域的高度

cols --- 表示文本区域的宽度

15.文件或图片移动的标记

<marquee derection=# behaviour=# loop=# scrollamount=# scrolldelay=# bgcolor=# width=# height=#>...</marquee>

​ direction --- 表示移动的方向（left,right,up,down）

​ behavior --- 表示移动的方式（left,right,up,down）

​ loop --- 表示循环移动的次数（scroll, slide, alternate）

​ scrollamount --- 表示移动的速度

​ scrolldelay --- 表示移动延时

​ Bgcolor --- 表示移动的背景颜色

​ Width --- 表示移动的宽度

​ Height --- 表示移动的高度

16.多媒体页面

（1）背景音乐

   <bgsound src=# loop=#>

​ src --- WAV 文件的 URL

​ loop --- 循环数

（2）插入视频剪辑

  ```
  <embed src="1.rmvb" width="641" height="370" autostart="true"></embed>
  ```

17.框架页面

```
<frameset >{<frameset >...</frameset>}
   <frame>
   <frame>
   ... ...
</frameset>
```