Web前端开发技术与案例教程 课件 -第三章 网络应用基础(HTML标记语言).ppt

* 第三章 HTML语言 * 本讲内容 因特网和WWW HTML简介 HTML元素 总结 本讲内容 掌握HTML的元素 图像 在 HTML 中，图像由 img 标签定义 img 是空标签，意思是说，它只包含属性，并且没有闭合标签 要在页面上显示图像，你需要使用源属性（src） 定义图像的语法是：img src=url / URL 指存储图像的位置 * img src=url / 绝对文件路径 绝对文件路径是指向文件的完整 路径L： img src=“D:\WWW\images\love.gif 相对路径 相对路径指向了相对于当前页面的文件。 img src=images/love.gif 文件路径指向了位于当前目录中 images 文件夹里的一个文件 使用相对路径是个好习惯(建议使用) 如果使用了相对路径，那么网页就不会与当前的固定路径进行绑定。所有电脑上 (localhost) 或未来的公共域中均可正常工作。 * 相对路径 ./ 代表HTML文件所在的目录 ../ 代表HTML文件所在的父级目录 ../../ 代表HTML文件所在的父级的父级目录 / 代表HTML文件所在的根目录 URL=“./img/flower.jpg” 表示html文件目录中img文件夹下的flower.jpg图片 * 插入图像 * html body h1图像/h1 p 一幅图像： img src=images/eg_mouse.jpg width=128 height=128 / /p p 一幅动画图像： img src=images/eg_cute.gif width=50 height=50 / /p /body /html 图片排列 * html body h2未设置对齐方式的图像：/h2 p图像 img src =images/eg_cute.gif 在文本中/p h2已设置对齐方式的图像：/h2 p图像 img src=images/eg_cute.gif align=bottom 在文本中/p p图像 img src =images/eg_cute.gif align=middle 在文本中/p p图像 img src =images/eg_cute.gif align=top 在文本中/p p请注意，bottom 对齐方式是默认的对齐方式。/p/body /html 图片排列 * html body p img src =images/eg_cute.gif align =left 带有图像的一个段落。图像的 align 属性设置为 left。图像将浮动到文本的左侧。 /p p img src =images/eg_cute.gif align =right 带有图像的一个段落。图像的 align 属性设置为 right。图像将浮动到文本的右侧。 /p /body /html 调整图片大小 * html body img src=images/eg_mouse.jpg width=50 height=50 br / img src=images/eg_mouse.jpg width=100 height=100 br / img src=images/eg_mouse.jpg width=200 height=200 p通过改变 img 标签的 height 和 width 属性的值，您可以放大或缩小图像。/p /body /html HTML文件路径 文件路径描述了网站文件夹结构中某个文件的位置。 文件路径会在链接外部文件时被用到： 网页 图像 样式表 JavaScript * * 路径 描述 img src=picture.jpg picture.jpg 位于与当前网页相同的文件夹 img src=images/picture.jpg picture.jpg 位于当前文件夹的 images 文件夹中 img src=/images/picture.jpg picture.jpg 当前站点根目录的 images 文件夹中 img src=../picture.jpg picture.jpg 位于当前文件夹的上一级文件夹中 超链接 A　HREF=资源地址IMG SRC=图形文件地址/A A HREF=index.htmIMG SRC=images/html.gif/A * HTML 超链接（链接） 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 * 我们通过使用 a 标签在 HTML 中创建链接。 通过使用 href 属性 - 创建指向另一个文档的链接 a