HTML

1、<optgroup>元素

假设希望用户以某种形式从许多选项中选择一个值。使用<select>元素创建一个下拉列表。并为每个可能的选项添加一个<option>元素。

  1. <select>
  2.     <option value="strawberry">Strawberry</option>
  3.     <option value="raspberry">Raspberry</option>
  4.     <option value="apple">Apple</option>
  5.     <option value="apricot">Apricot</option>
  6.     <option value="cucumber">Cucumber</option>
  7.     <option value="carrot">Carrot</option>
  8.     <option value="broccoli">Broccoli</option>
  9.     <option value="cabbage">Cabbage</option>
  10. </select>

9个高级的HTML功能 - 图1
这对于短列表来说非常好，但是，当拥有大量可用选项时，它可能会造成混乱。一种简单的改进方法是，将相似的选项组合在一起，以便用户可以直接跳到更相关的选项，而不必搜索所有的选项。
关于如何实现此目标的第一个想法可能是遵循以下思路：

  1. <select>
  2.     <option value="" disabled="true">--- Fruits ---</option>
  3.     <option value="strawberry">Strawberry</option>
  4.     <option value="raspberry">Raspberry</option>
  5.     <option value="apple">Apple</option>
  6.     <option value="apricot">Apricot</option>
  7.     <option value="" disabled="true">--- Vegetables ---</option>
  8.     <option value="cucumber">Cucumber</option>
  9.     <option value="carrot">Carrot</option>
  10.     <option value="broccoli">Broccoli</option>
  11.     <option value="cabbage">Cabbage</option>
  12. </select>

9个高级的HTML功能 - 图2
对于用户来说，这已经是一个很大的改进，但是现在的标记中杂乱无章的选项仅用于分隔组。
幸运的是，有一种更好的方法可以做到这一点–即使用<optgroup>元素！
示例如下：

  1. <select>
  2.     <optgroup label="Fruits">    
  3.         <option value="strawberry">Strawberry</option>
  4.         <option value="raspberry">Raspberry</option>
  5.         <option value="apple">Apple</option>
  6.         <option value="apricot">Apricot</option>
  7.     </optgroup>
  8.     <optgroup label="Vegetables">
  9.         <option value="cucumber">Cucumber</option>
  10.         <option value="carrot">Carrot</option>
  11.         <option value="broccoli">Broccoli</option>
  12.         <option value="cabbage">Cabbage</option>
  13.     </optgroup>
  14. </select>

9个高级的HTML功能 - 图3
如上图，实现了想要的功能，并且浏览器甚至添加了一些其他样式，从而使用户可以更轻松地在列表中导航。

2、元素

这个HTML元素可以稍微清理一下代码，并可以在以后更轻松地重构URL。该<base>元素需要放置页面的<head>元素里面。
页面上的<base>元素都会有对应的URL，无论是用于图像还是网址。
以后更改该URL将是单行更改。此外，这减少了重复的代码，并使网址更短且更易于阅读。
示例如下：

  1. <head>
  2.     <base href="https://www.w3schools.com/" target="_blank">
  3. </head>
  4. <body>
  5.     <img src="images/stickman.gif" width="24" height="39" alt="Stickman">
  6.     <a href="tags/tag_base.asp">HTML base Tag</a>
  7. </body>

3、<kbd>元素

这个<kbd>元素可用于将某些文本标记为键盘输入，在编写文档或技术博客文章时，可以快速，轻松地改进标记。
将此标签与其他一些CSS样式结合使用，如本示例中的Stack Overflow那样：
9个高级的HTML功能 - 图4
9个高级的HTML功能 - 图5
示例如下：

  1. <p> <kbd> Ctrl </kbd> + <kbd> Alt </kbd> + <kbd> Del </kbd> </p>

4、<samp>元素

<samp>元素可以向页面添加更多语义。它用于将某些文本标记为计算机输出。示例文本的默认样式是使用等宽字体显示它。
与<kbd>元素类似，可以只使用少量的CSS即可自定义和改进样式。

  1. <p>Message from my computer:</p>
  2. <p><samp>File not found.<br>Press F1 to continue</samp></p>

9个高级的HTML功能 - 图6

5、<del>和<ins>元素

它们应用于文本的一部分标记，分别使已删除或已添加。
浏览器通常会使用<del>元素来删除文本，并在删除的文本上添加一根删除文本线，但是，可以使用一些自定义样式来增强该样式，就像其他所有元素一样。

  1. <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

9个高级的HTML功能 - 图7

6、<wbr>元素

wbr代表断词机会，并控制浏览器的断词行为。如果要处理很长的单词，而这些单词的拆分方式与浏览器默认情况下的拆分方式不同，使用<wbr>元素，就可以比较完美的解决这个问题。

  1. <p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>

9个高级的HTML功能 - 图8

7、<fieldset>元素

字段集是一种为表单添加更多结构的好方法！特别是在处理大型表单时，可以使用字段集，这样用户可以更容易获得表单概述。
示例如下：

  1. <form>
  2.     <fieldset>
  3.         <legend>Personal information:</legend>
  4.         <label for="fname">First name:</label>
  5.         <input type="text" id="fname" name="fname"><br><br>
  6.         <label for="lname">Last name:</label>
  7.         <input type="text" id="lname" name="lname"><br><br>
  8.         <label for="email">Email:</label>
  9.         <input type="email" id="email" name="email"><br><br>
  10.     </fieldset>
  11.     <fieldset>
  12.         <legend>Payment:</legend>
  13.         <label for="cardnumber">Credit card number:</label>
  14.         <input type="text" id="cardnumber" name="cardnumber"><br><br>
  15.         <label for="cvv">CVV:</label>
  16.         <input type="text" id="cvv" name="cvv"><br><br>
  17.     </fieldset>
  18.     <br />
  19.     <input type="submit" value="Submit">
  20. </form>

9个高级的HTML功能 - 图9

8、<colgroup>元素

<colgroup>元素可以使样式非常容易的应用于表中。
而且<colgroup>元素内部也可以定义<table>以及之后的任何<caption>元素和之前的任何<thead>，<tbody>，<tfoot>和<tr>元素。
在内容一样可以使用span属性控制组样式。如果未定义任何span，则默认为单个列。
示例如下：

  1. <table>
  2.     <colgroup>
  3.         <col span="2" style="background-color:red">
  4.         <col style="background-color:yellow">
  5.     </colgroup>
  6.     <tr>
  7.         <th>ISBN</th>
  8.         <th>Title</th>
  9.         <th>Price</th>
  10.     </tr>
  11.     <tr>
  12.         <td>3476896</td>
  13.         <td>My first HTML</td>
  14.         <td>$53</td>
  15.     </tr>
  16.     <tr>
  17.         <td>5869207</td>
  18.         <td>My first CSS</td>
  19.         <td>$49</td>
  20.     </tr>
  21. </table>

9个高级的HTML功能 - 图10

9、<dl>，<dt>和<dd>元素

这些元素可用于构建某些描述列表。当为博客或书籍构建词汇表或参考文献列表时，这些元素是非常有用的。
以下是一个描述列表的示例：

  1. <dl>
  2.   <dt>Coffee</dt>
  3.   <dd>Black hot drink</dd>
  4.   <dt>Milk</dt>
  5.   <dd>White cold drink</dd>
  6. </dl>

9个高级的HTML功能 - 图11