HTML5新增的元素和废除的元素

最新推荐文章于 2022-12-26 15:24:37 发布

转载最新推荐文章于 2022-12-26 15:24:37 发布 · 1.7k 阅读

文章标签：

#html5 #前端开发

Html5，Css3 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了HTML5中新增的结构元素、其他元素及输入类型的更新，并列举了废弃的元素和属性，通过示例代码展示了如何使用新的内容可编辑、隐藏、拼写检查等属性。

1.新增的结构元素

section,article,aside,header,hgroup,footer,nav,figure

2.新增的其他元素

video，audio,embed,mark,progress,meter,time,ruby,rt,rp,wbr,canvas,command,details,datalist,datagrid,keygen,output,source,menu

3.新增的input元素的类型

email,url,number,range,Date Pickers

废除的元素

（1）能使用CSS替代的元素：basefont,big,center,font,s,tt,u等

（2）不再使用frame框架；

（3）只有部分浏览器支持的元素；

（4）其他被废除的元素；

新增的属性和废除的属性

(1)contentEditable属性；

(2)designMode属性；

(3)hidden属性；

(4)spellcheck属性；

(5)tabindex属性；

代码示例如下：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title></title>  
 </head>  
 <body>  
   
   
 <!--tab键的访问顺序   tabindex设置为-1则不能获取焦点！ -->  
 用户名1： <input type="text" tabindex="1">  
 用户名2： <input type="text" tabindex="3">  
 用户名3： <input type="text" tabindex="2">  
 用户名4： <input type="text" tabindex="-1">  
 <br/><br/>  
   
     这是一个列表  
 <!--contenteditable属性表示可编辑-->  
     <ul contenteditable="true">  
         <li>第一行</li>  
         <li>第二行</li>  
         <li>第三行</li>  
     </ul>  
     <br/><br/>  
   
     <!--是否隐藏-->  
     <ul hidden>  
         <li>第一行</li>  
         <li>第二行</li>  
         <li>第三行</li>  
     </ul>  
     <br/><br/>  
   
     <!--是否进行拼写检查-->  
    用户名： <input type="text" spellcheck="">  
     <br/><br/>  
   
 </body>  
 </html>  