经在中央十台有一个叫做「汉字听写大会」的节目,相信多数人看这个节目时内心的想法和我一样:自己认识的字儿太少了!
声色教你读生僻字,并把你的读音匿名分享给朋友圈的好友——先向用户展示汉字生僻字,通过 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新属性及意义
input新增类型和属性
新的输入类型 | 新的输入属性 |
|
|
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>
页面上显示如图:
表单重写属性:
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。
*请认真填写需求信息,我们会在24小时内与您取得联系。