HTML
This presentation is the property of its rightful owner.
Sponsored Links
1 / 29

HTML 语言培训 PowerPoint PPT Presentation


  • 115 Views
  • Uploaded on
  • Presentation posted in: General

HTML 语言培训. 主要目标. HTML 中的一般概念 页面元素的种类 如何书写一个 HTML 页面 常用标记. HTML 是: 全称: HyperText Mark-up Language 译称:超文本标记语言。 是一套独立于平台的格式定义 是由各种标记 (Tag) 组成的标记语言 用来描述网页文档中的各个组成部分 无需编译,浏览器可直接解释 当前版本: 4.0. 基本概念:什么是 HTML. 在WWW的世界裡,大家統一都用URL來說明地址 ,用来指向 Internet 上的各种资源 。

Download Presentation

HTML 语言培训

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Html

HTML语言培训


Html

主要目标

  • HTML中的一般概念

  • 页面元素的种类

  • 如何书写一个HTML页面

  • 常用标记


Html

HTML是:

全称:HyperText Mark-up Language

译称:超文本标记语言。

是一套独立于平台的格式定义

是由各种标记(Tag)组成的标记语言

用来描述网页文档中的各个组成部分

无需编译,浏览器可直接解释

当前版本:4.0

基本概念:什么是HTML


Html

在WWW的世界裡,大家統一都用URL來說明地址,用来指向Internet上的各种资源。

URL=Uniform Resource Locator

格式:分成兩部份,第一個部份用來指定存取方式,第二個部份用來指定位址,兩者之間以“://”符號隔開。如下所示:

scheme://host.domain[:port]/path/filename

基本概念:什么是URL


Html

通常HTML的标记是以成对的方式出现的,其格式如下:

<标记名称 「属性名称=参数…]>內容</标记名称>

凡是在 <标记>和 </标记> 之间的內容均會受到這個标记的影响

但是有少部份的标记,加上結尾標註反而觉得累赘,因此在习惯上也有不加結尾标记的。其格式如下:

<标记名称>

标记的写法


Html

HTML的基本结构

<html>

<head>

<title>文件标題</title>

:

</head>

<body>

:

:

</body>

</html>

以 <html> 开头

表头区(包含对文档内容的一些说明和引入其他资源的申明)

主体区(包含要显示的内容)

以 </html> 结尾


Html

<HTML>

<HEAD><TITLE>我是標題</TITLE></HEAD>

<BODY TEXT="#808080" LINK="#008000">

<Center>This is a test!!<br>

<a href=“http://myhomePage”>to my homepage</a>

</Center>

</BODY>

</HTML>

基本HTML页面示例


Html

实体指的是HTML语言中定义的一些特殊字符。常用有以下五种:

&nbsp; 空格

&amp; &

&lt <

&gt >

&quot; “

实体


Html

一般的Web页面由主要由以下元素组成:

文本

超链接

图片

表格

输入框

按钮

多媒体效果

框架

Web页面的组成


Html

各标记与页面元素的对应关系

  • 文本--不加标记或使用<FONT>等标识

  • 超链接--<A>

  • 图片--<IMG>

  • 输入框--<INPUT>、<TEXTAREA>、<SELECT>

  • 按钮--<BUTTON>

  • 表格--<TABLE>、<TR>、<TD>等

  • 多媒体效果--<EMBED>、<OBJECT>等

  • 框架--<FRAME>、<IFRAME>等


Html

写法:<FONT 属性名=参数>文字</FONT>。

SIZE属性:控制字体大小。例:SIZE=2

COLOR属性:控制颜色。例:COLOR=“#ff0000”

FACE属性:控制字体。例:FACE=“黑体”

字体的有效空间为1到7,或者是-1到+5。其他值无效。效果为得到当前浏览器字体大小的基础上-1到+5的效果。

颜色可以是16 进制RGB数码,或者是下列预定义色彩:Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

字体能否识别识客户端而定,所以应采用常用字体。

FONT标记及其主要属性


Html

<Hn></Hn>(n=1..6):标识六种大小的字体

<U></U>:字下加下划线

<I></I>:斜体

<B></B>:粗体

<S></S>:中划线

<SUP></SUP>:上标

<SUB></SUB>:下标

<BIG></BIG>:加大一号字体

其他可控制字体的标记


Html

MARQUEE标记可以实现文字在一定范围内的跑动效果。MARQUEE内可以为一个区段,不只是文字。MARQUEE标记只有IE浏览器支持。

主要属性如下:

方向 <direction=#> #=left, right

方式 <bihavior=#> #=scroll, slide, alternate

循环 <loop=#> #=次数;若未指定则循环不止(infinite)

速度 <scrollamount=#> #为每步的象素数

延时 <scrolldelay=#> #为延时的毫秒数

跑马灯效果


Html

<P></P>:段落标记

<BR>:换行

<DIV></DIV>:分区。分区内可以是任意标记。

<UL><LI></UL>:无序列表

<OL ><LI></OL>:有序列表

<dl><dt>...<dd>...</dl>:双层列表

Li的type属性:

在无序列表中,可以选择disk, circle, square三种值

在有序列表中,可以选择A, a, I, i, 1五种值

文字的布局


Html

写法:<A 属性名称=参数>文字</A>

Href属性:链接目的。如:href=http://www.sina.com.cn

Target属性:打开链接的窗口。如:Target=“NewWin”

Name属性:链接的名称

Href的值会被认为是一个URL。如格式不全浏览器会字段补全。如不带域名,浏览器会默认指向当前服务器;不带目录,浏览器会默认指向当前服务器当前目录下;

Target属性有以下默认值:

_self:当前框架;top:当前窗口;_blank:新窗口

Name属性和Href属性可以关联使用。<A href=“#AName”>会链接到当前页面上名字为AName的链接点的位置。

A标记及其属性


Html

IMG标记及其属性

写法:<IMG 属性名=参数>

  • Src属性:指向图片的URL。如:src=“/Images/1.gif”

  • Width属性:图片的宽度。如:width=85

  • Height属性:图片的高度。如:height=80

  • Border属性:图片边框的厚度。如:border=3

  • Alt属性:在浏览器尚未完全读入图象时,在图象位置显示的文字。如:alt=“请稍等,正在装载图像……”

  • Aligh属性:跟周边文字的对齐方式。如:align=top。

    Width、Height、Border等属性的值的单位为象素。

    Align的选择范围:top、middle、bottom、left、right


Html

用于输入的标记

  • <Input Type=Text>:单行输入框——

  • <TextArea></TextArea>:多行输入框——

  • <Input Type=radio>:单选按钮——

  • <Input Type=checkbox>:复选框——

  • <Select><option></option></Select>

    下拉框——

  • <Select size=(>1的值)><option></option></Select>:

    多选框——


Html

通用属性:

Name:名字 Value:值

特殊属性:

单行输入框:SIZE(长度)

多行输入框:COLS(列数),ROWS(行数)

单选框、复选框:CHECKED(表示选中)。单选框和复选框必须成组使用。

下拉框、多选框:包含子标记<OPTION>代表各选项,OPTION标记如果拥有SELECTED属性,表示该选项被选中。

输入标记介绍


Html

按钮的表示法:

<Button></Button>

<Input type=Button>

<Input type=submit>

<Input type=Reset>

图示:

用第一种表示法的话,按钮上文字为标记间的文字;用之后的表示法的话,用INPUT标记的Value属性值作为按钮上的文字。按下按钮时所执行的动作,由按钮的onclick事件的JavaScript处理程序决定。

按钮介绍


Html

<TABLE></TABLE>表示表格的开头和结尾。

<TR></TR>表示一行的开头和结尾。

<TH></TH>表示一个列标题单元格的开头和结尾。

<TD></TD>表示一个普通单元格的开头和结尾。

例如:

<TABLE border=1><TR>

<TH>姓名</TH>

<TH>性别</TH></TR>

<TR><TD>张三</TD>

<TD>男</TD></TR>

</TABLE>

表格的表示


Table

Width:宽度。

Height:高度。

bgColor:背景颜色。

Align:水平相对位置。

border:边框厚度。

borderColor:边框颜色。

Cellspacing:边框线内部空白厚度。

cellpadding:单元格与边框线间空白厚度。

TABLE标记的主要属性


Html

Width:宽度。

Height:高度。

bgColor:背景颜色。

Align:水平相对位置。

Valign:垂直相对位置。

TR标记及其主要属性


Td th

Width:宽度。

Height:高度。

bgColor:背景颜色。

Align:水平相对位置。

Valign:垂直相对位置。

border:边框厚度。

borderColor:边框颜色。

Colspan:单元格所跨烈数。

Rowspan:单元格所跨行数。

TD、TH标记及其主要属性


Html

一般来说,我们会使用EMBED、OBJECT这两个标记来往网页内插入多媒体效果。这两个标记的属性与具体所用的插件有关。相同的是都会有SRC属性,指向要嵌入的文件。

HTML还提供以下标记用来播放多媒体效果:

<BGSOUND> 播放WAV文件。

Src属性:WAV文件的URL地址。

Loop属性:播放的循环次数。

<IMG dynsrc=“URL”>播放URL指向的AVI文件。

Loop属性:播放的循环次数。

多媒体效果


Html

如果我们有三个HTML页面,想要他们在一个页面里面显示出来,如右图所示,那么我们需要用框架来达到这个效果。代码:

<HTML><HEAD><TITLE></TITLE></HEAD>

<FRAMESET COLS="120,*">

<FRAME SRC="http://a.htm" >

<FRAMESET ROWS="100,*">

<FRAME SRC=“b.htm">

<FRAME SRC=“c.htm">

</FRAMESET>

</FRAMESET>

<BODY></BODY></HTML>

框架的页面效果


Frameset

COLS=“宽度1,宽度2”就是垂直切割画面。切成几块取决于您使用了几个数字,使用逗号分隔开即可。

ROWS= “宽度1,宽度2” 就是橫向切割画面,也就是將画面上下分开,切法同上。

另外,宽度可以用“*”号表示,代表未限定宽度,浏览页面时由浏览器看情况分配宽度。

FRAMESET的主要属性


Frame

scrolling设定是否要显示滚动条,YES是要显示滚动条,NO是都不要显示,AUTO是看情况来显示。

noresize设定不让使用者可以改变這個框架的大小,如果沒有设定这个参数,使用者可以拉动框架,改变其大小。不需要设定此参数的值。

FRAME的主要属性


Html

以上是HTML语言的一个介绍,希望能带领大家进入HTML世界的大门。

HTML文档是Internet世界的构成元素,更是当前软件界流行的模式(B/S模式:Browser/Server)中的基本工具。学好HTML,才能做出优秀的B/S程序。

HTML语言还包含有丰富的标记来表示各种文档,需要大家去熟悉。

尾声


Html

谢谢!


  • Login