大佬教程收集整理的这篇文章主要介绍了HTML5:嵌入内容,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<img src="triathlon.png" alt="Triathlon Image" width="200" height="67"/>src定义了图像的URL,alt属性定义了当图像无法显示时,浏览器将显示的替代文本。图像无法显示可能有以下原因:
<a href="otherpage.html"> <img src="triathlon.png" alt="Triathlon Image" width="200" height="67"/> </a>这样当点击该图像后,浏览器会导航至父元素a的href属性所指定的URL上。给img元素应用ismap属性就创建了一个服务器端分区响应图:
<a href="otherpage.html"> <img src="triathlon.png" alt="Triathlon Image" width="200" height="67" ismap/> </a>这样,图像的点击的位置会附加到URL上,例如,如果点击的位置是距图像顶部4像素,左边10像素,则浏览器将导航到一下URL:
<p><img src="triathlon.png" usemap="#mymap" alt="Triathlon Image"/></p> <map name="mymap"> <area href="swimpage.html" shape="rect" coords="3,5,68,62" alt="Swimming"/> <area href="cyclepage.html" shape="rect" coords="70,130,62" alt="Running"/> <area href="otherpage.html" shape="default" alt="default"/> </map>上面的脚本定义了用户如果点击图片的游泳部分,浏览器导航至swimpage.html,如果用户点击图像上的骑车部分,浏览器则会导航至cyclepage.html,点击其它部分则导航至otherpage.html。
<header> <h1>Things I like</h1> <nav> <ul> <li><a href="fruits.html" target="myframe">Fruits ILike</a></li> <li><a href="activities.html" target="myframe">Activities ILike</a></li> </ul> </nav> </header> <iframe name="myframe" width="300" height="100"/>
<embed src="http://www.youtube.com/v/qzA60hHca9s?version=3" type="application/x-shockwave-flash" width="560" height="340" allowfullscreen="true"/>上面使用了allowfullscreen属性,用于设置是否启用全屏观看功能。
<object width="560" height="349" data="http://titan/myimaginaryfile"> <param name="allowFullScreen" value="true"/> <b>Sorry!</b> We can't display this content </object>如果data属性引用的资源不存在,则显示object元素中的内容。
<progress id="myprogress" value="10" max="100"></progress> <p> <button type="button" value="30">30%</button> <button type="button" value="60">60%</button> <button type="button" value="90">90%</button> </p> <script> var buttons = document.getElementsByTagName('BUTTON'); var progress = document.getElementById('myprogress'); for(var i = 0;i < buttons.length; i++){ buttons[i].onclick = function(E) { progress.value = e.target.value; }; } </script>上面给出的例子演示了点击不同的button让progress显示不同的值,在chrome中的效果如下:
<meter id="mymeter" value="90" min="10" max="100" low="40" high="80"optimum="60"></meter> <p> <button type="button" value="30">30%</button> <button type="button" value="60">60%</button> <button type="button" value="90">90%</button> </p> <script> var buttons = document.getElementsByTagName('BUTTON'); var meter = document.getElementById('mymeter'); for(var i = 0;i < buttons.length; i++){ buttons[i].onclick = function(E) { meter.value = e.target.value; }; } </script>当meter元素的value值为过低和过高,以及最佳值时,浏览器会以不同的方式呈现它们。
以上是大佬教程为你收集整理的HTML5:嵌入内容全部内容,希望文章能够帮你解决HTML5:嵌入内容所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。