HTML 5

html5

html5是html的最新一个版本

新增模块：语义化的标签、音视频（多媒体）、智能表单、canvas(画布)、地理定位、web存储...

ie9及以上浏览器开始对html5的部分特性进行支持

语法兼容： 部分标签可以不闭合 可以省略一些标签（比如：html,body） 可以省略属性值的引号 属性名和属性值相同，可以省略属性值

1、语义化标签

1.1结构化标签

<header>标签 定义文档或文档中内容块的页眉。通常可以包含整个页面或一个内容区的标题、搜索表单、相关的logo图片等。 示例：

    <header>这里是头部区</header>

2.<footer> 标签 通常用来定义文档或节的页脚，如网页中的版权信息，相关阅读链接等等。 示例：

    <footer>这里是页脚区</footer>

3.<nav> 标签 定义导航链接的部分。一般来说用于页面中主要的导航链接组，如传统的导航条、侧边栏导航、页内导航、翻页操作等。 示例：

    <nav>

        <a>首页</a>

        <a>关于我们</a>

        <a>联系我们</a>

    </nav>

<article>标签 表示文档中独立完整的，可以独自被外部引用的内容。如一篇博文、论坛的帖子、报刊中的文章、一段用户评论或独立的插件。 示例：

    <article>这里是一个有完整含义的内容区</article>

<section>标签 表示页面中内容的分区、文章中的章节。一个section元素通常由内容及标题组成。 示例：

    <section>

        <h2>标题一</h2>

        <p>内容区域</p>

    </section>

    <section>

        <h2>标题二</h2>

        <p>内容区域</p>

    </section>

6.<aside>标签 表示当前页面或文章的附属信息部分，如与主要内容相关的引用、侧边栏、广告、链接组等。 示例：

    <aside>这里是侧边栏</aside>

<hgroup>标签 可以为标题或者子标题进行分组，通常与h1-h6组合使用。 示例：

    <hgroup>

        <h1>主标题</h1>

        <h2>副标题</h2>

    </hgroup>

1.2 html5新增语义化标签兼容处理

ie8及以下浏览器不识别这些新的标签，所以页面结构渲染错误，样式失效

解决方法一：

1、用js创建这些新的元素

    document.createElement('header');

    document.createElement('footer');

    ...

    2、js创建的元素默认为行内元素，需要转换成块级，正常布局

    header,footer,...{

        display:block;

    }

解决方法二：引入html5shiv.js插件

<!-- 只在ie9以下引入插件 -->

    <!--[if lt ie 9]>   

       

    <![endif]-->

1.3 新增的其他标签

除了结构元素外，在HTML5中，还新增了以下标签：

1 .<figure>标签

规定独立的流内容（图像、图表、照片、代码等等）。 figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档产生影响。

figcaption表示figure的标题，一个figure内只允许放置一个figcaption。 示例：

<figure>

    <img src="...">

    <img src="...">

    ...

    <figcaption>figure的标题</figcaption>

</figure>

<mark> 标签 (行内) 定义带有记号的文本。 示例：

<p>今天天气<mark>晴朗</mark></p>

<time>标签 (行内) 定义公历日期或时间，或者两者。 示例：

我们在每天早上 <time>9:00</time> 开始上课。

我在 <time datetime="2019-02-19">元宵节</time> 有个约会。

datetime属性：定义元素的日期和时间。如果未定义该属性，则必须在元素的内容中规定日期或时间。

1.4 删除的标签

    center

    font

    s

    strike

    u

    basefont

    applet

2、新增表单特性

2.1新增表单元素

input的新增类型

    color : 颜色

    date: 年月日

    datetime:年月日 时分 （只能输入)

    datetime-local : 年月日 时分

    time: 时分

    month:年月

    week：某年第X周

    email:邮箱

    url:网址

    tel:电话

    number:数字

    range:范围

    search:搜索

datalist 给输入框定义选项列表

        AA

        BB

        CC

2.2 新增表单属性min、max 和 step 属性min:定义可输入的最小值max:定义可输入的最大值step:定义步长        placeholder属性给输入框定义提示占位符，输入框内容为空时显示    autofocus属性设置输入框自动获得焦点    autocomplete属性自动补全: autocomplete="off" 关闭 autocomplete="on" 开启    form 属性用来指定表单元素所属的form标签，可以实现把输入框放在form标签之外也能提交的效果            ...    required 属性把表单元素指定为必填项    pattern 属性规定表单元素输入的规则    multiple 属性设置多选                AA        BB        CC    list属性给输入框绑定一个数据列表datalist                AA        BB        CC

3、多媒体

3.1音频

属性说明:

    src="音频地址"

    controls : 调出控制器

    loop:循环播放

    autoplay：自动播放

    muted：默认静音

3.2 视频

属性说明:

    src="视频地址"

controls : 调出控制器