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>

效果演示

您可以从这里开始查看演示: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>

效果演示

您可以从这里开始查看演示https://html5-tips.netlify.app/content-editable/index.html

小提示

可以使span或div元素可编辑,并且可以使用CSS样式向其添加任何丰富的内容。这将比使用input 输入框更好。试一试!

Map

<map>标签可以帮助定义image mapimage 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>

效果演示

您可以从这里开始查看演示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>

效果演示

您可以从这里开始查看演示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属性。

效果演示

您可以从这里开始查看演示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>

效果演示

您可以从这里开始查看演示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>

效果演示

您可以从这里开始查看演示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>

效果演示

您可以从这里开始查看演示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> `

效果演示

您可以从这里开始查看演示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>

下一步是什么?

好吧,我敢肯定,我留下了一些有用的东西。请提供有关此文章以及您对HTML5的学习的评论。

如果对您有用,请点赞/分享,这样也可以吸引其他人。我对UI / UX充满热情,并喜欢通过文章分享我的知识。

文章首发于 微信公众号《前端阳光》

BAT大佬推荐使用的HTML5的十个功能的更多相关文章

  1. 推荐8款HTML5相关的特殊效果

    HTML5是HTML的升级版,HTML5有两大特点:首先,强化了 Web 网页的表现性能.其次,追加了本地数据库等 Web 应用的功能.广义论及HTML5时,实际指的是包括HTML.CSS和JavaS ...

  2. Web开发者应当开始学习HTML5的新功能

    据国外媒体报道,谷歌开发者业务部门高管马克·皮尔格雷姆(Mark Pilgrim)在WWW2010会议上表示,尽管还需要进一步完善,HTML5已经获得大多数平台支持,适合完成大多数任务. 但并非所有人 ...

  3. 用jquery实现html5的placeholder功能

    html5的placeholder功能在表单中经常用到,它主要用来提示用户输入信息,当用户点击该输入框之后,提示文字会自动消失. 我们用jquery实现类似的功能: 当输入框获得焦点时,清空输入框中的 ...

  4. 程序员大佬推荐的java学习路线

    作为我的第一篇博客,我第一个想到的就是在校时就看到的这篇文章.并且在之后的时间里自己都反复观看过,有时候这不单单是一篇学习路线,也是审视自己技术能力的里程碑,和激励自己的鞭挞绳. 先来个书籍清单: & ...

  5. Sping源码+Redis+Nginx+MySQL等七篇实战技术文档,阿里大佬推荐

    JVM JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的. 引入 ...

  6. 不会吧!做了这么久开发还有不会NIO的,看看BAT大佬是怎么用的吧

    前言 在将NIO之前,我们必须要了解一下Java的IO部分知识. BIO(Blocking IO) 阻塞IO,在Java中主要就是通过ServerSocket.accept()实现的. NIO(Non ...

  7. 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  8. 关于html5新增的功能(百度)

    HTML5包含以下新增和更新功能: 1. 新增了一种HTML文档类型:<DOCTYPE html>   2. 新增了一些结构化标记的元素(<header>,<nav> ...

  9. 让IE8支持HTML5及canvas功能!

    微软出的IE9支持HTML5,但因为不支持XP系统,暂时我还用不了. 即使能用,现阶段如果开发HTML5页面,并考虑到兼容性问题的话,恐怕也得让自己的界面支持IE6-8吧. 首先,需要让IE支持HTM ...

随机推荐

  1. Redis学习(一)认识并安装redis

    一.初识redis Redis是一个开源的Key-Value数据库,通常被称为数据结构服务器,其值可以是多种常见的数据格式,且读写性能极高,且所有操作都是原子性的. Redis是运行在内存中的,但是可 ...

  2. python语言开发环境配置

    原作者:龙行天下-super 地址:https://www.cnblogs.com/longxingtianxia/p/10181901.html 要点:IDLE是一个轻量级python语言开发环境, ...

  3. PostgreSQL数组类型应用

    在使用 awk 脚本:数组是一大利器:在很多场景是用数组能处理. 在 python 中,数据类型list:相当于array类型. 在 Oracle 中,对 array 不够友好,感觉像是鸡肋.但是在 ...

  4. BUU reverse xxor

    下载下来的是个elf文件,因为懒得上Linux,直接往IDA里扔, 切到字符串的那个窗口,发现Congratulation!,应该是程序成功执行的表示, 双击,按'x',回车跟入 找到主函数: 1 _ ...

  5. C#方法Extra

    C#方法Extra 上次说的只是方法的一些基本东西,今天讲讲重载和 Lambda 表达式. 重载 方法的重载(overload)指的是同一个名字的方法,有着不一样的方法签名(method signat ...

  6. # js权威指南之对象篇

    对象是js中的关键 属性查找 in,Object.hasOwnProperty(),Object.propertyIsEnumerable()都能检测出对象内是否存在某个属性 in关键字 自有属性/继 ...

  7. vs中CString的用法,以及所需的头文件

    转载:https://blog.csdn.net/shizhandong50/article/details/13321505 1.CString类型的头文件#include <afx.h> ...

  8. 从0到1进行Spark history分析

    一.总体思路 以上是我在平时工作中分析spark程序报错以及性能问题时的一般步骤.当然,首先说明一下,以上分析步骤是基于企业级大数据平台,该平台会抹平很多开发难度,比如会有调度日志(spark-sub ...

  9. centos7 安装k8s kubectl 客户端

    1. 配置k8s的kubelet 管理客户端 1 cat <<EOF > /etc/yum.repos.d/kubernetes.repo 2 [kubernetes] 3 name ...

  10. Solr单机安装

    Solr单机安装 一.下载 自行到官网下载所需版本即可,我这里使用的是solr-7.1.0solr官网:http://archive.apache.org/dist/lucene/solr/ 二.安装 ...