正文

HTML5与HTML4的比较

IP云
IP云V管理员/4 阅读
11/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

HHTML5封装一些标签和属性，方便了开发。 

     <form>

         <p>

             <label>Username:<input name="search" type="text" id="search" autofocus></label>

         </p>

     </form>

HTML5的方式获取输入焦点 

     <form>

         <p>

             <label>Username:<input name="search" type="text" id="search"></label>

         </p>

         <script type="text/javascript">

             document.getElementById("search").focus();

         </script>

     </form>

HTML4的方式获取输入焦点

对于页面结构，HTML5将不同结构使用不同的标记进行区分，这点在HTML4的时候，基本上都用div标签，然后使用class属性进行区分

  • HTML5的出现是为了解决以下问题

浏览器之间的兼容性问题

文档结构不明确

Web应用程序功能受限

  • HTML5与HTML4在语法上的一些区别

1、DOCTYPE声明

2、指定字符集编码

HTML4: 

<meta http-equiv="CONTENT-TYPE" content="text/html;charset=UTF-8">

HTML5: 

<meta charset="UTF-8">

两种方式都能用，但不能混用

  • 可以省略标记的元素

不允许写结束标记：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr

可以省略结束标记：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th

可以完全省略标记：html、head、body、colgroup、tbody

  • 具有boolean值得属性

这些属性，只要写上了就比表示true，如： 

<input checked type="checkbox">

还有readonly、disabled等

  • 新增结构元素

section：表示页面中的一个内容区块，如：章节、页眉、页脚等，可以与h1~h6元素结合使用，标示文档结构

article：标示页面中的一块与上下文不相关的独立内容，如博客中的一篇文章或报纸上的一篇文章

aside：标示article元素之外，但是相关的，辅助信息

header：页面中的一个内容区块或整个页面的标题

hgroup：对整个页面或页面中的一个内容区块的标题进行整合

footer：整个页面或页面中内容区块的脚注，一般包含作者的姓名、创作日期以及作者的联系方式的等

nav：页面中的导航链接

figure：表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元，使用figcaption元素在figure元素组添加标题

  • 其他新增元素

video：视频

audio：音频

embed：插入各种多媒体格式

mark：在视觉上需要高亮的文字

progress：表示运行中的进程，一般用于显示js耗时的时间函数

time：日期或时间

ruby：ruby注释，中文注音或字符

rt：字符的解释或发音

rp：在ruby注释中石油

wbr：软换行，当父级元素宽度不够的时候才换行

canvas：绘图的画布

command：命令按钮，如单选按钮、复选框、复选按钮

details：表示用户要求得到并且可以得到的细节信息。可以与summary元素配合使用

datalist：下拉列表，与input配合使用

datagrid：可选数据列表，树形列表的形式显示

keygen：生成密匙

output：表示不同类型的输出

source：为媒介元素定义媒介资源

menu：菜单列表

  • 新增的input类型，也就是input元素中，type的属性

email、url、number、range、date、month、week、time、datetime、datetime-local

对于新增的元素或属性，在使用前最好查阅一下浏览器的支持情况

  • 废除的元素

能够用CSS代替的一般都废除了，如 basefont、big、center、font、s、strike、tt、u等

不再使用frame框架：frameset、frame、noframes元素。因为frame框架对网页的可用性存在负面影响。HTML5中只支持iframe框架

  • 新增的表单属性

autofocus：自动获取焦点

placeholder：提示用户输入

form：声明属于哪个表单，然后可以放在页面的任何位置，不一定非要在表单内

required：表示是否必填

list：与datelist元素配合使用，生成下拉框

multiple：允许一次上传多个文件

其他属性详见HTML5

  • 全局属性

contentEditable：是否允许编辑元素内的内容 

 1 <!DOCTYPE html>

 2 <html>

 3 <head lang="en">

 4     <meta charset="UTF-8">

 5     <title></title>

 6     <script type="text/javascript">

 7         function getInnerHTML(){

 8             alert(document.getElementById("price1").innerHTML+"\n"+document.getElementById("price2").innerHTML);

 9         }

10     </script>

11 </head>

12 <body>

13     <table contenteditable="true">

14         <tr contenteditable="false">

15             <td>书籍</td>

16             <td>单价</td>

17         </tr>

18         <tr>

19             <td contenteditable="false">ajax权威指南</td>

20             <td id="price1">10元</td>

21         </tr>

22         <tr>

23             <td contenteditable="false">JavaScript权威指南</td>

24             <td id="price2">20元</td>

25         </tr>

26         <tr>

27             <td><button onclick="getInnerHTML()">提交</button></td>

28         </tr>

29     </table>

30 </body>

31 </html>
contenteditable 属性允许直接编辑html元素的内容，然后可以通过innerHTML获取编辑完后的值
该属性具有继承的特点，也就是说如果父元素设置了为true，那么子元素默认也都是true，除非手动修改为false

页面一旦刷新后，编辑的数据就会恢复成编辑前的

如果想要对页面的全部元素都设置为可编辑的，可以这么干
1 <body ondblclick="document.designMode='on';">

2 .......

3 .......

4 .......

5 </body>

designMode：指定整个页面是否可编辑

hidden：隐藏

speelcheck：拼写检查

tabindex：tab获取焦点 

<input tabindex="1">
<input tabindex="2">
<input tabindex="3">

相关阅读

目录[+]