HTML の基本チュートリアル 画像のマークアップ

絵タグ

注: これは一方的なタグです

ウェブページでは、どこにでも絵が見つかります

7.png

8.png

基本的にどのウェブページにも絵があります

次は、 <img> 独自の Web ページに画像を追加するためのタグ

  • 構文形式: <imgattribute = "value">

  • 共通属性

  • 幅: 画像の幅

  • 高さ: 画像の高さ

  • 境界線: 画像の境界線の太さ。

  • Src: 画像のパス (相対パス)

  • Align: 画像の水平方向の配置、値: left、center、right

  • Hspace: 画像と左と左との間の距離右のテキスト (水平距離)

  • Vspace: 画像と文脈単語の間の距離 (垂直距離)。

  • 注意事項

  • 画像を比例的に拡大縮小したい場合は、幅または高さのいずれかを指定するだけで済みます。

  • Align プロパティはテキストのみを中央揃えにすることができ、画像のみを中央揃えにすることはできません。

  • Align は「グラフィックとテキストの混合」の効果を実現できます。 align = “left | right”

  • 例を見てみましょう:

  • <!DOCTYPE HTML>
    <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     </head>
     <body>
     <p>Life was like a box of chocolates, you never know what you're gonna get.(生命就像一盒巧克力,结果往往出人意料。)---《阿甘正传》 
     </p>
     <img src="/upload/course/000/000/009/58117bf7d1215384.jpg" width="200" border="5" align="center">
     </body>
    </html>

注: 画像を中央に配置したい場合は、他の属性を入力してみることもできます。後ほど紹介するCSSを使用します

学び続ける
||
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <p>Life was like a box of chocolates, you never know what you're gonna get.(生命就像一盒巧克力,结果往往出人意料。)---《阿甘正传》 </p> <img src="/upload/course/000/000/009/58117bf7d1215384.jpg" width="200" border="5" align="center"> </body> </html>
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜