html5新增的元素类型

来源:互联网 发布:试验数据分析 编辑:程序博客网 时间:2024/04/29 19:48
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello </title>
<script>
function showtabindex(){
   var btn1,btn2,btn3;
btn1=document.getElementById('button1').tabIndex;
btn2=document.getElementById('button2').tabIndex;
btn3=document.getElementById('button3').tabIndex;
document.write("tab 切换按钮1的顺序:"+btn1);
document.write("<br>");
}
</script>

</head>
<body>
<p>
我爱我的家<mark>家乡是美好的</mark>
</p>
<menu>
<command onclick="alert('hello world')">click me!
   </command>
</menu>
<h1>details与summary元素的区别</h1>
<details>
<summary>标题一</summary>
<img src="img/1.jpg" />
   <p>标题一标题一标题一</p>
</details>
<form action="" name="form1" style="width:200px;">
<fieldset>
  <legend>
请输入职业:
  </legend>
  <input type="text" list="worklist" />
  <datalist id="worklist">
  <option>程序开发员</option>
  <option>系统架构师</option>
  <option>数据维护员</option>
  </datalist>
   </fieldset>
</form>
<ol contenteditable="true">
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ol>

<p contenteditable="true" spellcheck="true">进行拼写检查</p>
        <button id="button1" tabIndex="1">按钮1</button><br />
        <button id="button2" tabIndex="2">按钮2</button><br />
        <button id="button3" tabIndex="3">按钮3</button><br />
        <input type="button" onclick="showtabindex()" value="显示切换按钮顺序" />
        <form action="#" method="get" autocomplete="on">
        First name:<input type="text" name="fname" /><br />
        Last name: <input type="text" name="lname" /><br />
        E-mail: <input type="email" name="email" autocomplete="off" /><br />
        <input type="submit" />
        
        </form>
        <form action="/example/html5/demo_form.asp" method="get">
        Points: <input type="number" name="points" min="0" max="10" step="3"/>
        <input type="submit" />
</form>
</body>
</html>   
0 0
原创粉丝点击