zoukankan      html  css  js  c++  java
  • HTML5的全新语义化元素

    HTML5中的ID值可以用数字开头,HTML5的ID命名方面唯一需要记住的是名字中间不能有空格且保证在页面唯一。

    1.<section>

      <section>元素用来定义文档或应用程序中的区域(或节)。例如,可以用它组织你的个人信息,一个<section>用于联系信息,另一个用于新闻动态。需要重点理解的是用它的目的不是为了美化样式。如果你只想将某个元素包裹起来以便设置样式,那应该和以前一样继续使用<div>。

    2.<nav>

      <nav>元素用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域。因为<nav>用于主导航区域,所以严格来讲它不是为页脚或其他经常会包含一组链接的区块而设计的(虽然将它用在这些区块里包含链接也没问题)。

    3.<article>

      <article>元素与<section>元素很容易混淆。它是用来包裹独立的内容片段。当搭建一个页面时,想想你准备放入<article>标签的内容能否作为一个整块而被复制粘贴到另外一个完全不同的网站且能保持完整的意义?另一种方法是,想想包裹在<article>中的内容能否在RSS订阅源中独立成为一篇文章?应该使用<article>标签包裹的内容,最明显的例子就是博客正文。注意,如果出现嵌套的<article>元素,那内层的<article>元素内容应该和外层文章内容直接有关。

    4.<aside>

      <aside>元素用来表示与页面主内容松散相关的内容。在实践中,我经常将其用作侧边栏(当它包含合适的内容时)。另外,引文、广告以及导航元素(如友情链接等等)也可以使用它。

    5.<hgroup>

      如果页面中有一组使用<h1>、<h2>、<h3>等标签的标题、标语和副标题,则可以考虑使用<hgroup>将它们包裹起来。这样在HTML5的大纲结构算法中就会隐藏次级标题元素,从而只让<hgroup>中的第一个标题进入文档大纲。

      可以使用下面的HTML5大纲生成器来测试生成网页的大钢结构:

      (1)http://gsnedders.html5.org/outliner/

      (2)http://hoyois.github.com/html5outliner/

    6.<header>

      由于<header>元素不计入大纲结构,所以不能用它来划分内容结构,而是应该用它来包含对区域内容的介绍说明。在实际使用中,<header>可用作网站头部的“刊头”区域,也可用作对其他内容如<article>元素的简要介绍。

    7.<footer>

      和<header>一样,<footer>元素也不计入大钢结构,所以也不能用于划分内容结构。应该用它来包含其所在区域的辅助信息。例如可以用它包含一组指向其他页面的超链接,或者用它包含版权信息。和<header>一样,他也可以视情况在同一个页面上多次出现。例如博客网站的页脚可以使用它,同时博客正文<article>元素内的文脚也可以使用它。不过规范指出,博文作者的联系信息应该使用<address>元素来包裹。

    8.<address>

      <address>元素用于明确地标注离其最近的<article>或<body>祖先元素的联系信息。为避免产生混淆,请记住<address>中一般不放具体的邮政地址,除非相应内容确实需要联系地址。而邮政地址和其他可能会改变的联系信息应该使用<p>标签来包裹。

    9.<b>

      过去,人们通常利用<b>元素为文本添加样式,但它的实际用途是“给文本加粗”。不过现在你可以正式将其用作样式钩子,因为现在HTML5标准对<b>的定义是:

      ......一小段文本,纯粹为了吸引人的注意,除此之外不传达任何重要性,也不暗示其他语态或语气,如文档摘要中的关键词、评论中的产品名称、交互式文本软件中的可操作单词,或者文章的导语。

    10.<em>

      ......强调内容中的重点

    11.<i>

      ......一小段有不同语态或语气的文字,或者是样子与普通文章有所差异以便表明不同特点的文字。简单地说,它不仅仅是用来给某些文字加斜线效果的。

      HTML5还有大量文本级语义标签,想要全面了解,地址如下:

      http://www.w3.org/html/wg/drafts/html/master/semantics.html#text-level-semantics

  • 相关阅读:
    19-1 在页面中渲染基本的组件
    19 使用Vue实例的render方法渲染组件
    17 webpack中babel的配置
    前端待复习汇总
    301,302,303,307重定向区别
    尾递归
    Binary-to-text ecoding:
    object Object {} any unknown
    Vue中的model
    全局namespace与模块内的namespace
  • 原文地址:https://www.cnblogs.com/xuying/p/4657061.html
Copyright © 2011-2022 走看看