imgタグ - 画像表示

属性	説明
scr	道
幅	幅
身長	高い
タイトル	画像の説明（マウスホバーヒント）
代替	画像が見つからない場合の表示内容
幅と高さが指定されていない場合は、デフォルトが使用されます。width 属性と height 属性を同時に使用すると画像が歪みます。どちらか 1 つだけを指定でき、もう 1 つは比例して計算されます。

道

同じレベルのファイル: 画像と HTML ファイルは同じフォルダー内にあります

    <img src="23.jpg" width="300"  />

配下：画像が保存されているフォルダはhtmlと同じディレクトリにあります

<img src="image/23.jpg/" width="300"  />

上位階層: 保存画像フォルダーと保存 HTML フォルダーが同じディレクトリにあります

 <img src="../image/23.jpg/"width="300"  />

絶対パス（ネットワークからの指定パス）

 <img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>
 <img src="F:\学习\资料\BS\学习\23.jpg">

タグ - ハイパーリンク

属性	説明
href	指定された方向
目標	リンクを開く方法を指定します: _top はフレームから飛び出して Web ページを開きます。 _parent は親ウィンドウで Web ページを開きます。_framename は指定されたフレームで Web ページを開きます。_selfは現在のページを開くためのデフォルト値です。_blankは新しいウィンドウで開く方法。

属性

説明

href

指定された方向

目標

リンクを開く方法を指定します: _top はフレームから飛び出して Web ページを開きます。 _parent は親ウィンドウで Web ページを開きます。_framename は指定されたフレームで Web ページを開きます。_selfは現在のページを開くためのデフォルト値です。_blankは新しいウィンドウで開く方法。

外部リンク、内部リンク

<a href="https://weibo.com/">a标签（外链接）</a>
 <a href="常见标签标题-段落样式区分.html">a标签（内链接）</a>

ジャンプ方法

<!--规定该链接为新窗口打开-->
    <a href="https://weibo.com/" target="_blank">a标签（新窗口跳转链接）</a>
    <!--规定该链接为本窗口打开-->
    <a href="https://weibo.com/" target="_self">a标签（本窗口链接）</a>

ダウンロード

  <a href="th.zip">a标签--（下载功能）</a>

アンカーポイント

href内の#idがアンカーポイント関数となり、クリックするとidに対応するブロックにジャンプします

 <a href="#">秦时明月之君临天下</a>
    <a href="#box1">秦时明月</a>
    <a href="#box2">父母爱情</a>
    <a href="#box3">武林外传</a>
    <div style="height:500px">
        秦时明月之君临天下<br /><!--折行符-->
        。。。。。。。。。。。。。。。。。。。。。
    </div>
    <div style="height:500px" id="box1">
        秦时明月<br /><!--折行符-->
        。。。。。。。。。。。。。。。。。。。。。
    </div>
    <div style="height:500px" id="box2">
        父母爱情<br /><!--折行符-->
        。。。。。。。。。。。。。。。。。。。。。
    </div>
    <div style="height:500px" id="box3">
        武林外传<br /><!--折行符-->
        。。。。。。。。。。。。。。。。。。。。。
    </div>

タグとimgのコード例

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--规定当前所有链接都是新窗口跳转-->
    <!--<base target="_blank"/>-->
</head>
<body>
    <!--alt为名称-->
    <img src="th.jpg" alt="风景" title="夜景" height="100" />
    <a href="https://weibo.com/">a标签（外链接）</a>
    <a href="常见标签标题-段落样式区分.html">a标签（内链接）</a>
    <!--规定该链接为新窗口打开-->
    <a href="https://weibo.com/" target="_blank">a标签（新窗口跳转链接）</a>
    <!--规定该链接为本窗口打开-->
    <a href="https://weibo.com/" target="_self">a标签（本窗口链接）</a>
    <!--当href变成文件名的时候变为下载功能-->
    <a href="th.zip">a标签--（下载功能）</a>
    <!--href里面为#id变为锚点功能，点击跳转到id对应的块-->
    <a href="#">秦时明月之君临天下</a>
    <a href="#box1">秦时明月</a>
    <a href="#box2">父母爱情</a>
    <a href="#box3">武林外传</a>
    <div style="height:500px">
        秦时明月之君临天下<br /><!--折行符-->
        。。。。。。。。。。。。。。。。。。。。。
    </div>
    <div style="height:500px" id="box1">
        秦时明月<br /><!--折行符-->
        。。。。。。。。。。。。。。。。。。。。。
    </div>
    <div style="height:500px" id="box2">
        父母爱情<br /><!--折行符-->
        。。。。。。。。。。。。。。。。。。。。。
    </div>
    <div style="height:500px" id="box3">
        武林外传<br /><!--折行符-->
        。。。。。。。。。。。。。。。。。。。。。
    </div>
</body>
</html>

伝説
ここに画像の説明を挿入

h1~h6タグ - 見出し

h1: 第 1 レベルのラベル
h2: 第 2 レベルのラベル
h3: 第 3 レベルのラベル
など

p - 段落

 <p>这是一个段落</p>

強力 - テキスト強調 (レベル 1)

 <strong>强调（页面展示为粗体）</strong>

em - テキストの強調 (二次)

 <em>强调（页面展示为斜体）</em>

スパン - 内部サブコンテナ

 <span>区分样式</span>
  <span style="color:deepskyblue">前三个字为蓝色</span>后面字体不变

ol - 順序付きリスト

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

ul - 順序なしリスト

 <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
    </ul>

dl - タイトル付きリスト

 <dl>
        <dt>这里是标题</dt>
        <dd>列表一</dd>
        <dd>列表二</dd>
        <dd>列表三</dd>
        <dd>列表四</dd>
    </dl>

コード例

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <!--规范使用标签，有助于提高seo(搜索引擎优化)-->
    <h1>标题1</h1> 
    <h2>标题1</h2>
    <h3>标题1</h3>
    <h4>标题1</h4>
    <h5>标题1</h5>
    <h6>标题1</h6>
    <p>这是一个段落</p>
    <strong>强调（页面展示为粗体）</strong>
    <em>强调（页面展示为斜体）</em>
    <span>区分样式</span>
    <span style="color:deepskyblue">前三个字为蓝色</span>后面字体不变
    <!--有序列表-->
    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
    </ol>
    <!--无序列表-->
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
    </ul>
    <!--有标题的列表-->
    <dl>
        <dt>这里是标题</dt>
        <dd>列表一</dd>
        <dd>列表二</dd>
        <dd>列表三</dd>
        <dd>列表四</dd>
    </dl>
</body>
</html>

アイコン
ここに画像の説明を挿入

セレクタ

IDセレクター

ID セレクター: #+id

 <style>
        #box1, #box2 {
    
    
            width: 100px;
            height: 100px;
            color: aquamarine;
            background: red;
            margin: 10px;
        }
    </style>

クラスセレクター

【再利用できるid】
クラスセレクター：.class

 <style>
        .box {
    
    
            border: dotted 5px blue;
        }

        .box2 {
    
    
            margin: 20px;
            height: 50px;
            width: 50px;
            background: indianred;
            color: yellow;
        }
    </style>

クラスセレクター

タイプセレクター、ページ上のすべての p、div、およびその他のタグにスタイルを追加します。

  <!--div p 给所有div标签下的p标签的样式-->
    <style>
        p {
    
    
            color: indigo;
            font-size: 20px;
            border: dashed green 2px;
        }

        div p {
    
    
            color:brown;
            font-size: 20px;
            border: dashed red 2px;
        }         
    </style>

ワイルドカード

ワイルドカード * ページのすべての使用

 <style>
       * {
    
    border:1px solid red;
        }
    </style>

コード例

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--id选择符-->
    <!-- #box1,#box2名字用,隔开叫做群组-->
    <style>
        #box1, #box2 {
    
    
            width: 100px;
            height: 100px;
            color: aquamarine;
            background: red;
            margin: 10px;
        }
    </style>
    <!--class选择符【可以重复使用的id】-->
    <style>
        .box {
    
    
            border: dotted 5px blue;
        }

        .box2 {
    
    
            margin: 20px;
            height: 50px;
            width: 50px;
            background: indianred;
            color: yellow;
        }
    </style>
    <!--类型选择符,给页面所有p、div等标签添加样式-->
    <!--div p 给所有div标签下的p标签的样式-->
    <style>
        p {
    
    
            color: indigo;
            font-size: 20px;
            border: dashed green 2px;
        }

        div p {
    
    
            color:brown;
            font-size: 20px;
            border: dashed red 2px;
        }         
    </style>
    <!--通配符*页面所有都使用-->
    <style>
       * {
    
    border:1px solid red;
        }
    </style>
</head>
<body>
    <div id="box1">块</div>
    <div id="box2">块</div>
    <div class=" box box2">块</div>
    <div class="box2">块</div>
    <div class="box2">块</div>
    <p>fdbfgsnnnnn</p>
    <p>地方烦烦烦的不舒服吧</p>
    <p>八八八八发到你不是</p>
    <div>
        <p>这是div下的p标签</p>         
    </div>
     
</body>
</html>

伝説

ここに画像の説明を挿入

セレクターの優先順位

同じレベルのデフォルトのスタイルは、前者を後者によってオーバーライドします。
スタイル優先度の種類 <class<id<style(interline style)<js

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--同级样式默认后者覆盖前者-->
    <!--样式优先级 类型<class<id<style(行间样式)<js-->
    <style>
        li {
    
    
            margin: 5px; height: 40px;
            color:chocolate;
        }
        ol li {
    
    
            background: darkkhaki;
        }
        li{
    
    background:green;}
        .liclass {
    
    
            background: red;
        }
        .liclass1 {
    
    
            background: yellow;
        }
        #box {
    
    
            background: pink;
        }
        </style>
</head>
<body>
    <ol>
        <li>第一个项目</li>
        <li>第二个项目</li>
        <li>第三个项目</li>
        <li id="box" class="liclass liclass1" style="background:purple;">第四个项目</li>
        <li>第五个项目</li>
    </ol>
</body>
</html>

アイコン
ここに画像の説明を挿入

疑似クラス - マウス

属性	説明
リンク	未訪問 (デフォルト)
ホバリング	マウスオーバー（マウスオーバー）
アクティブ	リンクがアクティブ化されました (マウスダウン)
訪れた	訪問後（クリック後）

訪問したリンクに応じて書き込みをホバーアクティブにし、継続的にトリガーできます
IE6 は、

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        /*
            link 未访问(默认)
            hover 鼠标悬停（鼠标划过）
            active 链接激活（鼠标按下）
            visited 访问过后（点击过后）

            按照 link visited hover active 进行编写可以持续触发

            IE6不支持a以外的所有标签类
        */
        a:link{
    
    font-size:20px;text-decoration:none;color:green;}
        a:visited {
    
    
            color: grey;
        }
        a:hover {
    
    
            color:red;text-decoration:underline;font-size:30px;
        }
        a:active {
    
    
            color:yellow;
        }
       div{
    
    height:100px;background:pink;}
        div:hover {
    
    
            background:yellow;
        }
    </style>
</head>
<body>
    <a href="#">这是一个链接</a>
    <div></div>
</body>
</html>

アイコン
ここに画像の説明を挿入

フロントエンド基礎知識学習 - Html共通タグ imgタグ、aタグ、hタイトル、p段落、リスト、セレクター (2)

記事ディレクトリ

imgタグ - 画像表示

道

タグ - ハイパーリンク

外部リンク、内部リンク

ジャンプ方法

ダウンロード

アンカーポイント

タグとimgのコード例

h1~h6タグ - 見出し

p - 段落

強力 - テキスト強調 (レベル 1)

em - テキストの強調 (二次)

スパン - 内部サブコンテナ

ol - 順序付きリスト

ul - 順序なしリスト

dl - タイトル付きリスト

コード例

セレクタ

IDセレクター

クラスセレクター

クラスセレクター

ワイルドカード

コード例

セレクターの優先順位

疑似クラス - マウス

おすすめ