网页设计教学PPT讲述.ppt

第二章网页设计语言HTML HTML基础知识 页面基本信息和布局 文本修饰 超文本链接 表格 图像 表单 多媒体 什么是HTML？ HTML是Hyper Text Markup Language的英文缩写，翻译为“超文本标识语言”。它是一种用来制作超文本文档的简单标记语言，是WWW上描述网页内容和外观的标准。 HTML是一种标识语言，由一些编码和标注组成，对网页的行为作出说明，允许Web浏览器解释它们，以便于理解。 HTML如何表示呢？ html headtitletable示例/title/head body table border=1 tr td第一列/td td第二列/td /tr /table /body /html HTML包含了一对打开和关闭的标记，在当中并有属性和值。标记描述了每个网页上的元素，例如文本段落、表格、或者图像等。 HTML的特点 应用的简易性 可以使用任何一种文字处理工具； 语法规则比其他编程语言简单的多。 功能的强大性 几乎能够完成所有的设计工作。 兼容性 几乎每个软件都提供了HTML视图模式。 HTML的功能 可以设计远程服务表单，用于商务网页中的信息检索和商品订购等； 可以定义标题、文字、表格、列表、图像、声音和影视文件等网页中的各类元素； 通过超链接功能可以将互联网中不同页面或页面中的不同位置进行逻辑链接，以供用户进行定位浏览； 可以将互联网上的不同资源进行链接，以实现资源共享。 HTML文档结构标记 我们先来看一个标准的HTML文档结构： html head title标题内容/title /head body 主要内容在这里！ /body /html 将以上代码在浏览器上发布，会是什么结果？ 在记事本中演示。 HTML文档结构 它是以标签（tag）来标识，而标签本身则由“”和“ ”号标识，标签内的内容称为元素。 绝大多数元素是由三部分组成的，即起始标记、内容和结尾标记。 元素的起始标记叫做起始链接签(start tag)，元素结束标记叫做结尾链接签(end tag)。在起始链接签和结尾链接签中间的部分是元素体，即元素内容。 例子 body bgcolor=blue pb欢迎进入E商网/b/p /body 说明： 第一行body bgcolor=“blue”是元素的起始链接签，它表明元素从此开始。起始链接签的形式为元素名 属性名=属性值。 第二行是body元素的元素体。 第三行/body是body元素的结尾链接签。结尾链接签的形式为/元素名。 HTML文档结构 元素名文件或超文本／元素名 元素名 属性名＝“属性值…文本或超文本／元素名 元素名 关于编写HTML文档的说明 HTML标记包含在中，以区别于在页面上显示的文本。 大多数HTML标记都成对出现，只有极少数单独出现，例如，BR标记。 HTML标记不区分大小写。 HTML文档的扩展名为htm，也可以为html。 HTML文档是一个纯文本的文档，可以使用任何文本编辑器来编辑它，例如记事本。 因为浏览器的差异，一些扩充的HTML标记在不同的浏览器上可能显示的结果并不相同。 页面基本信息和布局 一、HEAD元素 格式： head …… /head 标记说明：HEAD标记是页面的第二层标记，用于包含页面的标题信息。 提示： HEAD标记必须在BODY标记开始之前结束，即/head必须放在body之前）。 一、HEAD元素 标题 title网页标题/title 基本属性 网页的基本属性通常利用meta（元信息）， 例如字符编码、作者、版权和关键字等。 （1）keywords meta name=“keywords” content=“关键字具体内容” （2）description meta name=“description” content=“网页描述的具体内容” （3）refresh meta http-equiv=“refresh” content=“10;URL=index.htm” (4)Content-Type meta http-equiv=“Content-Type” content=“text/html;charset=gb2312” (5)Link,Base,Target,ID等等。 Body元素及语法规则 用于定义网页的页面信息，如背景、链接等。 页面颜色 body bgcolor=# text=# link=# alink=# vlink=# B