非常有用的HMTL标签

原创已于 2024-05-20 16:06:25 修改 · 297 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html5

于 2024-05-20 16:04:37 首次发布

HTML 专栏收录该内容

1 篇文章

订阅专栏

Html5的一些新特特性，虽然用的不多，但是会习惯后会事半功倍的.
1.快捷创建email, phone和sms（短信）

<!-- Email link -->
<a href ="mailto:name@example.com"> Send Email </a>

<!-- Phone Call link -->

<a href ="tel:+12345678"> Call Me </a>

<!-- SMS  link -->

<a href ="sms:+12345678"> Call Me </a>

2.创建折叠内容标签 <details> ， <summary>.这个标签非常实用，原先用js编写折叠隐藏的贡献现在完全可以平替下.

<details>
 <summary>Click to expand </summary>
 <p> This is content can be expanded or collapsed.</p>
</details>

3.文章段落标签

方便布局layout
<section>, <article>, <aside> <header>, <nav>, <footer>

4.表单布局

<form>
   <fieldset>
      <legend>Personal details</legend>
      <label for="firstname">First name:</label>
      <input type="text" id="firstname" name="firstname" />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
      <label for="contact">Contact:</label>
      <input type="text" id="contact" name="contact" />
      <input type="button" value="Submit" />
   </fieldset>
</form>

5.带个组的下拉标签
<optgroup>

<select>
   <optgroup label="Fruits">
      <option>Apple</option>
      <option>Banana</option>
      <option>Mango</option>
   </optgroup>
   <optgroup label="Vegetables">
      <option>Tomato</option>
      <option>Broccoli</option>
      <option>Carrot</option>
   </optgroup>
</select>

6. 音频，视频播放器
<video>, <source> 当前还可以配置很多播放器的属性

<video controls poster="image.png" width="500">
  <source src="video.mp4" type="video/mp4 />
</video>

7.下拉多选

<select multiple>
    <option value="java">Java</option>
    <option value="javascript">JavaScript</option>
    <option value="typescript">TypeScript</option>
    <option value="rust">Rust</option>
</select>

8. 幂函数标签
<sub>, <sup>.

9.下载link标签

<a href="document.pdf" download="document.pdf"> Download PDF </a>

10. 图片加载时显示

游览器加载图片的时候可以配置<image>标签延迟显示图片, 分别有三个可选值,Layz, auto, eager

<img src="picture.jpg" loading="lazy">

11. 禁用编辑属性
默认false，如果设置成true，当前div可以变成input的输入框，inline-edit的快捷实现

<div contenteditable="true">
   You can edit this content.
</div>

其他例如maxlength, input的accept约束，video的perload等都是很常用的.