Html5

Html5出现之前的问题

Web浏览器之间兼容性低

文档结构不够明确

Web应用程序的功能受限

语法的改变

拓展名html不变

<octype html>声明

指定字符编码 meta charset=”UTF-8”

可省略标记的元素

具有boolean值的属性

    <input type="checkbox" checked="checked" />

    <input type="checkbox" checked="checked" />

    <input type="checkbox" />

<input type="checkbox" checked="checked" />

 

前三个为true 最后一个是false

省略引号

 

 

内嵌页面

<html>

  <head>

    <meta name="generator"

    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />

    <title></title>

    <meta charset="UTF-8" />

  </head>

  <body>

    <form>苹果

    <input type="checkbox" checked="checked" /> 栗子

    <input type="checkbox" checked="checked" /> 香蕉

    <input type="checkbox" /> 葡萄

    <input type="checkbox" checked="checked" /></form>

    <article>

      <header>

        <h1>新特性</h1>

        <p>应用程序的功能受限</p>

      </header>

      <article>

        <header>作者</header>

        <p>评论</p>

        <footer>time</footer>

      </article>

      <footer>这是底部</footer>

    </article>

    <article>

      <h1>这是一个内嵌页面</h1>

      <object>

        <embed src="#" width="600" height="400" />

      </object>

    </article>

  </body>

</html>

 

 

Section元素

<html>

  <head>

    <meta name="generator"

    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />

    <meta charset="UTF-8" />

    <title>section元素</title>

  </head>

  <body>

    <section>

      <h1>苹果</h1>

      <p>这是一个苹果,点发货很快发飞</p>

    </section>

    <article>

      <h1>苹果</h1>

      <p>苹果 发生过好久 富含维生素,</p>

      <section>

        <h2>苹果</h2>

        <p>苹果 发生过好久 富含维生素,</p>

      </section>

      <section>

        <h2>苹果</h2>

        <p>苹果 发生过好久 富含维生素,</p>

      </section>

    </article>

    <section>

      <article>

        <h2>苹果</h2>

        <p>苹果 发生过好久 富含维生素,</p>

      </article>

      <article>

        <h2>苹果</h2>

        <p>苹果 发生过好久 富含维生素,</p>

      </article>

      <article>

        <h2>苹果</h2>

        <p>苹果 发生过好久 富含维生素,</p>

      </article>

    </section>

         <!--section元素强调分段或分块,articl元素强调独立性-->

  </body>

</html>

 

 

Nav元素

 

<html>

  <head>

    <meta charset="UTF-8" />

    <meta name="generator"

    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />

    <title>nav元素</title>

  </head>

  <body>

    <nav>

      <ul>

        <li>

          <a href="#">主页</a>

        </li>

        <li style="list-style: none; display: inline">

          <ul>

            <li>

              <a href="#">开发文档</a>

            </li>

          </ul>

        </li>

      </ul>

    </nav>

    <article>

      <header>

        <h1>html和css3的历史</h1>

        <nav>

          <ul>

            <li>

              <a href="#">html5的历史</a>

            </li>

            <li>

              <a href="#">css3的历史</a>

            </li>

          </ul>

        </nav>

      </header>

      <section>

        <h1>html5的历史</h1>

        <p>..................</p>

      </section>

      <section>

        <h1>css3的历史</h1>

        <p>..................</p>

      </section>

      <footer>

      <a href="#">删除</a>

      <a href="#">修改</a></footer>

    </article>

    <footer>

      <p>

        <small>版权声明:</small>

      </p>

    </footer>

  </body>

</html>

 

 

 

 

aside

<html>
  <head>
  <meta charset="utf-8">
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title>aside元素</title>
  </head>
  <body>
    <header>
      <h1>js入门</h1>
    </header>
    <article>
      <h1>语法</h1>
      <p>文章的正文</p>
      <aside>
        <h1>名词解释</h1>
        <p>语法:这是一个对语言来说很重要的内容体</p>
      </aside>
    </article>
    <aside>
      <nav>
        <h2>评论</h2>
        <nav>
          <ul>
            <li>
              <a href="#">2016-9-26</a>
            </li>
            <li>
              <a href="#">大牛:要好好学习</a>
            </li>
          </ul>
        </nav>
      </nav>
    </aside>
  </body>
</html>

 

time属性

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title>time元素</title>
  </head>
  <body>
  <time datetime="2016-9-26">2016-9-26</time> 
  <time datetime="2016-9-26T10:00">2016-9-26</time> 
  <time datetime="2016-9-26T10:00Z">2016-9-26</time> 
  <time datetime="2016-9-26T10:00Z+9:00">2016-9-26</time></body>
</html>

pubdate

<html>
  <head>
  <meta charset="UTF-8">
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title>pubdate属性</title>
  </head>
  <body><article>
  <header><h1>苹果</h1>
  <p>发布时期<time datetime="2016-9-26" pubdate>2016-9-26</time></p><!--指定具体的发布时间-->
  <p>发布会时期<time datetime="2016-9-26">2016-9-26</time></p></header>
  
  </article></body>
</html>

 

posted @ 2016-09-26 10:22  缘琪梦  阅读(261)  评论(0编辑  收藏  举报