SOURCE

console 命令行工具 X clear

                    
>
console
<dl>
  <dt>
    描述列表
  </dt>
  <dd>
    1.浏览器的默认样式会在描述列表的描述部分(description description)和描述术语(description terms)之间产生缩进。
  </dd>
  <dd>
    2.请注意:一个术语
    <code>
      &lt;dt&gt;
    </code>
    可以同时有多个描述
    <code>
      &lt;dd&gt;
    </code>
  </dd>
  <dd>
    3.如果不写
    <code>
      &lt;dl&gt;
    </code>
    可以出现效果,但不属于一个块儿,上下不会换行
  </dd>
</dl>
<!-- 描述列表内嵌 -->
<dl>
  <dt>
    描述列表内嵌<code>&lt;li&gt;</code>
  </dt>
  <li>
    <dd>
      浏览器的默认样式会在描述列表的描述部分(description description)和描述术语(description terms)之间产生缩进。
    </dd>
  </li>
  <li>
    <dd>
      请注意:一个术语
      <code>
        &lt;dt&gt;
      </code>
      可以同时有多个描述
      <code>
        &lt;dd&gt;
      </code>
    </dd>
  </li>
  <li>
    <dd>
      如果不写
      <code>
        &lt;dl&gt;
      </code>
      可以出现效果,但不属于一个块儿,上下不会换行
    </dd>
  </li>
</dl>
<!-- 块儿引用 -->
<p>块儿引用</p>
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>
    这里面所有的东西都可以当成块儿引用内容。
  </p>
</blockquote>

<!-- 行内引用 -->
<p>行内引用</p>
<p>
  浏览器默认将其作为普通文本放入引号内表示引用,就像下面:
</p>
  <p>
    -------
    <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">这是一个行内引用
    </q>
  </p>

<!-- 引文 -->
<p>引文</p>
<p>
  这个就是引文->
  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
    <cite>&lt;cite&gt;</cite>
  </a>
  看起来效果是斜体~
</p>

<!-- 缩略语 -->
<p>缩略语</p>
<p>
  缩略语或缩写可以使用<code>&lt;abbr&gt;</code>包裹,例如<abbr title="傻逼">SB</abbr><q>傻逼</q>的缩略语,当鼠标移动上去,会出现相应的解释(解释包含在<code>title</code>)属性之中
</p>

<!-- 标记联系方式 -->
<p>标记联系方式</p>
  <p>
    <code>&lt;address&gt;</code>元素是为了标记编写HTML文档的人的联系方式,而不是任何其他的内容。
  </p>
<address>
  <p>
  例如:这个是<a href="http://github.lesicaibe.com">LesicaiBe</a>写的
  </p>
</address>

<!-- 上标和下标 -->
<p>上标和下标</p>
<p>当你使用日期25<sup>th</sup>、化学方程式C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>、和数学方程式X<sup>2</sup>+X+1=10时会偶尔使用上标和下标。 <code>&lt;sup&gt;</code><code>&lt;sub&gt;</code>元素可以解决这样的问题</p>

<!-- 展示计算机代码 -->
<p>展示计算机代码</p>
<p>有很多元素都可以展示计算机代码:</p>
<ul>
  <li>
    <code>&lt;code&gt;</code>用于标记计算机通用代码。
  </li>
  <li>
    <code>&lt;pre&gt;</code>用于标记固定宽度的文本块儿,其中保留空格(通常是代码块儿)。
  </li>
  <li>
    <code>&lt;var&gt;</code>用于标记具体的变量名。
  </li>
  <li>
    <code>&lt;kbd&gt;</code>用于标记输入电脑的键盘(或其他类型)输入。
  </li>
  <li>
    <code>&lt;samp&gt;</code>用于标记计算机程序的输出。
  </li>
</ul>
<p>例如:</p>
<pre>
<code>
var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}
</code>
</pre>

<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>

<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>


<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>
$ <kbd>ping mozilla.org</kbd>
<samp>
PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms
</samp>
</pre>


<!-- 标记时间和日期 -->
<p>标记时间和日期</p>
<ul>
  <li>
<!-- Just year and month -->
<time datetime="2016-01">January 2016</time>    
  </li>
  <li>
<!-- Just month and day -->
<time datetime="01-20">20 January</time>    
  </li>
<li>
  <!-- Just time, hours and minutes -->
<time datetime="19:30">19:30</time>
</li>
  <li>
  <!-- You can do seconds and milliseconds too! -->
<time datetime="19:30:01.856">19:30:01.856</time>
</li>
  <li>
  <!-- Date and time -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
</li>
  <li>
  <!-- Date and time with timezone offset-->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
</li>
  <li>
    <!-- Calling out a specific week number-->
<time datetime="2016-W04">The fourth week of 2016</time>
  </li>
</ul>
code {
  background-color: #eeeeee;
}