Hello  world!
  

        
Hello world!    

        @@##@@    

        @@##@@    

            window.onload = function() {            document.designMode = "on";        }

      你好      hello world!      html5

        
                 
旅游
                 
上海
      

可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等

该元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分

8.

用于对元素进行组合。一般用于图片或视频

 figure 的子元素,用于对figure的内容进行说明

    
    @@##@@    

2.2 讲解标签

    
    
CAR
    

一般用于传统导航，侧边栏导航，页内导航、翻页导航

来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分。

非主体结构标签

Header 元素是一种具有引导和导航作用的结构元素，通常用来防止整个页面和页面内的一个内容区块的标题，但是也可以包含其他内容，例如数据、搜索表单或相关的logo图片。

Footer元素可以作为其上层父级内容区或者一个根区块的脚注。Footer通常包含其相关区块的脚注信息，如作者、相关的阅读链接及其版权信息等

Hgroup元素是将标题及其子标题进行分组的标签。Hgroup标签通常会将h1-h6标签进行分组。譬如一个内容区的标题及其子元素算一组。

Address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、它们的网站链接、电子邮箱、真实地址、电话号码等。Address应该不只用来呈现电子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息。

三、表单内新增的元素和属性

3.1 form 小编俗解：在 表单外部的标签可以通过form属性进行链接

eg：

        MAN            WOMAN

3.2 formtarget 属性

_blank    在新窗口中打开。

_self    默认。在相同的框架中打开。

_parent    在父框架集中打开。

_top    在整个窗口中打开。

3.3 autofocus 获取焦点

3.4 required 属性

HTML5中新增的属性可以应用于大多数的输入标签上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。看下面例子：

3.5 placeholder 属性，用于显示文本未输入内容之前，

3.6 autoComplete 属性

3.7 pattern 属性

该属性用于正则表达式。见下面小例子：

3.8 小编有话说

新增的表单属性和元素还有很多，在这里我只列举了一些较常用的属性和元素，至于剩余的部分，小伙伴们用到的时候网上搜索就行。好啦！这部分结束，继续下面的内容。

四、新的Javascript选择器

4.1 querySelector()

    
Hello World！
          var box = document.querySelector("#box");      box.style.color = "red";      box.style.fontSize = "24px";      box.style.fontWeight = "blod";    

4.2 querySelectorAll()

    
Hello World！
    
Hello！
    
World！
          var boxList = document.querySelectorAll("#box");      boxList.forEach(function(item){          item.style.color = "red";          item.style.fontSize = "24px";          item.style.fontWeight = "blod";      });    

五、新增 dom 节点属性

clasList  中的属性和方法

length (长度)

    
            var  box = document.querySelector("#box");        window.onload = function (){            console.log(box.classList);            console.log(box.classList.length);        }    

add()  增加

    
                var box = document.querySelector("#box");        window.onload = function(){            box.classList.add("test5");            console.log(box.classList);        }    

remove()  移除

    
Hello World!
    var box = document.querySelector("#box");    window.onload = function (){        box.classList.remove("test");        console.log(box.classList);    }

toggle()   简单理解：有则删除，没有则添加

有的时候

    
Hello World!
    var box = document.querySelector("#box");    window.onload = function (){        box.classList.toggle("test");        console.log(box.classList);    }

没有的时候

    
Hello World!
    var box = document.querySelector("#box");    window.onload = function (){        box.classList.toggle("test5");        console.log(box.classList);    }

六、JSON 的新方法

6.1 eval

eval(): 可以解析任何字符串变成JS , 对JSON内容进行解析的话必须在最外面使用(); 例如:

        var str = "({name:'Tom',age:'20',sex:'man'})";    var obj = eval(str);    console.log(obj);

七、自定义标签属性

语法：1. 在标签中使用data-str1-str2
                     2. 在JS 中获取到相应的自定义属性的值 。dom.dataset.str1Str2

见下面的小例子就明白了：

    
Hello world!
    var box = document.querySelector("#box");    box.style.color = box.dataset.myColor;    box.style.fontSize = box.dataset.fontSize;

分析： 其实很简单，首先在标签中根据自己的需要定义属性，比如小编这里定义了字体的颜色和大小，光定义是不行的，浏览器不认识，所以还需要引用，在js中进行引用，引用方式就是和平常我们用js改变属性值是一样的，谨记要用驼峰命名法。

八、JS加载过程

一般情况

按照惯例，所有script元素都应该放在页面的head元素中。这种做法的目的就是把所有外部文件(CSS文件和JavaScript文件)的引用都放在相同的地方。可是，在文档的head元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容(浏览器在遇到body标签时才开始呈现内容)。
对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现在Web应用程序一般都把全部JavaScript引用放在body元素中页面的内容后面。这样一来，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

总结一句话：在JavaScript代码时要把该部分放在body的后面

看下面的图解：

defer (延迟脚本)

延迟脚本：defer属性只适用于外部脚本文件。
如果给script标签定义了defer属性，这个属性的作用是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，如果script元素中设置了defer属性，相当于告诉浏览器立即下载，但延迟执行。
看下面的图文详解：

分析：这个例子中，虽然我们把script元素放在了文档的head元素中，但其中包含的脚本将延迟到浏览器遇到

以上就是HTML5有哪些新特性和新标签？分享HTML5 JS新特性的详细内容，更多请关注创想鸟其它相关文章！