效果演示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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等元素一起使用。您必须像这样指定它：。

注意，如果contenteditable未在元素上设置属性，则会从其父级继承该属性。

Code

Shoppping List(Content Editable)

1. Milk 2. Bread 3. Honey 效果演示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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

标签可以帮助定义image map，image map是其中具有一个或多个可单击区域的任何图像。map标签与标签一起确定可点击区域。可点击区域可以是矩形，圆形或多边形区域中的任意一种。如果您未指定任何形状，它将默认整个图像。

Code

效果演示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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

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

Code

Did you know, you can "Highlight something interesting" just with an HTML tag?

效果演示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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

Know data attribute

class=“data-attribute”

id=“data-attr”

data-custom-attr=“You are just Awesome!”>

I have a hidden secret!

Reveal

function reveal() {

let dataDiv = document.getElementById(‘data-attr’);

let value = dataDiv.dataset[‘customAttr’];

document.getElementById(‘msg’).innerHTML = ${value};

}

注意：要在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

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

Code

=

效果演示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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中执行任何计算，并且希望结果反映在页面上，请使用标记。您不必走动使用可获取元素的额外步骤：getElementById()。

 Datalist

标签指定了预先定义的选项列表，并允许用户添加更多。它提供了一项autocomplete功能，使您可以提前输入所需的选项。

Code

Choose your fruit from the list:

效果演示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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

小提示

与传统