美文网首页
认识html5

认识html5

作者: 浅夏_cd06 | 来源:发表于2017-09-04 19:58 被阅读0次

    什么是html5?

    html5 ≈ html5新增标签及规范 + CSS3 +javascript API(应用程序接口 通过javascript调用)
    HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas 标记。HTML5还引进了新的功能,可以真正改变用户与文档的交互方式。

    html5属性规范 自定义属性必须以"data-"开头:

    <div id="" data-xxx=""></div>
    

    img、input标签可以不用闭合

    <img src="" alt="">
    <input type="">
    

    html5新增标签(1)

    语义标签:
    header、nav、main、aside、footer、section、article

    <!-- header 头部 -->
    <header>
        <!-- nav 导航 -->
        <nav></nav>
    </header>
    <!-- main 内容主体-->
    <main>
        <!-- aside 侧边栏 -->
        <aside></aside>
    </main>
    <!-- footer 尾部 -->
    <footer></footer>
    

    <header>标签:<header>元素表示一组引导性的帮助,可能包含标题元素,也可以包含其他元素,像logo、分节头部、搜索表单等。

    <footer>标签: <footer> 元素表示最近一个章节内容或者根节点(sectioning root )元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

    <nav>标签:HTML导航栏 <nav>)描绘一个含有多个超链接的区域,这个区域包含转到其他页面,或者页面内部其他部分的链接列表。

    <aside>标签:<aside> 元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条,例如来自词汇表的定义。也可能有其他类型的信息,例如相关的广告、笔者的传记、web 应用程序、个人资料信息,或在博客上的相关链接。

    <main>标签:
    (1)<main>标签不能是以下元素的继承<article>、<aside>、<header>、<footer>、<nav>。
    (2)在一个文档中不能出现一个以上的<main>标签。
    (3)<main>标签在PC端不支持IE浏览器,在手机端只支持Firefox火狐浏览器,所以不支持使用<main>标签。

    可以使用article和section标签代替:

    <header>
        <h1 class="logo">header</h1>
    </header>
    <section>
        <article>
            <section></section>
        </article>
        <aside class="aside"></aside>
    </section>
    <footer></footer>
    

    <article>标签:<article>元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

    <section>标签:HTML Section 元素 (<section>) 表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会有包含一个标题(heading)。一般通过是否包含一个标题 (<h1>—<h6>element)作为子节点 来 辨识每一个<section>。

    让IE6、7、8支持html5.官方给出的解决方案 -html5shiv.js

    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    

    相关文章

      网友评论

          本文标题:认识html5

          本文链接:https://www.haomeiwen.com/subject/jygejxtx.html