🐲發掘少見但實用的html元素

因為想做一個簡陋的html編輯器,只需要用到html標籤,而不必寫代碼和樣式,因此想搜集一些平時少見但實用的html元素。

fieldset跟legend

fieldset跟legend成對出現,legend是fieldset的標題。這組標籤的初始定義是用於form表單,然而現在很少有人用了吧。

你是否同意以上觀點?

 

源碼:
<!-- Form with fieldset, legend, and label -->
<form method="post">
<fieldset style="border: 2px solid gray; padding: 7px 12px;">
<legend style="margin-bottom: 0;">你是否同意以上觀點?</legend>
<div><label><input type="radio" name="radio" value="yes" /> 是 </label><label><input type="radio" name="radio" value="no" /> 否 </label></div></fieldset>
</form>

del跟ins

del跟ins也不太常見,它們的意義是刪除和替代文字。其表現跟<s></s>及<u></u>一致。

“You're late!”

“I apologize for the delay.”

“A wizard is never late …”

源碼:
<p>“You're late!”</p>
<p><del>“I apologize for the delay.”</del></p>
<p><ins cite="../howtobeawizard.html" datetime="2018-05">“A wizard is never late …”</ins></p>

mark跟small

mark跟small也是很少人會去用的了,因為我們完全可以用span再定義它的style

源碼:
mark也是<small>很少人</small>會去用的了,因為我們<mark>完全可以用span再定義它的style</mark>。

output

你只知道有input,但你知道還有output嗎?

+ = 70
源碼:
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="b" name="b" value="50" /> +
<input type="number" id="a" name="a" value="10" /> =
<output name="result" for="a b">60</output>
</form>

details跟summary

這組標籤個人認為倒是挺實用的。

點擊察看

再次點擊收回

源碼:
<details>
<summary>點擊察看</summary>
再次點擊收回</details>

dl,dt,dd

這一組跟「ul、ol、li」很像,都可用於列表。
但是它只有縮進
沒有圓點或數字
源碼:
<dl><dt>這一組跟「ul、ol、li」很像,都可用於列表。</dt>
<dd>但是它只有縮進</dd>
<dd>沒有圓點或數字</dd>
</dll>

kbd

kbd是keyboard的縮寫,用於表示ctrl之類的鍵名。

源碼:
<p>kbd是keyboard的縮寫,用於表示<kbd style="border-radius: 3px; padding: 1px 2px 0; border: 1px solid black;">ctrl</kbd>之類的鍵名。</p>

Leave a Comment