网页设计与制作03.ppt

滁州学院信息与教育技术中心 第三讲 HTML语言（一） 计算机系 制 教学目的 了解HTML语言基本概念 掌握HTML文档的基本结构 掌握基本的HTML文档的制作方法 导入新课 HTML含义 HTML文档 超文本含义 HTML标记及其属性 导入新课 手工直接编码（初期） HTML（超文本标记语言） 利用可视化工具（发展） 手工直接编码与可视化工具结合（成熟的网页制作方式） HTML简介（一） HTML：HyperText Marked Language 一种用来制作超文本文档的简单标记语言 HTML文档 ：用HTML编写的超文本文档 扩展名： 超文本 所谓超文本,被定义了某些特征的普通文本 因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。 HTML标记 用于表示页面中各部分内容的符号，每个标签都是一条命令，告诉浏览器该如何显示。 标签 属性双标记, 单标记 开始标签 /结束标签 HTML语言不区分大小写 HTML简介 HTML文件是纯文本文档，可以用一个简单的文本编辑器（记事本）手工输入创建，也可通常用专门的软件（FP、DW）创建。 如：在记事本中显示一段倾斜的文本。 创建文件步骤 选择“开始”—”程序” —“附件” —“记事本” 输入HTML语言 以扩展名为.html保存文件 双击文件，系统自动打开浏览器 如： 123.html HTML标签 上面我们在示例超文本特征的同时，采用了一些我们在制作超文本文件时需要用到的一些标签(标记)。 HTML标签 刚刚接触超文本，遇到的最大的障碍就是一些用“”和“”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。 HTML语言采用对称的单标签或双标签描述对象。标签都是“xxx”的形式出现。 注释语句 功能：方便理解复杂的语句。 注释语句浏览器不会显示。 形式：!--注释内容-- 如：!-- This is a comment -- HTML文档的基本结构 结构标记 html/html:标识文档的开头和结尾，必须成对出现。 head/head:文档的开头部分，描述HTML文档相关信息的标记对。它们之间的内容不在浏览器的框内显示。 body/body:文档的主体部分，显示文本、图像等。 一个最基本的超文本文档的源代码 基本结构 大部分HTML文件都以HTML标记开始，以/HTML结尾的。 由二部分组成：网页标题（head）和文档主体（body）。 头部信息（head部分） 用于表明文档的有关信息。如，文档标题，搜索引擎可用的关键字，CSS样式表信息等 。 头部信息（head部分） title 网页的标题/title meta meta标签共有两个属性，它们分别是http-equiv属性和name属性 ＜meta http-equiv=content-Type content=text/html; charset=gb2312＞ 头部信息（head部分） ＜meta name=“参数” content=“具体的参数值”＞ 其中name属性主要有以下几种参数： A、Keywords(关键字) 说明：keywords用来告诉搜索引擎你网页的关键字是什么。 举例：＜meta name =keywords content=science, education,culture,politics,ecnomics，relationships, entertaiment, human＞ B、description(网站内容描述) 说明：description用来告诉搜索引擎你的网站主要内容。 举例：＜meta name=description content=This page is about the meaning of science.＞ C、author(作者) ???? 说明：标注网页的作者 ???? 举例：＜meta name=author content=zys666,zys666@21＞ 主体标记 （body部分） 设置网页的背景颜色、背景图像、全文颜色、链接颜色和网页边距等。 Body的常用属性 插入文本 在BODY…/BODY间输入的文本，将在浏览器中直接显示，但是无法实现换行等格式。如果需要分段、换行、颜色、字号、字体等设置，还需要其他的标记对。 1.单标签 形如：标记内容 换行标签br 2.双标签 双标签由始标签和尾标签两部分组成，必须成对出现。尾标记比始标记多一个“/” 形如：标签内容/标签 标签的属性 属性是对标签的详尽描述，不同的标签有不同的属性。 形式： 标签