HTML5新增元素

一、什么是HTML5

HTML5是用于取代HTML和XHTML的标准版本

新特性：

             新的语义化标签，比如 header、footer、nav

             新的表单控件，比如 email、url、search

             用于绘画的 canvas 元素

             用于媒介回放的 video 和 audio 元素

全是div的布局：

              不利于网站对访客的易用性

              不利于搜索引擎或者爬虫软件建立索引

               不便于后期的代码维护

使用什么方式能够解决上面的问题呢  

              HTML5新增结构元素 

              HTML5新增网页元素

例：

 body里面用的都是div

思考：如果要把这个画面都撑满怎么设置？

全屏里面是如上图 

把这个缩小旁边也有滚动条，因为设置了100%

 再思考：旁边的滚动条，怎么做会没有？

旁边的滚动条已经没有了 

 

100vh就是整个屏幕的高度  viewport height 

 vh 是视口的整个高度  整个屏幕的高度 不算滚动条内的高度 

calc 是用css 用来计算的方法

            用整个屏幕的高度 - header的高度 - nav的高度 - footer的高度

            使用减法 -  左右需要空格 

       可以分开减去高度，也可以把那些高度算出了一起减，图中两种方法都写了

二、HTML5新增结构元素         

 

页面或页面中某一个区块的页眉，通常是一些引导和导航信息

                                 一般是用在头部信息上  

 

           使用main来包裹主体的内容  

 

    一般导航的内容可以使用nav来包裹    可以作为页面导航的链接组  

 

  页面中的一个内容区块，通常由内容及其标题组成  

                   一般可以包裹一个内容区域块 

 

       一般用作侧边栏

                      非正文的内容，与页面的主要内容是分开的，被删除而不会影响到网页的内容  

 

  一般用来包裹正文的内容

                               代表一个独立的、完整的相关内容块，可独立于页面其它内容使用  

  页面或页面中某一个区块的脚注  

 三、HTML5新增网页元素

        您的浏览器不支持video播放的视频

                                                       定义视频，如电影片段或其他视频流 

video里面的字 只有在不支持video标签的浏览器才会显示在页面上 

 

       定义音频，如音乐或其他音频流

audio里面的字 只有在不支持audio标签的浏览器才会显示在页面上 

controls="controls"或者直接写controls     加上这个才会出现控制菜单  

autoplay="autoplay"可以简写autoplay 可以实现自动播放

                               当在部分浏览器会存在兼容问题 自动播放实现不了  

加上loop属性 播放完毕之后还会循环播放 

加上muted属性 会自动屏蔽声音