zoukankan      html  css  js  c++  java
  • HTML5基础(一)

    新的网页结构

    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表示页面或者是页面中的一块区域的页脚,比如存放文件的创建时间、作者、联系方式等等。

  • 相关阅读:
    YAML 语法
    mysqladmin
    CentOS7
    MySQL 基准测试
    Sqlite 约束条件 Constraints
    sqlite3数据库 sqlite3_get_table
    MFC中使用sqlite3操作数据库
    数据库函数:sqlite3_exec() SQL语句
    VS2013 生成sqlite3动态连接库及sqlite3.dll的调用
    Windows下VS2013创建与使用动态链接库(.dll)
  • 原文地址:https://www.cnblogs.com/binperson/p/5495927.html
Copyright © 2011-2022 走看看