ホームページ > ウェブフロントエンド > htmlチュートリアル > プロジェクト期間中のレビュー概要: テーブル、DIV+CSS、タグの入れ子ルール_html/css_WEB-ITnose

プロジェクト期間中のレビュー概要: テーブル、DIV+CSS、タグの入れ子ルール_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:04:38
オリジナル
1224 人が閲覧しました

2014-5-12 清書レビューまとめ


① 表の意味は何ですか?

テーブルは、一種の作業としてではなく、データの表示、統計、または 2 次元のレポートなど、表形式の表示に適した情報を表示するために使用する必要があります


② テーブル どのような要素がありますか?

テーブル要素: table thead tbody tfoot caption tr th td .... よく使われる


③ テーブルを使用する際に注意すべきことは何ですか?

1) テーブルを使用する場合は、適切なネストに注意し、タグのセマンティクスに従ってください。テーブルを使用する場合は、tbody、tfoot を適切な場所で使用するように注意してください。 tr、th、td が含まれます。タイトルは、キャプション タグを使用して表の外側に配置されます。
2) テーブル内のコンテンツは tr または td セルに書き込む必要があります。そうでない場合、コンテンツはテーブルの外で実行され、含めることはできません。例:



不便です。


4) table 要素には、caption、colgroup、col、thead、tbody、tfoot のみを含めることができ、tr またはその他の要素を直接含めることはできません






④ テーブルのレイアウト、利点とテーブルレイアウトのデメリットは?

毎月の節約額
1月
長所: テーブル レイアウトは使いやすく、複雑な変更を行うことができ、シンプルかつ高速で、パフォーマンスがより「厳密」で、さまざまなブラウザーでの互換性が良好です

短所: メンテナンスに役立たない、コードテーブルが 3 レベルを超えると、検索エンジンはテーブルをクロールしなくなり、Web サイトのレイアウトが再設計され、テーブルが行と列に分割されます。変更の割合はわずかに大きくなり、初期段階でのいくつかのランキングおよび検索基盤の準備に影響します。
① コードの肥大化 ② ページレンダリングのパフォーマンスの問題 ③ 検索エンジンの最適化に役立たない ④ アクセシビリティの低さ ⑤ セマンティクスの不足

⑥ テーブルの基本属性の設定 (行と列の結合)? 列の結合:colspan は列の結合を意味し、「3」は 3 つの列を指します。 Colspan="3" は、3 つの列を 1 つの列に結合することを意味します。つまり、縦に 3 つのセルを 1 つのセルに結合することを意味します。

行の結合: 行を結合する行スパンのコード。ここでの「7」は 7 行を結合することを意味します。

コードの練習: 開く

利点: メンテナンスと変更に便利、SEO クロールに役立つ (テーブル レイアウトの比較に注意)、合理的な構造ネスティング、構造スタイルの分離、Web ページの読み込み時間の短縮、ページ レンダリング パフォーマンスがテーブルよりも高い




DIV+CSS レイアウトの長所と短所は何ですか?


デメリット: ① 高度な開発技術 ご存知のとおり、div+css はさまざまなブラウザに対応する必要があり、div+css 開発の難易度が高くなります。 ② 開発に時間がかかる div+css レイアウトはテーブルレイアウトに比べて非常に時間がかかります。また、ブラウザの互換性の問題を考慮すると、さまざまなブラウザ間のテストにも時間がかかります。 ③ 開発コストが高い 上記2点で述べたように、開発コストは高い技術と長い時間がかかります。



行要素とブロック要素の違いは何ですか? ブロック要素: h div p title ol ul dl dt dd fieldset form …

1. デフォルトでは、行全体を占有し、ブロックには行/ブロック要素が含まれます

2. 幅と高さの設定は有効です
3. マージンとパディングの設定は有効です

4. 行要素の表示に変換します: inline 行要素: スパンが強いです 1. 行全体を占有することはありません 行にはブロック要素ではなく、行要素のみを含めることができます。
2. 幅と高さの設定は無効です 3. 縦方向のマージン 設定は無効です 4. ブロック要素に変換:表示:ブロック



タグの合理的なネストとタグのセマンティクス
タグのネストルール
1. 本体にはブロック要素、ins、del、script を直接含めることができます。インライン要素を直接含めることはできません
2. ins および del (インライン要素) にはブロック要素またはインライン要素を含めることができますが、他のインライン要素にはブロック要素を含めることはできません
3. p、h1-h6 にはインライン要素を直接含めることができ、テキスト情報ですが、ブロック要素は許可されません
4. dl 要素には dt と dd のみを含めることができます。同時に、dt には inline 要素のみを含めることができます。 5. form 要素を直接 Contains input 要素にすることはできません。その理由は、input 要素がインライン要素であり、form 要素には block 要素のみを含めることができるためです
6. table 要素には、caption、colgroup、col、thead、tbody、tfoot のみを含めることができ、tr またはその他の要素を直接含めることはできません要素


このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート