《Web前端笔记2.10-2.11》 HTML5 新增的结构元素

课程背景:

在 HTML5 中,为了使文档的结构更加清晰明确,追加了几个与页眉、页脚、内容区块等文档结构相关联的元素。

核心内容:
1.Article
2.Section
3.Nav
4.Aside
5.Time
6.Pubdate

7. header 元素
8. footer 元素
9. hgroup 元素
10. address 元素

article 元素

article 元素代表文档,页面或应用程序中独立的、完整的、可以独自被外部引用的内容。

section 元素

本课时讲解 HMTL5 新增的主体结构元素 section,对于网站或应用程序中页面上的内容进行分块。

<body>
    <section>
        <h1>苹果</h1>
        <p>这是一个水果,可以吃。而且可以吃</p>
    </section>

    <article>
        <h1>苹果</h1>
        <p>这是一个水果,可以吃。而且可以吃</p>
        <section>
            <h2>红富士</h2>
            <p>这是一种外表很红的苹果,吃起来也不错。</p>
        </section>
        <section>
            <h2>国光</h2>
            <p>这是一种外表很红的苹果,吃起来也不错。</p>
        </section>
    </article></body>

注意:

1.不要将section元作为设置样式的页面容器,那是div的工作

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

3.没有标题内容 不要使用section元素

nav 元素

导航,可以作为页面导航连接组。将主要的、基本的连接组放进nav元素:

· 传统导航条

· 侧边栏导航

· 页内导航

· 翻页操作

<body>
    <nav>
        <ul>
            <li><a href="#">主页    </a></li>
            <li><a href="#">开发文档</a></li>
        </ul>
    </nav>
    <article>
        <header>
            <h1>HTML5与CSS3的历史</h1>
            <nav>
                <ul>
                    <li><a href="#">HTML5历史</a></li>
                    <li><a href="#">CSS3历史</a></li>
                </ul>
            </nav>
        </header>
        <section>
            <h1>HTML5历史</h1>
            <p>...</p>
        </section>
        <section>
            <h1>CSS3历史</h1>
            <p>...</p>
        </section>
        <footer>
            <a href="#">删除</a>
            <a href="#">修改</a>
        </footer>
    </article>
    <footer>
        <p><small>版权声明</small></p>
    </footer>
</body>

注意:

html5中不能使用menu元素代替nav元素,menu元素是用在发出命令的菜单上的,是种交互元素,也可以说是用在web应用上的。

aside 元素

aside,表示当前或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条。

<body>
    <header>
        <h1>js入门</h1>
    </header>

    <!--文章的附属信息部分-->
    <article>
        <h1>语法</h1>
        <p>文章的正文。。。。。。</p>
        <aside>
            <h1>名词解释</h1>
            <p>语法:这是一个对语言来说很重要的内容体</p>
        </aside>
    </article>

    <!--当前页面的附属信息-->
    <aside>
        <nav>
            <h2>评论</h2>
            <ul>
                <li><a href="#">2015-8-10</a></li>
                <li><a href="#">大牛:真希望能好好地学一下</a></li>
            </ul>
        </nav>
    </aside>

    <!--也可用于广告单元,如网页右下角的弹出广告等-->
</body>

time 元素和 pubdate 属性

主体结构元素 time、pubdate 属性,用来无歧义、明确地对机器的日期和时间进行编码,并且以让人易读的方式来展现它,这个元素就是 time 元素。

<body>
    <article>
        <h1>苹果</h1>
        <p>发布日期
            <time datetime="2015-10-10" pubdate="true">2015-10-10</time>
        </p>
        <p>舞会时间
            <time datetime="2015-10-12">2015-10-12</time>
        </p>
    </article>
</body>

header 元素

主要是网页的头部,也出现在主体内容<article>的头部等。。。

可包含nav等很多元素进去。

footer 元素和 hgroup 元素

footer是网页的底部,也出现在主体内容<article>的底部等。。。

hgroup是包含多个h标签的时候使用

address 元素

包含地址、邮件、等联系信息。

网页编排规则

1. 显示编排内容区域块(明确使用section等元素创建区域块,每个区域使用标题h1-h6)

2. 隐式编排内容区域块(不明确使用section等元素,使用h1-h6把区域块自动创建出来)

3. 标题分级(h1~h6)

4. 不同区域块可以使用相同级别的标题

示例:

 1 <body>
 2     <header>
 3         <h1>网页标题</h1>
 4         <nav>
 5             <ul>
 6                 <li><a href="#">首页</a></li>
 7                 <li><a href="#">帮助</a></li>
 8                 <li><a href="#">联系</a></li>
 9             </ul>
10         </nav>
11     </header>
12     <article>
13         <hgroup>
14             <h1>文章主标题</h1>
15             <h2>文章子标题</h2>
16         </hgroup>
17         <p>文章正文</p>
18         <section>
19             <div>
20                 <article>
21                     <h1>评论标题</h1>
22                     <p>评论正文</p>
23                 </article>
24             </div>
25         </section>
26     </article>
27     <footer>
28         <small>版权所有:...</small>
29     </footer>
30 </body>
时间: 2025-01-05 15:31:34

《Web前端笔记2.10-2.11》 HTML5 新增的结构元素的相关文章

HTML5新增的结构元素

HTML5的结构 一:新增的主体结构元素 在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉,页脚内容区块等文档结构相关联的结构元素. 1.1article元素 article元素代表文档,页面或应用程序中独立的完整的,可以独自被外部引用的内容,<article> 标签定义外部的内容.article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联, 另外article元素也可以用来表示一个插件. <time> 标签定义日期或时间,或者两者.pubdate

HTML5新增的结构元素 详解

这篇文章我们不老生常谈的讲基础的HTML 就讲讲H5中新添加的一些知识 ?首先废话不多说 先来看看H5添加了那些新的结构元素 标签 说明 header 页面或页面中某一个区块的页眉,通常是一些引导和导航信息. nav 可以作为页面导航的链接组 section 页面中的一个内容区块,通常由内容及其标题组成 article 代表一个独立的.完整的相关内容块,可独立于页面其它内容使用 aside 非正文的内容,与页面的主要内容是分开的,被删除而不会影响到网页的内容 footer 页面或页面中某一个区块

《Web前端笔记2.9》 HTML 5 与HTML 4 的区别

推出的理由 HTML的出现是为了把目前Web上存在的各种问题一并解决了. · Web浏览器之间的兼容性很低 · 文档结构不够明确(整个页面的div,没有语义化) · Web应用程序的功能受到了限制 语法的改变 DOCTYPE声明(<!DOCTYPE html>) 指定字符编码(<meta charset="UTF-8">) 可以省略标记的元素 具有boolean值的属性(<input type="checkbox" checked>

2.HTML5新增的其他元素

HTML5新增的其他元素: video元素用于定义视频. audio元素用于定义音频. embed元素用于插入各种多媒体,格式可以是Midi.Wav.AIFF.AU.MP3等. mark元素主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字.mark元素的一个比较经典的应用就是在搜索结果中向用户高亮显示搜索关键词. progress元素表示运行中的进程,可以使用process元素来显示JavaScript中消耗时间的函数的进程.   <progress value="22"

HTML5新增的语义元素、JS常用对象

HTML5新增的语义元素 <header>元素表示页面中一个内容区域或整个页面的标题,通常他可能是一个页面中的(指主体标记中的第一个元素),可以包含站点的标题.Logo和旗帜广告 <header> <img src="logo.png"> <h1>YEN的Java Web之路</h1> </header> <footer>元素表示整个页面或页面中一个区域块的脚注,通常包含一些基本信息,包括一些基本信息:

HTML5 中的结构元素

HTML5 中的结构元素 https://www.cnblogs.com/xiaohuochai/p/5087815.html CSS 命名规范 1.http://mp.weixin.qq.com/s?__biz=MzI0NDAzOTYxMw==&mid=402255125&idx=3&sn=f13ca64eb1bcc4bf31aefdc189ccc26b#rd 2.http://www.imooc.com/article/5219 拥有html5大纲 原文地址:https://w

百度web前端面试2015.10.18

邮件里通知的周日下午两点参加百度校招面试,我13:10分就到了,前台先让我拿了个面试资格单(上面是我的信息),然后在web前端面试入口排队,面试在百度食堂举行的,等了大概1个小时,放我去面试.都是一对一面试,人很多. 下面是面试过程:没让我自我介绍,有的会让先自我介绍,简单看了下我的简历开始问我是不是自学的,(计算机专业不开设这个专业,都是自学加项目经验)为什么选择前端开发,你怎么看前端开发这个岗位的.说那这样我就从简单到难的问你,由浅入深就知道你的水平了,面试官都很年轻,人都不错. 1:说一下

web前端笔记1

web1.0时代:(联合) web2.0时代:(互动) 互联网没有崩溃,比以往更加重要.更加注重用户的交互作用. web3.0时代:(技术革新.统一通信协议) 语义化实现.(发展阶段) web4.0(AI人工智能) web前端工程师: 侠义:html.css.js 实习生要求:

前端开发入门到实战:HTML5新增和废弃的标签

一.废弃的标签 以下的 HTML 4.01 元素在HTML5中已经被删除,虽然浏览器为了兼容性考虑都还支持这些标签,但建议使用新的替代标签,矛盾的是老浏览器对新标签的支持度又不够,视项目的受众对象而定了. 1.能用CSS代替的元素 这些元素包含basefont.big.center.font.s.strike.tt.u.这些元素纯粹是为页面展示用的,表现的内容应该由CSS完成. 2.frame框架 这些元素包含frameset.frame.noframes.HTML5中不支持frame框架,只支