(2)TML语言介绍.ppt

1、什么是 HTML 文件？ HTML 指超文本标签语言。 HTML 文件是包含一些标签的文本文件。 这些标签告诉 WEB 浏览器如何显示页面。 HTML 文件必须使用 htm 或者 html 作为文件扩展名。 HTML 文件可以通过简单的文本编辑器来创建。（Windows 的记事本、写字板，Microsoft Word，专业的文本编辑器等）,做个实验如何？,第一步：如果您使用 Windows，请启动记事本。 第二步：键入以下文本： 页面的标题 这是我的第一个页面 第三步：将这个文件存为 mypage.html。 第四步：启动您的浏览器。,头标记,文件体,HTML 文件中的第一个标签是 。这个标签

2、告诉浏览器这个 HTML 文件的开始点。文件中最后一个标签是 。这个标签告诉您的浏览器，这是 HTML 文件的结束点。 位于 标签和 标签之间的文本是头信息。头信息不会显示在浏览器窗口中。 标签中的文本是文件的标题。标题会显示在浏览器的标题栏。 标签中的文本是将被浏览器显示出来的文本。 和 标签中的文本将以粗体显示。,为什么我们要使用小写的标签？ 我们刚才讲到：HTML 标签对大小写是不敏感的： 和 的作用的相同的。当您在网上冲浪时，您会发现大多数教程在他们的例子中都使用大写的 HTML 标签。而我们总是使用小写。原因何在呢？ 如果您希望为使用下一代 HTML 而做好准备，您就应该使用小写标签

3、。万维网联盟 (W3C) 的标准是：建议在 HTML 4 中使用小写标签，而在 XHTML（下一代 HTML）中，必须使用小写标签。,HTM 还是 HTML 扩展名？ 当你将一个 HTML 文件存盘时，您即可以使用 HTM 也可以使用 HTML 作为扩展名。我们刚才使用了 .htm 作为上面那个例子的扩展名。不过这样做也许是一个坏习惯，习惯于这样做的人也许是因为使用某些过时的软件而养成了这个坏习惯，这些软件只允许三个字母作为扩展名。 如果您使用新近的软件，我们认为使用 .html 是相当安全的做法。,HTML 标签 /标记 HTML 标签是用来标记 HTML 元素的。在HTML中用于描述功能的

4、符号称为“标记”，它是用来控制文字、图像等显示方式的符号，例如“HTML”、“HEAD”、“BODY”等。标记在使用时必须用“” 括起来，标记有单标记和双标记之分。 。,常见的HTML标记 1.标题格式标记, 标题格式标记示例 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 ,功能：用于定义文章内章节标题的显示格式。 格式：标题内容。 属性：n 表示标题字号的级别，可以是16之间的任意整数，数字越小，字号越大。align表示水平对齐方式，取值可以为LEFT（左对齐）、RIGHT（右对齐）、CENTER（居中对齐）、BOTTOM（位于底端）和TOP（位于顶部）。 说明：用该标记实现文

5、章标题的效果有限，通常用FONT标记实现文章标题丰富多彩的效果。,2 文字格式标记 文字格式标记示例 欢迎光临 欢迎光临 欢迎光临 欢迎光临 Welcom my homePage. Welcom my homePage. ,功能：设置网页中普通文字的显示效果。 格式：文字。 属性：face 表示文字的字体，如“黑体”表示黑体，“宋体”表示宋体。size表示字号，用来设定文字的大小，其值为17的整数，值越大，字越大；color用来设定文字的颜色，颜色的取值是十六进制RGB颜色码。,2 文字格式标记 文字格式标记示例 欢迎光临 欢迎光临 欢迎光临 欢迎光临 Welcom my homePage.

6、Welcom my homePage. ,功能：设置网页中普通文字的显示效果。 格式：文字。 属性：face 表示文字的字体，如“黑体”表示黑体，“宋体”表示宋体。size表示字号，用来设定文字的大小，其值为17的整数，值越大，字越大；color用来设定文字的颜色，颜色的取值是十六进制RGB颜色码。,设置文字的风格，如黑体、斜体、带下划线等，这是一组标记，它们可以单独使用，也可以混合使用产生复合修饰效果。常用的标记有以下一些： ：文字以粗体显示。 ：文字显示为斜体。 ：显示下划线。 ：删除线。 ：使文字大小相对于前面的文字增大一级。 ：使文字大小相对于前面的文字减小一级。 ：使文字成为前一个字

7、符的上标。 ：使文字成为前一个字符的下标。 ：以等宽体显示西文字符。 ：输出引用方式的字体，通常是斜体。 ：强调文字，通常用斜体加黑体。 ：特别强调的文字，通常也是斜体加黑体。,3.段落标记 功能：设置文章段落的开始和结束。浏览器在解释HTML文档时，会自动忽略文档中的回车、空格以及其他一些符号，所以在文档中输入回车，并不意味着在浏览器内将看到一个不同的段落，当需要在网页中插入新的段落时，可以使用段落标记，它可以将标记后面的内容另起一段。 格式：。 属性：align是水平对齐方式，取值可以为LEFT（左对齐）、RIGHT（右对齐）和CENTER（居中对齐）。 4.强制换行标记 功能：另起一行显

8、示文字。 格式： 说明：这是一个单标记，与段落标记在显示效果上都是另起一行书写，但它们的不同之处是：段落标记的行距要宽。在使用上还有一定的技巧，如果把加在标记对的外边，将创建一个大的回车换行，即前边和后边文本的行与行之间的距离比较大，若放在的里边则前边和后边文本的行与行之间的距离将比较小。, 段落标记和强制换行标记示例 下面是标记的显示效果 下面是强制换行标记的显示效果 段落结果 ,注意：英文状态书写标点,5.插入水平线标记 功能：在页面上画横线，可用于页面上内容的分割。 格式：。 属性：width用来设置水平线的宽度长度，value1可以是点数，如50、100、200等，窗口改变时，横线宽度

9、不变；也可以是相对窗口的百分比，如50%、100%,默认是100%。size 用来设置水平线的厚度，value2的值可以是绝对点数，也可以是（相对长度的）百分比，默认高度为1。align用来设置水平线的对齐方式，value3的值可以是LEFT（居左）、RIGHT(居右)、CENTER（居中），默认是居中。color用来设置水平线的颜色，颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色常量名。noshade属性不用赋值，而是直接加入标记即可使用，它表示加入一条没有阴影的水平线(不加入此属性水平线将有阴影)。,6.文字滚动标记 功能：在页面中制作文字滚动的效果。 格式：滚动文字。 属性如下

10、。 （1） behavior ：设置文字滚动方式。共有三种滚动方式供选择：behavior =“alternate”时，文字将交替来回进行滚动；behavior =“scroll”时，文字将循环往复滚动；behavior =“slide”时，文字将只进行一次滚动。 （2）bgcolor ：为滚动文字添加背景颜色。 （3）direction ：设置文字滚动的方向，value的取值可以为up、down、left和right四种，分别表示滚动文字的方向向上、向下、向左和向右。 （4）height和width：设置文字滚动的区域，取值为点数或相对于窗口的百分比。 （5）loop ：设置文字滚动的循环次

11、数。默认值为-1，-1表示无限次循环次数。 （6）scrollamount ：调整文字滚动的速度，数值越大速度越快。 （7）scrolldelay ：设置在每一次滚动的间隔产生一段时间的延迟，数值越大延迟越长。 （8）hspace和vspace ：设置文字滚动的水平垂直空间。,onmouseover=this.stop() onmouseout=this.start(),鼠标移上去停止，移开继续：,onmouseover=this.stop() onmouseout=this.start(),【例】 文字滚动标记的应用。 滚动文字标记示例 欢迎跟我学习 ,学习HTML的意义 HTML是网页制作

12、的基本语言，虽然不懂得HTML也能够制作出漂亮的网页，但了解它可以更方便灵活地控制网页。到目前为止很多网络专家还是用记事本之类的编辑器手工编写HTML文件，他们认为采用这种方式编写的网页有如下优点： （1）浏览器解释效率高。 （2）格式漂亮。 （3）无任何垃圾代码产生，加快了网页的传输速度。,7.的图像标记功能 功能：在当前位置插入图像。 格式： 。 属性如下。 （1）src：设置要加入的图像文件的URL地址，通常图像格式为gif或jpg。 （2）alt：设置图像文件的替代说明，当图像无法显示时，显示“简单说明”。 （3）longdesc：设置图像的详细说明。 （4）width：设置图像的宽度

13、，可以为点数或相对窗口宽度的百分比。 （5）height：设置图像的高度，可以为点数或相对窗口高度的百分比。 （6）border：设置图像外围边框宽度，其值为正整数。 （7）hspace：设置水平方向空白（图像左右留多少空白）。 （8）vspace：设置垂直方向空白（图像上下留多少空白）。 （9）align：设置在页面中的位置，可以为LEFT，RIGHT或CENTER。,longdesc 属性与 alt属性类似，但它允许更长的描述性文字。longdesc 的值是一个指向包含图像说明的文档的 URL。如果说明多于 1024 个字符，那么可以使用 longdesc 属性来设置指向它的链接。 不论是

14、 HTML 还是 XHTML 都没有指定说明中必须是什么内容，而且目前浏览器都还没有支持 longdesc 属性。因此，对于如何创建那些大块的描述，我们的建议是创建一个超链接指向包含描述的页面即可。, ,【例】 图像标记的应用。 图像标记示例 ,说明：图像的宽度和高度指图像显示时的大小，与图像的真实大小无关。标记并不是真正地把图像加入到HTML文档中，而是给标记对的src属性赋值，这个值是图像文件的文件名，当然包括路径，这个路径可以是相对路径，也可以是网址。实际上就是通过路径将图像文件嵌入到HTML文档中。设置图像文件地址时用到的路径一般建议使用相对路径，所谓相对路径是指所要链接或嵌入到当前H

15、TML文档的文件与当前文件的相对位置所形成的路径。假如HTML文件与图像文件(文件名假设是logo.gif)在同一个目录下，则可以将代码写成；假如图像文件放在当前的HTML文档所在目录的一个子目录(子目录名假设是images)下，则代码应为；假如图像文件放在当前的HTML文档所在目录的上层目录(目录名假设是home)下，则相对路径就必须是准网址了，即用“./”表示网站，然后在后边紧跟文件在网站中的路径，假设home是网站下的一个目录，则代码应为，若home是网站下的目录king下的一个子目录，则代码应该变为了。,8.表格标记 表格标记的综合示例一 姓名性别年龄 王林男25 ,tr 元素定义表格

16、行，th 元素定义表头，td 元素定义表格单元, ： 这三个标记是定义表格的最重要的标记，可以说只学这三个已足够。 是一个容器标记，意思是说它用以宣告这是表格而其它标记只能在它的范围内 才适用，属容器标记的还有其他。 用以标示表格行（row） 用以标示表格列（cell）, 的参数设定（常用）： 例如： table width=400 border=1 cellspacing=2 cellpadding=2 align=CENTER valign=TOP background=myweb.gif bgcolor=#0000FF bordercolor=#CF0000 bordercolorlig

17、ht=#00FF00 bordercolordark=#00FFFF,width=400 表格宽度，接受绝对值（如 80）及相对值（如 80%）。 border=“1” 表格边框的宽度，不同浏览器有不同的内定值，故请指明。 cellspacing=2 表格格线的厚度。规定单元格之间的空白 cellpadding=2 文字与格线的距离。单元边沿与其内容之间的空白 align=CENTER 表格的摆放位置（水平），可选值为： left, right, center为怕一些浏览器不支持，故特意加上居中标记，只是多一层保证而已，当然只用也可。 valign=TOP. 表格内内容的对齐方式（垂直），可选

18、值为： top, middle, bottom。 background=myweb.gif 表格的背景图片，与 bgcolor 不要同用。 bgcolor=#0000FF 表格的底色，与 background 不要同用 bordercolor=#CF0000 表格边框颜色，NC 与 IE 有不同的效果。 bordercolorlight=#00FF00 表格边框向光部分的颜色,只适用于 IE bordercolordark=#00FFFF 表格边框背光部分的颜色,HTML的超链接标记 超链接是网页页面中最重要的元素之一，是一个网站的灵魂。一个网站是由多个页面组成的，页面之间依靠超链接确定相互的

19、导航关系，超链接使得网页的浏览非常方便。 功能：建立超链接。 格式：显示的文本或图像。 属性如下。 （1）href：设置要链接到的目标的URL地址。 （2）target：指定打开链接的目标窗口。当target=“self”时，表示在原窗口显示链接页面；当target=“blank”时，表示在新开窗口显示链接页面；target=“parent”时，表示在上一级窗口中打开，一般使用分帧的框架会经常使用；当target=“top”时，表示在浏览器的整个窗口中打开，忽略任何框架。默认时指在原窗口中打开链接。,9.链接标记,【例】 超链接标记的应用。 超链接标记示例 主流的网页设计软件 目前，网页技术进

20、入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而MACROMEDIA公司的网页设计三剑客软件DREAMWEAVER、FIREWORKS、FLASH正是交互性网页设计的杰出代表，其最新版本8继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。 网页制作软件DREAMWEAVER 8 网页图片软件FIREWORKS 8 网页动画软件FLASH 8 ,1）单标记 所谓“单标记”是指只需单独使用就能完整地表达意思的标记。这类标记的语法是：。最常用的单标记如, 它表示换行。 2）双标记 所谓“双标记”是指由“始标记

21、”和“尾标记”两部分构成，必须成对使用的标记。其中始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web浏览器到这里结束该功能。始标记前加一个斜杠（/）即成为尾标记。双标记的语法是：内 容，其中“内容”是指要被这对标记施加作用的部分。例如想突出对某段文字的显示，可以将此段文字放在这对标记对中，写成：第一。,标记属性 许多单标记和双标记的始标记内可以包含一些属性，其语法是：，各属性之间无先后次序，属性也可省略（即取默认值）。例如单标记表示在文档当前位置画一条水平线，一般是从窗口中当前行的最左端一直画到最右端，它可以带这么一些属性：。其中，size属性定义线的粗细，属性值取整数

22、，缺省值为1；align属性表示对齐方式，可取LEFT（左对齐，默认值），CENTER（居中），RIGHT（右对齐）；width属性定义线的长度，可取相对值（由一对 号括起来的百分数，表示相对于整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如width=300），默认值是100%。,注释语句 和其他计算机语言一样，HTML语言也提供了注释语句。注释语句的格式为：，“”表示注释结束，中间的所有内容表示注释文。注释语句可以放在任何地方，注释内容不在浏览器中显示出来，仅供设计人员阅读方便。,HEAD文件头部标记 文件头用和标记，该标记出现在文件的起始部分，标记内的内容不在浏览器中显

23、示，主要用来说明文件的有关信息，如文件标题、作者、编写时间、搜索引擎可用的关键词等。 向搜索引擎说明你的网页的关键词； 告诉搜索引擎你的站点的制作的作者； 在HEAD标记内最常用的标记是网页主题标记TITLE标记，它的格式为：网页标题。网页标题是提示网页内容和功能的文字，它将出现在浏览器的标题栏中，一个网页只能有一个标题，并且只能出现在文件的头部。,HTML语言应遵循以下的语法规则。 （1）HTML文件以纯文本形式存放，扩展名为“*.HTM”或“*.HTML”。 （2）HTML标记不区分大小写。 （3）多数HTML标记可以嵌套，但不可以交叉。 （4）HTML文件一行可以写多个标记，一个标记也可

24、以分多行书写，不用任何续行符号。 （5）HTML源文件中的换行、回车符和空格在显示效果中是无效的。显示内容如果要换行必须用标记，换段用标记，表示段落开始，表示段落结束。页面中的空格是通过代码控制的，一个半角空格使用一个表示，多个空格只需使用多次即可。,预排格式标记,功能：保留文字在纯文字编辑器中的格式，原样显示，不受前面的文字格式和段落格式的影响。 格式：预排格式的文本。,列表标记,分段排列出一组级别相同的项目称为列表。如果在每段前面加上一个相同的符号，则称为无序列表；如果每段前面加上一个序号，则称为有序列表。,无序列表,功能：设置无序列表。 格式： 列表项目1 列表项目2 。 type=“d

25、isc”时，列表符号为“”（实信圆），type=“circle”时，列表符号为“”（空心圆），type=“square”时，列表符号为“”（实心方块）。,有序列表,功能：设置有序列表。 格式： 列表项目1 列表项目2 。 标签属性 TYPE 设定符号款式，属性值为 1、a、A、i、I 综合运用见例子,图像标记,1的图像标记功能 功能：在当前位置插入图像。 格式： 。,2的视频标记功能,利用还可以变相的插入视频，下面简单介绍一下该功能。 功能：在网页中加入视频信息，格式一般为*.AVI。 格式：。,属性如下。 （1）scr：设置一幅静态图像的URL地址，在未载入.AVI文件时，先在.AVI的播放区域显示该图像。 （2）dy