HTML
在过去的几年里，前端开发发生了革命性的变化，变得更高效、更快，当然也更大。SPA 框架的引入使 Web 开发发生了重大变化。更多繁重的工作转移到了前端，需要处理更多的事情，例如动态 UI、路由、状态管理等。因此，程序员习惯于使用新方法和第三方来减轻一些繁重的工作。当然，它有它的优点，但也有缺点，让开发者变得更懒惰。但是如果告诉你，在前端的这段时间里，可能错过了一些基本功能，而不是使用它们，而是使用第三方包甚至更糟糕的是，自定义样式来实现基本的东西？！是的，当然，从 HTML 中您可能不知道的 15 个功能的基础开始，它们将帮助您轻松实现友好的 UI。事不宜迟，开始学习吧！

1、内容可编辑属性

contenteditable 是可以在元素上设置以使内容可编辑的属性。它适用于 DIV、P、UL 等元素。需要这样 <element contenteditable="true|false"> 设置它。

  1. <h2> Earth 616 superheroes </h2> 
  2. <ul class="content-editable" contenteditable="true">     
  3.   <li> 1. Iron Man</li>     
  4.   <li> 2. Captain America</li>     
  5.   <li> 3. Black Panther</li> 
  6. </ul>

15 个 HTML 新特性 - 图1

2、详情标签（Details）

<details> 标签向用户提供按需详细信息。默认情况下，小部件是折叠的。打开时，它会展开并显示其中的内容。
<summary> 标签与 <details> 一起使用实现一个可以折叠打开标题及详情内容。

  1. <details>     
  2.   <summary>Click here to see more from Earth 616</summary>              
  3.   <table>
  4.     <tr>                    
  5.       <th>ID</th>                    
  6.       <th>Name</th>                    
  7.       <th>Location</th>                    
  8.       <th>Job</th>                
  9.     </tr>                
  10.     <tr>                    
  11.       <td>1</td>                    
  12.       <td>John Doe</td>                    
  13.       <td>Earth</td>                    
  14.       <td>Human</td>                
  15.     </tr>          
  16.   </table>  
  17. </details>

15 个 HTML 新特性 - 图2

3、Datalist 标签

<datalist> 标记指定预定义选项列表并提供自动完成功能。

  1. <label for=”superhero”>In case of emergency, which superhero would you call?:</label>
  2. <input list=”superheroes” name=”superhero” id=”superhero”>
  3. <datalist id=”superheroes”>
  4.   <option value=”Iron Man”>
  5.   <option value=”Captain America”>
  6.   <option value=”Black Panther”>
  7.   <option value=”Thor”>
  8.   <option value=”Spider Man”>
  9. </datalist>

15 个 HTML 新特性 - 图3

4、Range 属性

范围输入类型的表单类似于滑块范围选择器。

  1. <head>
  2.   <script>
  3.     function changeValue(event) {
  4.       let value = event.target.value;
  5.       let output = document.getElementById('output');
  6.       output.value = value;
  7.     }
  8.   </script>
  9. </head>
  10. <body>
  11.   <form method="post">
  12.     <input 
  13.       type="range" 
  14.       name="range" 
  15.       min="0" 
  16.       max="100" 
  17.       step="1" 
  18.       value=""
  19.       onchange="changeValue(event)"/>
  20.   </form>
  21.   <div class="range">
  22.     <output id="output" name="result">  </output>
  23.   </div>
  24. </body>

15 个 HTML 新特性 - 图4

5、Meter 标签

<meter> 标签定义了定义范围内的标量测量值或分数值

  1. <label for="home">Cloud storage</label>
  2. <meter id="home" value="0.4">40%</meter><br>
  3. <label for="root">Internal storage</label>
  4. <meter id="root" value="0.6">60%</meter><br>

image.png

6、 Progress 标签

<progress> 标签表示任务的进度。

  1. <label for="home">6/10 tasks done</label>
  2. <progress value="60" max="100" id="home"></progress>

image.png

7、颜色选择器

一个简单的颜色选择器。

  1. <p id="colorPicker">Color Picker!</p>
  2. <input type="color" onchange="showColor(event)">

15 个 HTML 新特性 - 图7

8、标记内容标签

使用 <mark> 标记突出显示任何文本内容。

  1. <p>Did you know that <mark>not all heroes wear capes.</mark></p>

image.png

9、块引用和引用

如果要包含来自不同来源的内容，绝对应该引用该来源。

  1. <figure>
  2.   <blockquote>
  3.     <p>It's an imperfect world, but its the only one we've got.</p>
  4.   </blockquote>
  5.   <figcaption>--TONY STARK, <cite>IRON MAN</cite></figcaption>  
  6. </figure>

image.png

10、缩写标签（Abbreviation）

“abbr”是abbreviation的简称！这里的想法是，如果使用标题（例如“Mr.”）或首字母缩略词（例如“SHIELD”），abbr 标签会准确指示该缩写的含义。

  1. <p>Agent Phil Coulson leads a team of highly skilled agents from the     
  2.   global law-enforcement organisation known as 
  3.   <abbr title="Strategic Homeland Intervention, Enforcement,
  4.     and Logistics Division">SHIELD
  5.   </abbr>. 
  6. </p>

15 个 HTML 新特性 - 图10

11、<del> and <ins>

实际上有一个标记用于带删除线的文本，另一个标记表示替换文本。

  1. <p>
  2.     <del>Iron Man</del>
  3.     <ins>Captain America</ins>
  4.     is ehmmm.. yea the captain!
  5. </p>

image.png

12、Output 标签

<output> 标签表示计算的结果。通常，此元素定义一个区域，该区域将用于显示某些计算的文本输出。

  1. <form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
  2.     <input type="number" id="a" value="0"> 
  3.       * <input type="number"  id="b" value="0"> 
  4.     = <output name="x" for="a b"></output>
  5. </form>

15 个 HTML 新特性 - 图12

13、Hidden 属性

在隐藏元素方面，尝试过不同的方法，比如使用 opacity:0, visibility:hidden, height:0; width:0, display:none 在 CSS 文件中。每一个都有自己的用例，适用于不同的布局。另一个与它们类似的选项是隐藏的 HTML 属性。如果一个元素在其上指定了隐藏，它将被隐藏。碰巧有用于存储值的隐藏输入，所以如果也需要它，请不要吃惊。

  1. <div hidden>...</div>

14、Time 标签

<time> 标记定义特定时间（或日期时间）。
该元素的 datetime 属性用于将时间转换为机器可读的格式，以便浏览器可以提供通过用户日历添加日期提醒，搜索引擎可以产生更智能的搜索结果。

  1. <p>The next assemble meeting is postponed on
  2.   <time datetime="2022-12-01">2022-12-01</time>.
  3. </p>

image.png

15、Audio 标签

<audio> 标签将定义一种声音，该标签可以与三个支持的文件一起使用。它们是 MP3、WAV 和 OGG。然后浏览器将选择它支持的第一个。

  1. <audio controls>
  2.   <source src="introduction.ogg" type="audio/ogg">       
  3.   <source src="introduction.mp3" type="audio/mpeg">       
  4.   Your browser does not support this audio      
  5. </audio>