ACCP V4.0
第四章
HTML
ACCP V4.02
回顾 1-1
表单有什么用?表单 <FORM>有哪些属性?
文本框分为哪三种?各有什么特点?
希望昵称文本框不超过 10个字符,应使用哪个属性加以限制?
单选按钮和复选框有什么区别?
ACCP V4.03
回顾 1-2
按钮分为哪三种?各有什么功能?
根据您的理解,下拉菜单的选项和值有什么区别?
常见的有哪些事件?哪些行为?
ACCP V4.04
目标
描述 HTML 文档的结构
使用基本的 HTML 标签
在 HTML 文档中插入特殊字符
在 HTML 文档中创建超级链接
ACCP V4.05
HTML 简介超文本提供链接到其他页面或同一页面的其他位置的文本标记可以用标签标记页面的不同部分以正确显示语言
HTML 可用于,
控制页面和内容的外观
发布和检索联机文档
创建联机表单
插入诸如音频剪辑和视频剪辑等对象
ACCP V4.06
HTML 文档示例
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY BGCOLOR =,LAVENDER”>
<H1>欢迎来到 HTML 世界 </H1>
</BODY>
</HTML>
HTML 代码浏览器处理代码并进行显示
ACCP V4.07
编辑器和浏览器
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY BGCOLOR =,LAVENDER”>
<H1>欢迎来到 HTML 世界 </H1>
</BODY>
</HTML>
HTML 代码在编辑器中编写
HTML 代码浏览器显示 HTML
文档 /页面
ACCP V4.08
编辑器 2-2
需要在编辑器中键入源代码示例,DreamWeaver
Macromedia Dreamweaver 是一种专业的 HTML 编辑器,用于设计、
编码、开发网站、网页和强大的
Web应用程序。
ACCP V4.09
HTML 文档结构
<HTML>
<HEAD>
<TITLE>学习 HTML </TITLE>
</HEAD>
<BODY >
</H1>欢迎来到 HTML 世界 </H1>
</BODY>
</HTML>
HTML
网页头部部分主体部分
<HTML>…</HTML> 标签标记 HTML 文档的开始和结束这部分包括标题和其他说明信息。包括在 <HEAD>…</HEAD> 标签内这部分包含文本、图像和链接。它包括在 BODY> BODY> 标签内
ACCP V4.010
<HTML>
<HEAD>
<TITLE>学习 HTML </TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H1>欢迎来到 HTML 世界 </H1>
</BODY>
</HTML>
HTML 标签 2-2
<BODY BGCOLOR =,green”>
标签标识 BODY 元素属性提供有关元素的附加信息值分配给属性的内容
ACCP V4.011
META 标签 2-1
META 标签是一个特殊的 HTML 标签,提供有关网页的信息,如作者姓名、公司名称和联系信息等
许多搜索引擎都使用 META 标签信息
例如,要将 Graham Browne 指定为作者,则使用以下 META 标签:
<META name =,作者 " content = "Graham Browne">
ACCP V4.012
META 标签 2-2
http-equiv 属性可用来代替 META 标签中的
name 属性
<META http-equiv = "expires" content = "Wed,26 Feb 1997 GMT">
表示有效期:格林尼治标准时间 2005 年 9 月 12 日,星期一 14:25:27
属性值:具体的过期时间属性名称:网页过期
<META http-equiv="refresh" content=“2">
表示每隔 2秒,自动刷新网页演示,自动 刷新的例子
ACCP V4.013
HTML 基本元素
标题
段落
换行符
预先格式化
字符格式化
列表
水平线
字体
图像
特殊字符
超级链接
ACCP V4.014
标题
<HTML>
<HEAD>
<TITLE>动物世界 </TITLE>
</HEAD>
<BODY>
<H1>从大自然获得灵感 </H1>
<H2>从大自然获得灵感 </H2>
<H3>从大自然获得灵感 </H3>
<H4>从大自然获得灵感 </H4>
<H5>从大自然获得灵感 </H5>
<H6>从大自然获得灵感 </H6>
</BODY>
</HTML>
H1 到 H6 标签用于指定不同级别的标题
ACCP V4.015
段落标签
<HTML>
<HEAD>
<TITLE>诗词学习 </TITLE>
</HEAD>
<BODY>
<P>我是第一段 </P>
<P>我是第二段 </P>
<P align="left">左对齐显示 <P>
<P align="center">居中显示 <P>
<P align="right">右对齐显示 <P>
</BODY>
</HTML>
<P>
</P>
<P>…</P> 标签用于标记段落
ACCP V4.016
换行符
只要在文本中放入 <BR> 标签,就会强制换行
<HTML>
<HEAD>
<TITLE>诗词学习 </TITLE>
</HEAD>
<BODY>
<BR>我是第一行 <BR>我是第二行
<P>我是第一段 </P>
<P>我是第二段 </P>
</BODY>
</HTML>
<BR>
ACCP V4.017
<Pre> 标签
<HTML>
<HEAD>
<TITLE>诗词学习 </TITLE>
</HEAD>
<BODY>
<H1>静夜思 </H1>
<PRE>
床前明月光疑是地上霜举头望明月低头思故乡
</PRE>
</BODY>
<HTML
<PRE> 标签用于显示具有预先定义格式的文本
(如 HTML 文档中所示)
ACCP V4.018
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<P>
<B>这很有趣 </B>
<BR>
<BR>
<I>足球是最令人喜爱的运动之一 。 </I>
<BR>
<BR>
<U>信息技术是发展的关键 。 </U>
<BR>
<BR>
水的分子式是 H <SUB>2</SUB> O。
<BR>
<BR>
3 <SUP>2</SUP> 等于 9。
<BR>
<BR>
</P>
</BODY>
</HTML>
字符格式化标签此标签用于对文本应用各种格式,如粗体、斜体、下划线、下标、上标等
ACCP V4.019
列表简介
列表用于按逻辑方式对数据分组玫瑰花向日葵兰花苹果桔子水仙芒果
水果
苹果
芒果
桔子
花卉
水仙
兰花
向日葵
玫瑰花
ACCP V4.020
列表类型:无序列表

<BODY>
<H1>星期中的每一天 </H1>
<UL>
<LI>星期日
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
<LI>星期六
</UL>
</BODY>

无序列表也称为“项目列表”
ACCP V4.021

<BODY>
<H1>星期中的每一天 </H1>
<OL>
<LI>星期日
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
<LI>星期六
</OL>
</BODY>

列表类型:有序列表有序列表的属性
<LI TYPE = I>
<LI TYPE = i>
<LI TYPE = A>
<LI TYPE = a>
<OL START = n>
在有序列表中,列表项以自动生成的顺序显示
ACCP V4.022
使用水平线
<HTML>
<HEAD>
<TITLE>动物世界 </TITLE>
</HEAD>
<BODY>
<H3>老虎的夜间视觉 </H3>
<HR noshade size = 5 align = center width =
50%>
<HR size = 15 align=left width = 80%>
<HR>
<P>老虎的夜视能力优于人类的夜视能力五倍以上
</BODY>
</HTML>
<HR> 标签属性
align
Width
Size
Noshade
<HR> 标签用于在页面上绘制水平线
ACCP V4.023
使用字体和属性
<HTML>
<HEAD>
<TITLE>动物世界 </TITLE>
</HEAD>
<BODY>
<H1>了解有关动物的更多信息 </H1>
<P><FONT SIZE = 5 COLOR = BLUE FACE = Arial>斑马的特性 </FONT>
<P>没有任何两匹斑马 <FONT COLOR = RED SIZE = 3>的斑纹是完全一样的,</FONT>因此每匹斑马都是独一无二的
</BODY>
</HTML>
<FONT SIZE = 5 COLOR = BLUE FACE = Arial>
可以按名称或十六进制值 指定颜色可以为字体指定的大小范围为从 1 到 7
可以指定一列字体,各字体间用逗号分隔 。 浏览器以最先找到的字体显示文本
<FONT> 元素及其相关属性(如 SIZE,COLOR 和
FACE)可用于控制网页上文本的显示
ACCP V4.024
<IMG> 标签用于在 HTML 文档中插入图像。 <IMG> 标签的两个常用属性是 SRC 和 ALIGN。
SRC 属性用于指定要插入的图像位置。
ALIGN属性用于指定图像相对于文本的对齐方式。
插入图像 2-1
ACCP V4.025
插入图像 2-2
<HTML><HEAD>
<TITLE>动物世界 </TITLE>
</HEAD>
<H1><FONT SIZE=3 COLOR=FORESTGREEN>
<B>让我们看看这些可爱的动物 </B></FONT></H1>
<BODY>
<P>
<IMG ALIGN=BOTTOM SRC=Animal.jpg>底部对齐
</P>
<P>
<IMG ALIGN=TOP SRC=Animal.jpg>顶部对齐 </P>
<P>
<IMG ALIGN=MIDDLE SRC=Animal.jpg>居中对齐 </P>
</BODY>
</HTML>
ACCP V4.026
插入特殊字符 2-1
某些字符在 HTML 中具有特殊意义,如小于号 (<) 定义 HTML 标签的开始
字符实体用于在 HTML 文档中插入特殊字符,如 版权号,注册商标 等插入特殊字符需要用 HTML字符实体> 空格 ;
ACCP V4.027
插入特殊字符 2-2
特殊字符 字符实体大于号 (>) &gt;
小于号 (<) &lt;
引号 (“) &quot;
&reg;
&copy;
& 号 &amp;
ACCP V4.028
创建超级链接
<HTML>
<HEAD>
<TITLE>了解鸟类 </TITLE>
</HEAD>
<BODY>
<H1>会弹琴的狗狗 </H1>
<A HREF = dog.htm>单击此处查看 </A>
</BODY>
</HTML>
ACCP V4.029
要链接到另一目录 (C:\example) 下的页面,可编写 <A HREF
=“..\example\Doc2.htm”> 或
<A HREF =“C:\example\Doc2.htm”>
要链接到同一目录 (C:\html) 下的页面,可编写 <A HREF =,Doc3.htm”> 或 <A
HREF =,C:\html\Doc3.htm”>
C:\html 目录 C:\example目录绝对和相对路径名
Doc1.htm
Doc3.htm
Doc2.htm
Doc4.htm
绝对路径名相对路径名
ACCP V4.030
链接到同一文档的某个部分 2-1
锚记标签用于使用户“跳”到文档的某个部分
HTML 的 NAME 属性用于创建锚标记
为达到这种跳转效果,请在 HREF 参数中使用该标记
<A NAME =,marker”>主题名称 </A>
<A HREF=,#marker”>主题名称 </A>
ACCP V4.031
链接到同一文档的各个部分 2-2
.,,
<BODY>
<A HREF = #Lion>狮子 </A>
<BR>
<A HREF = #Zebra>斑马 </A>
<BR>
<A HREF = #Cheetah>印度豹 </A>
<BR>
<A NAME = Lion>狮子 </A>
<P>狮子的吼声从八公里之外就能听到!雄狮(很容易从鬃毛识别出雌雄)的重量达 250 公斤。而雌狮则要轻得多,只有
180 公斤。
<BR>
<A NAME = Zebra>斑马 </A>
<P>没有任何两匹斑马的斑纹完全一样,因此每匹斑马都是独一无二的。斑马也称为黑白条纹相间的马,.....
演示,锚链接例子
ACCP V4.032
链接到其他文档的特定位置

<P>让我们深入了解一些动物
<BR>
<A HREF=AnimalDetails.htm#Lion>狮子 </A>
<BR>
<A HREF=AnimalDetails.htm#Zebra>斑马 </A>
<BR>
<A HREF=AnimalDetails.htm#Zebra>印度豹 </A>

Animals.htm

<A NAME = Lion>狮子 </A>
<P>狮子的吼声从八公里之外就能听到!雄狮(很容易从鬃毛识别出雌雄)的重量达 250 公斤。而雌狮则要轻得多,只有 180
公斤。

Animaldetails.htm
ACCP V4.033
电子邮件链接
用户可从网页发送电子邮件
<HTML>
<HEAD>
<TITLE>海豚 </TITLE>
</HEAD>
<BODY>
<H3>充分交流,密切配合 </H3>
<BR>
<P>据说,海豚的交流模式几乎与人类的一样复杂!
<BR>
<BR>
<A HREF="mailto:thisperson@yahoo.com">请将您的疑问发送至 David Fernandez</A>
</BODY>
</HTML>
ACCP V4.034
总结 2-1
HTML 标签一般配对使用,不区分大小写
标签都具有属性。属性提供关于网页上 HTML 元素的附加信息
META 标签放置在网页的标题处以提供关于页面的信息。搜索引擎常会用到这些标签
标题级标签使用 <H1>…<H6>
ACCP V4.035
总结 2-2
段落标签使用 <P align=“对齐方式” >…</P>
无序列表使用 <UL>标签,有序列表使用 <OL>标签
字体标签 <Font color=“颜色” size=“大小” face
=“字体” >
超链接标签 <A href=“链接地址” >超链接文本
</A>