第2章 HTML语言基础-YS.ppt

网页设计与制作 第1章网页设计概述第2章HTML语言基础第3章Dreamweaver基础第4章网页中的基础元素第5章网页页面布局第6章网页中的层和时间轴第7章表单的应用第8章在网页中使用行为第9章CSS样式使用第10章网页中的多媒体应用第11章模板和库第12章站点测试和发布第13章Flash简介第14章Fireworks简介 知识目标 了解HTML文件的基本结构掌握HTML中文本的编辑及图像的语法掌握HTML中各种设置超级链接的语法掌握HTML中表格和框架的基本语法8 能力目标 掌握进行文本及图像的编辑操作掌握创建各种超级链接的操作能够编写简单的HTML网页掌握HTML文件中表格和框架的使用 第2章HTML语言基础 2 1HTML概述2 2文本的编辑2 3图像编辑2 4建立超链接2 5表格与框架本章小结 第2章HTML语言基础 2 1 1HTML简介2 1 2HTML语法结构 2 1HTML概述 去掉显示限制 HTML HyperTextMarkupLanguage 又称超文本标识语言 是一种标识性的语言 是网页设计的最初语言 文件的扩展名 html 或 htm 例2 1简单的HTML文档长大欢迎您 这里是荆州旅游网 我们带您畅游荆州 由 组成的就是标记 在HTML语言中标记分 单标记 和 围堵标记 2 1 1HTML简介 2 1HTML概述 1 围堵标记格式 应用对象2 单标记格式 只有起始标记 没有结束标记 最常用的单标记是 它表示段内换行 3 标记属性格式 各属性间无前后顺序 属性也可省略 当省略属性时取标记的默认值 2 1 1HTML简介 2 1HTML概述 HTML文档的基本结构 文件开始标头区开始 标题区标头区结束文件主体内容开始文件主体内容 文件主体内容结束文件结束其中之间表示这是个网页文件 是必有的标记 注释标记 不被显示出来 2 1 2HTML语法结构 2 1HTML概述 实例 欢迎访问长江大学主页YangtzeUniversity 中央与湖北省共建 省属规模最大 学科门类最多的综合性大学 STYLE11 FONT SIZE 12px color 666666 2 2 1段落标记2 2 2文本标记2 2 3标题显示等级2 2 4列表 2 2文本的编辑 1 段落 基本语法格式为 其中参数align用于设定段落的位置是靠左 靠右还是居中 默认值是靠左 除align之外还有其他参数如class class参数是可选项 如果没有将按照默认值显示 2 换行 现在单标记 放在一行的末尾 可以在一个段落内实现文本的强制换行 设置标记后面的文本字 图像和表格等内容显示于下一行 2 2 1段落标记 2 2文本的编辑 1 字体标记其基本语法格式为 Size 设置字体的显示字号 范围是从 1 7 size取1时最小 取7时最大 3 是默认值 Color 设置文本的颜色 值可以是颜色名 英文如red代表红色 或颜色的十六进制RGB代码 000000代表黑色 FFFFFF代表白色 Face 设置文本显示的字体 值为字体的名称 在文本的标记中还有很多常用的标记 比如表示字体效果的 黑体 斜体 加下划线 2 2 2文本标记 2 2文本的编辑 2 特殊字符HTML中除了我们上面学的的一些标记外 还有一些我们常用的特殊字符比如 这些特殊字符在HTML语言中都有对的转义符 常用的转义符与特殊字符参见下表 2 2 2文本标记 2 2文本的编辑 3 水平线标记水平线是在网页上划出一条水平的分割线 用来标记水平线 语法格式为 Size 设置水平线的高度 以像素为单位 Color 设置水平线的颜色 Width 设置水平线的宽度 单位是像素或百分比 像素是绝对大小 不会随着程序窗口的大小而改 百分比是相对于程序窗口水平线所占的比例 会随着程序窗口的大小而改变 Align 设置水平线的对齐方式 对齐方式有左对齐 居中 右对齐三种 2 2 2文本标记 2 2文本的编辑 语法格式为 标题文字n 表示不同级别的标题 n值可以是1 6中的任意数字 其中1表示的标题字体最大 6表示的标题字体最小 另外 可以用align属性设置对齐方式 常用的有三种 标题文字属性align设置标题在页面中的对齐方式 左对齐left 居中center或右对齐right 缺省时默认为left 2 2 3标题显示等级 2 2文本的编辑 使用Hn标记一级标题二级标题三级标题四级标题五级标题六级标题 在HTML中 列表常用的有 有序列表 和 无序列表 1 有序列表基本语法结构为 项目1项目2 项目n 2 2 4列表 2 2文本的编辑 1 有序列表参数解释Type 设置列表的序号类型 常用序号如下 n 1 用数字作为序号 n A 用大写字母作为序号 n a 用小写字母作为序号 n I 用大写罗马数字作为序号 n i 用小写罗马数字作为序号 Start 为可选参数 用于设置序号的起始数值 如不添加 start 则从每类序号的第一个序号开始 2 2 4列表 2 2文本的编辑 2 无序列表基本语法结构为 项目1项目2 项目nType 设置符号形状 有实心圆 小正方形 空心圆三种 具体如下 n disk 符号为实心圆 n square 符号为正方形 n circle 符号为空心圆 2 2 4列表 2 2文本的编辑 2 3 1插入图像2 3 2使用背景图像 我们在网页上经常会浏览图像 适当使用图像可以增加网页的美观 在网页最常用到的是插入图像和设置背景图像 2 3图像编辑 1 语法格式 单标记Src 指明要添加的图像所在的具体路径和文件名 路径可以是相对路径 也可以是绝对路径 例 绝对路径 完整的描述文件位置的路径就是绝对路径 对于绝对路径可以不需要知道其他任何信息就可以判断出文件的位置 相对路径 所谓相对路径 顾名思义就是当前文档与目标的相对位置 例 2 3 1插入图像 2 3图像编辑 2 图像的属性除了 src 以外 还有其他属性 可以定义图像的对齐方向 与周围元素的距离等 各属性及作用见表2 2 表2 2图像属性列表 2 3 1插入图像 2 3图像编辑 语法格式为 但通过Dreamweaver设置的背景已自动使用CSS处理 2 3 2使用背景图像 2 3图像编辑 2 4 1建立超链接2 4 2使用书签2 4 3标记新窗口和基准链接 2 4建立超链接 超链接 Hyperlink 是网页互相联系的桥梁 超链接可以看作是一个 热点 它可以从当前网页定义的位置跳转到其他位置 包括当前页的某个位置 本地硬盘或局域网上的其他文件以及因特网上其他服务器 甚至跳转到声音 图片等多媒体文件 建立超链接的标记是 语法格式为 热点url 指明链接目标的具体路径和文件名 热点 超链接标识 是网页中链接的载体 可以是文字或图像 热区等页面元素 用户点击它就会跳到超链接的目标位置 2 4 1建立超链接 2 4建立超链接 定义书签 超链接到网页中指定的位置在HTML中 首先要定义书签 然后才在链接使用 定义书签的语法格式为 书签名不能用中文 只能用英文和数字 使用书签链接其链接的格式为 超链接标识 与书签名之间不能有空格 2 4 2使用书签 2 4建立超链接 1 标记新窗口 target 语法格式为 超链接标识target属可选值为 blank 新窗口 self 覆盖本窗口 parent top 2 基准链接标记是单标记 可以改变文件中所有链接标记的参数默认值 它只能位于文件的开头部分 即标记与之间 语法格式为 2 4 3标记新窗口和基准链接 2 4建立超链接 2 5 1建立表格2 5 2表格属性2 5 3建立框架2 5 4框架属性 2 5表格与框架 表格标记有 和四个 他们的具体含义是 定义表格 是表格必须的元素 定义标题单元格 在这个单元格中的文字将用粗体表示 定义表格中的行 定义单元格 使用标记一定要放在标记内部 上述标记中 可以省略 其他三个是必须的 具体应用见例2 12 标记中可以添加属性和参数 其中border 用于设置表格的边框宽度 值为大于等于 0 的整数 当值为 0 在浏览器中显示无边框表格 无边框表格是网页布局最主要的手段 2 5 1建立表格 2 5表格与框架 除了border外 常用的表格属性参数有 定义单元格之间的距离 值为大于等于 0 的整数 单位是像素 0 表示没有间距 定义单元格内的文字或其他元素到边框的距离 值为大于等于 0 的整数 单位是像素 0 表示没有距离 定义表格的高度 值有两种单位 一是像素 表示表格高度为固定大小 一是百分比表示表格占据整个网页的高度百分比 定义表格的宽度 与高度一样有像素和百分比两种单位 定义表格边框的颜色 定义表格的背景色 2 5 2表格属性 2 5表格与框架 1 框架页的基本结构 标记一个普通的HTML文档 用于在不支持框架的浏览器中显示 用于定义分割窗口 可以设置窗口的分割方式及是否显示框架边框等 用于设置每个区域显示的内容 每个URL值指定一个事先己制作好的文件 2 5 3建立框架 2 5表格与框架 2 建立框架 1 建立纵向框架建立纵向框架的基本语法为 Cols 设置垂直分割窗口 用 分隔 它的值可以是像素值或者是百分比 代表对应的子窗体占屏幕窗口的大小 如要将屏幕分割成三个子窗口 其中两个都占整个窗口的30 那么只给开始的两个窗口赋值 语句为 代表框架剩余的部分分给最后一个子窗口 当然也可以写成 2 5 3建立框架 2 5表格与框架 2 建立横向框架建立横向框架的基本语法为 rows 这个参数用来水平分割窗口 它的值可以是数字或者是百分比 代表对应的子窗口的大小 使用方法与cols相同 3 嵌套框架嵌套框架是在己有的框架中嵌入框架的结构 利用嵌套框架可以实现窗口的横向与纵向的混合分割 嵌套框架的设置见例2 16 2 5 3建立框架 2 5表格与框