HTML5语义化你的文档

本文转自 HTML5语义化你的文档,如有侵权,请联系删除。

一、列举

1.1 智能提示

<dfn id="abbr">
<abbr title="这是个abbr标签">鼠标hover时查看详细信息</abbr>
</dfn>

鼠标hover时查看详细信息

1.2 搜索提示

<input list="browsers" placeholder="datalist" />
<datalist id="browsers">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Internet Explorer"></option>
<option value="Opera"></option>
</datalist>

1.3 展示更多

<details>
<summary>details summary</summary>
details元素可创建一个挂件,仅在被切换成展开状态时,它才会显示内含的信息。summary元素可为该部件提供概要或者标签。
</details>

details summary details元素可创建一个挂件,仅在被切换成展开状态时,它才会显示内含的信息。summary元素可为该部件提供概要或者标签。

1.4 提示框

<dialog open>
<p>dialog标签 类似提示框 open属性开关</p>
</dialog>

dialog标签 类似提示框 open属性开关

1.5 字体形态

<em>着重阅读元素 em标签</em>

<i>i标签斜体</i>

<small>small标签变小</small>

<strong>strong标签加粗</strong>

<p>sub标签字体更低: H<sub>2</sub>O</p>

<p>下划线 <u>speling</u> mistakes, so the writer can <u>u标签</u> them.</p>

着重阅读元素 em标签
i标签斜体
small标签变小
strong标签加粗

sub标签字体更低: H2O

下划线 speling mistakes, so the writer can u标签 them.

1.6 地址

<address>
<a href="mailto:1271255653@qq.com">联系邮箱</a>
</address>

联系邮箱

1.7 独立结构

<article>
<h4>独立结构article</h4>
</article>
<section>section独立部分</section>

独立结构article

section独立部分

1.8 侧边栏

<aside>aside独立的一部分</aside>

aside独立的一部分

1.9 呈现计算机代码片段

<code>code标签代码片段</code>
<var>var 表示变量标签</var>

code标签代码片段
var 表示变量标签

2.0 del 删除线

<del>del标签下架商品</del>
<s>s标签</s>

del标签下架商品
s标签

2.1 内容展示

<header>
<main>main标签的内容<em>这是em标签</em></main>
<p>time 标签<time>20:00</time>.</p>
<progress value="40" max="100"></progress>
<mark>mark标签高亮</mark>
</header>
<nav>nav标签</nav>
<footer>
我是footer一个底部标签
</footer>

main标签的内容_这是em标签_

time 标签20:00.

mark标签高亮

nav标签

我是footer一个底部标签

2.2 图片上的字体

<figure>
<img
src="https://interactive-examples.mdn.mozilla.net/media/examples/elephant-660-480.jpg"
/>
<figcaption>figure figcaption 组合</figcaption>
</figure>

HTML5语义化你的文档

figure figcaption 组合

2.3 iframe

<iframe
src="https://www.baidu.com"
width="100"
height="100"
frameborder="10"
></iframe>

2.4 ol

<ol type="a">
<li value="1">third item</li>
<li>fourth item</li>
<li>fifth item</li>
</ol>
  1. third item
  2. fourth item
  3. fifth item
<link href="favicon.ico" rel="icon" />

2.5 select下的分界线

<select name="" id="">
<optgroup label="我是optgroup">
<option>111111</option>
<option selected>222222</option>
</optgroup>
</select>

111111 222222

2.5 输出

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50" /> +
<input type="number" name="a" value="10" /> =
<output name="result"></output>
</form>
  • =

2.5 带有格式的内容

<pre>
L TE
A A
C V
R A
DOU
LOU
REUSE
QUE TU
PORTES
ET QUI T'
ORNE O CI
VILISÉ
OTE- TU VEUX
LA BIEN
SI RESPI
RER - pre标签
</pre>
    L          TE
    A       A
        C    V
        R A
        DOU
        LOU
        REUSE
        QUE TU
        PORTES
    ET QUI T'
    ORNE O CI
        VILISÉ
    OTE-  TU VEUX
        LA    BIEN
    SI      RESPI
            RER       - pre标签

2.5 拼音

<ruby>
<rb>旧</rb>
<rb>金</rb>
<rb>山</rb>
<rt>jiù</rt>
<rt>jīn</rt>
<rt>shān</rt>
<rtc>San Francisco</rtc>
</ruby>

旧 金 山 jiù jīn shān San Francisco

2.5 trach 字幕

上一篇:粒子群优化算法(PSO)之基于离散化的特征选择(FS)(一)


下一篇:Java方法的递归