简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

HTML5のフッタータグの使い方をご存知ですか？ , HTML5のフッタータグとは何を意味するのでしょうか？

寻∝梦
リリース： 2018-08-15 15:30:57
オリジナル
21565 人が閲覧しました

HTML5のフッタータグの使い方をご存知ですか？ , HTML5のフッタータグとは何を意味するのでしょうか？この記事では、HTML5におけるフッタータグの定義と具体的な使い方、フッターの標準属性、ページ下部に配置する簡単な実装方法を紹介します。

HTML5 におけるフッター タグの定義と使用法:

タグは、セクションまたはドキュメントのフッターを定義します。

通常、この要素には作成者の名前、ドキュメントの作成日、および/または連絡先情報が含まれます。

ドキュメント内では、複数の

要素を定義できます。

例

ドキュメントフッター: 

<footer>This document was written in 2010</footer><!DOCTYPE HTML>
<html>
<body>
<footer>This document was written in 2010.</footer>
</body>
</html>
ログイン後にコピー

HTML 4.01とHTML 5の違い

タグはHTML 5の新しいタグです。

ヒント: フッターを使用して連絡先情報を挿入する場合は、フッター要素内で

要素を使用する必要があります。

HTMLのフッターの標準属性:

class、contenteditable、contextmenu、dir、draggable、id、inquired、

lang、ref、registrationmark、tabindex、template、title

html5構文構造 - TOP

1 . 文法 

<</span>footer> 
　　PHP中文网<</span>br /> 
　　学习CSS，找DIV+CSS资源上PHP中文网! 
</</span>footer>
ログイン後にコピー

2. フッター要素タグに id を追加 

<</span>footer id=”abc”> 
　　PHP中文网<</span>br /> 
　　学习CSS，找DIV+CSS资源上PHP中文网! 
</</span>footer>
ログイン後にコピー

3. フッタータグにクラスを追加 

<</span>footer class=”yanshi”> 
　　PHP中文网<</span>br /> 
　　学习CSS，找DIV+CSS资源上PHP中文网! 
</</span>footer>
ログイン後にコピー

4. 知識の拡張

HTML5 開発でフッター タグを使用する場合、それを通常の div タグですが、通常は Web サイトの下部レイアウトに使用されます。一般に、Web ページの下部領域は 1 つだけであるため、フッターは 1 回だけ使用するのが最善です。

注: これは HTML5 の新機能であり、IE8 以前とは互換性がないため、注意して使用してください。

インターネットでページの下部に配置する簡単な実装方法を見たので、共有したいと思います

需要: ページのコンテンツが短く、ページの高さをサポートできない場合があります。しかし、フッターもウィンドウ端の一番下の位置に配置したいと考えています。

アイデア: フッターの親レイヤーの最小の高さは 100% であり、フッターは親レイヤーの位置に対して絶対的に下 (底部: 0) に設定され、フッターの高さは親で予約されている必要があります。層。

htmlコード:

XML/HTMLコード 内容をクリップボードにコピー

<!-- 父层 -->     
<div id="wapper">     
    <!-- 主要内容 -->     
    <div id="main-content">     
    </div>     
    <!-- 页脚 -->     
    <div id="footer">     
    </div>     
</div>
ログイン後にコピー

CSSは以下の通り:

CSSコード 内容をクリップボードにコピー

#wapper{     
    position: relative;   /*重要！保证footer是相对于wapper位置绝对*/     
    height: auto;          /* 保证页面能撑开浏览器高度时显示正常*/     
    min-height: 100%  /* IE6不支持，IE6要单独配置*/     
}     
#footer{     
   position: absolute;  bottombottom: 0; /* 关键 */     
   left:0; /* IE下一定要记得 */     
   height: 60px;         /* footer的高度一定要是固定值*/     
}     
#main-content{     
   padding-bottom: 60px; /*重要！给footer预留的空间*/     
}
ログイン後にコピー

この時、他のブラウザでは正常に表示できますが、IE 6 個別に処理するには:

CSS コードの内容をクリップボードにコピーします

<!--[if IE 6]->     
<style>     
#wapper{height:100%;} /* IE在高度不够时会自动撑开层*/     
</style>     
<![endif]-->
ログイン後にコピー

さて、この記事で説明するのはこれですべてです。ヘッダーの記事も掲載しますので、ぜひ皆さんもクリックしてご覧いただければと思います。

【関連おすすめ】

HTML IMGタグの属性とは何ですか? IMGタグの使い方を理解しよう

HTML5におけるWebとは？ Webストレージの要素は何ですか?

以上がHTML5のフッタータグの使い方をご存知ですか？ , HTML5のフッタータグとは何を意味するのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
HTML5中footer标签 HTML5中footer置于页面最底部的一种简单方法
ソース：php.cn
前の記事：HTML5のセクションタグとは何ですか? HTML5でセクションタグを中央に配置するにはどうすればよいですか? 次の記事：HTML5 の hgroup は何をするのでしょうか? HTML5 での hgroup タグの具体的な使用法については、ここをクリックしてご覧ください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
SQL Count() にも 0 が必要です テーブルが 1 つだけあり、0 で始まるタグの各エントリをカウントしたいと考えています。今度はこれを試します: SELECT tag,COUNT(start)ASAnzahl,us...
から 2024-04-06 19:48:53
0
1
449
hr タグが単色白に設定されているのに半透明になるのはなぜですか? HTML（ブートストラップ付き）とCSSがあり、HTMLにはクラスを持つ<hr>タグがあり、CSSにはその境界線スタイルがあります。半透明で白い色は見えますが、「固体」...
から 2024-04-06 16:13:26
0
1
500
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
固定配置された子によって親のパディングが無視される スティッキー要素がヘッダーの後ろに来るのを防ぐにはどうすればよいですか?現在のコードスニペットは親にpadding-topを使用しており、追加の子にmargin-topまたは透明な...
から 2024-04-06 11:42:51
0
1
338
Web サイトのページでローカルにインストールされたライブラリを使用する Windows オペレーティング システム用に作成され、最新のブラウザーの system32 に登録されたライブラリ (.dll、.ocx) を使用して、サイトの作業と計算のロジッ...
から 2024-04-05 00:15:49
0
1
3563
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！