码迷,mamicode.com
首页 > Web开发 > 详细

HTML5基础(一)

时间:2016-05-15 21:25:07      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:

新的网页结构

1、DOCTYPE声明
  HTML4中的DOCTYPE声明格式
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  HTML5中的DOCTYPE声明格式
    <!DOCTYPE html>

2、网页字符编码
在HTML5中的格式
    <meta charset=UTF-8" />

3、<header>元素:header元素表示页面中的一个内容区块或者整个页面的标题!

<header>用在页面的头部或者版块的头部</header>
<footer>用在页面的头部或者版块的底部</footer>


4、<nav>元素:nav元素表示页面中的导航链接部分。

<nav><a href="#">链接</a><a href="#">链接</a></nav>
<nav>
    <p><a href="#">binperson课堂</a></p>
    <p><a href="#">binperson课堂</a></p>
</nav>
<nav>
    <h2>精品课程</h2>
    <ul>
        <li><a href="#">javascript</a></li>
        <li><a href="#">html+css</a></li>
    </ul>
</nav>

 

<nav>
    <ul>
        <li>
            <a href="nav元素.html">首页</a>
        </li>
        <li>
            <a href="aside元素.html">aside</a>
        </li>
        <li>
            <a href="section元素.html">section</a>
        </li>
    </ul>
</nav>
<article>
    <header>
        <h2>
            NAV-1
        </h2>
        <nav>
            <li>
                <a href="section元素.html">section</a>
            </li>
            <li>
                <a href="新增的主体结构元素.html">新增的主体结构元素</a>
            </li>
        </nav>
    </header>
</article>
<article>
    <header>
        <h2>
            NAV-1
        </h2>
        <nav>
            <li>
                <a href="section元素.html">section</a>
            </li>
            <li>
                <a href="新增的主体结构元素.html">新增的主体结构元素</a>
            </li>
        </nav>
    </header>
</article>
<footer>
    <p>
        <a href="/">版权信息</a>
        <a href="/">站点帮助</a>
        <a href="/">联系我们</a>
    </p>
</footer>

5、<article>元素:article元素表示页面中的一块玉上下文不相关的的独立内容,比如一篇文章中的文章。

<article>主体</article>
<aside>和主体相关的附属信息</aside>

<article>
    <h1>产品</h1>
    <p>详细的产品列表</p>
    <section>
        <h2>产品A</h2>
        <P>产品A的介绍</P>
    </section>
    <section>
        <h2>产品B</h2>
        <p>产品B的介绍</p>
    </section>
</article>

<section>
    <h1>产品</h1>
    <p>产品的种类列表</p>
    <article>
        <h2>产品A</h2>
        <p>产品A的介绍</p>
    </article>
    <article>
        <h2>产品B</h2>
        <p>产品B的介绍p>
    </article>
</section>

6、<section>元素:section表示页面中的一块内容区块,比如章节的页眉、页脚等等。也可以和Hn(h1、h2..)等一起使用,标示出文档的结构!

<section>用来划分区域</section>

<section>
    <h1>这是一个Section元素</h1>
    <p>这里是一个内容区域</p>
    <section>
        <h2>A</h2>
        <P>A的内容</P>
    </section>
    <section>
        <h2>B</h2>
        <P>B的内容</P>
    </section>
</section>

7、<aside>元素:aside元素表示article元素的内容之外的,和内容相关的辅助信息!

<header>
    <h1>国庆节去成都看熊猫</h1>
</header>
<article>
    <h2>看熊猫去大熊猫基地</h2>
    <p>哪里有很多的熊猫</p>
    <aside>
        <h3>名词解释:</h3>
        <dl>
            <dt>熊猫基地</dt>
            <dd>大熊猫基地在四川卧龙</dd>
        </dl>
    </aside>
</article>

8、<footer>元素:footer表示页面或者是页面中的一块区域的页脚,比如存放文件的创建时间、作者、联系方式等等。

HTML5基础(一)

标签:

原文地址:http://www.cnblogs.com/binperson/p/5495927.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!