第5章网页设计语言HTML 学习目标 ◆HTML的概念 ◆HTML的语法与结构 掌握HIML的各种标记符号及其属性 能够制作简单网页
1 第5章 网页设计语言HTML 学习目标 u HTML的概念 u HTML的语法与结构 u 掌握HTML的各种标记符号及其属性 u 能够制作简单网页
返回总目录 第5章网页设计语言HTML 教学内容 5.1HTML概述 5.2HTML的一般标记符 5.3文本标记符 5.4列表标记符 5.5链接标记符 5.6表格标记符 5.7表单标记符 5.8多媒体标记符 本章小结
2 第5章 网页设计语言HTML 教学内容 5.1 HTML概述 5.2 HTML的一般标记符 5.3 文本标记符 5.4 列表标记符 5.5 链接标记符 5.6 表格标记符 5.7 表单标记符 5.8 多媒体标记符 本章小结 返回总目录
返回目录 51HTM概述 HTML( Hypertext Markup language)是最基本的Web页面开发语 言,称为文本文档标记语言。它不需要编译,由浏览器(如I)解 释执行。HTML是纯文本文件,可采用 Windows中的记事本或写字板 来编辑,也可以用D0S下的Edit等文本编辑器,保存时文件名的后缀 为.htm或htm1。 HTML的主要语法是元素和标签。元素是符合文档类型定义的文档 组成部分,如 title(文档标题)、img(图像)、 table(表格) 等。元素名不区分大小写。标签用来规定元素的属性和它在文档中 的位置。标签分单独出现和成对出现两种情况 例如:网页设计教程与之间的内容都属于元素 title, 是标签,用来说明元素 title 3
3 5.1 HTML概述 返回目录 HTML（Hypertext Markup Language）是最基本的Web页面开发语 言，称为文本文档标记语言。它不需要编译，由浏览器（如IE）解 释执行。HTML是纯文本文件，可采用Windows中的记事本或写字板 来编辑，也可以用DOS下的Edit等文本编辑器，保存时文件名的后缀 为.htm或.html。 HTML的主要语法是元素和标签。元素是符合文档类型定义的文档 组成部分，如title（文档标题）、img（图像）、table（表格） 等。元素名不区分大小写。标签用来规定元素的属性和它在文档中 的位置。标签分单独出现和成对出现两种情况。 例如：网页设计教程 title是元素名，与之间的内容都属于元素title， 是标签，用来说明元素title
返回目录 52HTM的一般标记符一一个简单的网页 一个简单网页的制作 第一步:打开 Windows下的记事本。 第二步:输入下面代码 HTML网页设计教程 你好!欢迎浏览本网页! 第三步:以 sample.htm为文件名保存文件并关闭该文件。 第四步:双击 sample.htm文件,浏览器会自动执行它
4 5.2 HTML的一般标记符 — 一个简单的网页 一个简单网页的制作 第一步：打开Windows下的记事本。 第二步：输入下面代码 HTML网页设计教程 你好! 欢迎浏览本网页！ 第三步：以sample.htm为文件名保存文件并关闭该文件。 第四步：双击sample.htm文件，浏览器会自动执行它。 返回目录
返回目录 52HTM的一般标记符一mTM文件格式特点 1.每一个HTML文件以开始,以/htm1>结東,浏览器遇到标志时,会按 照HML的标准来解释后面的文本,直到才停止解释。和是成对出 现的,所有的文本和命令都在它们之间。 2.是网页的头部标记,通常紧跟之后。与之间的文本是整 个文件的序言,不属于HTML文件本体部分,不在浏览器屏幕中显示 3.用来说明文件标题, TITLE元素的格式为:文件题目√/ title>, 个好的题目应该使读者能从中判断出该文件的大概内容。浏览时文件题目将显示在IE浏 览器标题栏上。和之间是网页主体内容。在标签中可以规定整个文档的一些 基本属性,如:“ bgcolor”属性,用于指定文档的背景颜色,“text”属性用于指定文档中文 字的颜色 5.所有标记不得交叉,如与必须包含在与中间。 6.HTML文件对书写格式要求不太严格 5
5 5.2 HTML的一般标记符 — HTML文件格式特点 1．每一个HTML文件以开始，以结束，浏览器遇到标志时，会按 照HTML的标准来解释后面的文本，直到才停止解释。和是成对出 现的，所有的文本和命令都在它们之间。 2．是网页的头部标记，通常紧跟之后。与之间的文本是整 个文件的序言，不属于HTML文件本体部分，不在浏览器屏幕中显示。 3．用来说明文件标题，TITLE元素的格式为：文件题目 ，一 个好的题目应该使读者能从中判断出该文件的大概内容。浏览时文件题目将显示在IE浏 览器标题栏上。中不包含其他标记。 4．和之间是网页主体内容。在标签中可以规定整个文档的一些 基本属性，如： “bgcolor” 属性，用于指定文档的背景颜色,“text” 属性用于指定文档中文 字的颜色。 5．所有标记不得交叉，如与必须包含在与中间。 6．HTML文件对书写格式要求不太严格。 返回目录
返回目录 53文本标记符一常用文本标记符 标签 作用 是单独出现的,作用相当于插入回车符。如果没有换行标签, Web浏览器窗口将根据浏览器窗口的宽度尽可能长的显示文本。 之间的文字是文档中的标 题。标题文字都用黑体显示,上级标题总比下面各级标题更大些 更粗些。标签共分六级,其中标签括起的文字是第一级标 题,最大最粗,而标签括起的文字是最后一级标题,最小最细。 |+h标签是单独出现的,作用是换行并在该行下面画一条水平直线 它有三个属性值:SIZE、WDTH和 ALIGN,分别用以规定水平线的 高度、宽度和水平线在浏览器窗口中的位置。 p>|P是pg的意思,它用于划分段落,作用是换行并插入一个全白 行,p>标签可以单独使用,也可以成对使用。成对使用时,可以添 加 ALIGN属性,标出段落在浏览器中的位置。 ALIGN属性的参数值 有left、 center和 right,分别表示Φp>标签所括起的段落位于浏览器窗 口的左侧、中间、右侧。 6
6 5.3 文本标记符 — 常用文本标记符 标 签 作 用 是单独出现的，作用相当于插入回车符。如果没有换行标签， Web浏览器窗口将根据浏览器窗口的宽度尽可能长的显示文本。 标签是成对出现的，夹在和之间的文字是文档中的标 题。标题文字都用黑体显示，上级标题总比下面各级标题更大些、 更粗些。标签共分六级，其中标签括起的文字是第一级标 题，最大最粗，而标签括起的文字是最后一级标题，最小最细。 标签是单独出现的，作用是换行并在该行下面画一条水平直线。 它有三个属性值：SIZE、WIDTH和ALIGN，分别用以规定水平线的 高度、宽度和水平线在浏览器窗口中的位置。 P是paragraph的意思，它用于划分段落，作用是换行并插入一个空白 行，标签可以单独使用，也可以成对使用。成对使用时，可以添 加ALIGN属性，标出段落在浏览器中的位置。ALIGN属性的参数值 有left、center和right，分别表示标签所括起的段落位于浏览器窗 口的左侧、中间、右侧。 返回目录
返回目录 53文本标记符一常用文本标记符 标签 作用 pre> pre>是预格式化标签,HTML的输出是基于窗口的,因而 HTML文件在输出时都要重新排版,对确实不需要重新排 版的内容,可以用pre>.通知浏览器。浏览器在 输出时,对…括起来的内容几乎不做修改地 输出。 字符格式HTML文档的字符格式标签主要有、①和和之间的内容将显示为黑体文字, <>和<>之间的内容将显示为斜体,和之间的内 容将显示为带下划线的文字。 address>地址标签,一般放在文档体的首部或尾部。之间的内容通常是有关作者的信息,包括作者的 姓名、身份等等。 7
7 5.3 文本标记符 — 常用文本标记符 标 签 作 用 是预格式化标签，HTML的输出是基于窗口的，因而 HTML文件在输出时都要重新排版，对确实不需要重新排 版的内容，可以用…通知浏览器。浏览器在 输出时，对…括起来的内容几乎不做修改地 输出。 字符格式 标签 HTML文档的字符格式标签主要有、和，它们 都成对出现。和之间的内容将显示为黑体文字， 和之间的内容将显示为斜体，和之间的内 容将显示为带下划线的文字。 地址标签，一般放在文档体的首部或尾部。和 之间的内容通常是有关作者的信息，包括作者的 姓名、身份等等。 返回目录
返回目录 53文本标记符一常用文本标记符 例常用文本标记符举例 这一个段落我们分两行显示,需用到&比t:BR>标签, 我们看如果我们不用&ItBR>:标签,而只是在形式上分行的效果, 该段落到此结束 下面是第二段。该段只有一行,在该行下面加一条绿色水平线。 8说明:81t;BR&g:将br>作为纯文本符号而不是标记
8 5.3 文本标记符 — 常用文本标记符 例常用文本标记符举例 有关文本标签的使用 这一个段落我们分两行显示，需用到<BR>标签， 我们看如果我们不用<BR>标签，而只是在形式上分行的效果， 该段落到此结束 下面是第二段。该段只有一行，在该行下面加一条绿色水平线。 说明：<BR>将作为纯文本符号而不是标记。 返回目录
返回目录 5.3文本标记符_滚动字幕 滚动字幕能使网页生动活泼,增加视觉效果。标签为: 。 < marquee标签有这样几个常用属性: l. derection属性,用于指定文字移动方向,属性值有:lef、 right 2. behavior属性,指定文字移动方式。属性值有: scroll、 slide、 alternate,分别表示文字一圈一圈的绕着走、只走一次、来回走动 3.lop属性,用于指定循环次数,若不指定循环次数,则表示循环不 止 4. scrollamount属性,用于指定文字移动的速度。 5. bgcolor属性,用于指定文字背景色 9
9 5.3 文本标记符 —滚动字幕 滚动字幕能使网页生动活泼，增加视觉效果。标签为：… 。 标签有这样几个常用属性： 1．derection属性，用于指定文字移动方向，属性值有：left、right。 2．behavior属性，指定文字移动方式。属性值有：scroll、 slide、 alternate，分别表示文字一圈一圈的绕着走、只走一次、来回走动。 3．loop属性，用于指定循环次数，若不指定循环次数，则表示循环不 止。 4．scrollamount属性，用于指定文字移动的速度。 5．bgcolor属性，用于指定文字背景色。 返回目录
返回目录 5.3文本标记符_滚动字幕 例5-3滚动字幕举例 滚动字幕 我是不是移动的比较快? 我的底色是黄的,我循环三次即停止移动 10
10 5.3 文本标记符 —滚动字幕 例5-3 滚动字幕举例 滚动字幕 请进入音乐休闲屋 看我还会动呢,并且是从右向左移动 我从左向右一圈一圈的移动 我是不是移动的比较快？ 我的底色是黄的，我循环三次即停止移动 返回目录