HTML5新增的主体结构元素

相对于HTML4,而言,HTML5是想要把WEB上存在的问题都解决掉。HTML5相对于HTML4来说,HTML5在语法方面做了改变,比如:内容的类型、DOCTYPE:在HTML4中需要指明哪个版本,而在HTML5中则不再需要;还有指定字符编码:HTML5直接使用<meta charset="UTF-8">即可;且具有boolean属性:<input type="checkbox" checked=“true”>其中的checked在不指定任何boolean值时默认也是true;

而HTML5相对于HTML4来说,新增了article、selection、nav、aside以及time、pubdate元素:

1、article元素:

      article元素代表页面或者应用程序中独立的、完善的可以独立被外部引用的内容。它可以是一篇博客或者报刊中的 文章,一篇帖子、一段用户评论或独立的插件,或其他任何独立的内容。且article元素是可以嵌套使用的。其中p元素是承载说明的内容。

<article>
        <header>
            <h1>welcome</h1>
            <p>hello,my friends!</p>
        </header>
        <p>hello</p>
        <footer>
            <p>This is footer~</p>
        </footer>
    </article>

代码运行显示:

2、embel元素:

embed src=url

说明:embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等, Netscape及新版的IE 都支持。url为音频或视频文件及其路径,可以是相对路径或绝对路径。
示例:<embed src="your.mp3">

 <article>
       <h1>这是一个内嵌页面</h1>
        <object>
            <embed src="#" width="400" height="400"></embed>
        </object>
    </article>

运行结果如下:



3、section元素:

      section元素用于对网站或应用程序中页面内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素。

且section通常不推荐使用到没有标题内容的地方,以及section与article元素是不同的。

section一定是要存在一个标题的!!!

且不要讲section元素作为设置样式的页面容器。

如果article元素、aside元素、nav元素更符合使用条件,那不要使用section元素。

    <section>
        <h1>苹果</h1>
        <p>apple</p>
    </section>
    <article>
        <h1>苹果</h1>
        <p>apple</p>
        <section>
            <h2>橘子</h2>
            <p>orange</p>
        </section>
        <section>
            <h2>武汉</h2>
            <p>Welcome tu wuhan!</p>
        </section>
    </article>
运行代码显示:


4、nav元素:

      nav元素是一个可以用作页面导航的连接组,其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素,只需要将主要的基本的连接组放进nav元素即可。

nav元素应用场景:

   *传统导航条

   *侧边栏导航

   *页内导航

   *翻页操作


5、aside元素:

      aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有区别于主要内容的部分。

运行代码显示结果如下:

6、time元素:

utc标准时间:

time实例:


7、pubdate:

pubdate表示当前具体的发布时间!!!pubdate属性指示<time>元素中的日期/时间是文档(或最近的<article>元素)的发布日期。

    <header>
    <article>
        <h1>hehe</h1>
        <p>发布日期
        <time datetime="2015-12-15" pubdate>2015-12-15</time>
        </p>
        <p>舞会事件
            <time datetime="2015-12-25">2015-12-25</time>
        </p>
    </article>
    </header>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值