HTMLタグとページレイアウトについて知っておくべきこと-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

零下一度

Apr 27, 2017 pm 01:35 PM

私は学校で十分な基礎を築けなかったのですが、卒業後は学習スピードとより多くの知識を習得することに集中しすぎて、細部を無視していました。 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の未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

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