|
|
|
|
移动端

1.3.7 HTML5中的全局属性(2)

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

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

技术沙龙 | 6月30日与多位专家探讨技术高速发展下如何应对运维新挑战!


1.3.7 HTML5中的全局属性(2)
 
代码位置:见随书中源代码/第1章目录下的HTML5/Sample1_13.html。
 
  1. 1 <!DOCTYPE html> 
  2. <html><head><title>Sample1_13</title></head> 
  3. <style type="text/css"> 
  4. 4 #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
  5. </style><script type="text/javascript"> 
  6. 6 function allowDrop(ev){ 
  7. 7 ev.preventDefault();} 
  8. 8 function drag(ev){ 
  9. 9 ev.dataTransfer.setData("Text",ev.target.id);} 
  10. 10 function drop(ev){ 
  11. 11 var data=ev.dataTransfer.getData("Text"); 
  12. 12 ev.target.appendChild(document.getElementById(data)); 
  13. 13 ev.preventDefault();}</script> 
  14. 14 <body> 
  15. 15 <p>现在我们演示元素是否可拖动的属性draggable,下面一段文本可以被拖动到文本域中:</p> 
  16. 16 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br /> 
  17. 17 <p id="drag1" draggable="true" ondragstart="drag(event)"> 
  18. 18 这是一段可移动的段落。请把该段落拖入上面的矩形。</p> 
  19. 19 <!--在head 部分我们定义了div 的样式,这里不进行解释,下一节中会有专门的层叠样式表的讲述。 
  20. 20 ondrop、ondragover、ondragstart 为标签中的事件属性,表示元素被拖动时运行的脚本、当元素在 
  21. 21 有效拖放目标上正在被拖动时运行的脚本、在拖动操作开端运行的脚本。这些事件属性表示当触发 
  22. 22 这些事件时,会调用相应的JavaScript 脚本方法,这些方法在head 部分中已经写好。--> 
  23. 23 <p>现在我们来看一下style 属性的应用:</p> 
  24. 24 <h1 style="color:blue;text-align:center">这里为h1 标题</h1> 
  25. 25 <p style="color:red">这里为一个段落</p> 
  26. 26 <!--style 属性规定元素的行内样式(Inline Style),style 属性将覆盖任何全局的样式设定。--> 
  27. 27 <p>tabindex 属性规定元素的 Tab 键控制次序,1 是第一个:</p> 
  28. 28 <a href="http://www.baidu.com" tabindex="2">Baidu</a><br /> 
  29. 29 <a href="http://www.sina.com" tabindex="1">Sina</a><br /> 
  30. 30 <a href="http://www.w3school.com.cn/" tabindex="3">W3school</a> 
  31. 31 <!--请尝试使用键盘上的 "Tab" 键在链接之间进行导航。--> 
  32. 32 <p>下面我们将演示title 属性的使用,title 属性规定关于元素的额外信息。</p> 
  33. 33 <abbr title="People's Republic of China">PRC</abbr> was founded in 1949. 
  34. 34 <!--通常会在鼠标移到元素上时显示一段工具提示文本,title 属性常与 form 
  35. 35 以及 <a> 元素一同使用,以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 
  36. 36 <acronym> 元素的必需属性。--> 
  37. 37 <p contenteditable="true" spellcheck="true">这里是可编辑的段落,请试着编辑文本。</p> 
  38. 38 <!--spellcheck 属性规定是否对元素进行拼写和语法检查。--> 
  39. 39 </body></html> 
 
第3~13行为本部分案例的样式表设置与需要的JavaScript脚本。我们需要介绍一下脚本的方法是如何调用的。在下面body的标签中我们用到了onload、ondrop等事件,它们的含义在注释中已经给出,在这些事件发生时会调用相应的方法。
 
第15~31行为是否可拖动属性、style属性与tabindex属性的应用示例。事件中调用的方法,我们这里不再介绍,style属性与样式表类似,我们在下节中进行介绍、tabindex属性规定了Tab键的控制顺序,在程序里我们设置好值,应用中按Tab键即可。
 
第32~39行为title属性的应用示例,它与title标签不同。上面示例中我们将简写的内容作为title值,通常会在鼠标移到元素上时显示一段工具提示文本,title 属性常与<form>以及<a>元素一同使用,以提供关于输入格式和链接目标的信息。
 
到此为止我们便介绍完HTML中的全局属性了,其实我们可以开发出界面精美的网页了,但是还有很多功能实现不了,因为我们还没有介绍事件,我们通过事件的发生来调用自行开发的脚本便可以做出自己想要的效果了。
 
 
 
 
 
喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


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

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

读 书 +更多

SUN Solaris 9/10系统管理员认证指南

本书专门根据SUN官方的SCSA for Solaris 9&10考试大纲撰写而成,全面覆盖了SCSA for Solaris 9/10的认证考点,除此之外本书还有大量的非考...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊