当前位置:首页 >> 其它技巧 >>

第二讲—HTML_图文

第2讲—— HTML
学习目标
知道什么是HTML 了解HTML基本结构语法

HTML语言常用的标记
?

?

?

要编写网页,先要了解HTML语言,即超文本 标记语言,它是网页编程的基础。 HTML语言是由一些标记、字母和文字组成的。 它以普通的文本文件保存,可以用你所熟悉的 任何文字编辑器来编辑它。 通过超文本标记语言(HTML)中简单的标记,可 以在Web页面显示文本、图像、声音、视频, 声图文并茂,通过超链接还可以链到其他你想 去的任何Web页面。

HTML语言常用的标记
1、开始与结束标记<HTML> </HTML> ? HTML文档的开始标记是<HTML>,它告诉浏 览器下面的内容是HTML文档,在HTML文档 结束处要有对应的</HTML>标记,它告诉浏 览器HTML文档结束了。 ? 语法格式为:
? ? ?

<HTML> HTML文件的所有内容 </HTML>

HTML语言常用的标记
2、头部标记<head></head> 包含文档标题、文档所用脚本、样式定义,还可 定义索引程序所要的其他信息标志。 3、标题标记<title></title> ? <title>和</title>标记中间所包含的文字,将 成为这个Web页的标题,一般写在头部标记之 中。标题文字会显示在Web浏览器最上面的 title(标题)栏上。浏览器用户可以把标题加入 收藏夹中,所以标题文字最好使用中文并且有 明确的意义。 4、说明信息标记<meta>

?

? ? ?

?

? ? ?

例2-1.html 头部标记和标题标记的使用。 <html> <head> <title> 1-1 这里显示的文字是:Web页标题 </title> 这里显示的是:Web页面头部标记中的文字 </head> </html>

5、 <body>主体标记
? ? ? ?

?

<body>标记是Web页面主体标记的开始,并对应结束 符</body>。 Web页面的主要内容都出现在<body>和</body>标记 之中。 文档中只能有一个body标记,并且它只能跟在head标 记后面。 <body>标记还具有一些属性可以设定Web页面的背景 色,可使用图片/图像作背景,确定链接的颜色,设置 文字的颜色等。 语法格式为:
? ? ?

<body [bgcolor=# | text=#|link=#| alink=#| vlink=#| background=图像文件名]> 文挡内容 </body>

? ? ? ? ? ? ?

?
? ?

例2-2.html <html> <head> <title>1-2</title> 这里显示的是:Web页面头部标记中的文字 </head> <body> 这是使用HTML语言编写的Web页面文件 </body> </html>

写标记特点
?

?

?

从这几个标记可以看到HTML语言的标记 是对称使用的,开始为<标记>,结束为 </标记>。 不过,也有个别的标记是单独出现的, 以后会看到。 标记里的英文字母大小写都可以。

? ? ? ?

段落标记<P></P> 换行标记<br> 水平线标记<hr> 注释标记<!与>
为了使程序清楚、容易理解,可以添加注释标记 “<!”与“>”(也可写为“<!—”与“-->”),在 注释标记这对符号之间的内容不会被浏览器显示 出来。

超链接文档标记 <A href="URL">某地方</A>
?

链接至本机另一Web页面
?

<A href="filename.html">链接到 filename</A> <A href="http://www.263.net">这里是首 都在线的主页</A>

?

链接到另外一台机器上的Web页面
?

? ? ? ? ? ? ? ? ?

例2-3.html 通过本例可以看到如何链接到其他的Web页。 <html> <body> 例如:单击这里可以链接到本机的 <A href=“1-1.html">“1-1.html"Web页</A> <p>链接到另外一台机器上的Web页面也很简单,只要把目的地 赋给href就可以了。</p> 例如:想链接到"首都在线"的主页,可以单击这里: <A href="http://www.263.net">www.263.net</A>即可。 </body> </html>

链接到网页某处
? ? ? ? ? ? ? ? ?

?
? ?

例2-4.html 来看看是如何链接到同一Web页的其它段落。 <html> <body> <A name="第一章">第一章</A>为"锚"标记。 <p>除了链接到另一个HTML文件,也可以在一篇文章内随心所欲地链接。 <br> 这和前面两种稍有不同,需要先做出一个"锚"标记,即链接的目标地, <br> 再做到"锚"的链接。到"锚"的链接与平常相同。</p> <p></p><p></p><p></p><hr> <A href="#第一章">从这里可链接到第一章</A> </body> </html> 如果从其它页面链接,可以使用下面语句:
?

<A href="2-12.html#第一章">链接到第一章</A>

嵌入式内容
? ?

<A href="yy.mid">在这里欣赏音乐</A> <A href="TEST.MPEG">在这里欣赏视频</A>

?

?

<img src=图像的URL [align=# alt=文 字 border=# height=# wdith=#] > <applet>...</applet>标记插入一个使用 Java语言编写的applet应用程序

?

? ? ?

?

?

例2-5.html 下面的程序说明如何插入一个图像 和加入一个音频文件,看看它们的插入方法吧。 <html> <body>插入一个图像 <img src=gril.gif align=left border=2 height=100 wdith=200 alt=女孩> <P><A href="Sound.wav">单击这里可以欣 赏音乐</A></body> </html>

插入对象<object>...</object>
? ? ? ?

? ? ?

例2-6.html 下面的程序说明如何插入一个日历控件对 象。 <html> <body><center><h3>插入一个对象 </h3></center> <object id="日历控件 10.0" width="300" height="200" classid="CLSID:8E27C92B-1264-101C8A2F-040224009C02"> </object> </body> </html>

表格标记<table>
? ?

? ?

?

<table>定义一个表</table> <caption align=#>表格标题 </caption> <TR>表格一行的开始和结束</TR> <TH>列名</TH> 列标记<TD>该列中的数据</TD>

给表格加标题标记
?

例2-7.html 加入两个普通的表格,一个不带框,一个带框。
? ? ? ? ? ?

?
?

<html> <body><table> <caption>价格表</caption> <tr><th >日期</th><th>香菇</th><th >青椒</th></th> <tr><td>9.2</td><td>28.00元</td><td>0.90元</td></th> <tr><td>9.3</td><td>25.00元</td><td>0.93元</td></tr> </table><hr > <table BORDER=4 > <caption>价格表</caption> <TR><TH >日期</TH><TH >香菇</th><th >青椒</th></tr> <tr><td>9.2</td><td>28.00元</td><td>0.90元</td></tr> <tr><td></td><td>25.00元</td><td>0.93元</td></tr> </table> </body> </html>

? ? ? ? ? ? ?

?

请你画出这两个表格

表单标记<form>
?

?

表单是通过网页收集信 息的工具 form表单标记可以为读 者提供一种交互界面, 让读者在窗口中输入信 息,与其他程序(JSP或 ASP程序,JavaScript) 一起共同完成读者与 Web服务器之间的信息 交流。

表单的作用
? form是实现与用户进行信息交流的主要方式, 它的任务有两个:
? 一是指出其他程序的路径和名称; ? 二是将读者输入的信息传递给其他程序。 ? 同时form可以为网页增添互动性,可以把输入的内 容显示在其他页面里。

表单的形式
? ? ? ? ?

提交和复位按钮 文本框 复选框 单选框 文本区

表单form的基本语法格式
? ? ?

?
?

<form method=”” action=””> <input type=”” name=””> .... </form> method属性说明和服务器交换信息时所 使用的方式,一般选择post或get。 action属性说明当这个form提交后需要执 行的程序名和路径。

? ? ? ? ? ? ?

?
? ?

例2-8.html 看看显示初始值的多个文本框的模样。 <html> <body> <form> 电话号码:<input type="text" Name=x1 value="010 51688529"><br> 输入姓名:<input type="text" Name=x2 value="lp" size=8><br> 输入口令:<input type="password" Name=x1 size=8 maxlengh=8> </form> </body> </html>

一般输入字段
?

?

? ? ? ?

<input type=”” name=”” value=“” size=“” > Type:text、checkbox 、radio、 submit、reset name: 保存表单数据的变量 value=“” 初始显示的数据 size=“” 字段显示长度 例子

表单的处理
?

<form method=“post” action=“*. jsp”>

多媒体标记
? ? ?

设置字幕 音频和视频 自动刷新页面

设置字幕
?

格式为:
<marquee align=“top/middle/bottom” bgcolor=颜色值” width=x height=y direction=“left/right” Loop=-i/-1/infinite behavior=“scroll/side/alternate” hspace=m vspace=n scrollamount=数值 scrolldelay=数值>流动文字 <marquee> 其中: ? Align:设置字幕和文本的垂直对齐方式。 ? Bgcolor:设置字幕的背景色。 ? Width/height:设置字幕的宽(像素或窗口的百分比)/高(像素数)。 ? Loop:设置字幕的循环次数I,-1或infinite表示无限循环。 ? Behavior:设置文字单向流动/流动文字到达边界停止/流动到达边界后反向 流动。 ? Hspace/vspace:水平方向/垂直方向空白像素数。 ? Scrollamount:字母移动速度。 ? Scrolldelay:移动每步的延时。

音频和视频
?

加入背景声音
<bgsound src=“声音文件” loop=“播放次数”> ? 声音文件的格式为.wav、.au或.mid。 ? 当播放次数为-1或infinite时,声音将一直播放到关闭该网页为止。

?

加入视频剪辑
<img src=“图像文件” dynsrc=“视频剪辑文件.avi” loop=“播放次数” loopdelay=“时间” start=“值” controls> ? Src:指定在浏览器尚未完全读入AVI文件时,在播放区显示的图像。 ? Dynsrc:用来指定播放的视频文件存放的路径和文件名。 ? Loopdelay:指定两次播放间隔的时间,单位为毫秒。 ? Start:指定何时开始播放视频文件。Fileopen(默认)指在打开含本标记 的网页时播放; mouseover指将鼠标移到播放区时才播放。可同时设置。 ? controls。在视频窗口下附加AVI播放控制栏。

页面自动刷新

?

格式为:
<META http-equiv=“refresh” content=“秒数;url=新页面”> ? <META>标记必须放置在<head>…</head>中。 ? Content属性包含两个值:秒数和url,他们之间用“;”分隔。 表示url指定的链接将在指定的时间后打开。

? ? ? ? ?

?
? ?

?
?

例2-10.html <html> <frameset rows="17%,83%" name="标题栏" scrolling="no"> <frame src="2-1.html" scrolling="auto" > <frameset cols="28%,*"> <frame src="2-16.html" scrolling=yes target="个人练习显 示页面"> <frame src="2-15.html" name="个人练习显示页面" scrolling=no > </frameset> </frameset> <html>

框架与多窗口标记 <frameset></frameset>
?

?

框架与多窗口即将屏幕分割成几块,每块为一 个窗口可独立显示一个HTML文件。各窗口的 链接与浏览都是独立进行的。 语法格式为:
? ? ? ? ?

<frameset [row|col]=”...”> ... <frame src=”filename” > ... </frameset>

Html语言学习完毕!


相关文章:
第二讲HTML_图文.ppt
第二讲HTML - 第2讲 HTML 学习目标 知道什么是HTML 了解H
第二讲 HTML语言_图文.ppt
第二讲 HTML语言 - 文档均来自网络,如有侵权请联系我删除文档... 第二讲 HTML语言_图片/文字技巧_PPT制作技巧_实用文档。文档均来自网络,如有侵权请联系我删除文...
html第二讲_图文.ppt
html第二讲_计算机软件及应用_IT/计算机_专业资料。<body>元素及元素属性 <body>元素表明是HTML文档的主体部分。在<body>与</body>之间, 通常都会有很多其它...
第二讲 HTML基本标签_图文.ppt
第二讲 HTML基本标签 - 课程名称:网页设计基础 第二章 HTML的基本标签
第二讲:HTML编程基础_图文.ppt
第二讲:HTML编程基础 - Java高级编程技术 冯永安 feng0418@sohu.com 本讲主要内容 ?主要内容 1.Html网页基本编程 2.Javascript的使用 ...
第二讲用HTML设置文本和图像-PPT文档资料_图文.ppt
第二讲HTML设置文本和图像-PPT文档资料 - 第2讲 一、文字版面的编辑
第二章 HTML基础知识_图文.ppt
第二章 HTML基础知识 - 第二讲 HTML基础知识 Html文件基础: 1.HTML文件: ⑴每一个网页都是一个文件,包含了HTML指令代码——称为HTML文件 ⑵HTML文件是一个纯...
第二讲HTML5语法、新增标签及智能表单案例_图文.ppt
第二讲HTML5语法、新增标签及智能表单案例 - 移动Web开发技术 黄增喜 内容 ?HTML5 语法 ?HTML5 标签和属性 ?HTML5 智能表单 HTML5 语法 ? 文档类型...
第二讲 HTML5语法、新增标签及智能表单_图文.ppt
第二讲 HTML5语法、新增标签及智能表单_计算机软件及应用_IT/计算机_专业资料。HTML5语法、新增标签及智能表单 移动Web开发技术黄增喜 内容 ?HTML5 语法 ?HTML5 ...
HTML语言入门__第二章_图文.ppt
HTML语言入门__第二章 - ?Web ?Html ?Net HTML第二讲 HTML第二讲 . . ?Web ?Html ?Net 文字标签属性1 文字标签属性1 ? 文字属性...
HTML第二讲(文字段落超级链接图片).ppt
HTML第二讲(文字段落超级链接图片) - HTML第二讲 ? 1999, Cisco Systems, Inc. 2-1 文字标签属性1 文字属性标记 ? 1.文字颜色 指定颜色...
网页设计第二讲_图文.ppt
网页设计第二讲 - 第二章 HTML基础 内容回顾 ?WWW具有三个统一: 1.
html-2:文字链接_图文.ppt
html-2:文字链接 - HTML第二讲 文字标签属性1 ? 文字属性标记
html-2_图文.ppt
html-2 - HTML第二讲 HTML第二讲 文字标签属性1 文字标签属性1 文字属性标记 1.文字颜色 1.文字颜色 指定颜色 <font color=#> ... </fon...
HTML新手入门级教程2_图文.ppt
HTML新手入门级教程2_IT/计算机_专业资料。新手入门级HTML教程2.ppt 知识成就未来-硅谷动力网络学院 专业铸造品质 知识成就未来 硅谷动力网络学院 HTML第二讲 HTML...
第二讲 HTML语言_图文.ppt
第二讲 HTML语言 - 第2章 HTML网页设计 ? HTML ( Hyper
schoolhtml-2_图文.ppt
schoolhtml-2 - HTML第二讲 HTML第二讲 文字标签属性1 文字属性标记 1.文字颜色 指定颜色 <font color=#> ... </font> #=R...
HTML语言学习_图文.ppt
HTML语言学习 - HTML第一讲 HTML概念 ? HTML(Hyper T
HTML基础知识整合_图文.ppt
第一讲 HTML基础知识 HTML简介 ?HTML:Hyper Text Markup Language HTML5 XHTML2.0 2013-5-6 XHTML1.1 目前网页中常用 XHTML1.0 2001-5-31 HTML4.01 超文 ...
html教程_图文.ppt
html教程 - 第一讲 HTML概述 网页制作概述 网页的基本构成元素 ? 文