經在中央十臺有一個叫做「漢字聽寫大會」的節目,相信多數人看這個節目時內心的想法和我一樣:自己認識的字兒太少了!
聲色教你讀生僻字,并把你的讀音匿名分享給朋友圈的好友——先向用戶展示漢字生僻字,通過 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小時內與您取得聯系。