因為想做一個簡陋的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嗎?
源碼:
<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>