html课件(全)
2011-04-06 50页 ppt 3MB 41阅读
is_353991
暂无简介
举报
html课件(全)nullHTMLHTMLnullnullnullnullnullnullnullnull全部内容全部内容
基本概念
HTML基本标识符
CSS－－样式表
Javascript
基本目标基本目标
学会基本的标记的功能及属性设置
学会对样式表的设置
学会基本的js方法及自定义函数
自己设计并实现简单的个人网站(静态)基本英语单词基本英语单词Client： 客户机程序，顾客, 客户, 委托人
www：world wide web 万维网
element：元素
value：值，价值
request：请求
response：回答,...
nullHTMLHTMLnullnullnullnullnullnullnullnull全部内容全部内容
基本概念
HTML基本标识符
CSS－－样式表
Javascript
基本目标基本目标
学会基本的标记的功能及属性设置
学会对样式表的设置
学会基本的js方法及自定义函数
自己并实现简单的个人网站(静态)基本英语单词基本英语单词Client： 客户机程序，顾客, 客户, 委托人
www：world wide web 万维网
element：元素
value：值，价值
request：请求
response：回答, 响应
standard：
document：文件
attribute：属性基本英语单词基本英语单词form： 表单
frame： 框架
table：表格
background：背景
color：颜色
title：标
embed：嵌入
head：头，头部
body：身体
Image:图片基本英语单词基本英语单词HTML：Hyper Text Markup Language超文本标记语言
HTTP：Hyper Text Transfer Protocol超文本传输协议
web page：网页
web servers：网络服务器
web clients：网络客户端
web browser：浏览器
HTML tags：HTML标记基本概念基本概念HTTP：超文本传输协议
HTML：超文本标记语言
网页：用于存储网页信息的文件
网络服务器：用于存储网络文件的计算机
客户端：用于浏览网页的一端的计算机
浏览器：用于浏览网页的软件平台
浏览器类型：IE 、Netscape Navigator、MyIE等用户如何从浏览器获得资源用户如何从浏览器获得资源基本概念基本概念网络分类：
按照范围分：广域网(WAN)、城域网(MAN)、局域网(LAN)
按拓扑结构：总线型结构,星型结构,环形结构,网状结构
网络的拓扑结构是指网络中通信线路(揽线)和计算机、以及其他组件的物理布局。 概述概述
当我们畅游Internet时，我们透过浏览器所看到的网站，是由HTML (HyperText Markup Language) 语言所构成。HTML ( 超文件标记语言 ) 是一种建立网页文件的语言，透过标记式的指令 (Tag)，将影像、声音、图片、文字等连结显示出来。 概述概述HTML标记是由 < 和 > 所括住的指令，主要分为 : 单标记指令、双标记指令 ( 由 < 起始标记 >，< / 结束标记 >所构成 ) 。它是一种介于前台和后台的语言。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成以 .htm 或 .html 为文件后缀保存将HTML网页文件由浏览器打开显示，若测试没有问题则可以放到服务器 (Server) 上，对外发布信息。如何保存一个HTML文件如何保存一个HTML文件
HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后以 .htm或 .html 为文件后缀保存 编辑工具编辑工具
FrontPage
Dreamweaver
记事本
……
关于设计模式的解释关于设计模式的解释
C/S模式
B/S模式
MVC模式C/S模式C/S模式C/S （Client/Server）结构，即大家熟知的客户机和服务器结构。
将任务合理分配到Client端和Server端来实现，降低了系统的通讯开销。目前大多数应用软件系统都是Client/Server形式的两层结构B/S模式B/S模式B/S（Browser/Server）结构即浏览器和服务器结构。它是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。在这种结构下，用户工作界面是通过WWW浏览器来实现，极少部分事务逻辑在前端（Browser）实现，但是主要事务逻辑在服务器端（Server）实现，形成所谓三层3-tier结构。这样就大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本（TCO）。MVC模式MVC模式MVC是一种目前广泛流行的软件设计模式，早在70年代，IBM就推出了Sanfronscisico项目，其实就是MVC设计模式的研究。近来，随着J2EE的成熟，它正在成为在J2EE平台上推荐的一种设计模型，也是广大Java开发者非常感兴趣的设计模型。
MVC英文即Model-View-Controller，即把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离，这样一个应用被分成三个层——模型层、视图层、控制层。 HTML 语法示例1：HTML 语法示例1：
欢迎学习 HTML
... 标题区 标头区结束
本文区开始 本文区内容 本文区结束
文件结束
网页文件。 标头区 : 记录文件基本资料，如作者、编写时间。 标题区 : 文件标题须使用在标头区内，可以在浏览器最上面看到标题。 <BODY> 本文区 : 文件资料，即在浏览器上看到的网站内容
单标识
单标识
<!-- -->
注意：c语言中的两种注释
<br>
<hr>
<link>
<img>
<frame>
<input>
<bgsound>
<meta>
<base>特殊标识特殊标识 P12-13
空格
< <
> >
& &
“ "
‘ '
© ©
® ®排版标识排版标识
<p></p>
<br>
<h1></h1>----<h6></h6>
注意：<h1>和<title>的区别
<pre></pre>
<hr>
<nobr>不强行换行字体标识字体标识<font></font> P21
<b></b> <strong></strong>
<i></i> <em></em> <address></address>
<u></u> <ins></ins>
<big></big>
<small></small>
<sup></sup>
<sub></sub>
<strike></strike> <s></s> <del></del>
<tt></tt>打字体 ( 固定宽度文字 )
<blockquote></blockquote>列表标识列表标识有序列表
<ol>
<li>
</li>
</ol>
无序列表
<ul>
<li>
</li>
</ul>
自定义列表
<dl>
<dt>条目
<dd>内容
</dl>表格框架表单标识表格框架表单标识表格<table>
<tr>
<td>
</td>
</tr>
</table>
框架<frameset>
<frame>
</frameset>
表单<from> <select>
<input> <option></option>
</form> </select>
<textarea></textarea>其他标识其他标识
链接标识 <a></a>
字幕标识 <marquee></marquee>
多媒体标识<embed></embed>
图片标识<img><Head>标记<Head>标记<Head>标记包含的元素有：
<title> 标题
描述非html标准的一些文档信息
描述当前文档与其他文档间的链接关系
脚本程序内容
样式表内容
标题标记标题标记
HTML 简介
到
我的第一个 HTML 文档
运行结果基本结构标识基本结构标识 注意：在HTML中是不分大小写的。 标记要书写规范，包括标记的缩进!HTML基本标识符HTML基本标识符HTML文件基本架构 单标识 特殊标识 排版标识 字体标识 列表标识 表格框架表单标识 其他标识HTML文件基本架构HTML文件基本架构 文件开始 标头区开始HTML 简介
HTML 简介
HTML 简介
HTML 简介
HTML 简介
HTML 简介
可显示六种大小的标题，即到，为最大，为最小 标题标记标题标记
我的网页
Align的属性值有：
left（默认）
right
center段落标记
段落标记P的属性有align
如：
你们好，欢迎来到华育国际
标记标记属性：
color 定义文字的颜色
face 定义文字的字体
size 定义文字的大小
文字内容
标记
标记属性：
align 对齐方式
color 线条颜色
size 线条的粗度
width 线条的宽度
如：
![]()
图片标记 P17![]()
图片标记 P17在网页中插入图片
属性：
src 指定图片的路径
alt 用于描述图片的文字
width 图片的宽度
height 图片的高度
border 图片的边框
align 图片的对齐方式![]()
图片标记![]()
图片标记Align的属性值
top 图片和文字顶部对齐
middle 图片和文字居中对齐
bottom 图片和文字底部对齐
left 图片居左对齐文字沿图片绕排
right 图片居右对齐文字沿图片绕排
absmiddle图片对齐到目前文字的绝对中央
absbottom图片对齐到目前文字的绝对底部插入图像插入图像
插入图像
插入图像
底部对齐
图2.15：示例15的输出结果
顶部对齐
居中对齐
IMG标记用于将图像插入到HTML文档中。可以将IMG标记放置在要显示图像的位置。语法为：
其中SRC是属性，而值是指定图像文件位置的URL。
IMG标记的ALIGN属性可以用于调整图像相对于周围文本的对齐方式。语法为：
分隔图片分隔图片将一整张图片分隔成几个部分。
超链接标记超链接标记通过链接可以调用另一个页面或是同页面某一区域的资源。
属性：
align 对齐方式
target 目标窗口的显示形式
title 链接提示
href 设置要连接的地址targettargetTarget的属性值
_blank 打开一个新窗口
_self 在当前窗口打开
_parent 在当前的上一级窗口打开链接到其他文档链接到其他文档
使用链接
本页的所有内容都讲述关于如何创建到文档的链接
单击此处查看文档2
文档2
这是文档2。单击文档1中的超链接后将显示本页。
返回
链接到同一文档的各个部分链接到同一文档的各个部分
使用链接
互联网
HTML简介
多样化和统一性
互联网
互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。
HTML简介
超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言 (SGML) 的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。
多样性和统一性
万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。
单击链接到另一文档中某个特定位置链接到另一文档中某个特定位置
主文档
互联网
HTML简介
多样性和统一性
单击使用电子邮件使用电子邮件如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入mailto值。
我的电子邮件 为图片加超链接为图片加超链接在图片上加上超级链接使它链接到另一个网页上。
列表列表无序列表
有序列表
定义列表使要表现的信息在页面上是一条一条整齐出现的。
分类：无序列表无序列表
学习 HTML
- 星期一
- 星期二
- 星期三
- 星期四
- 星期五
无序列表是一种“项目符号列表”。其中的项目都带有项目符号前缀。该列表
包含在无序列表标记 ..
内。列表中的每个项目都使用列表标记进
行标记，其中LI表示List Item（列表项）。关闭标记 是可选的。 无序列表中的type的属性值无序列表中的type的属性值
square 方形项目符号
disc（默认） 实心圆项目符号
circle 空心圆项目符号 有序列表有序列表
学习 HTML
- 星期一
- 星期二
- 星期三
- 星期四
- 星期五
有序列表包含在 ..
标记内。有序列表也显示列表项目。它与无序列表的区
别在于有序列表项前面的编号是可设置的有序编号。 有序列表有序列表属性
type 列表符号的类型
start 符号的起始有序列表中的type的属性值有序列表中的type的属性值1 数字
A 大写字母
a 小写字母
I 大写罗马字母
i 小写罗马字母列表嵌套列表嵌套
学习HTML
- 星期一
- 简介HTML
- 创建列表
- 星期二
- 创建表
- 插入图像
- 星期三
- 星期四
- 星期五
定义列表定义列表
学习 HTML
- 星期日
- 一周的第一天
- HTML
- 超文本标记语言
- 互联网
- 网络的网络
定义列表用于生成术语列表（术语和定义）。定义列表包含在 ..
标记内。
标记用于指定要定义的术语，而 标记用于对术语的定义。
为最大，为最小 标题标记标题标记
我的网页
Align的属性值有：
left（默认）
right
center段落标记
段落标记P的属性有align
如：
你们好，欢迎来到华育国际
标记标记属性：
color 定义文字的颜色
face 定义文字的字体
size 定义文字的大小
文字内容
标记
标记属性：
align 对齐方式
color 线条颜色
size 线条的粗度
width 线条的宽度
如：
![]()
图片标记 P17![]()
图片标记 P17在网页中插入图片
属性：
src 指定图片的路径
alt 用于描述图片的文字
width 图片的宽度
height 图片的高度
border 图片的边框
align 图片的对齐方式![]()
图片标记![]()
图片标记Align的属性值
top 图片和文字顶部对齐
middle 图片和文字居中对齐
bottom 图片和文字底部对齐
left 图片居左对齐文字沿图片绕排
right 图片居右对齐文字沿图片绕排
absmiddle图片对齐到目前文字的绝对中央
absbottom图片对齐到目前文字的绝对底部插入图像插入图像
插入图像
插入图像
底部对齐
图2.15：示例15的输出结果
顶部对齐
居中对齐
IMG标记用于将图像插入到HTML文档中。可以将IMG标记放置在要显示图像的位置。语法为：
其中SRC是属性，而值是指定图像文件位置的URL。
IMG标记的ALIGN属性可以用于调整图像相对于周围文本的对齐方式。语法为：
分隔图片分隔图片将一整张图片分隔成几个部分。
超链接标记超链接标记通过链接可以调用另一个页面或是同页面某一区域的资源。
属性：
align 对齐方式
target 目标窗口的显示形式
title 链接提示
href 设置要连接的地址targettargetTarget的属性值
_blank 打开一个新窗口
_self 在当前窗口打开
_parent 在当前的上一级窗口打开链接到其他文档链接到其他文档
使用链接
本页的所有内容都讲述关于如何创建到文档的链接
单击此处查看文档2
文档2
这是文档2。单击文档1中的超链接后将显示本页。
返回
链接到同一文档的各个部分链接到同一文档的各个部分
使用链接
互联网
HTML简介
多样化和统一性
互联网
互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。
HTML简介
超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言 (SGML) 的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。
多样性和统一性
万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。
单击链接到另一文档中某个特定位置链接到另一文档中某个特定位置
主文档
互联网
HTML简介
多样性和统一性
单击使用电子邮件使用电子邮件如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入mailto值。
我的电子邮件 为图片加超链接为图片加超链接在图片上加上超级链接使它链接到另一个网页上。
列表列表无序列表
有序列表
定义列表使要表现的信息在页面上是一条一条整齐出现的。
分类：无序列表无序列表
学习 HTML
- 星期一
- 星期二
- 星期三
- 星期四
- 星期五
无序列表是一种“项目符号列表”。其中的项目都带有项目符号前缀。该列表
包含在无序列表标记 ..
内。列表中的每个项目都使用列表标记进
行标记，其中LI表示List Item（列表项）。关闭标记 是可选的。 无序列表中的type的属性值无序列表中的type的属性值
square 方形项目符号
disc（默认） 实心圆项目符号
circle 空心圆项目符号 有序列表有序列表
学习 HTML
- 星期一
- 星期二
- 星期三
- 星期四
- 星期五
有序列表包含在 ..
标记内。有序列表也显示列表项目。它与无序列表的区
别在于有序列表项前面的编号是可设置的有序编号。 有序列表有序列表属性
type 列表符号的类型
start 符号的起始有序列表中的type的属性值有序列表中的type的属性值1 数字
A 大写字母
a 小写字母
I 大写罗马字母
i 小写罗马字母列表嵌套列表嵌套
学习HTML
- 星期一
- 简介HTML
- 创建列表
- 星期二
- 创建表
- 插入图像
- 星期三
- 星期四
- 星期五
定义列表定义列表
学习 HTML
- 星期日
- 一周的第一天
- HTML
- 超文本标记语言
- 互联网
- 网络的网络
定义列表用于生成术语列表（术语和定义）。定义列表包含在 ..
标记内。
标记用于指定要定义的术语，而 标记用于对术语的定义。
我的网页
Align的属性值有： left（默认） right center段落标记
段落标记P的属性有align 如：
你们好，欢迎来到华育国际
标记标记属性： color 定义文字的颜色 face 定义文字的字体 size 定义文字的大小 文字内容标记
标记属性： align 对齐方式 color 线条颜色 size 线条的粗度 width 线条的宽度 如：
插入图像
底部对齐
图2.15：示例15的输出结果
顶部对齐
居中对齐
分隔图片分隔图片将一整张图片分隔成几个部分。
超链接标记超链接标记通过链接可以调用另一个页面或是同页面某一区域的资源。
属性：
align 对齐方式
target 目标窗口的显示形式
title 链接提示
href 设置要连接的地址targettargetTarget的属性值
_blank 打开一个新窗口
_self 在当前窗口打开
_parent 在当前的上一级窗口打开链接到其他文档链接到其他文档
本页的所有内容都讲述关于如何创建到文档的链接 单击此处查看文档2
这是文档2。单击文档1中的超链接后将显示本页。
返回
链接到同一文档的各个部分链接到同一文档的各个部分
HTML简介
多样化和统一性
互联网
互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。
HTML简介超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言 (SGML) 的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。
多样性和统一性万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。
单击链接到另一文档中某个特定位置链接到另一文档中某个特定位置
HTML简介
多样性和统一性 单击使用电子邮件使用电子邮件如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入mailto值。 我的电子邮件 为图片加超链接为图片加超链接在图片上加上超级链接使它链接到另一个网页上。
列表列表无序列表
有序列表
定义列表使要表现的信息在页面上是一条一条整齐出现的。
分类：无序列表无序列表
- 星期一
- 星期二
- 星期三
- 星期四
- 星期五
- ..
- 星期一
- 星期二
- 星期三
- 星期四
- 星期五
- ..
- 星期一
- 简介HTML
- 创建列表
- 星期二
- 创建表
- 插入图像
- 星期三
- 星期四
- 星期五
- 星期日
- 一周的第一天
- HTML
- 超文本标记语言
- 互联网
- 网络的网络
- ..