Web 用の HTML5

1.マーキー

マーキー: スクロール効果の
動作を設定します: スクロール方法を設定します: 代替: 左右にジャンプします; スクロール: デフォルト、ループでスクロールします; スライド: 1 回だけスクロールした後に停止します

<marquee behavior="alternate">欢迎来到网页设计课堂！</marquee>

写真が示すように:

もちろん、マーキーは画像の移動にも使用できます。

方向: スクロール方向を設定します。上、下、左、右があります。

図の <P> の場合も、実際には改行と同様の効果があり、段落に分かれていると言った方が妥当です。はスペースです。

            <marquee direction="up" behavior="scroll">
                <P align="center">
                    <img src="images/eat.jpg" height="15%" width="15%">&nbsp
                    <img src="images/flawer.jpg" height="15%" width="15%">&nbsp&nbsp
                    <img src="images/grass.jpg" height="15%" width="15%">&nbsp&nbsp&nbsp
                    <img src="images/lamian.jpg" height="15%" width="15%">&nbsp&nbsp
                    <img src="images/hear_in.jpg" height="15%" width="15%">
                </P>
            </marquee>

効果は次のとおりです。

2.href

一般に、href の使用は、ジャンプなどの Web ページの操作に関連します。

使い方1：ページジャンプ

    <a href="https://www.bilibili.com/bangumi/play/ep102835?spm_id_from=333.337.0.0">
        <img src="images/appint1.jpg" height="100%" width="100%" title="你喜欢哪一个？点击可进入观看"
             alt="约会大作战yyds">
    </a>

効果は次のとおりです。

ここでの絵はボタンとみなされ、Web ページと結び付けられることがわかります。画像をクリックするとhrefに続くWebページにジャンプします。

このうち、title: マウスを数秒置くと表示されます; alt: 画像がないか、画像が無効な場合に表示されます; hidden="until-found": 画像を非表示にします。

クリック後:

使い方2：csdnの記事ディレクトリ機能と同様にタイトルにジャンプします。

<a name="title"><h4 align="center">我的第一张网页</h4></a>

<a href="#title">返回标题</a>

レンダリング:

「タイトルに戻る」をクリックすると、「最初のページ」にリダイレクトされます。

の、

<a name="アンカー名"></a> を使用: ターゲットの場所のアンカー名を作成します。
<a href="#anchor name">リンクテキスト</a>を使用: アンカーリンクを作成します

さらに、<h1/2/3/4/5/6>見出し</h1/2/3/4/5/6> は見出しスタイルを設定するもので、1 が最大、6 が最小です。

href について: _self は現在のページにジャンプし、_blank はページを再度開きます。

3. リスト

A. 順序なしリスト:

    <ul contenteditable="true">
        <li>
            <mark>无序列表1</mark>
        </li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>

mark: 黄色のマーク; contenteditable: 設定を編集できるかどうか。

B. 順序付きリスト:

    <ol>
        <li>
            <mark>有序列表1</mark>
        </li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>

レンダリング:

4.詳細と概要

通常、この 2 つは一緒に使用されます。

    <details>
        <summary>
            <figcaption>竹里馆</figcaption>
        </summary>
        <p>独坐幽篁里，弹琴复长啸。</p>
        <p>深林人不知，明月来相照。</p>
    </details>

レンダリングは次のとおりです。

非常にシンプルですが、非常に便利な機能です。通常、詳細に配置されたコンテンツは非表示になりますが、三角マークをクリックすると表示され、概要のコンテンツが常に表示されます。

5.「ヘルスバー」、パワー

<br>
    <progress></progress>
    <br>
    <progress value="45" max="100"></progress>
    <br>
    <meter min="0" max="100" low="10" high="20" optimum="100" value="5" title="5%">5%</meter>
    <br>
    <meter min="0" max="100" low="10" high="20" optimum="100" value="15" title="15%">15%</meter>
    <br>
    <meter min="0" max="100" low="10" high="20" optimum="100" value="80" title="80%">80%</meter>
    <br>

レンダリング:

注: 進行状況で他の属性が設定されていない場合は、青いバーが表示され続けます。

1.マーキー

2.href

3. リスト

4.詳細と概要

5.「ヘルスバー」、パワー

おすすめ