|
|
51CTO旗下网站
|
|
移动端

1.3.5 图像、链接、列表标签

《H5和WebGL 3D开发实战详解》第1章HTML 5开发基础—进入WebGL 世界的第一道坎,本书是介绍WebGL技术的一本书,但是在进入WebGL世界之前我们需要迈过HTML门槛,因为这是通向WebGL的必经通道。如果连最基本的HTML开发也做不了,那么开发WebGL就是一件遥不可及的事情。本节为大家介绍图像、链接、列表标签。

作者:吴亚峰/于复兴/索依娜来源:人民邮电出版社|2017-10-31 18:14

1.3.5 图像、链接、列表标签
 
下面我们来看一下图像类、链接类与列表类的标签介绍。表1-9所示为图像链接列表标签及其描述,我们先来总体学习一下这些标签。
 
表1-9图像链接列表标签及其描述
 

看完这些标签的类型与描述后,接下来我们先来看一下运用这些标签做出来的网页效果。通过对这些标签效果的观察,我们再来深究一下它们的具体用法。图1-10为图像链接列表标签应用实例图。图中有一个图片加载失败,这是因为我们故意写错路径名进而显示alt属性。
 
因为篇幅问题本部分标签分成了两部分,我们刚才所看到的效果图为其中的第一部分标签案例的示意图,本部分标签为图像标签与一部分列表标签的示例。表1-9列出的<canvas>标签由于是本书的重点内容,所以我们将其放到了1.6节细致地讲述。我们先来看一下Sample1_7的案例开发过程。
 

代码位置:见随书中源代码/第1章目录下的HTML5/Sample1_7.html。

 
  1. <html><head><title>Sampel1_7</title></head><body> 
  2. <p>这里我们演示img 标签及其属性的用法,本标签创建的是被引用图像的占位空间</p> 
  3. <img src="pic/H5.jpg" alt="W3C 的正式HTML5 徽标" height="128" width="128" /> 
  4. <img src="pic/H523.jpg" alt="W3C 的正式HTML5 徽标" height="128" width="128" /> 
  5. 5 <!--src 和alt 为该标签的必需属性,在HTML 中img 标签没有结束标签, 
  6. 6 第二个img 标签为演示如果图像不能显示则显示alt 属性--> 
  7. <p>接下来我们来演示的为设置背景图片,如果图片小于页面那么图片会重复</p> 
  8. <body background="pic/background1.png"> 
  9. <p>接下来我们演示的是设置图像的对齐方式:</p> 
  10. 10 <h2>未设置对齐方式的图像:</h2> 
  11. 11 <p>图像 <img src ="pic/back.png"> 在文本中</p> 
  12. 12 <h2>已设置对齐方式的图像:</h2> 
  13. 13 <p>图像 <img src="pic/back.png" align="bottom"> 在文本中的对齐方式为bottom</p> 
  14. 14 <p>图像 <img src ="pic/back.png" align="middle"> 在文本中的对齐方式为middle</p> 
  15. 15 <p>图像 <img src ="pic/back.png" align="top"> 在文本中的对齐方式为top</p> 
  16. 16 <!--其中bottom 对齐方式是默认的对齐方式--> 
  17. 17 <p>现在我们把图像作为链接来使用: 
  18. 18 <a href="Sampel1_6.html"> 
  19. 19 <img border="0" src="pic/back.png" /></a></p> 
  20. 20 <p>现在我们演示的为创建带有可供单击区域的图像地图,其中每个区域都是一个超链接, 
  21. 21 请单击图像上的星球,把它们放大。</p> 
  22. 22 <img src="pic/xingqiu.jpg" border="0" usemap="#planetmap" alt="星球" /> 
  23. 23 <map name="planetmap" id="planetmap"> 
  24. 24 <area shape="circle" coords="180,139,14" href ="pic/jinxing.png" 
  25. 25 target ="_blank" alt="金星" /> 
  26. 26 <area shape="circle" coords="129,161,10" href ="pic/shuixing.png" 
  27. 27 target ="_blank" alt="水星" /> 
  28. 28 <area shape="rect" coords="0,0,110,260" href ="pic/sun.jpg" 
  29. 29 target ="_blank" alt="太阳" /></map> 
  30. 30 <!--area 标签定义图像映射中的区域,总会嵌套在map 中,shape 属性定义了区域形状,coords 
  31. 31 为区域的坐标值一般的4 个坐标值为定义的矩形的左上角与右下角的坐标值x、y 三个值为圆形 
  32. 32 的原点坐标与半径,多边形poly 的坐标为x1,y1,x2,y2,…,xn,yn--> 
  33. 33 <!--img 元素中的 "usemap" 属性引用 map 元素中的“id”或“name”属性(根据浏览器), 
  34. 34 所以我们同时向 map 元素添加了“id”和“name”属性。在以上几个例子中涉及href 属性时 
  35. 35 我们给出的是路径位置,这里也可以给URL。设置target 的属性值为blank 表示在新链接中打开--> 
  36. 36 <p>接下来我们来演示一下无序列表的使用,首先我们看到的是不同类型的无序列表:</p> 
  37. 37 <h4>Disc 项目符号列表:</h4> 
  38. 38 <ul type="disc"> 
  39. 39 <li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li> 
  40. 40 </ul><h4>Circle 项目符号列表:</h4> 
  41. 41 <ul type="circle"> 
  42. 42 <li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li> 
  43. 43 </ul><h4>Square 项目符号列表:</h4> 
  44. 44 <ul type="square"> 
  45. 45 <li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li></ul> 
  46. 46 <p>下面我们将看到嵌套类型的无序列表:</p> 
  47. 47 <h4>一个嵌套列表:</h4><ul> 
  48. 48 <li>咖啡</li><li>茶 
  49. 49 <ul><li>红茶</li><li>绿茶</li></ul> 
  50. 50 </li><li>牛奶</li></ul> 
  51. 51 <!--标签<li>定义列表项目,常和无序列表标签<ul>与有序列表标签<ol>一起使用--> 
  52. 52 </body></html> 
 
第2~6行为<img>标签的示例,在HTML中<img>标签没有结束标签,src与alt属性为必须属性。src用于指示出图片的路径,alt是提示属性,有的浏览器不支持<img>标签或者路径错误时便不显示图片,这时alt的内容便会显示出来,案例中我们示例了在路径错误时显示alt信息的用法。
 
第7~16行为设置背景图片与设置图像对齐方式示例。设置背景图片时,如果图片小于页面则默认设置为重复贴图。在下面的案例中我们会介绍背景图片的一些放置位置以及重复方式的用法。其对齐方式,读者可以自行观察示例。
 
第17~35行中我们介绍了如何将图片或者图片的局部部分作为链接使用。其中<area>标签配合其shape、coords属性指定了局部区域的形状与位置,具体的用法已经在注释中给出。target属性用于设置打开链接的方式。
 
第36~52行为一部分列表标签的应用示例,在这里我们示例了不同类型的无序列表的应用案例。标签<li>定义了列表项目,常与列表标签一起使用。列表中也可以嵌套列表,在案例中我们也进行了介绍,一般的列表类型都为我们上面所介绍的几种。
 
看完前一部分的标签的开发过程后我们来学习剩下一部分的标签的开发。对于本案例中我们用到的几个链接,统一规定Sample1_4.html为主页,跳转主页时都跳转到此页上。另外我们统一将图片放到了pic目录下,读者练习时注意一下这些问题。
 
接下来我们来看一下案例的开发过程。如果在运行的过程中加载不出来图片,应该是在设置路径上出现了一些问题,读者应该仔细确认图片的位置,然后根据图片所在的位置更改URL之后再进行试验。
 
代码位置:见随书中源代码/第1章目录下的HTML5/Sample1_8.html。
 
  1. <html><head><title>Sample1_8</title></head><body> 
  2. <p>接下来我们来看一下有序列表的使用,我们看到的是不同类型的有序列表:</p> 
  3. <h4>数字列表:</h4> 
  4. <ol><li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li></ol> 
  5. <h4>字母列表:</h4> 
  6. <ol type="A"> 
  7. <li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li></ol> 
  8. <h4>小写字母列表:</h4> 
  9. <ol type="a"> 
  10. 10 <li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li></ol> 
  11. 11 <h4>罗马字母列表:</h4> 
  12. 12 <ol type="I"> 
  13. 13 <li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li></ol> 
  14. 14 <h4>小写罗马字母列表:</h4> 
  15. 15 <ol type="i"> 
  16. 16 <li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li> 
  17. 17 </ol><!--有序列表的类型默认为阿拉伯数字,其余的还有大写字母、小写字母、罗马字母等。--> 
  18. 18 <p>接下来我们来看一下定义定义列表标签<dl>的用法:</p> 
  19. 19 <h2>一个定义列表:</h2> 
  20. 20 <dl> 
  21. 21 <dt>计算机</dt> 
  22. 22 <dd>用来计算的仪器 ……</dd> 
  23. 23 <dt>显示器</dt> 
  24. 24 <dd>以视觉方式显示信息的装置 ……</dd> 
  25. 25 </dl> 
  26. 26 <!--<dl> 标签用于结合 <dt>(定义列表中的项目)和 <dd>(描述列表中的项目)--> 
  27. 27 <!--<menu><command>两个标签在各大主流浏览器中都不支持,<menuitem>只有Firefox 浏览器 
  28. 28 支持,所以在这里不再介绍这三个标签。--> 
  29. 29 <p>现在我们来看一下超链接标签<a>的用法:</p> 
  30. 30 <a href="http://www.baidu.com">Baidu</a> 
  31. 31 <!--<a>用于从一张页面链接到另一张页面,在用于样式表时,<link> 标签得到了几乎 
  32. 32 所有浏览器的支持。但是几乎没有浏览器支持该标签其他方面的用途,所以在此便不再介绍<link>标签--> 
  33. 33 <p>现在我们来看一下HTML5 标准中新增的标签<nav>的用法,本例中我们暂定Sample1_4 为主页:</p> 
  34. 34 <nav><a href="Sampel1_4.html">主页</a> 
  35. 35 <a href="Sampel1_3.html">前一页</a> 
  36. 36 <a href="Sampel1_5.html">后一页</a></nav> 
  37. 37 <!--<nav> 标签定义导航链接的部分,Internet Explorer 8 以及之前的版本不支持本标签,其余的 
  38. 主流浏览器都是支持本标签的。--> 
  39. 38 <p>接下来我们来看一下在同一页面内的跳转:<br/> 
  40. 39 <a href="#C4">查看 章节 4。</a></p> 
  41. 40 <h2>章节 1</h2> 
  42. 41 <p>这里是章节内容</p> 
  43. 42 <h2>章节 2</h2> 
  44. 43 <p>这里是章节内容</p> 
  45. 44 <h2>章节 3</h2> 
  46. 45 <p>这里是章节内容</p> 
  47. 46 <h2><a name="C4">章节 4</a></h2> 
  48. 47 <p>这里是章节内容</p> 
  49. 48 //…这里省略了部分代码,读者可以自行查阅中的源代码。 
  50. 49 <p>被锁在框架中了吗?</p> 
  51. 50 <a href="Sampel1_4.html" target="_top">请单击这里!</a> 
  52. 51 <!--将target 属性设置为“_top”这个目标使得文档载入包含这个超链接的窗口,用“_top”目标将会 
  53. 清除所有被包含的框架并将文档载入整个浏览器窗口。--> 
  54. 52 </body></html> 
第2~17行为有序列表的标签应用,在上一个案例中我们介绍了无序列表标签的使用,有序列表与无序列表的区别就表现在显示时一个有顺序的排列,一个没有顺序排列。想要按顺序排列,一般就是列表项目前面加上表明顺序的数字字母等,就是有序列表的不同种类。
 
第18~26行示例了定义列表标签<dl>的用法,其经常会与<dt>(定义列表中的项目标签)、<dd>(描述列表中的项目标签)一起使用来定义列表,读者看着示例学习即可。
 
第27~38行演示了链接标签的用法,在HTML5中新增的<nav>标签定义导航链接的部分。我们平时在浏览网页时不会单纯在一个页面中浏览,肯定会单击链接之类的切换页面,其中的上一页、下一页、主页等链接便是由此标签定义的。
 
第39~54行示例的内容为在同一页面下跳转。除了在不同页面之间切换,有时我们浏览一个网页到最下面部分时想回到顶部,如果没有“回到顶部”这个按钮,我们只能拖拉滚动条来实现这一功能。这里的示例便是在同一页面的某处添加信息,本页中如有需要跳转到该部分,单击链接即可。
 
到此为止已完成对图像、链接、列表标签开发的讲解。本部分标签不多,但是每个标签的属性都不少,读者在学习这部分知识时应将注意力放到各属性上。幸运的是,不少的属性与前面标签中的属性的作用是一样的,读者学起来上手不会太慢的。
 
 
 
喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书频道活动讨论群:365934973
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

J2EE开发全程实录

J2EE是目前企业级软件开发的首选平台。本书从架构的角度讲解了一个完整的J2EE系统的搭建。内容包括:正则表达式、JSP、Swing、XML等技术在...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊