HTML5新增的其他元素及公共属性、改良的元素output、datalist、address、time、progress

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」

一、HTML5新增的其他元素

1-1、新增的表单元素

1-1-1、output

可以用来定义表单元素的输出结果或计算结果，是一个行内元素，只不过比span更具有语义

1-1-2、datalist

用来为文本框提供一个可选列表，可配合input的autocomplete来实现自动提示功能

提供可选列表：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-新增其他表单元素</title>
  </head>
  <body>
    <form action="post">
      输入网址：<input type="text" list="urlList">
      <datalist id="urlList">
        <option label="1" value="http://www.1.com"></option>
        <option label="2" value="http://www.2.com"></option>
        <option label="3" value="http://www.3.com"></option>
      </datalist>
    </form>
  </body>
</html>

配合input的autocomplete实现自动提示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07-input元素新增的属性</title>
  </head>
  <body>
    <input type="text" autocomplete="on" list="datas">
    <datalist id="datas">
      <option value="HTML"></option>
      <option value="CSS"></option>
      <option value="JavaScript"></option>
      <option value="Vue.js"></option>
      <option value="React.js"></option>
    </datalist>
  </body>
</html>

1-2、新增的语义化元素

1-2-1、address

语法：<address>XXXXX</address>
使用场景：

当address应用于整个页面时，它一般放于整个页面的底部（footer元素内部）表示该网站所有者的地址信息
当address元素应用于article元素时，一般放在article元素内部的footer元素内
address元素也可以放于section元素内

1-2-2、time

用于显示页面中的日期时间

语法：<time datetime="">XXXXX</time>
datetime可以省略不写，datetime中的时间是提供给搜索引擎看的，而time标签内的时间是提供给用户看的，两者的时间可以不一样

1-2-3、progress

用于显示某一个任务的完成度

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

只有max属性没有min是因为任何进度条的最小值都为0
max和value必须是0或正数，并且max值必须大于等于value值

使用场景：上传文件、下载文件等
代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-新增其他语义化元素</title>
    <script>
      window.onload = function () {
        let oP = document.getElementsByTagName("progress")[0];
        let oS = document.getElementsByTagName("span")[0];
        let oB = document.getElementsByTagName("input")[0];

        oB.onclick = function () {
          let i = 0;
          setInterval(function() {
            if (i<100) {
              i++;
              oP.value = i;
              oS.innerText = i;
            }
          }, 100) // 100毫秒调取一次方法
        }
      }
    </script>
  </head>
  <body>
    <p>
      <progress max="100" value="0"></progress>
      <span>0</span>%
      <input type="button" value="显示进度" />
    </p>
  </body>
</html>

1-2-4、meter

语法： <meter min="最小值" max="最大值" value="当前值"></meter>
使用场景： 用于显示静态数据比例，而progress一般用于显示动态数据比例

1-2-5、figure和figcaption

语法：

<figure>

<img src="" alt=""/>

<figcaption>我是图注...</figcaption>

</figure>

使用场景： 适用于“图片+图注”的效果

figure用于包含图片和图注
figcaption用于表示图注文字

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-新增其他语义化元素</title>
  </head>
  <body>
    <figure>
      <img src="img/111.jpeg" alt="" style="width: 80px;">
      <figcaption>我是图片标注</figcaption>
    </figure>
  </body>
</html>

1-2-6、fieldset和legend

语法：

<fieldset>

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

......

</fieldset>

使用场景： 用于给表单元素进行分组

fieldset元素用于给表单元素进行分组，legend元素用于定义某一组表单的标题
可定义fieldset元素的disabled属性来禁用整个组中的表单元素
使用fieldset和legend标签后，表单会变成标签样式

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-新增其他语义化元素</title>
  </head>
  <body>
    <form action="post">
      <fieldset>
        <legend>我是表单标题</legend>
        <p>
          <label for="name">账号：</label>
          <input id="name" type="text" name="name" />
        </p>
        <p>
          <label for="pwd">密码：</label>
          <input id="pwd" type="password" name="pwd" />
        </p>
        <input type="checkbox" id="rem" name="rem">
        <label for="rem">记住我</label>
        <input type="submit" value="登录" />
      </fieldset>
    </form>
  </body>
</html>

二、HTML5新增的公共属性

HTML5新增的常见公共属性有4个： hidden、draggable、contenteditable、data-*

2-1、hidden

可以用来隐藏某一个元素

<p hidden>我被隐藏了</p>

2-1、draggable

可以使用draggable属性来定义某一个元素是否可以被拖动

语法：<element draggable="true/false">
默认值：false
注意点： 该属性定义的元素只能定义元素可被拖动这一行为，拖动后并不能改动元素位置，需要结合元素拖放具体实现

<p draggable="true">这是一段可以拖动的文字</p

2-1、contenteditable

用来定义某个元素是否可被编辑

语法：<element contenteditable="true/false">

<p contenteditable="true">这是一段可被编辑的文字</p>

2-1、data-*

用来为元素实现自定义属性

后面可以接小写的字符串，如data-color 、data-article-title
可以使用DOM操作中的obj.dataset.XXX（此处为驼峰形式）来获取data-*的属性值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06-新增的公共属性</title>
    <script>
      window.onload = function () {
        let oP = document.getElementsByTagName("p")[2];
        oP.style.color = oP.dataset.color;
        let oLi = document.getElementsByTagName("li");
        for (let i=0; i<oLi.length; i++) {
          // 使用element元素的dataset去获取自定义属性的值
          console.log(oLi[i].innerText +":"+oLi[i].dataset.fruitPrice+"/斤");
        }
      }
    </script>
  </head>
  <body>
    <p data-color="green">这是一段测试文字</p>
    <ul>
      <li data-fruit-price="6.5">苹果</li>
      <li data-fruit-price="12.5">香蕉</li>
      <li data-fruit-price="3.5">西瓜</li>
    </ul>
  </body>
</html>

三、HTML5改良的元素们

HTML5改良的元素们包括：a ol small script

3-1、a

a标签新增的属性有：

download：定义可被下载的目标，用于为文件取一个新的文件名，如果该属性省略则表示使用旧的文件名
media：定义被链接文档为何种媒介
type：定义被链接文档的MIME类型

<a href="img/111.jpeg" download="222.jpeg">下载图片</a>

3-2、ol

新增reversed属性，用于设置列表顺序为降序显示

语法：

<ol reversed>

<li></li>

...

</ol>

<ol reversed>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <!-- 3HTML 2CSS 1JavaScript -->
</ol>

3-3、small

3-4、script

新增了两个属性：defer和async

defer：用于异步加载外部JS文件，当异步加载完毕后，JS不会立即执行，而是等待整个HTML文档加载完后再执行
async：也是用于异步加载外部JS，当异步加载完毕后，该JS立即执行，即便是HTML文档还没有加载完成

defer相对于async来说，更符合大多数开发场景