h5新增

44 阅读1分钟

一新增语义化标签(块级)

1.1标签(类似div)

  1. header(头部标签)
  2. nav(导航标签)
  3. main(主要标签)
  4. article(内容标签)
  5. section(块级标签)
  6. aside(侧边栏标签)
  7. footer(尾部标签)

1.2 details(详情的出现和隐藏)

image.png image.png
  <details>
    <summary>标题</summary>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </details>

1.3 figure 定义独立的流内容(图像、图表、照片、代码等)

div相同,用来包裹图片图表,有默认样式,如果被删除,也不会对文档流产生影响
  <figure>
    <img src="../img/ico3.png">
    <figcaption>图片标题</figcaption>
</figure>

二新增语义化标签(行内)

image.png

2.1进度条(progress)

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

2.2度量衡(meter)

 <meter value="61" max="100" min="1" low="20" high="70" optimum="80" ></meter>

三.增强型表单

3.1数据列表(datalist option)

image.png

模糊搜索
<input type="text" list="word">
  <datalist id="word">
    <option value="康师傅牛肉面"></option>
    <option value="统一老坛酸菜"></option>
    <option value="白象海鲜面"></option>
    <option value="小当家方便面"></option>
  </datalist>

3.2电子邮箱 (email)

对输入进行邮箱验证

3.3网址 (url)

对输入进行网址验证

3.4数字域 (number)

<input type="number" step="5" min="1" max="100">
每次跳5个数

3.5搜索域 (search)

image.png

3.6手机号码 (tel)

3.7滑动条 (range)

image.png
<input type="range" min="1" max="20" value="1" step="3">
step步长

3.8颜色 (color)

image.png

3.9年月日 (date),年月 (month),年周 (week),时间 (time)

image.png

四.新增input属性

4.1 readonly(只读)
4.2 disabled(禁用)
4.3 autofocus(输入框页面加载时,获得焦点)
4.4 required (是否必填)

五多媒体

audio(音频)

video(视频)