実用的でクールな 5 つの HTML タグと属性の紹介_HTML/Xhtml_Web ページ制作

実は、これも見出しであり、「眩しい」とは言えないのは、私が無知で、これらのラベルを見たことがないだけです。こういった機能は通常のWebサイトではあまりないので、とても新鮮に感じます。次に、これまでに出会った優れた HTML タグをすべて記録するシリーズを作成します (おそらく HTML5 タグ。すべてのブラウザーに互換性があるという保証はありません)。

1. コンテンツ編集可能

これは HTML5 の新しいタグで、次のテーブルのような領域のコンテンツを編集できるようになります。 (IE のテーブルはこの属性をサポートしていないようですが、div と body はサポートしているようです。 IE を使用している場合は、$100 と $50 の部分をクリックして編集してください。IE 以外の場合は、すべてのコンテンツが編集可能になっているはずです。

<みんな>

毎月の節約額

月	貯蓄
1月	$100
2月	$50

ヒント:

を実行する前にコードの一部を変更できます。

このテーブルはテキスト ボックスを追加せずに直接編集できることに注意してください。また、サブタグでこの属性が指定されていない場合は、デフォルトで継承されるため、非常に便利です。便利。 (もちろん、この属性を本文に追加すると、すべて編集できるようになるので、本当に恐ろしいです...)

2. フィールドセットタグ

これは .NET の GroupBox に相当しますが、その機能は次の形式で関連する要素をグループ化することです。

<フィールドセット> <legend>インデックス:</legend> <ul> <li><a href="#">すべての記事のインデックス</a></li> <li><a href="#">羊が今日起きなければならないこと</a></li> <li><a href="#">羊さん、なんとか目覚めることができました</a></li> </ul> </fieldset></ul>

ヒント:

を実行する前にコードの一部を変更できます。

legendタグはこのBOXのタイトルを指定します。

3. エリアタグ

画像の特定の領域にハイパーリンクを直接配置できます。 img の map タグと usemap 属性を一致させるだけです (画像をクリックして他のページにジャンプした後は、忘れずに ^_^ を返すようにしてください):

<マップ名="惑星マップ">

ヒント: を実行する前にコードの一部を変更できます。

4. output标签

这个标签能够直接显示脚本的运算结果（注意：目前IE的任何版本都不支持），以下脚本似乎不工作，可能是因为WP的原因所致：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form></p> <p><p><strong>Note:</strong> The output tag is not supported in Internet Explorer.</p> </form>
提示：您可以先修改部分代码再运行

5. mark标签

直接能够高亮一段文字，不需要把文字拆开即可实现：

<p>Do not forget to buy <mark>milk</mark> today.</p>
提示：您可以先修改部分代码再运行

今天先到这吧，以后看到好的HTML标签和特效再贴上来。