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等都是很常用的.