web程序设计第2章.ppt

第二章HTML基础 HTML基础 一 HTML的概念1 什么是HTML 超文本标记语言 HTML HyperTextMarkupLanguage 是用于设计网页源文件 网页文档 的语言 每一个页面的代码保存为一个网页源文件 htm文件 八十年代初 HTML由万维网联盟 W3C WorldWideWebConsortium 制订 HTML包括一些定义页面内容和格式的符号 称为标记 它能够将文本 图像 声音和动画结合在一个网页文档中 这些文档可以通过Web浏览器显示 还可以通过超链接以访问其它的信息资源 后来 进一步推出了XML 扩展标记语言 该语言可以由程序员自己定义标记 HTML基础 2 什么是标记 标记是网页文档中的一些有特定意义的符号 这些符号指明如何显示文档中的内容 标记总是放在三角括号中 大多数标记都成对出现 有开始标记和结束标记 结束标记和开始标记所用的字符相同 只是前面加一个斜杠 例如 用于标记一个自然段 标记可以具有相应属性即各种参数 如size color text width和noshade等 例如 HTML基础 标记通常可以分成两种 第一种用来指定网页上的元素或元素的样式 例如 指定一个自然段及其字体和颜色 自然段内容 第二种用来指向其它的资源 例如 指定一个链接地址 武汉大学指定一个图片文件 HTML基础 3 什么是超文本 超媒体和超链接 超文本是网页上具有链接功能的文字 例如 娱乐新闻电影 超媒体是网页上具有链接功能的多媒体 超链接是网页上连接其它网页或网页上指定位置的超文本和超媒体 超链接分为文字和图像 包括动画 两种 网页中的一段文字 一副图像或图像的某一个部分等都可以定义为超链接 HTML基础 二 如何编写和浏览HTML网页文档启动IE 然后使用 查看 菜单中的 源文件 菜单项 进入记事本 就可以输入网页源文件了 在输入完之后 另存为 htm文件 或者直接进入记事本 输入网页源文件 在输入完之后 另存为 htm文件 选择保存类型为 所有文件 在浏览器中输入该文件名 就能浏览HTML源文件的网页效果 HTML基础 例如 学生选课系统网页制作练习 演示 HTML基础 三 HTML的常用标记1 HTML文档的结构标记用来指明一个HTML文档的基本结构 1 文件标记 整个HTML文档内容均在 标记之中 2 头部标记 整个HTML文档分头部和主体部分 头部使用 标记标识 凡是在此标记之内的内容 例如标题等 均属于头部信息 头部信息不显示在Web页中 HTML基础 3 头部标题标记 在此标记之间的内容将作为标题显示在浏览器的标题栏 注意 标记只能放在 标记之间 4 主体标记 主体是Web页的主要部分 用 标记定义的信息将显示在Web页中 例如 见下页 HTML基础 结构标记示例斜体字文本可以建立该网页源文件test2 1 htm 演示 HTML基础 2 格式标记 1 段落标记 标记用来创建一个段落 在此标记之间的文本将按照段落的格式显示 2 换行标记 是一个很简单的标记 它没有结束标记 用来创建一个换行 3 两边缩进标记 在 标记之间的文本将按照两边缩进的方式显示 下面一一介绍在 标记之间常用的各种标记 HTML基础 4 列表标记 用来创建一个列表 用来创建列表中的上层项目 用来创建列表中最下层项目 和都必须放在标记之间 例2 2 创建一个普通列表 HTML基础 该网页的HTML源文件test2 2 htm如下 一个普通列表中国城市北京上海广州美国城市华盛顿芝加哥纽约 演示 HTML基础 5 标有数字或圆点的列表标记 标记用来创建一个标有数字的列表 标记用来创建一个标有圆点的列表 标记只能在或标记之间使用 此标记对用来创建一个列表项 若放在之间 则每个列表项加上一个数字 若在之间 则每个列表项加上一个圆点 HTML基础 例2 3 标有数字的列表与标有圆点的列表 HTML基础 该网页的HTML源文件test2 3 htm如下 标有数字与圆点的列表中国城市北京上海广州美国城市华盛顿芝加哥纽约 演示 HTML基础 6 分段标记 标记对用来排版大块HTML段落 也用于格式化表 此标记的用法与标记非常相似 同样有align对齐方式属性 align属性 它用来说明对齐方式 语法是 align可以是Left 左对齐 Center 居中 和Right 右对齐 三个值中的任何一个 例如 表示标记中的文本居中显示 HTML基础 3 文本标记 1 预处理标记 表示标记之间的文本原有格式如word格式仍有效 2 六级标题标记 是最大的标题 则是最小的标题 如果要在HTML文档中输出标题 那麽可以使用六对标题标记的任何一对 HTML基础 3 字体标记 之间的文本以黑体字的形式输出 之间的文本以斜体字的形式输出 之间的文本以下加一划线的形式输出 4 强调加重标记 用来输出需要强调的文本 通常是斜体加黑体 则用来输出加重文本 通常也是斜体加黑体 HTML基础 5 字体的大小颜色标记 可以指定输出文本的字体大小 颜色 它主要两个属性size和color size属性用来指定字体的大小 可以取值 1 1和 1 color属性用来指定文本的颜色 颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色名称 例如 ff0000 引号内的rrggbb是用六位十六进制数字表示的RGB 即红 绿 蓝三色的组合 颜色 ff0000对应的是红色 HTML基础 Html语言所给定的颜色名称有 Black White Green Maroon Olive Navy Purple Gray Yellow Lime Agua Fuchsia Silver Red Blue和Teal 例如 size取值 1 color取值 red 时的文本表示标记之间的文本按大小为 1 颜色为红色显示 HTML基础 例2 4 文本标记的综合示例 HTML基础 该网页的HTML源文件test2 4 htm如下 文本标记的综合示例最大的标题使用h3的标题最大的标题黑体字文本斜体字文本下加一划线文本强调的文本加重的文本size取值 1 color取值 red 时的文本 演示 HTML基础 4 链接标记 1 超链接标记 在标记对之间可指定作为超链接的文本或图像 使用标记指定图像 例如 指定超链接及其文本 武汉大学网站 武汉大学网站或者 指定超链接及其图像 d pic1 gif 在上例中 href的值是武汉大学的网址 href 缩写 httpreference含义为http引用 HTML基础 href的值也可以是mailto 形式 即发送E Mail形式 语法为 这就创建了一个自动发送电子邮件的链接 mailto 后边紧跟想要自动发送的电子邮件的地址 即E Mail地址 例如 链接到我的电子信箱abc 这是我的电子信箱 E Mail信箱 HTML基础 还具有target属性 此属性用来指明显示的目标窗口 如果不使用target属性 当浏览者点击了链接之后将在原来的浏览器窗口中显示HTML文档 若target的值等于 blank 点击链接后将会打开一个新的浏览器窗口显示HTML文档 例如 进入 并且在新窗口中显示网页 在新窗口中显示 HTML基础 2 标签标记 标签标记需要结合标记使用 name属性不可缺少 标记用来在同一网页中创建一个标签 即做一个记号 即在同一网页中创建链接 以便转到同一网页中有标签的地方并显示 例如 在页顶创建一个标签此处创建了一个标签 要找到标签所在地 就必须使用标记 例如 点击此处将转到标签 Top 的地方显示 注意 href属性的值若是标签名 必须在标签名前头加一个 号 HTML基础 例2 5 链接标记的综合示例链接标记的综合示例创建标签处欢迎想要学习网页制作的同学访问网站武汉大学网站 HTML基础 本网站的主要内容在新窗口中显示欢迎给我来信 我的E Mail是 abc 点击此处回到标签处 可以建立 例2 5 的HTML源文件和作为超链的图像文件d Inetpub wwwroot web gif 在浏览器中显示执行结果 5 图像标记和多媒体标记 1 图像标记 将图形文件嵌入到网页文档中的当前位置 例如 网页文档与图形文件logo gif在同一个目录下 则可以将代码写成 假如图形文件放在网页文档所在目录的一个子目录 images 下 则代码应为 此外 标记还有alt 文字代替 align 对齐 border 边框 width 宽度 和height 高度 属性 HTML基础 演示 假如图形文件放在网页文档所在目录的上层目录 如home 下 则相对路径就必须是准网址 即用 表示网站 后边紧跟文件在网站中的路径 例如 home是网站下的一个目录 则代码应为 例如 home是网站下的目录king下边的一个子目录 则代码应为 HTML基础 例2 6 图像标记举例图像标记示例 HTML基础 演示 若事先在网站根目录中存放一幅图像logo468 60 gif 则可以在网页中显示它 alt 网页制作 属性表示在网页中可以用文字 网页制作 代替该图像先行显示出来 2 多媒体标记A 设置音乐播放的链接在Windows中 可播放的音乐文件格式常有au mid及wav三种 若要提供音乐文件让浏览者播放 则可建立指向音乐文件的超链接 例如 甜美音乐B 设置影像播放的链接常见的影像文件有mov mpg和avi 可建立超链接到影像文件 当浏览者单击超链接时 将会调用WindowsMediaPlayer 进行影像文件播放 例如 本市交通 HTML基础 C 直接将音乐或影像嵌入网页可以用标记 即 若 播放次数 设为TRUE 则无限次播放 直到单击关闭或停止 若设为NO 默认值 则只播放一次 D 播放网页背景音乐可运用标记 即 若 次数 设为Infinite 音乐将循环播放 直到网页关闭为止 HTML基础 6 表格标记 用于制作表格或网页结构 1 创建一个表格 2 和 创建表格中的每一行和每一格 3 创建表格头 例2 7 用表格标记创建下列表格 HTML基础 表格标记示例意大利英格兰西班牙 HTML基础 cellpadding设置格子边框与其内容之间的大小 valign是垂直对齐方式 colspan设置一个格子跨占的列数 rowspan设置一个格子跨占的行数 AC米兰佛罗伦萨曼联纽卡斯尔巴塞罗那皇家社会 HTML基础 尤文图斯桑普多利亚利物浦阿申纳皇家马德里 HTML基础 拉齐奥国际米兰切尔西米德尔斯堡马德里竞技 HTML基础 演示 7 表单标记 用于制作对话框 1 表单开始和结束标记 2 输入区标记 3 列表框标记 4 多行文本框标记 分别介绍如下 1 标记用来创建一个表单 也即定义表单的开始和结束位置 在标记对之间的一切都属于表单的内容 HTML基础 标记具有action method和target属性 action的值是处理程序的程序名 例如 当用户提交表单时 服务器将执行网站 HTML基础 2 标记用来定义一个用户输入区 用户可在其中输入信息 此标记必须放在标记对之间 标记中共提供文本框 按钮 复选框 单选钮等八种类型的输入区域 例如 HTML基础 3 标记用来创建一个下拉列表框或可以复选的列表框 此标记对用于标记之间 具有multiple name和size属性 例如 请选择最喜欢的男歌星 刘德华张学友郭富城黎明 HTML基础 标记指定列表框中的一个选项 此标记具有selected和value属性 value指定选项值 这个值要传送到服务器上 服务器正是通过调用区域的名字的value属性来获得该区域选中的数据项的 4 标记创建可以输入多行的文本框 此标记对用于标记对之间 有name cols和rows属性 name cols和rows属性分别用来设置文本框的名称 列数和行数 列与行以字符数为单位 例如 HTML基础 例2 8 建立一个输入密码 以及具有确认和重输按钮的表单 请输入密码 HTML基础 8 其他常用标记 1 空格标记 nbsp建立HTML源文件时 若用空格键输入多个空格 都将被视为一个 因此 如果想要输入多个空格时 必须用多个标记 nbsp 2 原始排版有效标记和若要使HTML源文件保留原始的文件排版方式 如 Enter表示换行等 只需在该文本前加入标记以及在文本结束后加上标记 即可使浏览器显示文件原始排版方式 HTML基础 例如 在HTML源文件中使用空格标记窗里窗外 HTML基础 演示 3 自动切换标记标记能使网页显示几秒种后 自动切换到另一网页 语法如下 说明 A 标记应当置于标记之后 B 设置http equiv属性等于 refresh 表示自动更新 C 秒数 URL 文件名称或网址 用于指定几秒后将执行自动更新 以及更新后所连接的网页地址与名称 HTML基础 4 水平线标记标记是在HTML文档中加入一条水平线 它可以直接使用 具有size color width和noshade属性 size是设置水平线的厚度 而width是设定水平线的宽度 默认单位是像素 noshade属性用来加入一条没有阴影的水平线 例如 HTML基础 END