跳转至

HTML5#

约 167 个字 26 行代码 预计阅读时间 4 分钟

H5-布局标签#

  • header: 头部
  • footer: 底部
  • nav: 导航
  • article: 文章
  • section: 区块
  • aside: 侧边栏
  • main: 主要内容,WHATWG没有定义,但是W3C定义了
  • hgroup: 标题组,W3G将其删除
H5-布局标签
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>H5布局标签</title>
</head>
<body>
<!--头部-->
<header>
  头部
</header>
<hr>
<!--导航-->
<nav>
  导航
</nav>
<hr>
<!--主要内容-->
<main>
  <aside style="float: right">
    侧边栏
  </aside>
  主要内容
  <!--文章-->
  <article>
    <!--独立章节-->
    <section>
      <h1>文章标题1</h1>
      <p>文章内容1</p>
    </section>
    <section>
      <h1>文章标题2</h1>
      <p>文章内容2</p>
    </section>
    <section>
      <h1>文章标题3</h1>
      <p>文章内容3</p>
    </section>
  </article>
</main>
<hr>
<footer>
  底部
</footer>
</body>
</html>

示例

H5-状态标签#

H5-状态标签
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>H5状态标签</title>
</head>
<body>
<div>
  <h2>基本用法</h2>
  <meter value="10" min="0" max="100" low="20" high="80"></meter>
  <meter value="50" min="0" max="100" low="20" high="80"></meter>
  <meter value="90" min="0" max="100" low="20" high="80"></meter>
</div>
<div>
  <h2>optimum属性</h2>
  <!--optimum落在哪个区间,哪个区间为正常值-->
  <meter value="10" min="0" max="100" low="20" high="80" optimum="90"></meter>
  <meter value="50" min="0" max="100" low="20" high="80" optimum="90"></meter>
  <meter value="90" min="0" max="100" low="20" high="80" optimum="90"></meter>
</div>
<div>
  <h2>进度</h2>
  <progress></progress>
  <progress max="100" value="20"></progress>
</div>
</body>
</html>

示例

H5-搜索框关键字提示#

H5-搜索框关键字提示
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<form action="#">
  <label>
    <input type="text" list="singers">
  </label>
  <input type="submit">
</form>
<datalist id="singers">
  <option value="zjl">周杰伦</option>
  <option value="zdy">周冬雨</option>
  <option value="mdm">马冬梅</option>
  <option value="my">马云</option>
</datalist>
</body>
</html>

示例

H5-详细信息展现元素#

H5-详细信息展现元素
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>H5问题和答案</title>
</head>
<body>
<details>
  <summary>1. 什么是HTML5？</summary>
  <p>HTML5是下一代HTML标准，它的目标是为了在移动设备上支持多媒体。HTML5是HTML4.01的升级版本，它的目标是为了在移动设备上支持多媒体。</p>
</details>
</body>
</html>

示例

H5-文本标签#

H5-文本标签
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>H5文本标签</title>
</head>
<body>
<h2>拼音注释-ruby</h2>
<ruby>
  注音或字符注释。
  <rt>zhù yīn huò zì fú zhù shì</rt>
</ruby>

<h2>标记-mark</h2>
截至2019年，<mark>中华民国福建省</mark>法理上辖有两个二级行政区，全数为县，分别为金门县和连江县。
</body>
</html>

示例

H5-表单相关#

  • placeholder: 提示文字
  • required: 必填项
  • autofocus: 自动聚焦
  • autocomplete: 自动填充
  • pattern: 正则表达式
H5-表单相关
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>H5表单</title>
</head>
<body>
<h2>表单提示-placeholder</h2>
<form action="">
  <input type="text" name="name" placeholder="我是提示信息">
  <input type="submit">
</form>

<h2>必填限制-required</h2>
<form action="">
  <input type="text" name="name" required>
  <input type="submit">
</form>


<h2>自动对焦-autofocus</h2>
<form action="">
  <input type="text" name="name" autofocus>
  <input type="submit">
</form>

<h2>记录历史信息-autocomplete</h2>
<form action="">
  <input type="text" name="name" autocomplete="on">
  <input type="submit">
</form>


<h2>正则表达式-pattern</h2>
<form action="">
  <input type="text" name="name" placeholder="请输入6个字符" pattern="\w{6}">
  <input type="submit">
</form>

<h2>邮箱</h2>
<form action="">
  <input type="email" name="name">
  <input type="submit">
</form>

<h2>网址</h2>
<form action="">
  <input type="url" name="name">
  <input type="submit">
</form>

<h2>电话</h2>
<form action="">
  <input type="tel" name="name">
  <input type="submit">
</form>

<h2>日期</h2>
<form action="">
  <input type="date" name="name">
  <input type="submit">
</form>

<h2>时间</h2>
<form action="">
  <input type="time" name="name">
  <input type="submit">
</form>

<h2>数字</h2>
<form action="">
  <input type="number" name="name">
  <input type="submit">
</form>

<h2>搜索</h2>
<form action="">
  <input type="search" name="name">
  <input type="submit">
</form>

<h2>范围选择</h2>
<form action="">
  <input type="range" name="name" max="80" min="20">
  <input type="submit">
</form>

<h2>颜色</h2>
<form action="">
  <input type="color" name="name">
  <input type="submit">
</form>

</body>
</html>

示例

H5-视频标签#

H5-视频标签
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>视频标签</title>
</head>
<body>
<h2>视频</h2>
<video src="../basic/media/sp.mp4" width="300" controls></video>

<h2>默认静音</h2>
<video src="../basic/media/sp.mp4" width="300" controls muted></video>

<h2>自动播放</h2>
<video src="../basic/media/sp.mp4" width="300" controls muted autoplay></video>

<h2>循环播放</h2>
<video src="../basic/media/sp.mp4" width="300" controls loop></video>

<h2>视频封面</h2>
<video src="../basic/media/sp.mp4" width="300" controls poster="../basic/img/small-image.jpg"></video>

<h2>视频预加载</h2>
<video src="../basic/media/sp.mp4" width="300" controls preload="auto"></video>
</body>
</html>

示例

H5-音频标签#

H5-音频标签
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>音频标签</title>
</head>
<body>
<audio src="../basic/media/an-sound.mp3" controls></audio>
</body>
</html>

示例

H5兼容性问题#

引入html5shiv.js

HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Your Page Title</title>
  <!--设置IE总是使用最新的文档模式进行渲染-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--优先使用webkit内核进行渲染-->
  <meta name="renderer" content="webkit">
  <!-- 添加有条件的 IE 版本检查并加载 html5shiv.js -->
  <!--[if lt IE 9]>
    <script src="path/to/html5shiv.js"></script>
  <![endif]-->
</head>
<body>
<!-- Your content goes here -->
</body>
</html>

评论