HTML5
不是新事物。自从最初发布(2008年1月)以来,我们一直在使用它的一些功能。后来,我再次仔细查看了HTML5功能列表。看到我发现了什么?到目前为止,我还没有真正使用过它!
在本文中,我列出了十个HTML5我过去没用过但现在发现有用的功能。我还创建了一个工作示例流程并托管在Netlify。希望您也觉得它有用。
点击演示实例:https://html5-tips.netlify.app/
太好了,让我们开始介绍它们的解释,快速码起来吧。您可以在Twitter上关注我,以了解我将来的文章和工作。
🔥 Details Tag
<details>
标签提供随需应变的细节内容给用户。如果需要按需向用户显示内容,请使用此标记。默认情况下,详细内容是关闭的。打开后,它将展开并显示其中的内容。
<summary>
标签与<details>
一起使用,来为它指定一个可见的标题。
Code
<details>
<summary>Click Here to get the user details</summary>
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Location</th>
<th>Job</th>
</tr>
<tr>
<td>1</td>
<td>Adam</td>
<td>Huston</td>
<td>UI/UX</td>
</tr>
</table>
`` </details>
效果演示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f7yzeIsO-1603856211611)(https://imgkr2.cn-bj.ufileos.com/340aeb06-7d33-4113-9ad2-a5ca9322b2df.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=B4hjUfhV8%252BOUGwni%252FRF3zAf%252B0r8%253D&Expires=1603938215)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1OkMMgZi-1603856211613)(https://imgkr2.cn-bj.ufileos.com/ce406e48-5e54-4e13-b19c-bff28d5b5a9f.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=5eACgL%252BDeELiTJXboSALgQzAxDQ%253D&Expires=1603938223)]
您可以从这里开始查看演示:https : //html5-tips.netlify.app/details/index.html
小提示
在GitHub Readme中使用它来显示需要的详细信息。隐藏大量的文字并仅按需显示它。酷吧?
点击查看例子:https://github.com/atapas/notifyme#properties
🔥 Content Editable
contenteditable
是可以在元素上设置以使内容可编辑的属性
可以与DIV,P,UL等元素一起使用。您必须像这样指定它:<element contenteditable="true|false">
。
注意,如果contenteditable未在元素上设置属性,则会从其父级继承该属性。
Code
<h2> Shoppping List(Content Editable) </h2>
<ul class="content-editable" contenteditable="true">
<li> 1. Milk </li>
<li> 2. Bread </li>
<li> 3. Honey </li>
</ul>
效果演示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sJ0Kbods-1603856211615)(https://imgkr2.cn-bj.ufileos.com/797e6b11-283e-4772-9a4f-65f05358237c.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=gCtrlSBc0buQID0areMt1FCYbUU%253D&Expires=1603938688)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-36GAk1ib-1603856211617)(https://imgkr2.cn-bj.ufileos.com/cd6d9504-53ab-4f9b-b4b3-64273fb20531.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=IhiOG%252B%252B1WsUrbP61ozFsZbJYvEU%253D&Expires=1603938676)]
您可以从这里开始查看演示:https://html5-tips.netlify.app/content-editable/index.html
小提示
可以使span或div元素可编辑,并且可以使用CSS样式向其添加任何丰富的内容。这将比使用input 输入框更好。试一试!
🔥 Map
<map>
标签可以帮助定义image map
,image map
是其中具有一个或多个可单击区域的任何图像。map标签与<area>
标签一起确定可点击区域。可点击区域可以是矩形,圆形或多边形区域中的任意一种。如果您未指定任何形状,它将默认整个图像。
Code
<div>
<img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">
<map name="circusmap">
<area shape="rect" coords="67,114,207,254" href="elephant.htm">
<area shape="rect" coords="222,141,318, 256" href="lion.htm">
<area shape="rect" coords="343,111,455, 267" href="horse.htm">
<area shape="rect" coords="35,328,143,500" href="clown.htm">
<area shape="circle" coords="426,409,100" href="clown.htm">
</map>
</div>
效果演示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UyrUnhrk-1603856211618)(https://imgkr2.cn-bj.ufileos.com/8920d3bf-417b-41a1-a474-ba12274c3301.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=760Z2O5%252FLugmfJHPB%252B5rOawur2I%253D&Expires=1603939110)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BSrIullh-1603856211619)(https://imgkr2.cn-bj.ufileos.com/930e3090-fadc-494d-8e59-72dab1ffb942.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=y7lKfT5SE2QnRtV5w5wAmjQ8mUE%253D&Expires=1603939120)]
您可以从这里开始查看演示:https://html5-tips.netlify.app/map/index.html
小提示
图像贴图有其自身的缺点,但是您可以将其用于视觉演示。我们可以用全家福照片尝试一下并深入研究个人照片
🔥 Mark Content
使用<mark>
标记突出显示任何文本内容。
Code
<p> Did you know, you can <mark>"Highlight something interesting"</mark> just with an HTML tag? </p>
效果演示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w3P7mOlU-1603856211620)(https://imgkr2.cn-bj.ufileos.com/040183cd-6f31-4a14-8163-a72f315df36b.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=P4%252BbmowgDc5G%252FS%252BEfpy35jdpr1c%253D&Expires=1603939247)]
您可以从这里开始查看演示:https://html5-tips.netlify.app/mark/index.html
小提示
您始终可以使用CSS更改突出显示颜色,
mark {
background-color: green;
color: #FFFFFF;
}
🔥 data-* attribute
data-*
属性用于存储页面或应用程序专用的自定义数据。可以在JavaScript代码中使用存储的数据来创建更多的用户体验。
data- *
属性由两部分组成:
- 属性名称不得包含任何大写字母,并且前缀“ data-”后必须至少长一个字符
- 属性值可以是任何字符串
Code
<h2> Know data attribute </h2>
<div
class="data-attribute"
id="data-attr"
data-custom-attr="You are just Awesome!">
I have a hidden secret!
</div>
<button onclick="reveal()">Reveal</button>
function reveal() {
let dataDiv = document.getElementById('data-attr');
let value = dataDiv.dataset['customAttr'];
document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;
}
注意:要在JavaScript中读取这些属性的值,可以使用getAttribute(),但是规范定义了一种更简单的方法:使用dataset属性。
效果演示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bz7g8acU-1603856211621)(https://imgkr2.cn-bj.ufileos.com/7a0f1741-6b50-40eb-a1c4-e2b037e88211.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=erxsu8J00fFPFsygS5zvqPRcbr0%253D&Expires=1603939556)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PBnwHCKo-1603856211622)(https://imgkr2.cn-bj.ufileos.com/6e2bdb76-0ac6-40c2-8754-7c812a2257ea.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=Gw9ZD9xjjE%252FlaIiamRM5IdPGJ1I%253D&Expires=1603939564)]
您可以从这里开始查看演示:https://html5-tips.netlify.app/data-attribute/index.html
小提示
您可以使用它在页面中存储一些数据,然后使用REST调用将其传递给服务器。
🔥 Output Tag
<output>
标签表示运算的结果。通常,此元素定义一个区域,该区域将用于显示某些计算得出的文本。
Code
<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
<input type="number" id="a" value="0">
* <input type="number" id="b" value="0">
= <output name="x" for="a b"></output>
</form>
效果演示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ElULgeIY-1603856211623)(https://imgkr2.cn-bj.ufileos.com/82642411-a120-4d3d-88d9-b73069823286.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=X7GRwGasaU%252BRrWjS%252FNqvhS2cmUE%253D&Expires=1603939793)]
您可以从这里开始查看演示:https://html5-tips.netlify.app/output/index.html
小提示
如果要在客户端JavaScript中执行任何计算,并且希望结果反映在页面上,请使用<output>
标记。您不必走动使用可获取元素的额外步骤:getElementById()。
🔥 Datalist
<datalist>
标签指定了预先定义的选项列表,并允许用户添加更多。它提供了一项autocomplete功能,使您可以提前输入所需的选项。
Code
<form action="" method="get">
<label for="fruit">Choose your fruit from the list:</label>
<input list="fruits" name="fruit" id="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Orange">
<option value="Banana">
<option value="Mango">
<option value="Avacado">
</datalist>
<input type="submit">
</form>
效果演示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Av9Gs0Bs-1603856211624)(https://imgkr2.cn-bj.ufileos.com/516a12de-ed03-477f-988c-96e9dc8d4045.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=QaJgTFUcfzEoJCdGZ%252B9nJLxxUvk%253D&Expires=1603940029)]
您可以从这里开始查看演示:https://html5-tips.netlify.app/datalist/index.html
小提示
与传统<select>-<option>
标签有何不同?Select标记用于从选项中选择一个或多个项目,您需要浏览列表以进行选择。Datalist是具有自动完成支持的高级功能。也就是说Datalist标签不仅可以选择,还可以输入
🔥 Range(Slider)
range
具有滑块,范围选择的输入类型
Code
<form method="post">
<input
type="range"
name="range"
min="0"
max="100"
step="1"
value=""
onchange="changeValue(event)"/>
</form>
<div class="range">
<output id="output" name="result"> </output>
</div>
效果演示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uGOApUdT-1603856211625)(https://imgkr2.cn-bj.ufileos.com/4a22d456-198a-477a-a9aa-c6e719b9bef4.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=L%252FXhVh6hYD75SmLVJDhuWuNMNKc%253D&Expires=1603940312)]
您可以从这里开始查看演示:https://html5-tips.netlify.app/range/index.html
小提示
在html5中,没有叫slider的东西
🔥 Meter
使用<meter>
标签测量给定范围内的数据。
Code
`<form method="post">
<input
type="range"
name="range"
min="0"
max="100"
step="1"
value=""
onchange="changeValue(event)"/>
</form>
<div class="range">
<output id="output" name="result"> </output>
</div> `
效果演示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gMdxNcwV-1603856211625)(https://imgkr2.cn-bj.ufileos.com/bc0ad607-23d4-40d7-a80f-f73f068b570e.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=MEiEQlDBzlCEGh%252FeicWRMLZ1Aec%253D&Expires=1603940500)]
您可以从这里开始查看演示:https://html5-tips.netlify.app/meter/index.html
小提示
请勿将<meter>
标签用于进度条。我们有<Progress>
HTML5的标记。
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IFgid2Bo-1603856211626)(https://imgkr2.cn-bj.ufileos.com/c37ea93a-b997-46ba-8874-f0e34343812e.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=FJyXjYcexH1Kn5D3Go5cZXaF3zE%253D&Expires=1603940613)]
下一步是什么?
好吧,我敢肯定,我留下了一些有用的东西。请提供有关此文章以及您对HTML5的学习的评论。
如果对您有用,请点赞/分享,这样也可以吸引其他人。我对UI / UX
充满热情,并喜欢通过文章分享我的知识。
文章首发于 微信公众号《前端阳光》