学习日记-HTML5-4

2/10/2017来源:心得技巧人气:3369

HTML5-新标签 Mark标签 将标签内的字体特写。

this is a <mark>test</mark><br> this is <mark>a test</mark><br>

PRogress标签 progress标签定义运行中的任务进度(进程)。min与max规定范围,value为进度,如没有value则为进度条来回移动的动画。

<progress id="pro1" min="0" max="100" ></progress><br> <progress id="pro2" min="0" max="100" value="0"></progress><br> <progress id="pro3" min="0" max="100" value="50"></progress><br> <progress id="pro4" min="0" max="100" value="90"></progress><br>

进度条动画脚本:setInterval(function(){ 脚本内容 }, 毫秒数);

<script> var obj=document.getElementById("pro1"); setInterval(function(){ if(obj.value<100){ obj.value=obj.value+1; }else{ obj.value=0; } },50); </script>

meter 标签定义度量衡。仅用于已知最大和最小值的度量。

<meter id="pro1" min="0" max="100" ></meter>

canvas 标签通过脚本(通常是 javaScript)来绘制图形(比如图表和其他图像)。 canvas 标签只是图形容器,您必须使用脚本来绘制图形。

<canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas><br> <script> var c=document.getElementById('myCanvas'); var ctx=c.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(10,10,810,110); </script>

高度和宽度为 200 像素的画布(canvas):

<canvas id="myCanvas" width="200" height="200" style="border:1px solid"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#92B901"; ctx.fillRect(50,50,100,100); </script>

details 标签规定了用户可见的或者隐藏的需求的补充细节。 details 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 details 标签里边。 details 元素的内容对用户是不可见的,除非设置了 open 属性。 与 summary标签配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。

<details> <summary>点击一下,查看详情</summary> <p>第一行。</p> <p>第二行。</p> </details>

ruby 标签定义 ruby 注释(中文注音或字符)。 在东亚使用,显示的是东亚字符的发音。 将 ruby 标签与 rt 和 rp 标签一起使用: ruby 元素由一个或多个需要解释/发音的字符和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 “ruby” 元素时显示的内容。

<ruby> 漢 <rp>(</rp><rt>han</rt><rp>)</rp> 字 <rp>(</rp><rt>zi</rt><rp>)</rp> </ruby>

ol标签新增属性reversed

<ol> <li>aaaaa <li>bbbb <li>ccc </ol> <ol reversed> <li>aaaaa <li>bbbb <li>ccc </ol>

Script 新增async 属性是一个布尔属性。async 属性一旦脚本可用,则会异步执行。 注意:async 属性仅适用于外部脚本(只有在使用 src 属性时)。 注意:有多种执行外部脚本的方法: 如果 async=”async”:脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行) 如果不使用 async 且 defer=”defer”:脚本将在页面完成解析时执行 如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

HTML5不支持元素 acronym 定义首字母缩写 applet 定义 applet basefont 标签定义文档中所有文本的默认颜色、大小和字体 big 定义大号文本 center 定义居中的文本 dir 定义目录列表 font 标签规定文本的字体、大小和颜色 frame 定义子窗口(框架) frameset 定义框架的集 noframes 定义 noframe 部分 isindex 定义单行的输入域 s 定义加删除线的文本 strike 定义加删除线的文本 tt 定义打字机文本 u 定义下划线文本 xmp 定义预格式文本