1、 PHPWeb程序设计教程与实验 第2章HTML基础 第2章HTML基础 2 1HTML文档结构2 2HTML基本标记的使用2 3超链接标记2 4HTML表格2 5HTML表单2 6DreamweaverMX2004的使用 2 1HTML文档结构 在万维网中传送的文档 绝大部分使用超文本标记语言编写 这些文档称为HTML文档 在基本HTML文档中 只允许两种元素存在 一种是HTML标记 另一种则是普通文本 2 1HTML文档结构 一个简单的HTML文档的组成结构如下 网页的标题文档主体 正文部分 2 1HTML文档结构 一个完整的HTML文档通常由以下三部分组成 1 HTML标记格式 2 头部
2、信息格式 3 文本体格式 2 1HTML文档结构 1 HTML标记 这是定义HTML文档开始与结束的标记 也是HTML文档中最先出现的标识 表明这个文件的内容是用HTML语言来实现的 它必须成对出现 分别表示HTML文件的起始和结束 在容器标记中又包括以下和两个部分 2 1HTML文档结构 2 头部信息 这一部分用来说明文档标题以及该页面的其他信息 它构成HTML文档的开头部分 在此标记对之间可以使用 等标记 这些标记都是描述HTML文档相关信息的标志 标志对之间的内容是不会在浏览器的框内显示出来的 但是其内容应该尽量简短 2 1HTML文档结构 3 文本体格式 这部分说明HTML文件的主体内
3、容 在浏览器的客户区中显示 这是页面开发者的编写HTML文档的主要部分 2 1HTML文档结构 对于HTML标记的约定 超文本标记是用一对尖括号 括起来的文本串 例如第一行的 超文本标记一般成对出现 用带 的标记结束 成对出现的超文本标记也称容器元素 有些标记只有起始标记而没有结束标记 也称空元素 超文本标记可以忽略字母的大小写 构成容器元素的一对标记可以写在不同行 标记属性的相对位置不受限制 超文本标记的注解部分可以用来表示 它可以放在源文件的任何位置 因为它对网页效果设置没有任何影响 但其目的是为了增强文件的可读性 2 2HTML基本标记的使用 2 2 1Head容器的标记2 2 2Bod
4、y容器的标记 2 2 1Head容器的标记 标记主要用来提供网页文件的整体信息 包括标题栏名称 文件的网址 所采用的文档编码等 标记用来告知浏览器这是文件标题的开头 最后使用标记告知浏览器这是文件标题的结束点 2 2 1Head容器的标记 HTML文档的head是一个容器元素 在head容器元素中允许出现以下元素 1 title元素2 link元素3 meta元素4 base元素5 script元素 2 2 1Head容器的标记 1 title元素格式 标题文字title元素包含文档的标题 它不显示在浏览器窗口中 只显示在浏览器标题栏中 在起始标志 和结束标志 间 可以放入简述文档内容的标题
5、如果没有title元素 浏览器的标题栏将显示网页的文件名 2 2 1Head容器的标记 2 link元素格式 link元素在当前文档和另一文档之间建立链接关系 name属性给链接起一个名字 rel属性描述了链接的类型 href属性指向相关的文档 表示链接一个外部CSS文件default css如下 2 2 1Head容器的标记 3 meta元素格式 meta元素通常用来为搜索引擎robots定义页面主题 或者是定义用户浏览器上的cookie 它可以用于鉴别作者 设定页面格式 标注内容提要和关键字 还可以设置页面的自动刷新时间间隔 秒 等 2 2 1Head容器的标记 4 base元素格式 ba
6、se元素指定一个显式URL用于解析对于外部源的链接和引用 如图像和样式表 当用户使用相对URL请求文档时 超链接也会正确地执行 Target指定文档中所有链接的默认窗口 该属性主要用在使用框架结构的网页中 使用框架结构 同一浏览器窗口中可以容纳多个网页 同时在若干不同的框架窗口中显示 2 2 1Head容器的标记 5 script元素script元素在文档中放置一个脚本 这个元素可以在HTML文档的HEAD或BODY中出现任意多次 脚本可以在script元素中或外部文件中被定义 2 2 2Body容器的标记 标记是HTML文件最重要的部分 它是一个容器元素 包含在其中的内容将显示在浏览器的主窗
7、口中 容器元素中可以包含下表中的常用元素 2 2 2Body容器的标记 在HTML中 需要使用元素的属性对页面进行一个整体的规划和设置 例如页面的背景颜色 背景图案 页面留白以及大部分文字的颜色等等 例如在百度搜索引擎的主页中 其元素的定义如下 body元素本身的属性可以分为3类 如下表所示 2 3超链接标记 HTML用来表示超链接 英文叫anchor 一个链接的基本格式如下 链接文字表示一个链接的开始 表示链接的结束 可指向任何一个文件源 网页 图片 影视文件等 href属性则表示这个链接文件的路径 链接分为本地链接 URL链接和目录链接 2 3超链接标记 超链接标记的几个常用属性 1 ta
8、rget属性2 title属性3 name属性4 链接到email地址 2 3 1本地链接 对同一台机器上的不同文件进行的连接称为本地链接 它使用UNIX或DOS系统中文件路径的表示方法 采用绝对路径或相对路径来指示一个文件 1 以绝对路径表示 文件的链接 2 以相对路径表示 文件的链接IP地址 2 3 2URL链接 URL是英文UniformResourceLocators 统一资源定位器 的缩写 是专为标识Internet网上资源位置而设的一种编址方式 通过它可以以多种通讯协议与外界沟通来存取信息 URL地址一般由三部分组成 例如 Internet上的通讯协议通常包括以下几种 2 3 3目
9、录链接 目录链接可以直接指到某一个文件的上部 下部或中央部分 其制作方法是 在各种链接的各个要素中 首先把某段落设置为链接位置 使用name属性 它可以跳转到一个文件的指定位置 格式1 然后 设定一个href指向此链接部分的文件 格式2 链接文字 2 4HTML表格 表格中所有行和列及单元格中的内容必须被包含在一对和标记中 其基本结构如下 2 4 1表格定义标记 1 表格的标题表格标题的位置 可由align属性来设置 其位置分别由表格上方和表格下方 设置标题位于表格上方 设置标题位于表格下方 2 4 1表格定义标记 2 元素元素表示表格中的行标记 表格中的每一行都必须包含在一对标记中 行标记的
10、一般形式是 在标记中有两个属性 align指定该行中单元格的对齐方式 如左对齐 居中以及右对齐 bgcolor指定该行的背景颜色 2 4 1表格定义标记 3 元素单元格是表格的基本组成元素 一个td元素表示表格中的一个单元格 包含在元素内的多个元素构成表格的一行 单元格的一般形式是 2 4 1表格定义标记 3 元素在标记中的属性如下 width指定单元格的宽度 height指定单元格的高度 align指定单元格水平对齐方式 valign指定单元格垂直对齐方式 bgcolor指定单元格的背景颜色background指定单元格的背景图案rowspan指定单元格的行跨度colspan指定单元格的列跨
11、度 2 4 2表格属性的设置 1 表格的大小一般情况下 表格的总长度和总宽度是根据各行和各列的总和自动调整的 如果我们要直接固定表格的大小 可以使用下列方式 width和height属性分别指定表格一个固定的宽度和长度 n1和n2可以用像素或百分比来表示 例如定义一个长为200像素 宽为100像素的表格 2 4 2表格属性的设置 2 表格的边框边框是用border属性来设定的 它表示表格的边框风格 将border设成不同的值 有不同的效果 在作为布局使用时往往取默认值 0 即不显示表格的边框 在 1时 表格边框显示成三维的状态 书写格式为 2 4 2表格属性的设置 3 单元格间距单元格与单元格
12、之间的线为格间线 它的宽度可以使用中的cellspacing属性加以调节 格式为 表示要取用的像素值还可以在中设置cellpadding属性 用来规定内容与格线之间的宽度 格式为 表示要取用的像素值 2 4 2表格属性的设置 4 表格内文字的对齐方式表格中数据的排列方式有左右排列和上下排列两种 左右排列由align属性来设置 上下排列则由valign属性来设置 格式参照标记 为left center right之一 为top middle bottom baseline之一 2 5HTML表单 2 5 1表单标记结构2 5 2单行文本框和多行文本框2 5 3命令按钮2 5 4单选按钮2 5 5
13、复选框2 5 6下拉列表框2 5 7隐藏域 2 5 1表单标记结构 HTML表单 Form 是HTML的一个重要部分 主要用于采集和提交用户输入的信息 表单在Web网页中用来给访问者填写信息 从而能获得用户信息 使网页具有交互的功能 HTML表单标记的基本结构如下 表单主体 2 5 2单行文本框和多行文本框 单行文本框允许用户输入一些简短的单行信息 比如用户姓名 密码等 格式如下 多行文本框主要用于输入较长的多行文本信息 格式如下 2 5 3命令按钮 命令按钮通常用于完成一定的操作 这由按钮的type属性值而确定 格式如下 type属性指定按钮的类型 其值有三种 值为 Submit 表示将表单
14、的信息提交给表单的action所指向的文件来处理 值为 Reset 表示清除表单的数据 值为 Button 为一般按钮 不产生任何操作 value属性值是显示在按钮上的文字 2 5 4单选按钮 使用单选按钮 让用户在一组选项里只能选择一个 格式如下 2 5 5复选框 复选框允许用户在一组选项里 选择一个或多个选项 格式如下 checked是可选的 表示初始时选中复选框 2 5 6下拉列表框 下拉列表框既可以用做单选 也可以用做复选 如果要变成复选 加上muiltiple即可 用户用Ctrl来实现多选 格式如下 文本1 文本n 2 5 7隐藏域 隐藏域是指在表单上不显示任何内容 它允许表单使用n
15、ame和value属性一起传送 预先设置好的信息 格式如下 符1 frameset及Iframe 二者皆为模块化网页开发的工具 允许在WEB中插入WEB 后者更灵活 符2 动画的插入OBJECT 可通过DREAMWEAVER的插入操作完成 之后再参考代码进行修改 2 6DreamweaverMX2004的使用 DWMX2004 MacromediaDreamweaverMX2004 是Macromedia最新开发的HTML编辑器 用于对Web站点 Web页和Web应用程序进行设计 编码和开发 DWMX2004包含有一个崭新 简洁 高效的界面 支持最新的Web技术 包含HTML检查 HTML格式
16、控制 HTML格式化选项 HomeSite BBEdit捆绑 可视化网页设计 图像编辑 全局查找替换 全FTP功能 处理Flash和Shockwave等富媒体格式和动态HTML 基于团队的Web创作 2 6 1DreamweaverMX2004简介 DreamweaverMX2004的新功能 1 简洁高效的设计和开发界面 界面更易于使用 可使您的工作效率和工作质量均得到提高 2 插入 栏的改进 简洁高效的新外观 占用更少的工作区空间 还新增加一个 收藏 类别 用户可以对 插入 栏进行自定义 将最常使用的对象放置在该栏上 表格编辑可视化 在表格中进行列调整操作时能看到实际效果 3 用户界面改进
17、可得到最大的可用工作区 更清晰地显示上下文和焦点 更易于使用和更具逻辑性 4 起始页 使用户能够访问最近使用过的文件 创建新文件和访问DWMX2004资源 起始页会在用户启动DWMX2004或尚未打开文档时显示 2 6 1DreamweaverMX2004简介 5 保存桌面选项 使用户可以选择当您重新启动DWMX2004时重新打开您上一次使用的文档 6 完全支持Unicode DWMX2004支持InternetExplorer所支持的所有文本编码方式 用户可以使用几乎所有您的系统中安装的语言字体 DWMX2004会正确地显示和保存这些字体 7 安全FTP 使用户能够完全加密所有文件传输 8 新式的页面布局和设计环境 9 增强的CSS功能 提供了一个更为精巧的方法来进行样式设计及提高设计交互性 10 动态跨浏览器验证 在用户保存文档时自动检查当前文档的跨浏览器兼容性问题 2 6 2DreamweaverMX2004的站点管理 1 定制站点在Dreamweaver中制作网站 必须定义一个本地站点 它是用户计算机上任意位置的一个文件夹 用于存放网站的所有文件 2 站点管理创建一个站点以后 可以随时对它进行编辑 复制 删除等操作 2 6 3网页文件的基本操作 1 创建网页2 打开网页3 保存网页4 设置首页5 站点地图
