html 5 新的标签

最新推荐文章于 2023-02-24 17:34:41 发布

Zhi.C.Yue

最新推荐文章于 2023-02-24 17:34:41 发布

阅读量316

点赞数 1

分类专栏：学习文章标签： html5

本文链接：https://blog.csdn.net/Jacoh/article/details/87891886

版权

学习专栏收录该内容

50 篇文章 0 订阅

订阅专栏

html 5 新标签介绍
(部分吧，非完整)

结构化标签

使用关系
并列：header、section、footer
嵌套：header、section、footer > aside、article、figure、hgroup、nav > div

多媒体标签

video、audio、source、canvas、embed

状态标签

meter、process

<meter value="200" min="20" max="380" low="200" high="240" optimum="220"></meter>
<meter value="180" min="20" max="380" low="200" high="240" optimum="220"></meter>
<meter value="0.75">75%</meter>

<progress value="30" max="100"></progress>
<progress max="100"></progress>

说明：第二个progress 效果是动态的加载中

列表标签

datalist、details

<input placeholder="请选择..." list="phoneList"/>
<datalist id="phoneList">
  <option value="Jay">Jay</option>
  <option value="Chao">Chao</option>
  <option value="Len">Len</option>
  <option value="Hulj">Hulj</option>
</datalist>

<details open="open">
  <summary>魁拔-神童</summary>
  <p>
    卡拉肖克·潘，25岁，来自地界龙国，卡拉肖克战斗家族传人，超一流脉术战士。潘能开启的脉门数目前未知，但他是十四岁就可以开启六个的脉门的脉术神童。
  </p>
</details>

注释标签

ruby、rt

<ruby>龘<rt>Da</rt></ruby>
<!-- 兼容性标签 -->
<ruby>龘<rp>(</rp><rt>Da</rt><rp>)</rp></ruby>

其他标签

mark、output

<p>我很帅，比任何人都<mark>帅</mark></p>

<form oninput="totalPrice.value = parseInt(price.value)*parseInt(number.value)">
    <input type="text" id="price" value="5000">
    *<input type="number" id="number" value="1">
    =<output name="totalPrice" for="price number"></output>
</form>

删除的标签

font、s、frame、frameset、noframes 等

附：（网站常见的标签结构）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<header>
  <div class="container">
    <a href="index.html"><img src="logo.png"></a>
    <nav>
      <a class="active" href="index.html">One</a>
      <a href="#">Two</a>
      <a href="#">Three</a>
    </nav>
  </div>
</header>
<section>
  <ul>
    <li class="active"><img src="banner1.jpg"></li>
    <li class="left"><img src="banner2.jpg"></li>
    <li class="right"><img src="banner3.jpg"></li>
  </ul>
</section>
<section class="main">
  <aside>
    <h1>Title</h1>
    <dl>
      <dt>subTitle</dt>
      <dd><img src="01.png"></dd>
      <dd>text</dd>
    </dl>
    <dl>
      <dt>subTitle</dt>
      <dd><img src="04.png"></dd>
      <dd>text</dd>
    </dl>
  </aside>
  <article>
    <h1>Welcome to</h1>
    <p>Today is a good day.</p>
    <img src="article.jpg">
    <p>isn't it?</p>
  </article>
</section>
<footer>
  <div class="container">
    <p>Copyright © 2019 zcy.com All Rights Reserved.</p>
    <span>
      <img src="weichat.png">
      <img src="sina.png">
      <img src="qq.png">
    </span>
  </div>
</footer>
</body>
</html>