[フロントエンド]HTML 5#2

71188 ワード

front end html5 テキストリンク

ハイパーリンク

<a>使用マーク

特定のWebページの移動

現在のWebページで移動
属性:target

blank:新しいページへのリンク

self:現在のページにリンク(省略可能)

✔｣使用例＃1
リンクに直接移動

<a href="http://www.naver.com">네이버</a><br>
<a href="http://www.google.com">구글</a><br>

✔｣使用例#2
Webページ内を移動

  <a href="#alpha">alpha 부분</a>
  <a href="#beta">beta 부분</a>
  <a href="#gamma">gamma 부분</a>
  <hr>
  <br><br>
  <h1 id="alpha">alpha</h1>
  <br><br>
  <h1 id="beta">beta</h1>
  <br><br>
  <h1 id="gamma">gamma</h1>
  <br><br>

イメージ

<img>ラベル使用

src:経路

alt:説明

width:幅

height:高さ

✔｣使用例＃1
srcに画像パスを入力し、サイズを指定します

<img src="img1.jpg" alt="아름다운 길">
<img src="image/img2.jpg" alt="아름다운 길" width="300" height="500">

✔｣使用例#2
リンクに直接接続

<img src="http://image.kyobobook.co.kr/ink/images/gnb/logo_kyobo.png" alt="교보문고 웹페이지">

✔▼使用例#3
画像に字幕を挿入

<figure>
  <img src="img1.jpg" alt="">
  <figcaption>아름다운 길 이미지</figcaption>
</figure>

音楽とビデオ

<audio>・<video>ラベル使用

srcに該当する音楽とビデオファイルのパスを入力

コントロールを使って所望の位置に移動

幅・高さは直接指定可能

type: audio/mp3, video/mp4

✔¥使用例

    <audio src="Kalimba.mp3" controls></audio>

    <audio controls="controls">
        <source src="Kalimba.mp3" type="audio/mp3">
    </audio>

    <video src="Wildlife.mp4" controls width="300"></video>

    <video controls="controls" width="300">
        <source src="Wildlife.mp4" type="video/mp4">
    </video>

    <video controls="controls" poster="http://placehold.it/640x360">
        <source src="Wildlife.mp4" type="video/mp4">
    </video>

    <video controls="controls" poster="img1.jpg" width="640" height="360">
        <source src="Wildlife.mp4" type="video/mp4">
    </video>

入力フォーム

<form>使用マーク

Action:転送先

method

post:アドレスを変更することなく秘密裏にデータを転送でき、サイズ制限なし

get:アドレスにデータを入力して転送することで、サイズが限られている

形式

<label 속성="값"><input~></label>
<label for="a123">내용</label><input id="a123" 속성="값">

✔¥使用例

    <form>
        <label for="name">이름</label>
        <input type="text" id="name"><br>

        <label>이름2 <input type="text"></label><br>
        <label for="name2">이름: <input type="text" id="name2"></label><br>

        <label for="pw">비밀 번호</label>
        <input type="password" id="password"><br>

        <label>비밀 번호2 <input type="password"></label><br>
    </form>

✔¥入力使用例

    <form>
        <fieldset>
            <legend>개인정보</legend>
            <label>아이디: <input type="text" id="user_id" size="10"></label><br>
            <label>비밀번호: <input type="password" id="user_pw" size="10"></label><br>
            <label>email: <input type="text" id="mail"></label><br>
            <label>이메일: <input type="email" id="email"></label><br>
            <label>검색: <input type="search" id="se"></label><br>
            <label>URL: <input type="url" id="url"></label><br>
            <label>전화번호: <input type="tel" id="tel"></label><br>
            <input type="submit" value="제출">
        </fieldset>


        <fieldset>
            <legend>등록정보</legend>
            <label>참여 인원: 
                <input type="number" id="number" min="0" max="10" step="1">
            </label>
            <label>지원물품:
                <input type="number" id="stuffs" min="0" max="50" step="5" value="1">
            </label><br>
            <label>희망단계:
                <input type="range" id="satis" min="1" max="3" value="1">
            </label>
        </fieldset>

        <fieldset>
            <legend>신청과목</legend>
            <label>회화
                <input type="radio" name="subject" value="speaking" checked>
            </label>
            <label> 문법
                <input type="radio" name="subject" value="grammar">
            </label>
            <label> 작문
                <input type="radio" name="subject" value="writing">
            </label>
        </fieldset>

        <fieldset>
            <legend>메일링</legend>
            <label>해외단신
                <input type="checkbox" name="mailing1" value="news">
            </label>
            <label>5분 회화
                <input type="checkbox" name="mailing2" value="dialog">
            </label>
            <label>모닝팝스
                <input type="checkbox" name="mailing3" value="pops">
            </label>
        </fieldset>
    </form>

結果

勘定科目の表示

<form>
        <select>
            <option value="1">김밥</option>
            <option value="2">떡볶이</option>
            <option value="3">순대</option>
            <option value="4">라면</option>
        </select>
        <select size="2">
            <option value="1">김밥</option>
            <option value="2">떡볶이</option>
            <option value="3">순대</option>
            <option value="4">라면</option>
        </select>
        <select multiple>
            <option value="1">김밥</option>
            <option value="2">떡볶이</option>
            <option value="3">순대</option>
            <option value="4">라면</option>
        </select>
        <select disabled>
            <option value="1">김밥</option>
            <option value="2">떡볶이</option>
            <option value="3">순대</option>
            <option value="4">라면</option>
        </select>
        <select>
            <optgroup label="분식집">
                <option value="1">김밥</option>
                <option value="2">떡볶이</option>
                <option value="3">순대</option>
                <option value="4">라면</option>
            </optgroup>
            <optgroup label="중국집">
                <option>짜장면</option>
                <option>짬뽕</option>
                <option>탕수육</option>
                <option>잡채밥</option>
            </optgroup>
        </select>
    </form>

結果

スペースの分割

<div></div>

<span></span>

符号表記

ヘッダー:ページタイトル、ページ紹介

hgroup:タイトル関連サブタイトルのバンドルキャラクター

nav:ナビゲーション表示用のタグは、位置の影響を受けず、bodyタグ内で任意の位置であることができる

aside:左または右に内容がついている部分がある

section:コンビキャラクター

article:Webページ上の実際のコンテンツの意味、本文に関係のないコンテンツ領域

footer:サイトの著作権情報、著作権表記

✔¥使用例

    <header>
        <h1>html5 기본</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">메뉴 - 1</a></li>
            <li><a href="#">메뉴 - 2</a></li>
            <li><a href="#">메뉴 - 3</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <h1>html 버전</h1>
            <p>현재 사용하는 html 버전은 html5이다.</p>
        </article>
        <article>
            <h1>웹 브라우저의 종류</h1>
            <p>크롬, 웨일, IE 등이 있다.</p>
        </article>
    </section>
    <footer>
        <address>서울 양재동</address>
    </footer>

Reference

この問題について([フロントエンド]HTML 5#2), 我々は、より多くの情報をここで見つけました https://velog.io/@guswl8280/프론트엔드-HTML5-2

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

BZOJ 4244スタンプラリー

矢印関数