html4与html5的区别及html5的一些新特性-白红宇

html4与html5的区别及html5的一些新特性

阅读量：5022 次

发布时间：2019-06-12

本文共 7158 字，大约阅读时间需要 23 分钟。

区别

1.html5语法的改变

HTML5简化了很多细微的语法，例如：

1.1doctype的声明;

html4:

html5:

1.2字符编码:

html4:

html5:

HTML5的语法兼容HTML4和XHTML1，但不兼容SGML(标准通用标记语言)。html5有向下兼容

的特性，他可以完整的显示html4的内容;

1.3元素标记

不允许写结束标记的元素：br、embed、hr、img、input、link、meta、param。正确格式:<元素/>

1.4具有boolean值的属性

1.5省略引号

新特性

2.全局属性（所有标签都可以使用的属性）

1.contentEditable属性.允许用户对文本进行编辑,是布尔值类型，true为可编辑，false为不可编辑，默认为true 2.designMode属性.规定页面是否可编辑，值为on/off,on为页面可编辑，off页面不可被编辑，必须在javascript中使用 3.hidden属性 4.spellcheck属性.针对input和textarea标签的文本拼写语法检查，拼写错误会提示 5.tabindex属性.规定按tab键之后的选择顺序，默认按tab键对链接元素和form表单有用， 通过tabindex属性可以使其他标签也可以按Tab键获取焦点，值为-1不会获取焦点

3.HTML5新增元素

3.1 新增的主体结构元素:artical,aside,section,nav,time,pubdate元素

artical标签通常表示文档，页面中独立的部分，一篇博客，文章或其他独立的部分，通常可以用来表示插件，可嵌套

artical

aside标签通常表示当前页面或文章的附属信息，侧边栏，广告弹出框等，一个独立的部分

aside

section内有标题有内容，强调分块或分段

section

nav主要用来做页面导航

nav

time元素表示时间

time

pubdate表示发布时间


     2017-2-24

3.2 新增的非主体结构元素:address、header、hgroup、footer元素

address元素用来在文档中呈示联系信息，包括联系人，联系地址，邮箱，电话等联系信息

header元素(一个页面可以有多个):

hrader

hgroup标签用于归类同一个标题下的子标题

hgroup

footer元素：

footer

网页排版:

View Code

4.HTML5新增表单元素与属性

form属性：

form属性

formaction属性:

formaction属性

formmethod属性:

formmethod属性

formtarget属性:

formtarget属性

formenctype属性:

formenctype属性

autofocus属性:

autofocus属性

required属性:

required属性

list元素:

list属性

下拉菜单:

View Code

control属性:

    
          control属性    
          
               邮编:                请输入六位邮编

control属性

创建节点:

Coffee

请点击按钮向列表插入一个项目。

注释：

首先请创建一个 LI 节点，

然后创建一个文本节点，

然后向这个 LI 节点追加文本节点。

最后在列表中的首个子节点之前插入此 LI 节点。

View Code

labels节点:

    
          labels节点    
          
       姓名

View Code

placeholder属性:

autocomplete标签:

注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

View Code

image标签的宽高属性:


          
       姓名

View Code

checkbox属性:


      选中测试

View Code

pattern正则表达式:


              
               请输入

View Code

selectionDirection属性:

View Code

5、HTML5 改良的 input 元素的种类

5.1表单验证

    
              
       邮箱

checkValidity()方法执行输入校验

5.2 type类型

type

5.3计算器

+=

计算器

5.4 radio单选按钮的使用

View Code

6、新增的页面元素

6.1 cite元素

cite元素

我最近想看电影功夫瑜伽

6.2 small元素


         这里可以写版权等

6.3 details元素和summary元素

    
          
              
       好看是电影在这里
        
       我就是好看的电影

View Code

6.4 figure元素

View Code

6.5 mark元素

谁比较突出，就是我

6.6progress元素

    
          
              
       progress进度
        
       完成的百分比

View Code

7.列表的使用

ul无序列表:


      
          
       html5
    
       css3
    
       javascript

View Code

ol有序列表:


      
          
       html5
    
       css3
    
       javascript

View Code

ol li ul嵌套列表:

View Code

dl自定义列表:

View Code

8.table表格


          
      
               
        标题
                                                   表头1                      表头2                      表头3                      表头4                 
                                     单元格1                      单元格1                      单元格1                 
                                     单元格2                      单元格2                      单元格2                      单元格2                 
                                     单元格3                      单元格3                      单元格3                 
                                     单元格4                      单元格4                      单元格4

标题
表头1	表头2	表头3	表头4
单元格1	单元格1	单元格1
单元格2	单元格2	单元格2	单元格2
单元格3	单元格3	单元格3
单元格4	单元格4	单元格4

View Code

9.内联框架

iframe元素:

10.实体

带有特殊字符的标签不能被展现出来，要通过html实体的方式表达，如：

<html>表示

11.audio音频元素

View Code

12.video视频元素

View Code

13.拖放

请把图片拖放到矩形中：

View Code

14.web存储

之前，都是由cookie完成数据存储的，但是，cookie不适合大量数据的存储，因为它们由每一个对服务器请求来传递，使得cookie速度很慢且效率不高。

14.1localStorage数据存储

    
          web存储1

View Code

14.2 sessionStorage数据存储

    
          web存储2        0

View Code

15.canvas图形绘制标签

<canvas> 标签只是图形容器，必须使用脚本来绘制图形。

15.HTML5废除的元素

废除basefont、big、center、font、s、tt、u等元素，

不再使用frame框架

转载于:https://www.cnblogs.com/chooper/p/6428627.html

你可能感兴趣的文章

【linux】重置fedora root密码

Spark MLlib 之 Naive Bayes

查看>>

spring security 11种过滤器介绍

一个样例看清楚JQuery子元素选择器children()和find()的差别

查看>>

代码实现导航栏分割线

查看>>

Windows Phone开发（7）：当好总舵主转：http://blog.csdn.net/tcjiaan/article/details/7281421...

大数据学习系列（8）-- WordCount+Block+Split+Shuffle+Map+Reduce技术详解

查看>>

dvwa网络渗透测试环境的搭建

查看>>

这里是标题

这里是评论区域

标题

大标题

小标题

大标题

大标题

小标题

评论标题

cite元素

progress进度