fi3ework's Studio.

HTML5大纲及计算方法

2017/06/06 Share

HTML5大纲及计算方法

HTML5的好处

  1. 在HTML4中定义章节性段落往往需要<div>,但<div>有时又扮演着表达样式的作用,所以在HTML4中章节的定义和范围都是不精确的。在HTML5中,<div>不再计入大纲算法。

  2. 如果在主文档中嵌套了子文档(比如在一个h2文档中又出现一个h1文档),会造成大纲的混乱。引入新的元素<article>,<section>,<nav><aside>,他们总是成为其最近祖先章节的子章节。

  3. <aside>元素不会插入到大纲当中,可以用来容纳广告或者解释区域。

HTML5的大纲算法

<body> 元素中的所有内容都是节段中的一部分。节段在HTML5中是可以嵌套的。<body> 元素定义了主节段,基于主节段,可以显式或隐式定义各个子节段的划分。

显式分节

显式定义的节段是通过<body>, <section>, <article>, <aside><nav> 这些标记中的内容。

在显示分节时,其决定性作用的是段落的结构,而不是每个段落对应的标题的结构(因此,即使是被嵌套的section也能拥有一个<h1>标题,虽然这种做法并不推荐)。

隐式分节

HTML标题元素 (<h1><h6>) 定义了一个新的,隐式的节段,当其不是父节段第一个标题时。这种隐式放置节段的方式通过在父节点中与之前标题的相对级别来定义。如果比之前的标题级别更低,那么在节段里开始新的隐式子节段。

如果与前面标题的级别相同,那么闭合前面的节段(可能是显式标记的节段!)并开始新的同一级别的隐式节段:

分节根

分节根是一个HTML元素,这个元素可以拥有自己的大纲,但是元素内部的节段和标题对其祖先的大纲没有贡献。除了文档的逻辑分节根<body>元素,这些元素经常在页面中引入外部内容:<blockquote>, <details>, <fieldset>, <figure><td>

大纲之外的节段

用于表示侧边分节元素的<aside>和导航分节元素<nav>,页眉<header>页脚<footer>不计入大纲。

即这些元素及其包含的元素不会对大纲产生任何影响。

在不支持HTML5的浏览器器中使用HTML5

在不支持HTML5的IE9-浏览器中使用HTML5标签的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--[if lt IE 9]>
<script>
document.createElement("header" );
document.createElement("footer" );
document.createElement("section");
document.createElement("aside" );
document.createElement("nav" );
document.createElement("article");
document.createElement("hgroup" );
document.createElement("time" );
</script>
<noscript>
<strong>Warning !</strong>
Because your browser does not support HTML5, some elements are simulated using JScript.
Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
</noscript>
<![endif]-->

参考文献:

CATALOG
  1. 1. HTML5大纲及计算方法
    1. 1.0.1. HTML5的好处
    2. 1.0.2. HTML5的大纲算法
      1. 1.0.2.1. 显式分节
      2. 1.0.2.2. 隐式分节
    3. 1.0.3. 分节根
      1. 1.0.3.1. 大纲之外的节段
      2. 1.0.3.2. 在不支持HTML5的浏览器器中使用HTML5
    4. 1.0.4. 参考文献: