《HTML语言简介》PPT课件.ppt

多媒体网页设计教程,第6章 HTML语言简介,杭州师范大学 多媒体网页设计课程组,多媒体网页设计教程,内容概要,多媒体网页设计教程,HTML语言简介,基本内容和要求 了解HTML文档基本语法和基本结构； 掌握HTML常用标记的使用； 标题、段落、文本等格式标记的应用；超级链接标记的使用；水平线、图像、声音和视频等网页元素的插入标记；表格标记的使用。 了解HTML框架标记、表单标记的使用。,多媒体网页设计教程,HTML概述,HTML全称为超文本置标语言（Hypertext Markup Language），其通过标记（Tags）指令，将文字、图像、声音和影像等元素连接起来，构成超文本的网页。 用HTML语言编写的文档称为HTML文件，其扩展名必须为htm或html，才能通过Web浏览器解释后以网页方式显示在浏览器窗口中，呈现出丰富多彩的页面。,多媒体网页设计教程,HTML文档的编写方法,手工直接在文本编辑器中编写 由记事本、书写器等文本编辑器编辑，生成 .htm、.html格式文件。 使用可视化HTML 编 辑 器 Frontpage、Dreamweaver等 由Web服 务 器（或称HTTP服务器）一方实时动态地生成。,多媒体网页设计教程,HTML的基本概念,标记和属性 标记是HTML语言中具有描述功能的符号，其具体形式是用一对尖括号“”括起来的字符串指令，标记中还包括一些属性选项，用于描述标记符的具体作用。 标记一般由“始标记”和“尾标记”两部分构成，必须成对使用。始标记前加一个斜杠（/）即成为尾标记。 使用始标记就能表达指令功能而省略尾标记的标记，称为单标记。 属性包含在始标记内。各属性之间无先后次序，属性也可省略（即取默认值）。,多媒体网页设计教程,HTML的基本概念,标记格式： 属性格式：属性名=“值” 注释语句 HTML注释语句使用“！”标记， 由“”结束。 注释语句可插入文档中任意位置。任何标记若在标记符前插入感叹号，即被标识为注释，不予显示。,.,多媒体网页设计教程,HTML的语法规则,文件以纯文本形式存放，扩展名为“*.htm”或“*.html”。 标记不区分大小写，标记符中间不能有空格，（建议使用小写字母）。 多数HTML标记可以嵌套，但不可以交叉。 文件一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符号。 HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。 网页中所有的显示内容都应该受限于一个或多个标记，不应有游离于标记之外的文字或图像等，以免产生错误。,多媒体网页设计教程,HTML基本结构,HTML的基本结构, HTML文件开始 文件头开始 文件头 文件头结束 文件体开始 文件体 文件体结束 HTML文件结束,多媒体网页设计教程,标记,用于标记页面的一些说明性内容，如页面的标题、脚本语言、样式表等头部信息。 在HEAD标记内最常用的标记是网页标题栏标记，即TITLE标记，其格式为： 网页标题是提示网页内容和功能的文字，显示在浏览器的标题栏中。一个网页只能有一个标题，并且只能出现在文档的头部。除了标记，头部还有其他一些非必须的，如、等常用标记。,网页标题,多媒体网页设计教程,标记,Body标记是HTML文档不可缺少的主体，文档中所有涉及的网页元素，包括文字、表格、图像、声音和影像等标记都包含在这对标记之间。 设置 标记内的属性，可控制整个页面的显示方式。,多媒体网页设计教程,颜色的设定,颜色值是一个关键字（颜色名），如blue（蓝）；或一个RGB格式的数字，6位十六进制颜色代码，如#0000FF（蓝）。 常用的RGB颜色表示： #rrggbb 如，bjcolor=“#0000FF” rgb(x,x,x) x是一个介乎0到255之间的整数 如， bjcolor=rgb(0,0,255) 关键字（颜色名） 如， bjcolor=blue,多媒体网页设计教程,HTML常用格式标记,1. 标题格式标记 功能：用于定义文章内章节标题的显示格式。 2. 文字格式标记 功能：设置网页中普通文字的显示效果。,格式：标题内容,格式：文字,多媒体网页设计教程,HTML常用格式标记,3. 文字样式设置标记,多媒体网页设计教程,HTML常用格式标记,4. 段落标记 功能：设置文章段落的开始和结束。 5. 换行标记 功能：另起一行显示文字。 6. 文本预排格式标记 功能：保留文字在纯文字编辑器中的格式，原样显示。,格式：文本,格式：,格式：文本,多媒体网页设计教程,HTML常用格式标记,7. 文本分块标记 功能：此标记对的用法与标记对非常相似，用于排版大块HTML段落，设置多个段落的文本对齐方式，也用于格式化表格。 如果多个段落有相同的对齐方式，则可以将这些段落放入标记之中。 8. 插入水平线标记 功能：在页面上画横线，可用于页面上内容的分割。,格式：.,格式：,多媒体网页设计教程,HTML常用格式标记,9. 转义字符 在HTML语言中，一些已被标记或标记属性使用的特殊字符，当网页需要显示这些字符时，必须使用以“”结束的转义字符表示。,多媒体网页设计教程,列表标记,分段排列出一组级别相同的项目称为列表。如果在每段前面加上一个相同的符号，则称为符号列表；如果每段前面加上一个序号，则称为标号列表。 符号列表 属性： type 属性表示在每个列表项前所显示的项目符号类型，共有三种取值：”disc”时，符号为“”（实心圆），”circle”时，符号为“”（空心圆），”square”时，符号为“”（实心方块）。,格式： 列表项1 列表项2 ,多媒体网页设计教程,列表标记,标号列表 属性：type 属性表示每个列表项前显示的标号类型，取值可以为1（阿拉伯数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）。start 用于设置标号的开始值，默认值为1。,格式： 列表项1 列表项2 ,多媒体网页设计教程,列表标记,说明列表 说明：和标记说明列表的开始和结束，每一项列表项之前必须加上标记，用标记设置列表项说明，说明文本自动向右缩进。,格式： 列表条目1 列表条目1的说明 列表条目2 列表条目2的说明 ,多媒体网页设计教程,HTML的超链接标记,格式： .,功能：建立超链接。通过超链接打开图像、声音、影像文件等。 说明：标记对之间就是带超链接标识的文本或图像。超链接标识文本的颜色由标记的link、alink、vlink属性设定。 属性：href用于设置要链接的目标URL地址，目标可以是包含路径的图像、声音、影像文件等。target属性用于设置显示链接的页面窗口，默认是在当前窗口显示。,多媒体网页设计教程,HTML的图像与多媒体标记,图像标记,格式： 。,多媒体网页设计教程,HTML的图像与多媒体标记,背景音乐标记 视频标记,格式：,格式：,多媒体网页设计教程,HTML表格标记,格式： 表格结构示例 一个简单的表格 标题单元格1标题单元格2 标题单元格3 单元格11单元格12单元格13 单元格21单元格22单元格23 ,多媒体网页设计教程,HTML表格标记属性,多媒体网页设计教程,HTML表格单元格标记属性,TD标记常用属性,TABLE标记中的bgcolor、background、bordercolor、align、height、width等属性可以作为单元格的属性放在TD标记中。,多媒体网页设计教程,HTML表单标记,表单标记 标记对之间的一切都属于表单的内容。 action属性指定表单处理程序的程序名(包括网络路径)。 method属性定义处理程序从表单中获得信息的方式，其取值为get 或 post，默认值为get。 target属性用来指定目标窗口或目标框架。,格式：.,多媒体网页设计教程,HTML表单标记,写入标记 type=定义一个用于输入信息的表单域类型， 标记必须放在标记之间。,格式：,多媒体网页设计教程,type属性定义的表单域类型,多媒体网页设计教程,表单域对象的常用属性,多媒体网页设计教程,列表框标记,标记用来创建一个下拉列表框或可以复选的列表框；标记用来指定列表框中的一个选项。 multiple属性决定列表框是否可多选；selected用来指定默认的选项，value属性用于给标记中指定的哪一个选项赋值。 标记必须放在标记对之间，标记必须放在标记之间。,格式： . ,多媒体网页设计教程,多行文本框标记,功能：创建一个可以输入多行的文本框。 cols和rows属性分别用来设置文本框的列数和行数，列与行是以字符数为单位。 标记必须放在标记对之间。,格式：.,多媒体网页设计教程,HTML框架标记,框架结构用于网页布局，其特征是将浏览器页面分为数个大小不一的区域，每个区域就是一个框架，每个框架显示一个独立网页，框架集并不在浏览器中显示，而是定义了框架的大小分布和个数。,多媒体网页设计教程,HTML框架标记,框架的基本结构, 框架集定义标记 框架定义标记 ,多媒体网页设计教程,标记属性,设置内容包括浏览器窗口中将要显示的框架数目、框架的大小、每一个框架中将要放置的页面等。框架排列遵循从左到右，从上到下的次序规则。,多媒体网页设计教程,标记,标记放在标记之间，每个框架都由对应的标记描述。 框架的名称也用于超文本链接标记中的target属性赋值，指定链接目标HTML文件所显示在的框架。,格式：,多媒体