说明HTML语言的用途,《HTML语言简介》PPT课件.ppt

《多媒体网页设计教程》,第6章HTML语言简介,杭州师范大学多媒体网页设计课程组,《多媒体网页设计教程》,内容概要,《多媒体网页设计教程》,HTML语言简介,基本内容和要求了解HTML文档基本语法和基本结构；掌握HTML常用标记的使用；标题、段落、文本等格式标记的应用；超级链接标记的使用；水平线、图像、声音和视频等网页元素的插入标记；表格标记的使用。了解HTML框架标记、表单标记的使用。,《多媒体网页设计教程》,HTML概述,HTML全称为超文本置标语言(HypertextMarkupLanguage)，其通过标记(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文件所显示在的框架。,格式：,《多媒体网页设计教程》,标记,功能：用于在不支持框架结构的浏览器中显示文本或图像信息。说明：标记放在标记之间。,格式：…,《多媒体网页设计教程》,浮动窗口标记,功能：在浏览器窗口中可以嵌入一个框架窗口(窗框)以显示另一个文件。,格式：,标记只适用於IE浏览器。在包含标记的文档中，标记中background-color或bgcolor属性必须设置为transparent。,《多媒体网页设计教程》,浮动窗口标记属性,,

展开阅读全文