html语言简介 ppt,html课件ppt

最新推荐文章于 2021-07-15 19:46:33 发布

Sophia倬懿

最新推荐文章于 2021-07-15 19:46:33 发布

阅读量387

点赞数

文章标签： html语言简介 ppt

PPT内容

这是html课件ppt，包括了基本概念，HTML基本标识符，CSS－－样式表，Javascript等内容，欢迎点击下载。

HTML

全部内容

基本概念

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网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后以 .htm或 .html 为文件后缀保存

编辑工具

FrontPage

Dreamweaver

记事本

……

关于设计模式的解释

C/S模式

B/S模式

MVC模式

C/S模式

C/S (Client/Server)结构，即大家熟知的客户机和服务器结构。

将任务合理分配到Client端和Server端来实现，降低了系统的通讯开销。目前大多数应用软件系统都是Client/Server形式的两层结构

B/S模式

B/S(Browser/Server)结构即浏览器和服务器结构。它是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。在这种结构下，用户工作界面是通过WWW浏览器来实现，极少部分事务逻辑在前端(Browser)实现，但是主要事务逻辑在服务器端(Server)实现，形成所谓三层3-tier结构。这样就大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本(TCO)。

MVC模式

MVC是一种目前广泛流行的软件设计模式，早在70年代，IBM就推出了Sanfronscisico项目计划，其实就是MVC设计模式的研究。近来，随着J2EE的成熟，它正在成为在J2EE平台上推荐的一种设计模型，也是广大Java开发者非常感兴趣的设计模型。

MVC英文即Model-View-Controller，即把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离，这样一个应用被分成三个层——模型层、视图层、控制层。

HTML 语法示例1：

基本结构标识

注意：在HTML中是不分大小写的。

标记要书写规范，包括标记的缩进!

HTML基本标识符

HTML文件基本架构

单标识

特殊标识

排版标识

字体标识

列表标识

表格框架表单标识

其他标识

HTML文件基本架构

文件开始

标头区开始 ... 标题区标头区结束

文件结束

网页文件格式。

标头区 : 记录文件基本资料，如作者、编写时间。标题区 : 文件标题须使用在标头区内，可以在浏览器最上面看到标题。本文区 : 文件资料，即在浏览器上看到的网站内容

单标识

注意：c语言中的两种注释

特殊标识

P12-13

空格

> >

& &

“ "

‘ '

® ®

排版标识

----

注意：

和的区别

不强行换行

字体标识

P21

打字体 ( 固定宽度文字 )

列表标识

有序列表

无序列表

自定义列表

条目

内容

表格框架表单标识

表格

框架

表单

其他标识

链接标识

字幕标识

多媒体标识

图片标识

标题

描述非html标准的一些文档信息

描述当前文档与其他文档间的链接关系

脚本程序内容

样式表内容

设置打开链接的方式

标记

Target属性值有：

_blank

_parent

_self

标记

Meta元素提供一些非html标准的用户不可见的信息。

单标记

作用：

编码的说明

定时刷新

页面进入和退出的特效

进入页面推出页面这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为0-23:

页面进入和退出的特效

0 矩形缩小 1 矩形扩大 2 圆形缩小3 圆形扩大 4 下到上刷新 5 上到下刷新6 左到右刷新 7 右到左刷新 8 竖百叶窗9 横百叶窗 10 错位横百叶窗 11 错位竖百叶窗

页面进入和退出的特效

12 点扩散

13 左右到中间刷新 14 中间到左右刷新15 中间到上下16 上下到中间 17 右下到左上18 右上到左下 19 左上到右下 20 左下到右上21 横条 22 竖条 23 以上22种随机选择一种

属性：attribute每个标记中用于修饰标记的一些描述信息。

属性值：用来设置属性的值。

如：

Bgcolor 背景色

Background 背景图片

Text 文本颜色

Link 链接文字颜色

Alink 活动链接文字颜色

Vlink 已访问链接文字颜色

Topmargin 页面顶部留白距离

Letfmargin 页面左侧留白距离

Bottommargin 页面底部留白距离

Rightmargin 页面右部留白距离

补充内容

颜色的设定：三种方法

#FFFFFF #六位十六进制数

RGB(255,255,255) rgb码

White 英文单词名

长度单位

绝对长度：单位为像素

相对长度：单位为百分比

标题标记

HTML 简介

标题标记

我的网页

Align的属性值有：

left(默认)

right

center

段落标记

P的属性有align

如：

你们好，欢迎来到华育国际

标记

属性：

color 定义文字的颜色

face 定义文字的字体

size 定义文字的大小

文字内容

标记

属性：

align 对齐方式

color 线条颜色

size 线条的粗度

width 线条的宽度

如：

图片标记 P17

在网页中插入图片

属性：

src 指定图片的路径

alt 用于描述图片的文字

width 图片的宽度

height 图片的高度

border 图片的边框

align 图片的对齐方式

图片标记

Align的属性值

top 图片和文字顶部对齐

middle 图片和文字居中对齐

bottom 图片和文字底部对齐

left 图片居左对齐文字沿图片绕排

right 图片居右对齐文字沿图片绕排

absmiddle图片对齐到目前文字的绝对中央

absbottom图片对齐到目前文字的绝对底部

插入图像

分隔图片

将一整张图片分隔成几个部分。

超链接标记

通过链接可以调用另一个页面或是同页面某一区域的资源。

属性：

align 对齐方式

target 目标窗口的显示形式

title 链接提示

href 设置要连接的地址

target

Target的属性值

_blank 打开一个新窗口

_self 在当前窗口打开

_parent 在当前的上一级窗口打开

链接到其他文档

链接到同一文档的各个部分

链接到另一文档中某个特定位置

使用电子邮件

为图片加超链接

在图片上加上超级链接使它链接到另一个网页上。

列表

无序列表

有序列表

定义列表

无序列表

学习 HTML

星期一
星期二
星期三
星期四
星期五

无序列表中的type的属性值

square 方形项目符号

disc(默认) 实心圆项目符号

circle 空心圆项目符号

有序列表

学习 HTML

星期一
星期二
星期三
星期四
星期五

有序列表

属性

type 列表符号的类型

start 符号的起始

有序列表中的type的属性值

1 数字

A 大写字母

a 小写字母

I 大写罗马字母

i 小写罗马字母

列表嵌套

定义列表

标记

实现字幕滚动效果

属性

behavior 滚动的方式

bgcolor 背景色

direction 滚动方向

height 窗体的高度

loop 循环次数

scrollamount 滚动速度

scrolldelay 滚动延迟时间

width 窗体宽度

title 文字描述

behavior

属性值设置

alternate 交替

scroll 滚动

slide 一次滑动

dirction

属性值设置

left

right

down

例子1：不同方式的滚动文字

不同方式的滚动文字

最新图书：《超梦幻劲爆网页MX完美结合》

例子2：不同方向的滚动文字

不同方向的滚动文字

最新图书：《超梦幻劲爆网页MX完美结合》

在HTML文档中插入多媒体

插入声音

插入视频

添加声音

方法1：

其中 path\sound filename 为声音文件的路径和文件名

Netscape Navigator 不支持 bgsound 元素

添加声音

方法2：

在HTML中插入声音示例

添加音频/视频

要将音频或视频文件插入到 HTML 文档中，可以使用标记

在HTML中插入视频示例

层简介

使用多个层，可以将一个层放到另一个层的上面或下面。

Z 顺序决定元素的显示顺序。

层就像一个包含内容的框架，可以将它放置在所需的位置。

表格

Table中的属性

Width

Height

Cellspacing

Cellpadding

Border

Bgcolor

Background

bordercolor

标记

Table中的属性

Width

Height

valign

Border

Bgcolor

Background

bordercolor

标记

Table中的属性

Width

Height

Colspan

Rowspan

Border

Bgcolor

Background

bordercolor

作业：

表单简介

表单的用途

用户注册某种服务时，收集其姓名、地址、电话号码、电子邮件地址和其他信息。

收集购买物品所需的信息。例如，如果想通过 Internet 购买一本书，就需要填写姓名、邮政地址和付款方式等。

一个样本表单

使用表单

HTML 输入元素属性

Input – Type 属性

TEXT

CHECKBOX

RADIO

SUBMIT

RESET

IMAGE

BUTTON

示例：

其他输入元素

TextArea 元素

Cols

Rows

Size

Type

Value

BUTTON 元素

Name

Value

Type

示例：

列表(下拉框)元素

SELECT 元素

Name

Size

Multiple

示例：

框架集

框架集(框架组)是框架的集合或是说是一个框架的组合。

框架

框架将 Web 浏览器分成多个不同的区域，每个区域都可以显示独立、可滚动的页面。

例如，可以在网页中使用三个框架，一个显示标题，一个用作导航菜单，一个显示数据。

必须放在

之中用于划分框窗，标识框架集中的每一个框窗。标记的属性

Cols 垂直切割窗口

Rows 横向切割窗口

Frameborder 设定框架的边框

Border 设定边框的厚度

Bordercolor 设定框架的边框颜色

Framespacing框架与框架间保留空白的距离

FRAME 元素

FRAME 元素的属性包括：

Name 用来标记框架内显示的网页的名字

Src 用以标记要链接的网页的路径

Noresize 框架不可改变大小

Scrolling 是否要滚动条

Frameborder

框架使用示例：

嵌套的框架集

NOFRAMES 元素

内嵌框架

IFRAME属性

Name

Width

Height

示例：

复习：

基本概念

知道基本标识的作用

了解

完成一个完整的个人主页的设计