ホームページ  >  記事  >  ウェブフロントエンド  >  HTML_html/css_WEB-ITnose について知る

HTML_html/css_WEB-ITnose について知る

WBOY
WBOYオリジナル
2016-06-24 11:34:331216ブラウズ

基本フレーム:

 1 <html>  2 <head>  3 <title>This Is Title</title> 4 </head> 5  6 <body> 7 <h1><!--一级标题--></h1> 8 <h2><!--二级标题--></h2> 9 <p>10 <!--段落-->11 </p>12 </body>13 </html>

注釈:

100db36a723c770d327fc0aef2ce13b1 と 73a6ac4ed44ffec12cee46588e518a5e は、ファイルの内容が 93f0f5c25f18dab9d176bd4f6de5d30e で囲まれていることをブラウザーに伝えます。 < ;/head> head (ヘッド) は Web ページに関する情報をブラウザに伝えます
  • head タグの中に title タグを置くと、タイトルがブラウザ ウィンドウに表示されます
  • ページの本文には 6c04bd5ca3fcae76e30b72ad730ca86d が含まれます6c04bd5ca3fcae76e30b72ad730ca86d タグとそれらの間のスペース すべてのコンテンツは、ブラウザーで表示される部分です
  • 要素 = 開始タグ + コンテンツ + 終了タグ
  • style、CSS
  •  1 <head>                     2     <title>This Is Title</title> 3          4     <style type="text/css"> 5                 body{ 6                     background-color: #eaf;     7                     margin-left: 20%; 8                     margin-right: 20%; 9                     border: 2px dotted black;10                     padding: 10px 10px 10px 10px;11                     font-family: sans-serif;12                 }13     </style>14 </head>

    注:

    style は次のように指定しますCSS としてのスタイル

    background-color: 背景色
  • margin-left、margin-right: 左右のマージンはそれぞれページの 20% を占めます
  • border: ページの周囲の境界線は点線であり、色はblack
  • padding: ページの本体の周囲に内側の余白を作成します
  • font-family: テキストに使用されるフォントを定義します
  • HT (ハイパーテキスト)

    注:

    Use & lt; a> あるページから別のページにリンクします

    3499910bf9dac5ae3c52d5ede7383485 の属性はリンクを指定します

    3499910bf9dac5ae3c52d5ede7383485 要素はリンクのタグです。デフォルトでは、このラベルには下線が付いており、クリックできることを示します

    テキストと画像の両方をリンク ラベルとして使用できます

  • ソース ファイルの上のフォルダー内のファイルにリンクするには、「
  • ...
  • 」を使用します。 ..
  • " は親フォルダーを表します。
  • パスを分離するために使用される画像
  • 画像:
  • e388a4556c0f65e1904146cc1a846bee,b46ca26b5d823475d6136d93e204cf9b0c6dc11e160d3b678d68754cc175188a
  • 1 <a href = "beverages/elixir.html" > elixirs </a>2 <a href = "http://www.cnblogs.com/JJ-kelion/" title = "Read His blogs" > cnblogs jj-kelion </a>3 <a href = "../index.html" > RETURN </a>4 <a target = "_blank" href="beverages/elixir.html"> <img src="images/j.png"> </a>

    コメント:

    2b6dfb27e0e975994ec0bf242a7e6e75: ブロック要素として個別に表示される長い引用符

    c34106e0b4e09414b63b2ea253ff83d6、ff6d136ddc5fdfeffaf53ff6ee95f185

  • 1 <blockquote>2     Passing cars, <br>3     when you can't see, <br>4     A glimpse, <br>5 </blockquote>6 7 <p>8     <q> passing car </q>,when you can't see.9 </p>
  • 注:
  • c34106e0b4e09414b63b2ea253ff83d6: 順序付きリスト
  • ff6d136ddc5fdfeffaf53ff6ee95f185 : 順序なしリスト

    25edfb22a4f469ecb59f1190150159c6 : 各要素を識別するために使用されます

    9c18d01146d33b1c9473f98a2b1f2949 または ff6d136ddc5fdfeffaf53ff6ee95f185 と 25edfb22a4f469ecb59f1190150159c6 は常に一緒に使用されます

  •  1 <ol> 2     <li> one </li> 3     <li> two </li> 4     <li> three </li> 5     <li> four thing  6         <ul> 7             <li> one </li> 8             <li> two </li> 9             <li> three </li>10         </ul>11     </li>12 </ol>
  • 注:
  • URL: ウェブサイトを識別するためにのみ使用されます
  • アクセスしやすくするために、 3499910bf9dac5ae3c52d5ede7383485 要素内の title 要素を使用します
  • 別のブラウザ ウィンドウでリンクを開くには、target 属性を使用します。
  • 画像の使用:

    舞台裏の手順:

    ブラウザはサーバーからファイル「jj-kelion.html」を取得します

    「jj-kelion.html」を読み取ると、次のファイルがあることがわかります取得が必要な画像
  • 最初の画像から1枚ずつサーバーから画像を取得し、表示後次の画像に移動
  • よく使われる画像形式:
  • JPEG

    PNG

    GIF

    フォーマット分析:

      JPEG: 連続階調画像に適しており、数千万色を表現可能、非可逆フォーマット、透明度やアニメーションをサポートしていません
    1. PNG: モノクロと線画に適しており、ロスレスフォーマットであり、透明度が可能です
    2. GIF: モノクロと線画に最適、最大 256 色、透明性、ロスレス形式、アニメーションをサポート。
    3. 概要:

    JPEG と PNG はロゴやテキスト画像の表現に適しています

  • JPEG は写真に適しています
  • 透明度と複数の色が必要: PNG を選択します
  • a1f02c36ba31691bcfe87b2722de723b
  • そうですかee
  • コメント :

    src は相対リンクだけでなく、URL に配置することもできます
  • 同じ Web サイト内のリンクと画像の場合は、相対リンクを使用するのが最善です
  • 画像が表示されない場合、 alt 属性で指定された画像を説明するテキストが使用されます 画像を置き換えます
  • サムネイルを作成する手順:

    サムネイル用のディレクトリを作成する

    解像度を下げた写真をフォルダに保存する

    各 < の src を設定するページ内の ;img> 要素をサムネイルに追加します

    の簡易版

    大きな画像を表示する新しいページへのリンクをサムネイルから追加します

  • HTML5
  • ガイドライン:

  • aba7b36f87decd50b18c7e3e3c150106 1行目
  • alt属性が必要です
  • 93f0f5c25f18dab9d176bd4f6de5d30eヘッダーの1行目に
  • 検証コードツール: http://validator.w3.org
  • 声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。