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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1664

CakePHP チュートリアル

1423

Laravel チュートリアル

1321

PHP チュートリアル

1269

C# チュートリアル

1249

Related knowledge

HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブルレイアウトのガイド。ここでは、HTML テーブルレイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

PHPでHTML/XMLを解析および処理するにはどうすればよいですか？ Feb 07, 2025 am 11:57 AM

このチュートリアルでは、PHPを使用してXMLドキュメントを効率的に処理する方法を示しています。 XML（拡張可能なマークアップ言語）は、人間の読みやすさとマシン解析の両方に合わせて設計された多用途のテキストベースのマークアップ言語です。一般的にデータストレージに使用されます

HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリックボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles