《高等教育html》PPT课件.ppt

HTML 文本语法 图片语法 超链接语法 表格语法 表单语法 框架语法 HTML语法 一. HTML语法概述 1.网页的基本结构 页面内容 标题栏 菜单栏 地址栏 状态栏 2.HTML的编写方法 1.手工直接编写：由于HTML语言编写的文件是标准的ASCII文 本文件，所以可以使用任意一个文本编辑器来打开并编写 HTML文件，如记事本。 2.使用可视化软件：Microsoft 公司的Frontpage、adobe公司 的dreamweaver等软件均能以可视化的方式进行网页的编辑制 作。 3.由web服务器一方实时动态生成：这需要进行后端的网页变 成来实现，如ASP、PHP等，一般情况下都需要数据库的配合 。 3.HTML文件的基本结构 以 开头 文件标题 : 表头区 : : 主体区 以 结尾 标签标记 HTML 文档的开始和结束这部分包括标题和其他说明信息。包括在 标签内这部分包含文本、图像和链接。它包括在 标签内 4.编写的注意事项： 1）“”是所有标记的开始和结束，元素的标记要用这种括号括起 来，并且结束的标记总是在开始的标记前加一个斜杠。 2）标记与标记之间可以嵌套。 3）在源代码中不区分大小写，,都是正确 的。 4）回车键和空格键在源代码里不起作用。 5）HTML标记中可以放置各种属性。 6）如果需要在源代码中添加注释，便于代码阅读，可以以“ ”结束。 5.HTML 的基本语法 (1)HTML的标注格式 通常HTML的标注是以成对的方式出现的，其格式如下： 标注名称 属性名称参数(value) 内容 /标注名称 凡是在 和 说明：宣告此文件为HTML文件与结束HTML文件. HEAD语法： 说明：标示HTML文件标头的开始与结束，可省略不写. 标题语法： 说明：用来设定HTML文件的标题名称，这个标题会在浏览器的左 上方显示出来. 二.HTML中的文本的语法 1.文字颜色表示法 COLOR=“#RRGGBB”，R、G 、B=0F 2.字体大小变化 设定字体的大小，通常用于标题处。 语法： ，I=16, 是最大的字，是最小的字。 设定字体的大小，通常用于文字变化。 语法： 属性： 文字大小：SIZE=“n”，n=17 3.字体样式 设定字体样式 语法： 说明：这对标签是用来将表示符号内的文字以粗体字显示。 语法： 说明：这对标签是用来将表示符号内的文字以斜体字显示。 语法： 说明：这对标签是用来将表示符号内的文字以有加底线的 文字显示 4.标题字的对齐属性 语法：Align属性见下表： 属性描述 标题居左对齐 标题居中对齐 标题居右对齐 标题字的对齐属性 5.字体标记 基本语法：标记 属性描述 Face 字体 Size 字号 Color 颜色 标记属性 6.段落标记 在HTML语言中，有专门的标记表示段落。所谓段落，就是一段 格式上统一的文本。在文档窗口中，每输入一段文字，按下回车 键后，就自动生成一个段落。按下回车键的操作通常被成为硬回 车，可以说，段落就是带有硬回车的文字组合。在HTML中，段 落主要由标记定义。 基本语法: 使用成对的标记来包含段落 使用单独的标记来划分段落 段落标记的对齐属性Align 基本语法： 7.换行标记 基本语法： 一个换行使用一个，多个换行可以连续使用多个标 记。 不换行标记： 8.水平线标记 水平线自身具有很多属性，宽度、高度、颜色、排列对齐 基本语法： 9.HTML中的列表语法 HTML提供一些列表式的卷标可以做出简单列表。 有编号列表(Ordered List) 基本语法： 文字序列一 文字序列二 说明：在每一个序列之前自动加上由1.开始的数字编号. 无编号列表（Unordered List） 语法： 有序文字一 有序文字二 说明：在每一个序列之前自动加上的符号. 叙述式列表(Definition List) 语法： 文字或文字 说明：简单的项目格式编排，使用可以让字不缩排以表 示为上一层， 会让字往右缩排表示成下一层 10.背景语法： 背景图片：BACKGROUND=”图片所在之URL” 背景颜色：BGCOLOR=”#RRGGBB”，R、G、B=0F 文字颜色：TEXT=”#RRGGBB”，R、G、B=0F 超连接颜色：LINK=”#RRGGBB”，R、G、B=0F 浏览器超连接颜色：VLINK=”#RRGGBB”， R、G、B=0F 使用中超连接颜色：ALINK=”#RRGGBB”， R、G、B=0F 三.HTML中图片的相关语法 1. 基本语法： 2.属性： SRC = “图片名称” Alt 是为了在浏览器中指定代替图片显示的文字。 Width 宽度 Height 高度 Border 边框 Vspace 垂直间距 Hspace 水平距离 Align 排列 四.HTML中的超链接语法 n 基本语法： 标注名称 属性名称参数内容/标注名称 定义了链接指向的地 址。这个地址通常为 一个Web页面，但也 可以是一幅图片，一 个多媒体文件，一个 office文档，一个电 子邮件地址或一个程 序。 给链接命名 ，多用于锚 点连接中 定义了提示字 符，对图片超 链接很有用 定义了链接指向 目标的打开方式, 有四种打开方式. TARGET属性 打开方式 _self 在链接所在的当前窗口中打开 _blank 在一个新窗口中打开 parent 在父框架中打开 top 在整个浏览器的窗口中打开 外部链接-绝对路径： 内部链接-相对路径:news/default.htm 绝对路径对文件提供完全的路径，包括适用的协议， 当链接到其他网站的文件时，必须使用绝对路径。 这种地址形式利用的是构建链接的两个文件之间的相对关系， 不受站点文件夹所处服务器位置的影响,因此这种书写形式省略 了绝对地址中的相同部分。这样做有他的好处：站点文件夹所 在的服务器地址发生改变时，文件夹的所有内部链接都不会出 问题。 相对路径的使用方法： q 如果链接到同一目录下，则只需要输入要链接文档的名称： href=“a.htm” q 要链接到下一级目录中的文件，只许先输入目录名，然后加“/” ，再输入文件名: href=“book/news.htm” q 如链接到上一级目录中的文件，则先输入“/”，再输入文件名 :href=“/index.htm” 文档相对链接 birthdaysalbum/second.html Root folder Photo album WWW schoolalbum.html Birthday album 根文件夹相对链接 /photoalbum/birthdaysalbum/second.html 绝对链接 /photoalbu m/birthdaysalbum/second.html Index.html second.html 文档的相对链接 /schoolalbum.htm 五.HTML中的表格语法 表格标 记 标记描述 表格标记 行标记 单元格标记 表格 行 列 列标题 在 HTML 文档中，广泛使用表格来存放网页上的文本和图像 单元格 表格标题 基本语法： 使用表格 姓名 性别 分数 Robert M 80 . 创建表格 代表表格的开始，border=2表示边 框尺寸为2 表示行，这是表格的第一行，有三列 数据，代表列 表格的第二行，有三列数据 表格的第三行，也有三列数据 学员档案信息 姓名 性别 分数 Robert M 80 . 表格的标题 表示表格标题 表示行或列标题，粗体显示 表格的第二行，有三列数据 表格的第三行，有三列数据 学员档案信息 姓名 性别 分数 Robert M 80 . 表格的对齐方式 整个表格居中 姓名列默认左对齐 性别列居中 分数列右对齐 合并单元格(跨 列) 创建表格 第一学期 第二学期 数学 科学 英语 数学 科学 英语 98 95 80 95 87 88 COLSPAN=“n” 属性表示 跨多少列 合并单元格(跨 行) 创建表格 螺母 螺栓 锤子 第一季度 一月 2500 1000 1240 二月 3000 2500 4000 . ROWSPAN=“n” 属性表示 跨多少行 学员档案信息 姓名 性别 分数 Robert M 80 Mary F 18 表格的背景色和尺寸设 置 表格的颜色设置： 表格的背景色 行的背景色 列的背景色 颜色值可以采用 RGB（red/green/blue）红绿蓝十六进制值表 示，如红色#FF0000, 或是一些预定义色彩名称：red ，blue，yellow等。 表格的尺寸设置： 例如： 表示一个长为200像素，宽为100像素的表格。 表示一个宽为窗口的20%，高为窗口的10%的表格。 18 80 分数 F M 性别别 Mary Robert 姓名 学员档案信息 课堂测验:请编写HTML代码 六.HTML中的表单语法 1. 表单标记 表单要以标记开始，以标记结束。 表单的各种元素及它们的属性都要放在这两个标记之间。 2.属性： NAME ：表单的名称。 METHOD :定义表单结果从浏览器传送到服务器的方法，一般有 两种方法：get、post。 ACTION ：用来定义表单处理程序（一个ASP、CGI等程 序）的位置（相对地址或绝对地址） 标记内的标记：， ,。 2.输入标记 VALUE属性和NAME属性分别给出了控件取值和控件名称。 标记的TYPE属性见下表： TYPE表单控件类型TYPE表单控件类型 Text单行文本框submit提交按钮 Password密码输入框Reset重置按钮 Checkbox复选框File上传按钮 Radio选项按钮Hidden隐藏按钮 button普通按钮image图象按钮 BUTTON（按钮） Type 属性： submit：提交按钮 reset：重置按钮 button：普通按钮 性别：男性 女性 单选按钮和复选框 你喜欢以下哪些明星： 酒井法子 郑秀文 BonJovi 身份证号 TEXT（文本） 密 码： 请填写您的工作经历 3.文字域标记 这个标记用来制作多行的文字域，可以在其中输入更多的 文本。 基本语法: 属性： name：文字域的名称 rows：文字域的行数 cols：文字域的列数 value：文字域的默认值 2004 年欧锦赛 预测“最佳球员” Ronaldo Beckham Zidane 预测大赛亚军 巴西 法国 阿根廷 预测谁将成为 2004 年欧锦赛冠军？ 阅读代码，请问网页中的显示结果？ 下拉菜单 谁是 2002 年世界杯冠军？ 西班牙 法国 巴西 德国 列表选项 4.菜单和列表标记, 菜单是一种最节省空间的方式，正常状态下只能看到 一个选项，单击按钮打开菜单后才能看到全部选项。 列表可以显示一定数量的选项，如果超出了这个数量， 会自动出现滚动条，浏览者可以通过拖动滚动条来查看各 选项。 基本语法： option value=”value” selected选项 option value=”value” selected选项 属性： name：菜单和列表的名称 size：显示的选项的数目 multiple：列表中的项目多选 value：选项值 selected：默认选项 七.HTML中的框架语法 1.基本语法： . . 框架 广告栏 顶部框架(top.htm) 商品详细介绍 右侧框架 (main.htm) 商品导航 左侧 框架 (left.htm) 框架 顶部窗口显示广告 top.htm 显示详细内容 main.htm 左侧窗口 显示 导航链接 left.htm 2.属性设置 COLS：垂直切割画面，可以一次切成左右两个画面，也可以切成 三个， COLS=“30,*,50” （数字随便自己调），依此类推，四个 以上当然就是四组数字！其值可以用像素、分比、相对长度来定 义，“* ”表示剩下的部分。 ROWS：就是横向切割画面，也就是将画面上下分开，切法同上。 Scrolling：设定是否要显示卷轴，YES是要显示卷轴，NO是无论如 何都不要显示，AUTO是视情况显示。 Noresize：设定不让使用者可以改变这个框架的 大小，如果没有设定这个参数，使用者可以很容 拉动框架，改变其大小。 Noframeset：浏览器不支持或禁用框架显示时， 用标记，用来定义当框架不能被显 示时