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

1.3.7 HTML5中的全局属性(1)

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

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

1.3.7 HTML5中的全局属性(1)
 
在上面介绍标签时我们就不止一遍地说过局部属性与全局属性(见表1-11),在介绍标签时我们已经介绍过一部分比较重要的局部属性了,剩下的一些不常用的局部属性我们便不再介绍。现在我们便来讲述一下HTML中的全局属性。
 
表1-11HTML全局属性
 

 
全局属性适用于HTML中的各种标签,因为在平时开发的时候会经常用到这些属性,所以我们在本小节中将其集中起来,然后对每个属性进行详细的介绍;其中有一两个没介绍,是因为主流浏览器并未支持该属性。现在我们先来看一下图1-14所示的部分全局属性示例图。
 

本例中我们演示了全局属性中的一部分,因为这些属性可以在支持全局属性的标签中使用,基本为全部的标签,所以我们这里只是示例了其中几种标签的全局变量的使用。在应用时读者也可以使用别的标签进行试验。下面我们来看一下程序的开发过程。
 
代码位置:见书中源代码/第1章目录下的HTML5/Sample1_12.html。
 
  1. 1 <!DOCTYPE html> 
  2. <html><head><title>Sample1_12</title> 
  3. <script type="text/javascript"> 
  4. 4 function change_header(){ 
  5. 5 document.getElementById("myHeader").innerHTML="Nice day!";}</script> 
  6. <style type="text/css"> 
  7. 7 h1.intro {color:blue;} 
  8. 8 p.important {color:red;}</style> 
  9. <!--此处为样式表内容,在后面会有介绍,这里不详细介绍。--> 
  10. 10 <style type="text/css"> 
  11. 11 h1.intro1{color:blue;} 
  12. 12 .important1{background-color:yellow;}</style></head> 
  13. 13 <body> 
  14. 14 <p>我们首先来演示accesskey,其实质就是为某元素设置快捷键,使其获得焦点。</p> 
  15. 15 <a href="http://www.baidu.com" accesskey="b">百度(accesskey 键设为b)</a><br /> 
  16. 16 <a href="http://www.sina.com" accesskey="s">新浪(accesskey 键设为s)</a> 
  17. 17 <!--请使用“Alt+accesskey”或者“Shift+Alt+accesskey”来访问带有指定快捷键的元素,一般 
  18. 18 本属性是用在<a><area>、button><input><label><legend>等标签中。--> 
  19. 19 <p>现在我们来演示class 属性的应用,第一个示例为单个class 值, 
  20. 20 第二个示例为一个标签应用多个class 值</p> 
  21. 21 <h1 class="intro">h1 标题1 演示单个class 属性值</h1> 
  22. 22 <p class="important">请注意这个重要的段落。:)</p> 
  23. 23 <p>现在我们来演示一下应用多个classs 值的案例:</p> 
  24. 24 <h1 class="intro1 important1">h1 演示多个class 属性,只要在声明第一个值时加上空 
  25. 25 格后写之后的值即可</h1> 
  26. 26 <!--class 属性大多数时候用于指向样式表中的类(class)。不过,也可以利用它通过 
  27. 27 JavaScript 来改变带有指定 class 的 HTML 元素。--> 
  28. 28 <p>现在我们来讲述一下规定元素是否可编辑的属性的应用:</p> 
  29. 29 <p contenteditable="true">这里是一段可以编辑的段落,读者可以将光标点到这里自行编辑。</p> 
  30. 30 <!--需要注意的是元素中如果未设置contenteditable 时,本元素会继承其父类元素。--> 
  31. 31 <p>接下来我们来看一下规定元素内容文本方向的属性的应用:</p> 
  32. 32 <p dir="rtl">文本方向为从右向左!</p> 
  33. 33 <!--dir 属性在以下标签中无效:<base><br><frame><frameset><hr><iframe>、 
  34. 34 <param> 以及 <script>。dir 有rtl 与ltr 两个值,分别为右到左与左到右。--> 
  35. 35 <p>现在我们来看一下隐藏属性hidden,下面有两段话,一段有隐藏属性,一段没有隐藏属性:</p> 
  36. 36 <p hidden="hidden">这是一段隐藏的段落。</p> 
  37. 37 <p>这是一段可见的段落。上面还有一段隐藏段落,这里我们只是在做实验。</p> 
  38. 38 <!--hidden 属性也可用于防止用户查看元素,直到匹配某些条件(比如选择了某个复选框)。 
  39. 39 然后,JavaScript 可以删除 hidden 属性,以使此元素可见。--> 
  40. 40 <h1 id="myHeader">Hello World,这里我们演示的为id 属性的应用,用JavaScript 取得本 
  41. 41 元素id 然后改变本元素的内容。</h1> 
  42. 42 <button onclick="change_header()">改变文本</button> 
  43. 43 <!--id 属性规定 HTML 元素的唯一 id,id 属性可用作链接锚(Link Anchor), 
  44. 44 通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式。--> 
  45. 45 <p>这里为lang 属性值的演示,lang 属性值必须使用有效的ISO 语言代码。</p> 
  46. 46 <p lang="fr">Ceci est un paragraphe.</p> 
  47. 47 <p lang="en">Hello , How are you?</p> 
  48. 48 <!--本属性是为让浏览器调整其表达元素内容的方式,可以使网页只显示某种特定语言。--> 
  49. 49 </body></html> 
第3~12行为开发的需要调用的JavaScript脚本与样式表。在后面会介绍其基本用法,这里我们便不再多讲。其中脚本方法中的getElementById()方法为我们之后常用的方法,其目的是为了获得某个元素的id以便进行某些操作。
 
第14~27行为accesskey与class属性的用法示例。accesskey属性就是为元素设置快捷键,具体用法已在注释中给出,我们这里不再介绍。class属性大多数时候用于指向样式表中的类,在前面样式表中我们规定了相应的class样式,可以通过JavaScript改变class值实现一些功能。
 
第28~49行为contenteditable、dir、hidden、lang属性的用法示例,这几个属性都比较简单,所以我们将其放到了一个案例中,读者可以自己看案例代码学习。需要注意的为hidden隐藏属性,我们可以学到通过程序在某些条件下改为可视的这些小技巧。
 
上面的案例介绍了全局属性中的一部分,下面我们来介绍剩下的一部分属性。在开发本部分内容时我们或多或少都会用到样式表与开发一些JavaScript的脚本,读者在看这些部分时不需要着急,因为在下面的章节中我们会讲到CSS。至于JavaScript,以后的章节中我们会介绍到这些内容。
 
图1-15为剩下的属性的代码运行效果。看完了图后我们便发现本部分案例内容并不多,但是这部分内容中的脚本方法有点繁杂,我们开发时不进行重点讲述,因为会在下面的章节中专门介绍这些内容。读者看到这部分时先跳过这里,主要看属性的开发。
 

 
 
喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


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

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

读 书 +更多

鸟哥的Linux私房菜——服务器架设篇(第二版)

本书是对连续三年蝉联畅销书排行榜前10名的《Linux鸟哥私房菜——服务器架设篇》的升级版,新版本根据目前服务器与网络环境做了大幅度修订...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊