検索
ホームページウェブフロントエンドhtmlチュートリアルXhtml_HTML/Xhtml_Web ページ作成ではあまり使用されませんが非常に便利なタグ

Xhtml には、珍しいけれども便利なタグがたくさんあります。半分の労力で 2 倍の結果が得られるもの、セマンティクスを改善できるもの、使いやすさを向上できるものなどをまとめました。つまり、ほとんどのブラウザがサポートする必要があるということです。そうしないと、「はい」としてカウントされません。 「たくさん」のため息をつくだけで何の役に立つでしょうか?

機能: タグは、ページ上のすべてのリンクのデフォルトのリンク アドレスまたはリンク ターゲットを指定します。ホームページ上のすべてのリンクを新しいウィンドウで開く必要がある場合、通常はこのようにリンクを作成しますが、このタグを使用するとそれを一度に行うことができます。
属性:
Href: リンクアドレス
target: target は、Strict モード以外でも使用できます。私が使っているもの 163.comで初めて発見されました。
使用法:

<code class="html"><span class="tag"><span class="tag">></span>></span> <br><span class="tag"><base>
<span class="aname"> href</span>=<span class="avalue">"http://www.qq.com/"</span> <span class="tag">/></span> ></span> <br><span class="tag"><base>
<span class="aname"> target</span>=<span class="avalue">"_blank"</span> <span class="tag">/></span> ></span> <br><span class="tag"></span></code><p><br><font size="4"><strong><caption>标签</caption></strong></font><br>    <strong>作用:</strong>caption标签用来定义表格的标题,给表格定义一个标题,来说明这个表格是干什么的,岂不是很有“语义”,caption应该写在table之后,默认的样式是居中显示在表格的顶部。你可以通过css来改变它的样式。<br>    <strong>用法:</strong><br></p>
<code class="html"><span class="tag"><table>
<span class="aname"> width</span>=<span class="avalue">"200"</span><span class="aname"> border</span>=<span class="avalue">"1"</span> <span class="tag">></span> <br><span class="tag"><caption>
<span class="tag">></span> <span class="mlcom"><!--caption应该写在table之后--></span> <br>其实我是caption <br><span class="tag"></span>
</caption></span> <br><span class="tag"><tr>
<span class="tag">></span> <br><span class="tag"></span><td>
<span class="tag">></span><span class="entity"> </span><span class="tag"></span>
</td> <br><span class="tag"></span><td>
<span class="tag">></span><span class="entity"> </span><span class="tag"></span>
</td> <br><span class="tag"></span>
</tr></span> <br><span class="tag"><tr>
<span class="tag">></span> <br><span class="tag"></span><td>
<span class="tag">></span><span class="entity"> </span><span class="tag"></span>
</td> <br><span class="tag"></span><td>
<span class="tag">></span><span class="entity"> </span><span class="tag"></span>
</td> <br><span class="tag"></span>
</tr></span> <br><span class="tag"></span>
</table></span></code><p><br><font size="4"><strong><thead>标签、</thead>
<tbody>标签、</tbody>
<tfoot>标签<br>    作用:thead、tfoot 
以及 
tbody标签跟他们的名字那样,分别是表格的头部(很多人只是用th)、主题、和底部,他们能让表格更加语义化的同时,也能让我们更加方便的控制表格的表现。国外还有人用很变态地方法用这三个表其做出标题能跟随表格,或者tbody固定高度,多出的行数出现滚动条。有兴趣的可以搜素下或者是这做一下。<br>注意:<font color="#ff0000">如果您使用 thead、tfoot 以及 tbody 
元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。</font><br>    <strong>用法:</strong><br>
<pre mergenum="16"><code class="html"><span class="tag"><table>
<span class="aname"> border</span>=<span class="avalue">"1"</span><span class="tag">></span> <br><span class="tag"><thead>
<span class="tag">></span> <br><span class="tag"><tr>
<span class="tag">></span> <br><span class="tag"></span><th>
<span class="tag">></span>科目<span class="tag"></span>
</th> <br><span class="tag"></span><th>
<span class="tag">></span>分数<span class="tag"></span>
</th> <br><span class="tag"></span>
</tr></span> <br><span class="tag"></span>
</thead></span> <br><span class="tag"><tfoot>
<span class="tag">></span> <br><span class="tag"><tr>
<span class="tag">></span> <br><span class="tag"></span><td>
<span class="tag">></span>总分<span class="tag"></span>
</td> <br><span class="tag"></span><td>
<span class="tag">></span>159<span class="tag"></span>
</td> <br><span class="tag"></span>
</tr></span> <br><span class="tag"></span>
</tfoot></span> <br> <br><span class="tag"><tbody>
<span class="tag">></span> <br><span class="tag"><tr>
<span class="tag">></span> <br><span class="tag"></span><td>
<span class="tag">></span>语文<span class="tag"></span>
</td> <br><span class="tag"></span><td>
<span class="tag">></span>99<span class="tag"></span>
</td> <br><span class="tag"></span>
</tr></span> <br><span class="tag"><tr>
<span class="tag">></span> <br><span class="tag"></span><td>
<span class="tag">></span>数学<span class="tag"></span>
</td> <br><span class="tag"></span><td>
<span class="tag">></span>60<span class="tag"></span>
</td> <br><span class="tag"></span>
</tr></span> <br><span class="tag"></span>
</tbody></span> <br><span class="tag"></span>
</table></span></code><p><br><font size="4"><strong><fieldset>标签和<legend>标签</legend>
</fieldset></strong></font><br>    <strong>作用:</strong></p>
元素用来分类表单中的元素,而则能给这个组定义一个标题。你一定见过类似下面domo的布局吧!他们也可以通过css定义样式。
    用法:
<code class="html"><span class="tag"><form>
<span class="tag">></span> <br><span class="tag"><fieldset>
<span class="tag">></span> <br><span class="tag"><legend>
<span class="tag">></span>基本信息<span class="tag"></span>
</legend></span> <br>姓名: <span class="tag"><input><span class="aname"> type</span>=<span class="avalue">"text"</span> <span class="tag">/></span> <br>性别: <span class="tag"><input><span class="aname"> type</span>=<span class="avalue">"text"</span> <span class="tag">/></span> <br><span class="tag"></span></span></span>
</fieldset></span> <br><span class="tag"></span>
</form></span></code><p><br><font size="4"><strong><sub> 标签和<sup> 标签</sup></sub></strong></font><br>    作用:<sub> 
标签和<sub> 
标签分别是上标和下标,虽然他们在各个浏览器的表现不一样,你<br>同样可以使用css定义他们的样式。<br>    <strong>用法:</strong><br></sub></sub></p>
<code class="html">2<span class="tag"><sup><span class="tag">></span>我是上标<span class="tag"></span></sup></span> <br>2<span class="tag"><sub><span class="tag">></span>我是下标<span class="tag"></span></sub></span></code><p><br><font size="4"><strong><label>标签</label></strong></font><br>    <strong>作用:</strong>label 
标签的使用可以扩大表单的点击区域来改进表单的易用性。看看下面的用法:点击文字的时候相当于点击了单选控件,这样用户体验是不是会更好一些?<br>    <strong>用法:</strong><br></p>
<code class="html"><span class="tag"><form>
<span class="tag">></span> <br><span class="tag"><label><span class="aname"> for</span>=<span class="avalue">"nan"</span><span class="tag">></span>先生<span class="tag"></span></label></span> <br><span class="tag"><input><span class="aname"> type</span>=<span class="avalue">"radio"</span><span class="aname"> name</span>=<span class="avalue">"sex"</span><span class="aname"> id</span>=<span class="avalue">"nan"</span> <span class="tag">/></span> <br><span class="tag"><br> <span class="tag">/></span> <br><span class="tag"><label><span class="aname"> for</span>=<span class="avalue">"nv"</span><span class="tag">></span>女士<span class="tag"></span></label></span> <br><span class="tag"><input><span class="aname"> type</span>=<span class="avalue">"radio"</span><span class="aname"> name</span>=<span class="avalue">"sex"</span><span class="aname"> id</span>=<span class="avalue">"nv"</span> <span class="tag">/></span> <br><span class="tag"></span></span></span></span>
</form></span></code><br><font size="4"><strong><optgroup> 标签</optgroup></strong></font><br>    <strong>作用:</strong><option></option> 
标签可以给select中的option进行分组,这在下拉项目很多的时候很有用,配合label标签给每组命名。你也可以像淘宝那样给每组用css定义不同的颜色。<br>    <strong>用法:</strong><br>
<code class="html"><span class="tag"><select><span class="tag">></span> <br><span class="tag"><optgroup>
<span class="aname"> label</span>=<span class="avalue">"自驾游"</span><span class="tag">></span> <span class="mlcom"><!--配合label标签给每组命名--></span> <br><span class="tag"><option>
<span class="tag">></span>省内<span class="tag"></span>
</option></span> <br><span class="tag"><option>
<span class="tag">></span>省外<span class="tag"></span>
</option></span> <br><span class="tag"></span>
</optgroup></span> <br><span class="tag"><optgroup>
<span class="aname"> label</span>=<span class="avalue">"旅行社"</span><span class="tag">></span> <br><span class="tag"><option>
<span class="tag">></span>省内<span class="tag"></span>
</option></span> <br><span class="tag"><option>
<span class="tag">></span>省外<span class="tag"></span>
</option></span> <br><span class="tag"><option>
<span class="tag">></span>国外<span class="tag"></span>
</option></span> <br><span class="tag"></span>
</optgroup></span> <br><span class="tag"></span></select></span></code><br>    你如果对更多的xhtml标签感兴趣,可以考虑看一看《HTML和XHTML权威指南》这本书,你也能在网上找到电子版的。我看过英文影印版的,虽然是英文但也不是太难看懂。<br>    你要是知道其他很有用的标签告诉我们吧!

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLの役割:Webコンテンツの構造HTMLの役割:Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード:用語を詳しく見るHTMLとコード:用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript:Web開発者に不可欠なツールHTML、CSS、およびJavaScript:Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割:コアの責任HTML、CSS、およびJavaScriptの役割:コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか?HTMLは初心者のために簡単に学ぶことができますか?Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか?HTMLでの開始タグの例は何ですか?Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は?メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか?オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか?Apr 05, 2025 pm 01:21 PM

WebコードエディターのHTML要素分析では、多くのオンラインコードエディターを使用すると、ユーザーはHTML、CSS、およびJavaScriptコードを入力できます。最近、誰かが提案した...

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター