ホームページ > 記事 > ウェブフロントエンド > HTMLタグとページレイアウトについて知っておくべきこと

HTMLタグとページレイアウトについて知っておくべきこと

零下一度オリジナル: 2017-04-27 13:35:431450ブラウズ

私は学校で十分な基礎を築けなかったのですが、卒業後は学習スピードとより多くの知識を習得することに集中しすぎて、細部を無視していました。 HTMLタグとページレイアウトについて知っておくべきことその結果、今は基礎がしっかりしていません。。したがって、基礎が非常に重要です。成功を求めすぎず、一歩ずつ進めてください。詳細が運命を決定します。芸能人もそう言ってるから本当なんだろうね。 HTMLタグとページレイアウトについて知っておくべきこと

以下にまとめてみましょう:

1.html タグは適切な構造とセマンティクスで合法的に記述される必要があります

2. p と spam の過度の使用を避け、文書にスタイルを適用しやすくし、論理的な段落をより明確にします。

重要度に応じて h1-6 タグを使用し、段落には p を使用し、リストには ul を使用します。ブロックレベルの要素をインライン要素にネストすることはできません (input、tetarea)。

3. タグの使用はできるだけ少なくします

4. クラスと ID を適切に使用します。同じクラスは繰り返し出現でき、同じ ID はページ上に 1 回だけ出現します

5. タイトルタグは h1 ～ h6 に分かれており、文書内でのタイトルの優先順位を高位から低位まで示します。

H1 は、メインタイトル (通常は Web ページのタイトル) を変更するために Web ページ内で 1 回だけ使用するのが最適です。ただし、実際には、検索エンジンがテーマをできるだけ早く理解できるように、h1 は本文に近いロゴタグとして使用されます。

h2 は記事のタイトルまたはドキュメントのサブタイトルを表します。

h3 は Web サイトのホームページやその他のページの列タイトルを表します。 H2、H3、および H4 タグは Web ページ内で複数回出現できますが、任意にまたは過剰に追加する必要があります。
6. フォーム内:

Form title

フィールドセット>

は、フォームタイトルが存在しない場合にのみ使用されます、その後、

7. フォームIDとname。どちらもオブジェクト名をマークするために使用されます。 ID は後に導入され、それ以前は名前を使用して実装されていました。多くのプログラマは、フォーム要素の値を取得するために name 属性を使用しますが、ID は CSS スタイルの定義に使用できるため、ID と名前を一緒に使用することをお勧めします。

8. テーブルレイアウトを選択した場合、Web サイト内のすべてのページで均一にテーブルを使用する必要があります。テーブルレイアウトのページの読み込みプロセスは通常、それほどスムーズではなく、自然ではないため、注意してください。このような不器用で保守的なレイアウトでは、作業の視覚的な流れが中断される可能性が高くなります。

9. インライン要素フロートとブロック要素フロートの違い: インライン要素フロートの後、境界線は境界線から内側に追加され、ブロック要素は外側から追加されます。つまり、インライン要素をフローティングにしてサイズ px の境界線を設定した後、その要素が占める領域は増加しないため、レイアウトには影響しません。

<!DOCTYPE html>  
<html>  
<head>  
    <title>测试内联元素浮动后边框问题</title>  
    <meta charset="utf-8"/>  
    <style type="text/css">  
        *,p,button{  
            margin:0;  
            padding:0;  
            border:0;  
        }  
        button,p{  
            float: left;  
            width: 50px;  
            height: 100px;  
            background-color: pink;  
        }  
        button+button{  
            background-color: gray;  
            border:10px solid red;  
        }  
        p+p{  
            border:10px solid blue;  
        }  
    </style>  
</head>  
<body>  
<button>button1</button><button>button2</button>  
<p>段落1</p>  
<p>段落2</p>  
</body>  
</html>

10.a タグの rel 属性: リンクに異なるスタイルを設定すると便利です

<a href="#1" rel="prev">prev</a>
<a href="#2" rel="next">next</a>
a[rel="prev"]{}
a[rel="next"]{}

すべてのブラウザは rel をサポートしています属性。ただし、この rel の値は固定されており、w3c

2. ページレイアウトには次のタイプがあります:

1.tablelayout

2.cssレイアウト:

①固定レイアウト(固定幅と高さ)

②流動レイアウト(幅と高さのパーセンテージを使用)

③フレキシブルレイアウト(フレキシブルボックス)

④フローティングレイアウト(フローティング、左右に設定可能)

⑤ 位置決めレイアウト(位置:固定相対位置、位置:絶対、絶対位置)

以上がHTMLタグとページレイアウトについて知っておくべきことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：HTML テンプレート関数の詳細については、こちらをご覧ください。次の記事：HTML テンプレート関数の詳細については、こちらをご覧ください。

続きを見る