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

  • 相关阅读:
    浅析JNI
    网易云音乐歌词下载器
    如何用一个SQL“搞挂”一个服务模块
    SpingBoot 1.5.2,MultipartFile保存图片时的不稳定异常(好像和内置tomcat有关)
    double 去除小数点后的0
    项目中时间处理----今天:时分(10:15),昨天/前天:(昨天/前天),除此之外的本周(星期几),再往前年.月.日(2017.06.15)
    SpringMvc 静态内部类 封装请求数据
    jsp页面 ajax提交数组 到struts2的action
    Struts2 s:if test判断时遇到的问题
    Struts2中 iterator隔行变色
  • 原文地址:https://www.cnblogs.com/binperson/p/5495927.html
Copyright © 2011-2022 走看看