整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

生僻字怎么读最有趣?声色做强关系下的匿名社交社区

经在中央十台有一个叫做「汉字听写大会」的节目,相信多数人看这个节目时内心的想法和我一样:自己认识的字儿太少了!

声色教你读生僻字,并把你的读音匿名分享给朋友圈的好友——先向用户展示汉字生僻字,通过 GIF 动图以及文字提示,引导用户去试读,试读的语音内容可以在社区内分享,在读完后,声色会展示正确的读音以及用户朋友圈里好友的读音。

声色是一个轻量化 HTML5 社区,它不用下载,方便用户使用;它是基于强关系下的匿名互动,你的试读语音会匿名分享给朋友圈里的好友,或是好友的好友,而你也会收到同一汉字其他人试读的语音,并向他/她发送消息。

声色从生僻字出发,吸引用户加入到这个为社区中,汉字生僻字作为文化本身具有学习的价值;语音元素和试读机制的加入让生僻字学习更有趣;轻量化、免下载的特性能把握用户零碎化时间;同时,在强关系之下,试读内容的分享会鼓励用户更多地试读、更多地分享。

在声色中有这么一种互动方式,通过擦除广告来获取 GIF 提示图,声色的运作方式更像是一个小游戏,用户真正感兴趣的点在于通过提示试读生僻字,以及听其他人的怪异读音。声色想通过抓住用户的兴趣点,吸引更多用户加入这场学习生僻字的「游戏」中,再通过巧妙的广告植入来获取利润,或许今后的 GIF 汉字提示图将会以广告的方式出现。

今后,声色打算从汉字出发,拓展到韩日等以汉字为字形的国家,同一个汉字字形,在中日韩可能有不同的读音,声色想通过汉字做一次国际社交。

声色的创始团队有大学生、会计和退伍军人,目前仍然在开发阶段,产品还未正式推出。

H5 诞生以来,在 html4.0 中有些元素已被 H5 废弃,但是在 H5 中添加了很多新元素以及功能,今天我们学习 H5 中新增的元素和属性都有哪些?

新增语义结构标签

标签

描述

<article>

定义页面独立的内容区域。

<aside>

定义页面的侧边栏内容。

<bdi>

允许您设置一段文本,使其脱离其父元素的文本方向设置。

<command>

定义命令按钮,比如单选按钮、复选框或按钮

<details>

用于描述文档或文档某个部分的细节

<dialog>

定义对话框,比如提示框

<summary>

标签包含 details 元素的标题

<figure>

规定独立的流内容(图像、图表、照片、代码等等)。

<figcaption>

定义 <figure> 元素的标题

<footer>

定义 section 或 document 的页脚。

<header>

定义了文档的头部区域

<mark>

定义带有记号的文本。

<meter>

定义度量衡。仅用于已知最大和最小值的度量。

<nav>

定义导航链接的部分。

<progress>

定义任何类型的任务的进度。

<ruby>

定义 ruby 注释(中文注音或字符)。

<rt>

定义字符(中文注音或字符)的解释或发音。

<rp>

在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。

<section>

定义文档中的节(section、区段)。

<time>

定义日期或时间。

<wbr>

规定在文本中的何处适合添加换行符。

新增标签使用时根据描述内容,在适当的地方使用新标签,应用的时候和其他标签是一样的,H5 新增标签使得网页结构更清晰明了,建议大家使用新增元素。

新增表单元素

标签

描述

<datalist>

<input>标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

<keygen>

<keygen> 标签规定用于表单的密钥对生成器字段。

<output>

<output> 标签定义不同类型的输出,比如脚本的输出。

<datalist>属性规定form或input域应该拥有自动完成功能,当input聚焦时,浏览器应该在域中显示填写的选项。

使用 input 元素与 datalist 元素绑定,使用时如下:

<form action="">
 <input type="text" list="schooltype">
 <datalist id="schooltype">
  <option value="欧亚驾校">欧亚驾校</option>
  <option value="鹏程驾校">鹏程驾校</option>
  <option value="学车网">学车网</option>
 </datalist>    
</form>

<keygen>元素用于提供用户验证的方法,表单提交时,keygen生成表单密钥对,一个是公钥,一个是私钥,私钥存储在客户端,公钥通过带有keygen字段的表单发送给服务器。目前已被H5废弃,我们作为了解就好。

使用实例如下:

<form action="">
 用户名<input type="text" name="user" /><br>
 密码<input type="password" name="se"> <br>
 加密<keygen name="security"><br>
 <input type="submit" value="提交">
</form>

<output>元素用于不同类型的输出,对输出结果的展示,如对两个数值相加,并展示结果,代码如下:

<form action="" oninput = "x.value=parseInt(a.value)+parseInt(b.value)">
 <input type="range" id="a" step="1" min="0" max="100"> + 
 <input type="text" id="b" value="50">=
 <output name="x" ></output> 
</form>

上述form处添加oninput事件,对数值parseInt进行取整运算。

新增表单属性

H5中新增表单属性指 form 和 input 元素新增属性。

form新属性及意义

  • autocomplete :规定form域自动完成功能。
  • novalidate :规定提交表单时是否验证域。

input新增类型和属性

新的输入类型

新的输入属性

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height 和 width
  • list
  • min 和 max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

input 和 form 的 autocomplete属性

属性规定 form 或 input 在当前域下拥有自动完成功能,通俗地讲就是元素聚焦时,会自动展示之前输入过的内容,内容是根据当前域名下之前使用过的数据。示例如下:

<form action="demo_form.asp" method="get" autocomplete="on">
 First name: <input type="text" name="fname" /><br />
 Last name: <input type="text" name="lname" /><br />
 E-mail: <input type="email" name="email" autocomplete="on" /><br />
 <input type="submit" />
</form>

页面上显示如图:


表单重写属性:

  • formaction - 重写表单的 action 属性
  • formenctype - 重写表单 enctype 属性
  • formmethod - 重写表单 method 属性
  • formnovalidate - 重写表单 novalidate 属性
  • formtarget - 重写表单的 target 属性

min、max、step属性

三者用于对数字、日期类型输入框的限制和约束。

  • min - 规定允许设置的最小值。
  • max - 规定允许设置的最大值。
  • step - 规定合法的数字间隔。

使用示例,请参照上output处的实例。

multipel属性:规定输入域中可选择多个值。适用于 email 和 file 两种类型。

pattern属性:验证input域的模式。模式pattern是正则表达式,适用于text、search、url、email、password。

废除的标签

以下是一些在H5中已废弃的元素。

acronym、applet、basefont、big、center、dir、font、frame、frameset、noframes、strike、tt。

、HTML5中的新标签

  • <article> :定义外部的内容,这些内容独立于文档的其余部分;
  • <aside> :定义其所处内容之外的内容;
  • <audio> :定义声音,比如音乐或其他音频流;
  • <bdi> :允许设置一段文本,使其脱离其父元素的文本方向设置;
  • <canvas> :定义图形,比如图表和其他图像,它只是图形容器,必须使用脚本来绘制图形;
  • <command> :可以定义命令按钮,比如单选按钮、复选框或按钮;
  • <datalist> :定义选项列表,与 input 元素配合使用该元素,来定义 input 可能的值;
  • <details> :用于描述文档或文档某个部分的细节;
  • <embed> :定义嵌入的内容,比如插件;
  • <figcaption>: 定义元素的标题;
  • <figure>:规定独立的流内容,如图像、图表、照片、代码等等;
  • <footer>:定义 section 或 document 的页脚;
  • <header>:定义文档的页眉(介绍信息);
  • <hgroup>:用于对网页或区段的标题进行组合;
  • <keygen>:规定用于表单的密钥对生成器字段;
  • <mark>:定义带有记号的文本,请在需要突出显示文本时使用 <m> 标签;
  • <meter>:定义度量衡,仅用于已知最大和最小值的度量;
  • <nav>:定义导航链接的部分;
  • <output>:定义不同类型的输出,比如脚本的输出;
  • <progress>:定义运行中的进度(进程);
  • <rp>:在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容;
  • <rt>:定义字符的解释或发音;
  • <ruby>:定义 ruby 注释;
  • <section>:定义文档中的节(section、区段),比如章节、页眉、页脚或文档中的其他部分;
  • <source> :为媒介元素比如 <video> 和 <audio>定义媒介资源; <summary>:包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。;
  • <time> :定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的; <track>:为诸如 video 元素之类的媒介规定外部文本轨道;
  • <video> `:定义视频,比如电影片段或其他视频流;

二、HTML5新属性

  • contenteditable:bool类型,规定是否允许用户编辑内容;
  • contextmenu:规定元素的上下文菜单;
  • data-yourvalue:创作者定义的属性,HTML 文档的创作者可以定义他们自己的属性,必须以 "data-" 开头;
  • draggable:规定是否允许用户拖动元素;
  • hidden:规定该元素是无关的,被隐藏的元素不会显示;
  • item:用于组合元素;
  • itemprop:用于组合项目;
  • spellcheck:规定是否必须对元素进行拼写或语法检查;
  • subject:规定元素对应的项目;

三、Window 事件属性

  • onafterprint:在打印文档之后运行脚本;
  • onbeforeprint:在文档打印之前运行脚本;
  • onbeforeonload:在文档加载之前运行脚本;
  • onerror:当错误发生时运行脚本;
  • onhaschange:当文档改变时运行脚本;
  • onmessage:当触发消息时运行脚本;
  • onoffline:当文档离线时运行脚本;
  • ononline:当文档上线时运行脚本;
  • onpagehide:当窗口隐藏时运行脚本;
  • onpageshow:当窗口可见时运行脚本;
  • onpopstate:当窗口历史记录改变时运行脚本;
  • onredo:当文档执行再执行操作时运行脚本;
  • onresize:当调整窗口大小时运行脚本;
  • onstorage:当文档加载加载时运行脚本;
  • onundo:当 Web Storage 区域更新时,存储空间中的数据发生变化时;
  • onunload:当用户离开文档时运行脚本;

四、表单事件

  • oncontextmenu:当触发上下文菜单时运行脚本;
  • onformchange:当表单改变时运行脚本;
  • onforminput:当表单获得用户输入时运行脚本;
  • oninput:当元素获得用户输入时运行脚本;
  • oninvalid:当元素无效时运行脚本;

五、键盘事件

  • onkeydown:当按下按键时运行脚本;
  • onkeypress:当按下并松开按键时运行脚本;
  • onkeyup:当松开按键时运行脚本;

六、鼠标事件

  • ondrag:当拖动元素时运行脚本;
  • ondragend:当拖动操作结束时运行脚本;
  • ondragenter:当元素被拖动至有效的拖放目标时运行脚本;
  • ondragleave:当元素离开有效拖放目标时运行脚本;
  • ondragover:当元素被拖动至有效拖放目标上方时运行脚本;
  • ondragstart:当拖动操作开始时运行脚本;
  • ondrop:当被拖动元素正在被拖放时运行脚本;
  • onmousewheel:当转动鼠标滚轮时运行脚本;
  • onscroll:当滚动元素滚动元素的滚动条时运行脚本;

七、媒介事件

  • oncanplay:当媒介能够开始播放但可能因缓冲而需要停止时运行脚本;
  • oncanplaythrough:当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本;
  • ondurationchange:当媒介长度改变时运行脚本;
  • onemptied:当媒介资源元素突然为空时(网络错误、加载错误等)运行脚本;
  • onended:当媒介已抵达结尾时运行脚本;
  • onerror:当在元素加载期间发生错误时运行脚本;
  • onloadeddata:当加载媒介数据时运行脚本;
  • onloadedmetadata:当媒介元素的持续时间以及其他媒介数据已加载时运行脚本;
  • onloadstart:当浏览器开始加载媒介数据时运行脚本;
  • onpause:当媒介数据暂停时运行脚本;
  • onplay:当媒介数据将要开始播放时运行脚本;
  • onplaying:当媒介数据已开始播放时运行脚本;
  • onprogress:当浏览器正在取媒介数据时运行脚本;
  • onratechange:当媒介数据的播放速率改变时运行脚本;
  • onreadystatechange:当就绪状态(ready-state)改变时运行脚本;
  • onseeked:当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本;
  • onseeking:当媒介元素的定位属性为真且定位已开始时运行脚本;
  • onstalled:当取回媒介数据过程中(延迟)存在错误时运行脚本;
  • onsuspend:当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本;
  • ontimeupdate:当媒介改变其播放位置时运行脚本;
  • onvolumechange:当媒介改变音量亦或当音量被设置为静音时运行脚本;
  • onwaiting:当媒介已停止播放但打算继续播放时运行脚本;