HTML_03_img, li, ul, ol

11168 ワード
html テキストリンク

img

  • HTMLページに画像(写真など)を埋め込む(転送)
  • to embed an image in an HTML page.
  • クローズラベルなし
  • プロパティ(attribute)を使用します.
  • src:画像のパスを指定します.
  • alt:何らかの理由で画像を表示できない場合は、画像に置換テキスト
    • を指定してください.
  • +)width/height:画像の幅/高さ
  • <img src="주소(인터넷의 이미지) 또는 이름(내 컴퓨터에 있는 이미지)">
    • 例)
    <img src="https://www.w3schools.com/tags/img_girl.jpg" alt="Girl in a jacket" width="250" height="300">

"이미지를 가로길이 250픽셀, 세로길이 300픽셀만큼 임베드하며, 이 이미지가 나오지 않을 경우 "Girl in a jacket"이라는 텍스트를 보여주기

    例)
    <img src="https://www.w3schools.com/tags/img_girls.jpg" alt="Girl in a jacket" width="100%">

경로를 잘못 넣었다. 
사진 너비를 원본의 100%만큼


    li

  • リスト(リスト)
  • defines a list item.
    • 例)
    <li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>

<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
  • 1. HTML
  • 2. CSS
  • 3. JavaScript
  • 1. HTML
  • 2. CSS
  • 3. JavaScript

    • ul

  • 無秩序リスト
  • defines an unordered (bulleted) list.
  • <li>と<ul>を併用します.
    他のリストと区別する境界を作成
  • Use the <ul> tag together with the <li> tag to create unordered lists.
    • 例)
    <ul>
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
</ul>
<ul>
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
</ul>
  • 1. HTML
  • 2. CSS
  • 3. JavaScript
  • 1. HTML
  • 2. CSS
  • 3. JavaScript

    • ol

  • 秩序リスト
  • defines an ordered list. An ordered list can be numerical (1. 2. 3. ...) or
    alphabetical (a. b. c. ... A. B. C. ...).
    • 例)
    <ol>
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
</ol>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
  • 1. HTML
  • 2. CSS
  • 3. JavaScript
  • HTML
  • CSS
  • JavaScript
    • **<ol>表示順序(1.2.3...)入力は不要です.

    Ref

  • w3school
  • 生活コードHTML
    • ドラッグアンドドロップゾーンを作成します
    Pythonの回顧デコレータ