- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

图文并茂将HTML5中的新增表单元素彻底搞明白

lwq1228 发表于 2021/07/27 14:47:30 2021/07/27

【摘要】在HTML4.01中，表单的类型以及使用方法都非常有限。HTML5在HTML4.01的基础上，对表单进行了以下两个方向的扩展：新增input元素类型和新增其他表单元素。这两个方向的扩展，使得代码量大大减少，可以极大地提高开发效率。

在HTML4.01中，表单的类型以及使用方法都非常有限。HTML5在HTML4.01的基础上，对表单进行了以下两个方向的扩展。

新增input元素类型。
新增其他表单元素。

这两个方向的扩展，使得代码量大大减少，可以极大地提高开发效率。

1、新增input元素类型

在HTML5中，大量地增加了input元素的种类。换句话说就是，input元素的type属性新增了大量属性值，如下表所示：

1.1、验证型：

属性值	说明
email	邮件类型
tel	电话号码
url	URL类型

1.1.1、email

当type属性取值为“email”时，表示这是输入电子邮件的文本框（语义化）。

语法：

<input type="email"/>

举例：

<form method="post">
    <label>电子邮件：<input type="email"/></label>
    <input type="submit" value="提交">
</form>

结果：

说明：

当我们输入非电子邮件格式的字符，然后点击【提交】按钮时，会发现无法提交并且弹出提示内容，效果如图所示。这里有一点要说明，即必须是submit按钮才会弹出提示内容，使用其他按钮（如button按钮）则不会。这是因为email类型的文本框采用了浏览器内置的验证机制，而浏览器内置的验证机制必须使用submit按钮才会触发。

1.1.2、tel

当type属性取值为“tel”时，表示这是输入电话号码的文本框（语义化）。

语法：

<input type="tel"/>

举例：

<form method="post">
    <label>电话号码：<input type="tel"/></label>
    <input type="submit" value="提交">
</form>

结果：

说明：

当我们输入非电话号码格式的字符，然后点击【提交】按钮时，却发现居然可以提交！这是怎么回事呢？其实tel类型文本框并不具备完备的验证功能，如果想要达到验证效果，则需要结合3.2节介绍的pattern属性来实现。

1.1.3、url

当type属性取值为“url”时，表示这是输入URL的文本框（语义化）。

语法：

<input type="url"/>

举例：

<form method="post">
    <label>输入网址：<input type="url"/></label>
    <input type="submit" value="提交">
</form>

结果：

说明：

当我们输入非URL格式的字符，然后点击【提交】按钮时，会发现无法提交并且弹出提示内容，效果如图所示。所谓的URL格式字符，指的是以“http://”或者“https://”开头的网络地址。

1.2、取值型：

属性值	说明
range	取数字（滑块方式）
number	取数字（微调方式）
color	取颜色
date	取日期（如2021-06-30）
time	取时间（如08:06）
month	取月份
week	取周数

1.2.1、range

当type属性取值为“range”时，我们可以通过拖动滑动条获取某一个范围内的数字。

语法：

<input type="range" min="最小值" max="最大值" step="步长" value="初始值"/>

min属性用于设置最小值，max属性用于设置最大值，step属性用于设置间隔数。这3个属性的取值可以是整数，也可以是小数。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var input = document.getElementsByTagName("input")[0];
            var output = document.getElementsByTagName("output")[0];
            // 获取range的初始值
            output.value = input.value
            //拖动滑动条，改变output值
            input.onchange = function () {
                output.value = input.value;
            }
        }
    </script>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        <input type="range" min="-10" max="10" step="5" value="-10"/>
        <output></output>
    </form>
</div>
</body>
</html>

结果：

说明：

<input type="range" min="-10" max="10" step="5" value="-10"/>

上面这句代码表示：滑动条最小值为-10，最大值为10，每次拖动只能改变5（增加5或减少5）。value="-10"用于设置滑动条的初始值，设置不同的value值，滑块也会出现在对应数值的位置。在实际开发中，range类型元素都是需要结合JavaScript来操作的，上面这个例子就是最简单也是最经典的。此外，output元素用于定义表单元素的输出结果。

1.2.2、number

当type属性取值为“number”时，我们可以通过使用微调按钮来获取某一个范围的数字。

语法：

<input type="number" min="最小值" max="最大值" step="步长" value="初始值"/>

min属性用于设置最小值，max属性用于设置最大值，step属性用于设置间隔数。它们的属性取值可以是整数，也可以是小数。number类型跟range类型功能非常相似，都是获取某一个范围内的数字。不过两者的外观不一样，其中number类型使用的是“微调按钮”，而range类型使用的是“滑块”。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var input = document.getElementsByTagName("input")[0];
            var output = document.getElementsByTagName("output")[0];
            // 获取number的初始值
            output.value = input.value
            // 拖动滑动条，改变output值
            input.onchange = function () {
                output.value = input.value;
            }
        }
    </script>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        <input type="number" min="-10" max="10" step="5" value="-10"/>
        <output></output>
    </form>
</div>
</body>
</html>

结果：

说明：

在这个例子中，我们可以直接在文本框中输入数字，也可以通过右边的微调按钮来改变数字。

1.2.3、color

当type属性取值为“color”时，我们可以直接使用浏览器自带的取色工具来获取颜色值。

语法：

<input type="color" value="颜色初始值"/>

value属性用于设置颜色初始值，格式必须是十六进制颜色值如#F1F1F1，不能是关键字（如black）和rgba颜色（如rgba(255, 255, 255, 0.5)）。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var input = document.getElementsByTagName("input")[0];
            var output = document.getElementsByTagName("output")[0];
            // 页面载入时获取color的初始值
            output.value = input.value
            // 拖动滑动条，改变output值
            input.onchange = function () {
                output.value = input.value;
            }
        }
    </script>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        <input type="color" value="#00FFFF"/>
        <output></output>
    </form>
</div>
</body>
</html>

结果：

说明：

当我们点击color类型元素时，浏览器会弹出自带的取色工具，以方便直接选取颜色值，如下图所示。

1.2.4、date

当type属性取值为“date”时，我们可以直接使用浏览器自带的日历工具来获取日期（年、月、日）。

语法：

<input type="date" value="日期初始值"/>

value属性用于设置日期初始值，格式必须如“2018-05-20”。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        <input type="date" value="2021-07-01"/>
    </form>
</div>
</body>
</html>

结果：

说明：

当我们点击date类型元素时，浏览器会弹出自带的日历工具，以方便直接选取日期，如下图所示。此外，value属性用于设置日期初始值，格式必须如“2021-07-27”，像“2018–7-27”这种是无效的。

1.2.5、time

当type属性取值为“time”时，我们可以直接使用浏览器自带的工具来获取时间（时、分）。

语法：

<input type="time" value="时间初始值"/>

value属性用于设置时间初始值，格式必须如“08:04”。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        <input type="time" value="10:30"/>
    </form>
</div>
</body>
</html>

结果：

说明：

当我们点击time类型元素时，文本框右边会出现微调按钮，以方便调整时间，如下图所示。此外，value属性用于设置时间初始值，格式必须如“08:04”，像“8:4”这种是无效的。

1.2.6、month

当type属性取值为“month”时，我们可以使用浏览器自带的工具来获取“月数”。

语法：

<input type="month" value="初始值"/>

value属性用于设置初始值，格式必须如“2021-07”。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        <input type="month" value="2021-07"/>
    </form>
</div>
</body>
</html>

结果：

说明：

当我们点击month类型元素时，浏览器会弹出选择框，以方便选择哪个月份，如下图所示。

1.2.7、week

当type属性取值为“week”时，我们可以使用浏览器自带的工具来获取“周数”。

语法：

<input type="week" value="2021-W30"/>

value属性用于设置初始值，格式必须如“2021-W04”。其中，“W”是“week”的缩写。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        <input type="week" value="2021-W30"/>
    </form>
</div>
</body>
</html>

结果：

说明：

当我们点击week类型元素时，浏览器会弹出选择框，以方便选择第几周，如下图所示。

2、新增其他表单元素

前面介绍的都是input元素新增的类型，实际上HTML5还新增了3个表单元素：output、datalist、keygen。

2.2、output

在HTML5中，我们可以使用output元素来定义表单元素的输出结果或计算结果。

语法：

<output></output>

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var input = document.getElementsByTagName("input")[0];
            var output = document.getElementsByTagName("output")[0];
            // 获取range的初始值
            output.value = input.value
            //拖动滑动条，改变output值
            input.onchange = function () {
                output.value = input.value;
            }
        }
    </script>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        <input type="range" min="-10" max="10" step="5" value="-10"/>
        <output></output>
    </form>
</div>
</body>
</html>

结果：

说明：

output元素一般放在form元素内部，并且配合其他表单元素（如文本框等）来使用。

2.2、datalist

在HTML5中，我们可以使用datalist元素来为文本框提供一个可选的列表。

语法：

<input type="text" list=""/>
<datalist id="">
    <option label="" value=""></option>
    <option label="" value=""></option>
    <option label="" value=""></option>
</datalist>

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 800px; height: 600px; margin-left: 50px;margin-top: 50px;">
    <form method="post">
        输入网址：<input type="text" list="urlList"/>
        <datalist id="urlList">
            <option label="百度一下" value="https://www.baidu.com/"></option>
            <option label="百度翻译" value="https://fanyi.baidu.com/"></option>
            <option label="百度文库" value="https://wenku.baidu.com/"></option>
        </datalist>
    </form>
</div>
</body>
</html>

结果：

说明：

如果想要把datalist绑定到某个文本框，需要设置该文本框的list属性值等于datalist的id值。

3、其他新增元素

Html5除了新增结构元素和表单元素之外，HTML5还增加了大量语义化元素，其中最重要的有以下6个，下面分别做介绍。

3.1、address

在HTML5中，我们可以使用更具有语义化的address元素来为“整个页面”或者“某一个article元素”添加地址信息（电子邮件或真实地址）。当address元素应用于整个页面时，它一般放于整个页面的底部（footer元素内部），表示该网站所有者的地址信息。一个页面可以有多个article元素，比如有些页面就有好几篇文章。当address元素应用于article元素时，它一般放在article元素内部的footer元素内，表示该篇文章所有者的地址信息。当然，address元素也可以放于section元素内。

举例1-应用于整个页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header></header>
<nav></nav>
<article></article>
<aside></aside>
<footer>
    <address>
        如果你想与我们合作，可以通过<a href="mailto:123456789@qq.com">电子邮件</a>联系我们。<br/>
        当然你也可以通过下面地址联系我们:<br/>吉林省长春市高新区XXXX公司。
    </address>
</footer>
</body>
</html>

效果图1：

举例2-应用于article元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header></header>
<nav></nav>
<article>
    <header>作者：XXX111</header>
    <p>这是第一篇文章的内容......</p>
    <footer>
        <address>
            你可以通过<a href="mailto:123456789@qq.com">123456789@qq.com</a>联系作者：XXX111
        </address>
    </footer>
</article>
<br/><br/>
<article>
    <header>作者：XXX222</header>
    <p>这是第二篇文章的内容......</p>
    <footer>
        <address>
            你可以通过<a href="mailto:987654321@qq.com">987654321@qq.com</a>联系作者：XXX222
        </address>
    </footer>
</article>
<aside></aside>
<footer></footer>
</body>
</html>

效果图2：

3.2、time

在HTML5中，我们可以使用更具有语义化的time元素来显示页面中的日期时间信息。

语法：

<time datetime="时间"></time>

datetime属性取值是一个时间，可以省略不写。datetime属性中的时间是提供给搜索引擎看的，而time标签内的时间是提供给用户看的，两者内容可以一样也可以不一样。time元素与datetime属性的关系，有点类似于img元素与alt属性的关系。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    方式1：
    <time>2017-11-11</time>
</div>
<div>
    方式2：
    <time datetime="2017-11-11">2017-11-11</time>
</div>
<div>
    方式3：
    <time datetime="2017-11-11 08:00">2017年11月11日早上8点</time>
</div>
<div>
    方式4：
    <time datetime="2017-11-11 08:00-12:00">2017年11月11日8点~12点</time>
</div>
</body>
</html>

结果：

说明：

在实际开发中，大多数情况下我们是不用datetime属性的。用一句话总结就是：对于time元素的使用，我们不必过于拘泥，想要显示一段有意义的日期时间，用<time></time>括起来就可以了。

3.3、progress

在HTML5中，我们可以使用progress元素以进度条的形式来显示某一个任务的完成度，如上传文件、下载文件等。

语法：

<progress max="最大值" value="当前值"></progress>

max属性表示最大值，value属性表示当前值。对于progress元素来说，它只有max属性，而没有min属性。为什么呢？原因很简单：任何进度条的最小值都是0，因此progress元素默认最小值也是0。此外，max和value必须是0或正数，并且max值必须大于等于value值。

举例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<progress max="10" value="8"></progress>
<br/>
<progress max="100" value="80"></progress>
</body>
</html>

结果1：

说明1：

“进度=value/max”，因此虽然两个progress元素的max和value不一致，但是进度是相同的，都是80%。

举例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var oProgress = document.getElementsByTagName("progress")[0];
            var oSpan = document.getElementsByTagName("span")[0];
            var oBtn = document.getElementsByTagName("input")[0];
            oBtn.onclick = function () {
                var i = 0;
                setInterval(function () {
                    if (i < 100) {
                        i++;
                        oProgress.value = i;
                        oSpan.innerText = i;
                    }
                }, 100)
            }
        }
    </script>
</head>
<body>
<p>
    <progress max="100" value="0"></progress>
    <span>O</span>%
</p>
<input type="button" value="显示进度"/>
</body>
</html>

结果2：

说明2：

在这个例子中，我们使用定时器setInterval()来实现进度条的不断增加。当我们点击【显示进度】按钮后，进度条会不断增加，效果如上图所示。在实际开发中，progress元素一般结合上传文件或下载文件操作来显示进度，或者展示一个loading图标，以便增强用户体验。

3.4、meter

在HTML5中，我们可以使用进度条的形式来显示数据所占的比例。

语法：

<meter min="最小值" max="最大值" value="当前值"></meter>

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<meter min="0" max="10" value="8"></meter>
<br/>
<meter min="0" max="100" value="80"></meter>
</body>
</html>

结果：

说明：

meter元素跟progress元素非常相似，都是以进度条形式来显示数据比例。不过，两者在语义上有很大的区别：

meter元素一般用于显示静态数据比例。所谓的静态数据，指的是很少改变的数据，例如男生人数占全班人数的比例。
progress元素一般用于显示动态数据比例。所谓“动态数据”，指的是会不断改变的数据，例如下载文件的进度。

3.5、figure和figcaption

如下图所示“图片+图注”效果，在实际开发中经常可以见到。对于初学者来说，我们很可能使用如下代码来实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <img src="html5.jpeg" alt="Html5">
    <br/>
    <span>Html5</span>
</div>
</body>
</html>

但是这种实现方式语义并不好。在HTML5中，引入了figure和figcaption这两个元素来增强图片的语义化。

语法：

<figure>
    <img src="" alt="">
    <figcaption>Html5</figcaption>
</figure>

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<figure>
    <img src="html5.jpeg" alt="Html5">
    <figcaption>Html5</figcaption>
</figure>
</body>
</html>

结果：

说明：

figure元素用于包含图片和图注，figcaption元素用于表示图注文字。在实际开发中，对于“图片+图注”效果，我们都建议使用figure和figcaption这两个元素来实现，从而使得页面的语义更加良好。

3.6、fieldset和legend

在HTML5中，我们还可以使用fieldset元素来给表单元素进行分组。其中，legend元素用于定义某一组表单的标题。

语法：

<fieldset>
    <legend>表单组标题</legend>
    ......
</fieldset>

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post">
    <fieldset>
        <legend>登录</legend>
        <p>
            <label for="name">账号:</label>
            <input type="text" id="name" name="name"/></p>
        <p>
            <label for="pwd">密码:</label>
            <input type="password" id="pwd" name="pwd"/></p>
        <input type="checkbox" id="remember-me" name="remember-me"/><label for="remember-me">记住我</label>
        <input type="submit" value="登录"/>
    </fieldset>
</form>
</body>
</html>

结果：

说明：

使用fieldset和legend有两个作用：增强表单的语义；定义fieldset元素的disabled属性来禁用整个组中的表单元素。通过上例我们可以看到，使用fieldset和legend这两个标签之后，表单形成了非常美观的“书签”效果。

4、改良后的元素

除了新增元素，HTML5还对已有的某些元素进行了改良，其中改良的元素有以下4种，下面分别做介绍。

4.1、a

HTML5为a元素新增了3个属性，如下表所示。

属性	说明
download	定义可被下载的目标（如文件、图片等）
media	定义被链接文档为何种媒介/设备优化的
type	定义被链接文档的MIME类型

media和type这两个属性用得很少，我们只需要掌握download这一个属性即可。

语法：

<a href="文件地址" download="下载的文件名"></a>

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="test.jpeg" download="new-test.jpeg">下载图片</a>
</body>
</html>

结果：

说明：

download属性用于为文件取一个新的文件名。如果download属性值省略，则表示使用旧的文件名。当我们点击“下载图片”超链接后，浏览器就会下载该图片，并且图片名字换成新的文件名new-test.jpeg。如果我们改为下面这句代码，也就是省略download属性值，则图片会使用旧的文件名test.jpeg。

<a href="test.jpeg" download>下载图片</a>

4.2、ol

HTML5为ol元素新增了一个reversed属性，用于设置列表顺序为降序显示。

语法：

<ol reversed>
    <li></li>
    <li></li>
    <li></li>
</ol>

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ol reversed>
    <li>Html5</li>
    <li>Css3</li>
    <li>JavaScript</li>
</ol>
</body>
</html>

结果：

说明：

在实际开发中，reversed属性用得很少，简单了解一下即可。

4.3、small

语法：

<small>内容</small>

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<small>Copyright ©2019-2021，All Rights Reserved</small>
</body>
</html>

结果：

说明：

对于上例所示效果，我们使用div、span等元素也可以实现，不过small元素更具语义化。

4.4、script

HTML5为script元素新增了两个属性：defer和async。这两个属性的作用都是加快页面的加载速度，两者区别如下：

defer属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件不会立即执行，而是等到整个HTML文档加载完成才会执行。
async属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件会立即执行，即使整个HTML文档还没有加载完成。

defer和async都是异步加载的，两者区别在于，异步加载外部JavaScript文件完成后何时执行。从上面也可以看出，defer属性相对于async属性来说，更符合大多数开发场景对脚本加载执行的要求。

举例：

Html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="async.js" async></script>
</head>
<body>
<script>
    console.log("内部脚本");
</script>
</body>
</html>

async.js代码：

console.log("外部脚本");

结果：

说明：

在正常情况下，输出顺序应该是：“外部脚本→内部脚本”。但是由于async属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件会立即执行，即使整个HTML文档还没有加载完成，因此输出顺序为：“内部脚本→外部脚本”。

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

图文并茂将HTML5中的新增表单元素彻底搞明白

1、新增input元素类型

1.1、验证型：

1.1.1、email

1.1.2、tel

1.1.3、url

1.2、取值型：

1.2.1、range

1.2.2、number

1.2.3、color

1.2.4、date

1.2.5、time

1.2.6、month

1.2.7、week

2、新增其他表单元素

2.2、output

2.2、datalist

3、其他新增元素

3.1、address

3.2、time

3.3、progress

3.4、meter

3.5、figure和figcaption

3.6、fieldset和legend

4、改良后的元素

4.1、a

4.2、ol

4.3、small

4.4、script

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

图文并茂将HTML5中的新增表单元素彻底搞明白

1、新增input元素类型

1.1、验证型：

1.1.1、email

1.1.2、tel

1.1.3、url

1.2、取值型：

1.2.1、range

1.2.2、number

1.2.3、color

1.2.4、date

1.2.5、time

1.2.6、month

1.2.7、week

2、新增其他表单元素

2.2、output

2.2、datalist

3、其他新增元素

3.1、address

3.2、time

3.3、progress

3.4、meter

3.5、figure和figcaption

3.6、fieldset和legend

4、改良后的元素

4.1、a

4.2、ol

4.3、small

4.4、script

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品