《Web应用技术 教学课件 ppt 作者 芦欣 第3章 HTML语言基础》由会员分享，可在线阅读，更多相关《Web应用技术 教学课件 ppt 作者 芦欣 第3章 HTML语言基础（33页珍藏版）》请在金锄头文库上搜索。
1、第3章 HTML语言基础,3.1工作任务1：网站中的文本及超链接代码的编写 3.2 工作任务2：教务管理网站多媒体代码的编写 3.3工作任务3：教师资料注册页面HTML代码的编写,3.1工作任务1：网站中的文本及超链接代码的编写,3.1.1 任务描述与目标 1.任务描述 HTML是一切网页实现的基础，在网页中浏览的网页都是一个个HTML文件。本节的工作任务是使用HTML语言处理网站中文本及超级链接,3.1工作任务1：网站中的文本及超链接代码的编写,3.1.2 相关知识 1.HTML简介 在网页中浏览的网页都是一个个HTML文件，这些网页包含有文字、图片、动画和声音，还可以从当前页面跳转到另一个
2、页面，与网络世界中个地主机上的文件相连接，故被称为超文本文档。HTML（HyperText Markup Language，超文本标记语言），是用来描述超文本文档的标记语言。它由HTML标记和用来表示信息的文本组成。使用HTML语言描述的文件，需要通过浏览器显示效果。,3.1工作任务1：网站中的文本及超链接代码的编写,3.1.2 相关知识 （1）HTML 文档标记 在HTML文档中由许多用“”括起来构成的代码，这种代码称它为标记，标记是HTML语言中定义网页内容格式和显示的指令。标记有单标记、双标记，还可为标记设置属性，标记的属性用于进一步控制网页内容的显示效果。,3.1工作任务1：网站中的文
3、本及超链接代码的编写,3.1.2 相关知识 （2）HTML 文档结构 HTML 文档基本结构如下： 标题部分 正文部分 ,3.1工作任务1：网站中的文本及超链接代码的编写,3.1.2 相关知识 （3）常用HTML编辑工具 任何一个文档编辑器都是HTML编辑器。为了减少网页设计师的工作设计了专用的网页编辑器，像Dreamweaver、FrontPage、CutePage、QuickSite等，是专门用来制作网页的，具有所见即所得的功能。,3.1工作任务1：网站中的文本及超链接代码的编写,3.1.2 相关知识 2.常用文本标记 在HTML文档中，文本的字体、大小、颜色等都是由标记控制的，以下介绍常
4、用的文本格式标记。 （1）设置标题字体标记 格式：h# 内容 /h# 其中#=1，3，3，4，5，6 说明：设置标题字体标记h#是成对标记，首标记和尾标记之间的内容是以黑体字显示的。h#标记将在标记内容的前后各自插入一个空行，因此不必使用换行标记进行换行。同时在一行中无法使用不同大小的标题字体。,3.1工作任务1：网站中的文本及超链接代码的编写,3.1.2 相关知识 2.常用文本标记 （2）设置字体大小标记 格式：font size=“#“ 内容 /font 其中#=1，3，3，4，5，6，7 或 +#、-# 说明：font标记是成对标记，其中参数size用来指定字体的大小，数值范围为17。s
5、ize参数值也可用“+”或“-”设置相对大小，例如：size=“+3”表示采用比当前默认字体大3号的字体；size=“-3”表示采用比当前默认字体小3号的字体。由于缺省值为3，所以能选择的值是：-3、-1、+1、+3、+3、+4。,3.1工作任务1：网站中的文本及超链接代码的编写,3.1.2 相关知识 2.常用文本标记 （3）设置字体颜色标记 格式：font color=“#“ 内容 /font 说明：其中#的值是六位十六进制代码或是颜色的英文单词。 例如：font color=“red“中央电视台/font 或 font color=“#ff0000“中央电视台/font,3.1工作任务1：
6、网站中的文本及超链接代码的编写,3.1.2 相关知识 2.常用文本标记 （4）设置物理字体标记 格式：b/b 粗体标记 i/i 斜体标记 u/u 加下划线标记 tt/tt 打字机风格的字体标记 sup/sup 上标标记 sub/sub 下标标记 s/s 加删除线标记,3.1工作任务1：网站中的文本及超链接代码的编写,3.1.2 相关知识 2.常用文本标记 （5）设置逻辑字体标记 格式：em/em 强调文本(通常是斜体)标记 strong/strong 加重文本(通常是黑体)标记 code/code 代码标记 samp/samp 式样文本标记 kbd/kbd 键盘字标记 var/var 变量值标
7、记 dfn/dfn 术语定义标记 cite/cite 引用标记 small/small 小字体（比周围的字体小）标记 big/big 大字体（比周围的字体大）标记,3.1工作任务1：网站中的文本及超链接代码的编写,3.1.2 相关知识 2.常用文本标记 （6）段落格式化标记 换行标记 格式： 说明：强制进行换行标记。 段落标记 格式： 说明：设置段落标记。 预定格式标记 格式： 说明：在浏览器中浏览时，按照文档中预先排好的形式显示内容。,3.1工作任务1：网站中的文本及超链接代码的编写,3.1.2 相关知识 2.常用文本标记 （7）创建滚动文字 在HTML页面中，可以实现如字幕一般的滚动文字或
8、滚动图像的效果。要实现文字或图像的滚动效果，可使用标记。 格式： 说明：让文字能循环滚动显示。,3.1工作任务1：网站中的文本及超链接代码的编写,3.1.2 相关知识 3.列表标记 （1）有序列表 格式： ,3.1工作任务1：网站中的文本及超链接代码的编写,3.1.2 相关知识 3.列表标记 （2）无序列表 格式： ,3.1工作任务1：网站中的文本及超链接代码的编写,3.1.2 相关知识 3.列表标记 （3）自定义列表 格式： 注意：根据文档的具体要求，列表可以嵌套使用。,3.1工作任务1：网站中的文本及超链接代码的编写,3.1.2 相关知识 3.列表标记 （3）自定义列表 格式： 注意：根据
9、文档的具体要求，列表可以嵌套使用。,3.1工作任务1：网站中的文本及超链接代码的编写,3.1.2 相关知识 4.超链接标记 （1）超级链接名称 该字符串以明文形式显示在网页中。除了可以使用字符串外，在标记中，也可使用位图文件或其他图形文件，此时，该图文件即代表超链接。当使用者将鼠标指针移到代表超链接的文字或图文件上时，光标形态变成手状，表示使用者可单击该链接。 （2）链接位置 用于指定href属性，用来放置超链接的目标，可使用URL指定。URL的格式由使用的通信协议、链接地址与文件位置所组成。语法如下： 通信协议：/链接地址/文件位置/文件名称,3.2 工作任务2：教务管理网站多媒体代码的编写
10、,3.2.1 任务描述与目标 1.任务描述 在网页中加入多媒体，可使网页元素更加丰富，更加美观，使网页更具吸引力。本节的工作任务是如何使用HTML在教务管理网站首页上部插入网站标志图片及在教务管理网站首页中如何使用表格。,3.2 工作任务2：教务管理网站多媒体代码的编写,3.2.2 相关知识 1.插入多媒体 （1）插入图像 超文本支持的图像格式一般有XBitmap（xbm）、gif、jpeg三种，所以将图片处理后要保存为这三种格式的任何一种，这样才可以在浏览器中看到。 插入图像标记是，其格式为：,3.2 工作任务2：教务管理网站多媒体代码的编写,3.2.2 相关知识 1.插入多媒体 （2）播放
11、音频与视频 HTML 除了可以插入图像之外，还可以播放音乐和视频等。用浏览器可以播放的音乐格式由midi音乐、wav音乐、au格式。另外，在利用网络下载的各种音乐格式中，mp3是压缩率最高、音质最好的的文件格式。 点播音乐的方式是将音乐做成一个超链接，只需要用鼠标在上面单击，就可以听到动人的音乐了，其实这样做的方法很简单：乐曲名,3.2 工作任务2：教务管理网站多媒体代码的编写,3.2.2 相关知识 2.表格标记 （1）标记 该标记定义表格，通常一个表格由多个行和列组成。 （2）标记 该标记定义表格的一列，通常包含多个由 或所定义的单元格。 （3）标记 该标记定义表格的单元格。 （4）标记 该
12、标记定义表格的标题单元格，此单元格中的文字将以粗体的方式显示。,3.3工作任务3：教师资料注册页面HTML代码的编写,3.3.1任务描述与目标 1.任务描述 在教务管理网站中设计了教师资料注册表单页面，每位教师通过填写该表单将个人信息提交给系统，学生可以通过网站查询教师的基本情况。,3.3工作任务3：教师资料注册页面HTML代码的编写,3.3.2 相关知识 1.表单标签 （1）表单的基本语法 . ,3.3工作任务3：教师资料注册页面HTML代码的编写,3.3.2 相关知识 1.表单标签 单行文本域 单行文本域用于输入诸如姓名、地址等信息量相对较少的文本信息。其定义方法为： 属性说明：name属
13、性用于设置文本框的名称，value属性用于设置文本框的初值；size属性用于设置文本框显示的宽度字符数，maxlength属性用于设置文本框最多接收的字符数。,3.3工作任务3：教师资料注册页面HTML代码的编写,3.3.2 相关知识 1.表单标签 密码框 密码框是单行文本框的一个特例，外观上与单行文本框一样，但用户输入数据时，数据会以“*”代替显示，以起到保密的作用。其定义方法为： 密码框的属性基本与单行文本框的属性相同。,3.3工作任务3：教师资料注册页面HTML代码的编写,3.3.2 相关知识 1.表单标签 隐藏域 隐藏域用于承载不需要或不希望用户干预的信息，在页面显示效果上是不可见的。
14、通过隐藏域，可向服务器发送一些用户不知情的信息。其定义方法为： 隐藏域有name和value属性，其含义同单行文本域对应的属性。,3.3工作任务3：教师资料注册页面HTML代码的编写,3.3.2 相关知识 1.表单标签 多行文本域 多行文本域用于接收大量数据的场合，诸如输入简历、文章资料等信息相对较多的文本。其定义方法为： 属性说明：name用于设置多行文本域的名称；rows用于设置多行文本域的行数，cols用于设置多行文本域的列数。,3.3工作任务3：教师资料注册页面HTML代码的编写,3.3.2 相关知识 1.表单标签 列表框 列表框可以提供一些事先设置的候选项供用户选择。其定义方法为：
15、列表项文本1 列表项文本3 列表项文本n 说明：size属性用于设置列表框的高度，即一次能看到的列表项的数目。若设置为1或不设置，则为下拉式列表；若设置为大于或等于3的值，则为滚动式列表框。,3.3工作任务3：教师资料注册页面HTML代码的编写,3.3.2 相关知识 1.表单标签 复选框 复选框提供了候选项的一种方法，常用于多项选择。一般情况下是多个同名的复选框组成一个复选框组，相互配合使用，以供用户做多项选择之用。其定义方法为： 属性说明：value用于设置当用户选中该项后，表单所提交的值；checked为可选项，若选用该参数，则复选框呈选中状态。,3.3工作任务3：教师资料注册页面HTML
16、代码的编写,3.3.2 相关知识 1.表单标签 单选按钮 单选按钮一般情况下也是多个同名的单选按钮组成一个单选按钮组，相互配合使用，以供用户做单项选择之用。其定义方法为： 说明：单选按钮的属性同复选框的属性类似。需要注意的是，一组单选按钮的名称必须相同，否则就无法实现多选一的目的。,3.3工作任务3：教师资料注册页面HTML代码的编写,3.3.2 相关知识 1.表单标签 命令按钮 表单中可使用的命令按钮有提交按钮、重置按钮和普通按钮三种，提交按钮具有内建的表单提交功能；重置按钮具有内建的表单重置功能；普通按钮不具有内建行为，需要配合“onClick=function”使用。 提交按钮的定义方法为： 重置按钮的定义方法为： ,3.3工作任务3：教师资料注册页面HTML代码的编写,3.3.2 相关知
