基础

HTML 5 基础(第一天)


1.HTML 新增基础结构标签

  • header
  • nav
  • section
  • article
  • aside
  • footer

1.1 <header> 标签

<header> 标签定义文档或者文档的一部分区域的页眉。

<header> 元素应该作为介绍内容或者导航链接栏的容器。

该元素内部还可以去包含 h1~h6,hgroup, 或者 p,span 等。

在一个文档中,您可以定义多个 <header> 元素。

注释:<header> 标签不能被放在 <footer>或者另一个 <header> 元素内部。

使用场景:

  • 文章介绍内容
  • 导航链接器的容器

hgroup: 用于组织多个 h1 ~ h6 这样的标题元素.

    <!DOCTYPE html>
    <html>
    <body>
    
    <article>
      <header>
        <h1>Internet Explorer 9</h1>
        <p><time pubdate datetime="2011-03-15"></time></p>
      </header>
      <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
      the  public on March 14, 2011 at 21:00 PDT.....</p>
    </article>
    
    </body>
    </html>

1.2 <nav> 标签

<nav> 标签定义导航链接的部分。

并不是所有的 HTML 文档都要使用到 <nav> 元素。

<nav> 元素只是作为标注一个导航链接的区域。

在不同设备上(手机或者PC)可以制定导航链接是否显示,以适应不同屏幕的需求。

推荐将这些导航链接分别放在相应的 <nav> 元素进行管理.

    <!DOCTYPE html>
    <html>
    <body>
    
    <nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
    </nav>
    
    </body>
    </html>

1.3 <section> 标签

<section> 标签定义了文档的某个区域。

一般用于对界面进行分区,元素通常也可由标题和内容组成。

比如章节、头部、底部或者文档的其他区域。

内部建议包含一个标题h1~h6,也可以包含 article, 嵌套 section 等.

    <!DOCTYPE html>
    <html>
    <body>
    
    <section>
      <h1>WWF</h1>
      <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
    </section>
    
    <section>
      <h1>WWF's Panda symbol</h1>
      <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
    </section>
    
    </body>
    </html>

1.4 <article> 标签

<article> 标签定义独立的内容。

<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。

定义独立的内容,内容通常是一篇帖子,一篇 blog, 一篇短文或者一条完整回复等.

<article> 的潜在来源:

  • 论坛帖子
  • 博客文章
  • 新闻故事
  • 评论

内部可以使用 header,footer,section,article

    <!DOCTYPE html>
    <html>
    <body>
    
    <article>
      <h1>Internet Explorer 9</h1>
      <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
      the  public on March 14, 2011 at 21:00 PDT.....</p>
    </article>
    
    </body>
    </html>

注意:

article 和 section 两个元素非常容易搞混,因为他们可以包含很多的子元素,而且可以相互嵌套.

但是 article 和 section 两个元素 的侧重点不同,

article 侧重表达一篇独立的,完整的文章.

section 侧重表达对页面内容进行分块.

也就是说,如果想表达一块独立完整的内容应该去使用 article

如果想把一块内容分成几个部分,应该用 section

1.5 <aside> 标签

<aside> 标签定义 <article> 标签外的内容。

aside 的内容应该与附近的内容相关。

使用场景:

当前页或当前文章的附属信息。

提示:

通常来说,推荐 <aside> 元素使用 CSS 去渲染成侧边栏.
    <!DOCTYPE html>
    <html>
    <body>
    
    <p>My family and I visited The Epcot center this summer.</p>
    
    <aside>
    <h4>Epcot Center</h4>
    <p>The Epcot Center is a theme park in Disney World, Florida.</p>
    </aside>
    
    </body>
    </html>

1.6 <footer> 标签

<footer> 标签定义文档或者文档的一部分区域的页脚。

<footer> 元素应该包含它所包含的元素的信息。

在典型情况下,该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。

在一个文档中,您可以定义多个 <footer> 元素。

使用场景:

  • 文档创建者姓名
  • 文档的版权信息
  • 使用条款的链接
  • 联系信息等等
    <!DOCTYPE html>
    <html>
    <body>
    
    <footer>
      <p>Posted by: Hege Refsnes</p>
      <p><time pubdate datetime="2012-03-01"></time></p>
    </footer>
    
    </body>
    </html>

1.7 <figure> 标签

规定独立的流内容(图像、图表、照片、代码等等)。

内部可以包含一个或者多个<img>所代表的图片.

除此之外,还可以包含一个 figcaption 来定义该 "图片区域" 的标题.

    <!DOCTYPE html>
    <html>
    <body>
    
    <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    
    <figure>
        <img src="自己填写" alt="替换信息">
    </figure>
    
    </body>
    </html>

1.8 <figcaption> 标签

<figcaption> 标签为 <figure> 元素定义标题。

<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。

提示:<figcaption> 元素被用来为 <figure> 元素定义标题。

    <!DOCTYPE html>
    <html>
    <body>
    
    <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    
    <figure>
      <img src="自己填写" alt="替换信息">
      <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
    </figure>
    
    </body>
    </html>

推荐阅读更多精彩内容

  • 在html中,标签非常多,比如说列表,按钮,图片,文字等等,每一种标签都有自己的使用方法以及相关的约束条件。具体的...
    WEB攻程狮阅读 1,092评论 0 1
  • HTML基础 本文包括 HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、java...
    廖少少阅读 1,096评论 2 21
  • 类 对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。 为相同的类设置相同的样式,或者为不...
    满满正能量_617a阅读 176评论 0 1
  • 超文本标记语言 (HTML, HyperText Markup Language) ,是构成网页的最基础的内容,用...
    Nian糕阅读 330评论 0 4
  • 许久没有读读写写了,竟然找不到一个标题来述说,也不知道自己要写些什么,我只知道我要说的很多很多,迷茫,或者伤感,或...
    Rulu阅读 86评论 0 1