dev html

一些关于HTML的基础知识（二）

<body>

<body>标签除了通用属性之外，还支持一些全局的和文档相关的事件绑定：onafterprint、onbeforeprint、onbeforeunload、onblur、onerror、onfocus、onhashchange、onload、onmessage、onoffline、ononline、onpopstate、onredo、onresize、onstorage、onundo、onunload。

onblur/onfocus 可以解决一些文档丢失焦点的问题；onoffline/ononline时对网路的监听；onstorage是对存储的监听；onunload/onload是对页面关闭事件的监听。

内容区域元素

<address>、<article>、<aside>、<footer>、<header>、<nav>、<section>、<main>均为此类型的元素标签。

<address>没有扩展属性，只用于展示联系信息如：邮件、电话、地址等。

  1. <address>用于为<body>或者<article>增加联系人的署名
  2. 除了联系信息之外不能包含任何其他信息；
  3. <address>一般放置在footer之内；

<article>代表文档中独立的区域，可以嵌套使用<article>。

页面和<article>都可以包含<aside>、<footer>、<header>。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<article class="film_review">
  <h2>Jurassic Park</h2>
  <section class="main_review">
    <h3>Review</h3>
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <h3>User reviews</h3>
    <article class="user_review">
      <h4>Too scary!</h4>
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <h4>Love the dinos!</h4>
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>

<aside>用于在文档中标识主要内容的关联或者索引，是内容的一部分，一般可以用来提示页面大纲或者唤出栏。

页面内最多只能有一个<h1>;

页面内对 <h1>–<h6>的使用必须依次进行，不可越级；

文本内容元素

<blockquote>用于标识引用，可以使用cite属性指示内容来源，或者<cite>指示内容来源。<blockquote>是块级元素，如果使用行内元素可以使用<q>。

<dl>、<dt>、<dd>分别代表描述列表（Description Lists）、描述项标题（Description Title）、描述项描述（Description Details）。 在实现术语表（glossary）或者描述元数据信息时比较常见。

<div>是通用的内容区域，应该仅在没有合适的语义化标签的情况下使用。

<figure>、<figcaption>用于处理独立信息的场景，一般被主文档引用，可以自由移动而不会影响主文档的展示；也可以和<blockquote>、<pre>一起使用。

行内文本元素

<abbr>用于定义缩写，title属性提示缩写的全写。

<b>用于引起读者注意（Bring Attention），而不是加粗。

<bdi>、<bdo>用于双向文本处理（Bidirectional Isolate）隔离、重写，对于同时存在两种书写方式的文本比较有用：ltr、rtl。

<br> 一般用于诗歌当中，实际在开发中涉及段落之间的间距应该使用p+margin的方式。

<cite> 用来处理引用当中的作者。

<code> 用来处理代码，是行内元素。

<data> 用来处理数据，而不是时间，其中value属性声明数据的具体数字，在样式中可以通过attr(value)来引用。

<em> 用来强调，而不是斜体，<em>可以嵌套，以进行逐级强调。

Use <em> to indicate stress emphasis.
Use <strong> to indicate importance, seriousness, or urgency.
Use <mark> to indicate relevance.
Use <cite> to mark up the name of a work, such as a book, play, or song.
Use <dfn> to mark up the defining instance of a term.

<kbd> 用来提示内容为键盘的按键，比如<kbd>Ctrl</kbd>Ctrl。

<mark> 用于标记而不是高亮可以和引用的文本配合使用，如果高亮应该用span；

<ruby> 用于给东方语言注音。

1
2
3
4
<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
漢 (Kan) 字 (ji)

<s> 用于标识文本划除的效果，显示等同于text-decoration:line-through;。

<samp> 用于示例的输出，和code一样使用mono字体显示中间内容。这是输出。

<small> 用于制作脚注，其字体较小。

<strong> 用于标识内容的重要性，而<b>只用于引起读者注意，不一样定重要。

<sub> 用于下标，比如C8H10N4O2。

<sup> 用于上标，比如a2 + b2 = c2。

<time>用于显示时间，datetime属性可以标识正确时间。

<u> 用于标识文本错误（Unarticulated Annotation），浏览器在渲染文本时，在其下显示红色波浪线。

<var> 用于定于变量，可以数学或者代码的变量。

<wbr> 用户声明在此处可以分词，当文本内容长过长时，此处可以分词。Line Break Opportunity

通过<details>和<summary>可以产生可折叠的内容。

1
2
3
4
data:hover::after {
    content: ' (ID ' attr(value) ')';
    font-size: .7em;
}

<a>

<a>代表Anchor，即锚点，可以指向到任意的url可以导航打开的资源。

<a>支持download属性，配置此属性后是以下载代替打开。属性的值就是下载的文件名称，如果不配置浏览器会根据Content-Disposition 来确定文件名称；url中的文件名，content-type或者base64字符串中携带的文件类型。

<a>支持ping属性，支持配置多个url地址，当点击行为发生时不是导航打开，而是对url地址发起post请求，请求体的内容为ping。

<a>支持referrerpolicy属性，使用可以参考上一篇文章。

<del>和<ins>用于删除和插入文本的提示；