HTML5学习笔记4

1、新增的主体元素结构

　　aside元素：用来表示当前页面或文章的附属信息部分，主要有两种使用方法：

　　（1）被包含在article元素中作为主要内容的附属信息部分。

<!DOCTYPE html>
<head>
<meta charset="utf-8" >
<title>aside元素实例</title>
</head>

<body>
<header>
    <h1>F#入门</h1>
</header>
<article>
    <h1>第四节 词法闭包</h1>
    <p>lambda表达式可以创建词法闭包...（文章正文）</p>
    <aside>
    <!--因为这个aside元素被放置在一个article元素内部，所以分析器将这个aside元素理解成是和article元素的内容相关联的。-->
    <h1>名词解释</h1>
    <dl>
        <dt>F#</dt>
        <dd>词法闭包是指，将创建lambda表达式时的环境保存起来...（详细解释）</dd>
    </dl>
    </aside>
</article>
</body>
</html>

　　（2）在article元素之外使用，作为页面或站点全局的附属信息部分。典型：侧边栏

<aside>
    <nav>
        <h2>评论</h2>
        <ul>
            <li>
                <a href="http://blog.sina.com.cn/1683">erway</a>    10-24 14:25
            </li>
            <li>
            <a href="http://blog.sina.com.cn/u/1345">太阳雨</a>     10-22 23:48<br/>
            <a href="http://blog.sina.com.cn/s/blog_6a9kv8f.html#comment">顶，拜读一下大神的文章</a>
            </li>
            <li>
            <a href="http://blog.sina.com.cn/u/1259295385">新浪官博</a>   08-12 08:50<br/>
            <a href="#">恭喜！您已成功开通了博客</a>
            </li>
        </ul>
    </nav>
</aside>

　　time元素与微格式：time元素代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。

<time datetime="2010-11-13">2010年11月13日</time>
<time datetime="2010-11-13T20:00">我的生日晚上8点</time>
<time datetime="2010-11-13T20:00+09:00">我的生日晚上8点的美国时间</time>

　　pubdate属性：表示发布日期

<article>
    <header>
        <h1>苹果<time datetime="2010-10-11">10月29日</time>的舞会通知</h1>
        <p>发布日期
        <time datetime="2010-10-29" pubdate>2010年10月29日</time>
        </p>
    </header>
    <p>苹果，植物类水果，多次花果...（“苹果”文章正文）</p>
    ...
</article>

　　这个有点搞不懂。。。pubdate到底有什么作用，有什么区别。。？

2、新增的非主体结构元素

　　　header元素：具有引导和导航作用的结构元素，可以有多个，一个header元素包括至少一个heading元素

<header>
<hgroup>
    <h1>IT新技术</h1>
    <a href="http://blog.sina.com.cn/itnewtech">http://blog.sina.com.cn/itnewtech</a>
    <a href="#">[订阅]</a>
    <a href="#">[手机订阅]</a>
</hgroup>
<nav>
    <ul>
        <li>首页</li>
        <li><a href="http://blog.sina.com.cn/articlelist1.html">博文目录</a></li>
        <li><a href="http://phptp.blog.sina.com.cn/itnewtechl">图片</a></li>
        <li><a href="http://photo.blog.sina.com.cn/itnewtech">关于我</a></li>
    </ul>
</nav>
</header>

　　hgroup元素：将标题及其子标题进行分组的元素。

<article>
    <header>
        <hgroup>
            <h1>文章主标题</h1>
            <h2>文章子标题</h2>
        </hgroup>
        <p><time datetime="2010-03-20">2010年10月29日</time></p>
    </header>
    <p>文章正文</p>
</article>

　　footer元素：作为其上层父级内容区块或是一个根区块的脚注，还可以在article或section元素中添加footer元素

<footer>
    <ul>
        <li>版权信息</li>
        <li>站点地图</li>
        <li>联系方式</li>
    </ul>
</footer>

　　address元素：呈现联系信息

<address>
    <a href=http://blog.sina.com.cn/itnewtech>陆凌牛</a>
    <a href=http://blog.sina.com.cn/zhangyu>张玉</a>
    <a href=http://blog.sina.com.cn/baiquanli>白权立</a>
</address>

　　footer、time、address结合使用

<footer>
    <div>
        <address>
        <a title="文章作者：陆凌牛" href="http://blog.sina.com.cn/itnewtech">陆凌牛</a>
        </address>
        发表于<time datetime="2010-10-04">2010年10月4日</time>
    </div>
</footer>

3、HTML 5结构

　　大纲

　　（1）显示编排内容区块

<body>
    <h1>网页级内容区块标题</h1>
    <P>网页级内容区块的正文</P>
    <section>
        <h2>section级内容区块的标题</h2>
        <p>section级内容区块的正文</p>
    </section>
</body>

　　（2）隐式编排内容区块

<body>
    <h1>网页级内容区块标题</h1>
    <P>网页级内容区块的正文</P>
    <!--分析器根据h2等元素判断生成内容区块-->
    <h2>section级内容区块的标题</h2>
    <p>section级内容区块的正文</p>
</body>

　　（3）标题分级：出现新的标题比上一个标题级别低，生成下级内容区块，高或相等生成新的内容区块。

<body>
<section>
    <h2>section级内容区块的标题</h2>
    <p>section级内容区块的正文</p>
    <!--分析器根据h2等元素判断生成内容区块-->
    <h1>新的section级别的内容区块的标题</h1>
    <p>新的section级别的内容区块的正文</p>
</section>
</body>

　　（4）不同的内容区块可以使用相同级别的标题

<body>
<h1>网页的标题</h1>
<article>
    <header>
        <hgroup>
            <h1>文章标题</h1>
            <h2>文章子标题</h2>
        </hgroup>
        <p>文章正文</p>
    </header>
</article>
</body>

　　（5）网页编排示例

<!DOCTYPE html>
<head>
<meta charset="utf-8" >
<title>网页编排示例</title>
</head>

<body>
<!--网页标题-->
<header>
    <h1>网页标题</h1>
    <!--网站导航链接-->
    <nav>
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="help.html">帮助</a></li>
        </ul>
    </nav>
</header>
<!--文章正文-->
<article>
    <hgroup>
        <h1>文章主标题</h1>
        <h2>文章子标题</h2>
    </hgroup>
    <p>文章正文</p>
    <!--文章评论-->
    <section class="comments">
        <article>
            <h1>评论标题</h1>
            <p>评论正文</p>
        </article>
    </section>
</article>
<!--版权信息-->
<footer>
    <small>版权所有：陆凌牛</small>
</footer>
</body>
</html>

　　对新的结构元素使用样式：通知浏览器页面中使用的HTML 5中新增的元素都是以块状方式显示的

　　//追加block声明

　　article，aside，dialog，figure，footer，header，legend，nav，section {dispaly:block;}

　　//正常使用样式

　　nav{float:left;width:20%;}

　　article{float:right;width:79%;}

　　为了IE 8及之前的版本也可正常使用，要添加Javascript脚本

　　docement.createElement("header");

　　docement.createElement("nav");

　　docement.createElement("article");

　　docement.createElement("footer");

　　</script>

　　<style>

　　//正常使用样式

　　nav{float:left;width:20%;}

　　article{float:right;width:79%;}

　　</style>

　　article元素的样式

　　一个网页中可能有多个独立的article元素，每一个article元素都允许有自己的标题与脚注等从属元素，并允许对自己的从属元素单独使用样式。

posted @ 2015-12-09 12:41 dddw 阅读(281) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

dddw

HTML5学习笔记4

公告