预备知识：HTML网页设计基础.ppt

HTML网页设计基础,1 认识和使用HTML 2 HTML常用标记 3 HTML表单标记 4 用 FrontPage设计HTML,1 认识和使用HTML,1.1 什么是HTML HTML使用各种不同的标记符号来分别标识和设定不同的网页元素。 每一个网页元素通常由开始标记、结束标记，以及夹在这两个标记中的内容所组成。 一个HTML元素的形式可表示为： 内容 ,说明：,也可以在之间使用标记； 不区分大小写； 连续的空格、Tab键只当成一个空格； 可以使用注释； Html文档中的错误会跳过不予理会； 各元素可以嵌套不可以交错。,需要区分大小写吗？ 整个Html文件可以在一行中书写吗？ 一个标识可以在多行中书写吗？ 属性之间有次序要求吗？,1.2 HTML文档基本架构 网页标题 这是正文部分！ ,1.3 创建一个简单的HTML文档,图 创建一个简单HTML文档,图 执行结果,2 HTML常用标记,2.1 段落标记 1标题标记 格式： 标题文字 ,说明：标记符用于定义段落标题的大小级数。 最大是 ，最小。 align属性可控制文字的对齐方式，值可以是left，center，或者right。,h1,h6,2.1 段落类标记,2分段标记 格式： 文字 ,说明：标记符用于划分段落。 是成对标记符，用于定义内容从新的一行开始，并与上段之间有一个空行。,3换行标记 格式： 文字 ,说明：标记符用于定义从新的一行显示，它不产生一个空行，但连续多个标记可以产生多个空行的效果。 标记符是非成对标记符。,4横线标记 格式： 说明：hr标记为非成对标记。,2.2 文字格式标记 1字体标记 格式： 文字,2空格用“”表示。,（1）face属性：定义字体，如face=“隶书”。 （2）size属性：定义大小，属性值为17，也可以使用相对大小来设置，如size=“+5”、 size=“-5”。 （3）color属性。定义颜色，可用英文来表示，如： color=“red”；也可使用16进制的RGB来表示， color=“#FF0000”。 此外，字体标记符还包括粗体标记符、斜体标记符等。,2.3 列表标记 1无序列表标记 格式： 列表项1 列表项2 列表项n 说明：disk （默认）、 square 、circle , 花语 各种花所代表的含义如下： 玫瑰：纯洁的爱 剑兰：用心坚固 满天星：爱怜 紫罗兰：永恒之美 勿忘我：爱到永远 ,2有序列表标记 格式： 列表项1 列表项2 列表项n 说明：type的值为：1、a、A、i、I。,2.4 表格标记 格式： 文字文字 d11d12 d21d22 ,2 HTML常用标记,2.5 超链接标记 格式： 用作超链接的文字或图像,2 HTML常用标记,标记符是成对标记符，主要属性有： （1）href。链接文件的地址。 （2）target。链接目标的位置。 1.指向电子邮件的链接 与我联系 2.指向站内文件的链接 花节 3.指向其他网址的链接 友情链接,2.6 图像标记 格式： 非成对。 HTML 和 XHTML 标准指定了 5 种图像对齐属性值：left、right、top 、middle 和 bottom。 Netscape 又增加了 4 种垂直对齐属性：texttop、absmiddle、baseline 和 absbottom，Internet Explorer 则增加了 center。 注意：不同的浏览器以及同一浏览器的不同版本对 align 属性的某些值的处理方式是不同的。 注意：HTML 4.01 不推荐使用 align 属性，XHTML 1.0 Strict DTD 不支持该属性，同时 HTML 5 也不再支持该属性。,2 HTML常用标记,3 HTML表单标记,3.1 表单定义格式 格式： ,表单的制作及注意事项： Method属性：指定表单中信息传送给Web应用程序时所采用的方式。 Get：把信息作为字符串附加在URL后面。此方式传送信息量小，且以明文显示，保密性差。 Post：把表单中的所有信息进行包装后再传送，不受长度限制，且以密文显示，保密性好。,表单的制作及注意事项： Action属性：指明表单提交后将激活的处理程序。 action属性值： 提交后将数据写入E-mail： 提交后交数据写入某ASP文件 ,3.2 常用表单域标记 1标记 格式： ,1.文本框： 2.密码框： 3.复选框： 4.单选按钮： 5.按钮 ,2标记 格式： 文字 文字 ,3标记 格式： ,同一表单中所有字段的名称必须以英文命名且不得重复，这个名称将用于后端处理。,3.3 表单制作举例,图 表单范例执行结果,3.4 用 FrontPage设计HTML,3.4.1 FrontPage工作窗口 1普通方式 2HTML方式 3预览方式,3.4.2 网页制作基础 1利用模板创建网