1. 前言

H5新增了很多语义化的标签这个大家都清楚,但是也有些很常用的标签被忽略掉了,这里做个小总结

---

2. 表单 input 新增的 type类型

2.1 email

会对输入的内容进行邮箱格式验证

2.2 url

会对输入的内容进行url格式验证

2.3 number

<input type="number"  min="1" max="20" step="4"> 

1.png

1. type="number" 只能输入数字
2. 可以设置最大值 最小值
3. 修改的时候后面 上下箭头 进行1次修改的加减操作
4. step 可以设置每次修改的 步值

2.4 日期 date

2.5 月份 month

2.6 年份 周 week

2.7 输入时间 time

2.8 转为本地时间 datetime-local

效果

2.9 颜色 color

1.png

2.10 图片 image

<input type="image" src="btn.jpg" alt="水滴" width="48" height="48">

2.11 正则 pattern

<input type="text" pattern="[0-9]{6}"
title="请输入6位数的邮政编码" />

2.12 滑条 range

<input type="range"  min="1" max="30" value="10" />

---

3. 表单 input新增的

1. required 必填项
2. autocomplete 默认记住之前的内容
   autocomplete="off" 可以关闭

---

4. datalist

提供下拉 选项

1.png

 <form action="xxx" method="get">
        请输入网址： <input type="url" list="url_list" name="weblink" />
        <datalist id="url_list">
            <option label="新浪" value="http://www.sina.com.cn" />
            <option label="搜狐" value="http://www.sohu.com" />
            <option label="网易" value="http://www.163.com" />
        </datalist>
        <input type="submit" value="提交" />
        </form>

过滤

1.png

输入框的 list属性值 和 datalist的 id值保持一致 自动过滤关键字

---

1.png

5. 滑条 progress

1. input 有 type 是progress
2. 这个是直接的 progress标签
3. progress 最好使用双标签,因为单标签的时候会默认包裹此标签后面所有的布局

  <progress max="100" value="60" >

---

6. center

1. 个人比较喜欢用相当于省写了一个text-algin:center 水平居中; 垂直方向不自带哦
2. 这个是block元素

 <center>居中</center>

---

7. mark

1. 也是常用的 因为自带一个高亮哦,这就是所谓的 mark一下吧
2. 行内元素

<mark>mark一下</mark>

---

8. sup

1. 上面 右上角的效果 见上面的效果图

<div>39 <sup>℃</sup></div>

---

9. sub

1. 右下角的 效果 见上面的效果图

    <div> 转发好友免费<sub>最终解释权归本公司所有</sub></div>

---

10.details

1. 点击查看详情
2. 提示文字 默认是 详情
3. 自定义提示文字summary

 <details>
        <summary>点击查看更多</summary>
        <p>点赞过100能看见</p>
    </details>

---

11. 缩写

1. 效果 就相当于一个标签 title属性 和 下划线

<abbr title="Hyper Text Markup Language">HTML</abbr>

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉