フロントエンドの開発 - HTML

HTML

HTML HTML

HTMLの機能：

• 改行やスペースに鈍感
• ブランクの折り畳み

1.1 HTMLタグ

タグはまた、マーカーと呼ばれます。

ラベルタイプ：

• 1.ダブル終了タ​​グ
• 2.シングル閉じタグ

1.1.1 headタグ

• メタタグは、基本的なメタ情報のウェブサイトを提供します

  <meta charset="UTF-8">  <!--标签的属性：使用的编码—'utf-8'-->

• タイトルタイトル表示サイト

• リンクリンクリソースファイル、CSS、ファビコン

  <link rel="stylesheet" href="css/index.css">

• スクリプトスクリプトリンクのJS（JavaScriptの）ファイル

  <script src="js/index.js">

• スタイルインラインスタイル

1.1.2 bodyタグ

1.1.2.1タイトルタグ

H1〜H6タイトルタグ

例：

見出し1

1.1.2.2段落タグ

Pタグ段落タグ

<p>
    人们感动于老英雄淡泊名利无私奉献的精神，敬佩老党员一辈子深藏功名、坚守初心的境界大家纷纷表示。
</p>

＆NBSP;スペース文字

1.1.2.3ハイパーリンクのラベル

（アンカーアンカー）ハイパーリンクタグ

• HREF：
  • 新しいアドレスへのリンク
  • トップに戻ります
  • ジャンプメール
  • ファイルのダウンロード
• タイトルマウスオーバーでタイトル
• スタイルインラインスタイル
• ターゲットの目標
  • デフォルトは_selfで、現在のページに新しいリンクを開きます
  • _blankは、新しい空白のページに新しいリンクを開きます

<a href="https://www.apeland.cn" style="text-decoration:none;color:red; " title="小圆圈">小猿圈</a>
<!--text-decoration:none  去掉链接的下划线-->

<h6 id="top"></h6>
<a href="#top">回到顶部</a>  <--跳转到  id="top" 处-->

1.1.2.4画像IMGタグ

• 画像リソースのsrcリンクアドレス
• タイトルは、マウスがタイトルを中断されたときに表示しました
• スタイル
• 表示されたときにAltキータイトルの絵は、ロードに失敗しました

<img src="images/timg.jpg" alt="校花" width="200" height="300">< - 幅画像の幅、高さ像高 - >

写真とハイパーリンクは、+のIMGと組み合わせることができます。

<a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%A0%A1%E8%8A%B1&step_word=&hs=2&" title="美眉">
    <img src="images/timg.jpg" alt="校花" width="200">
</a>

1.1.2.5フォントタグ

<u> </u>下線
<b> </b>、太字
<strong> </strong>、太字
<em> </em>、イタリック
<i> </i>イタリック

1.1.2.6特殊文字

•  ：スペース（改行なしスペース、スペースを果たし続けます）
• <：未満の数（以下）
• >：より大きくない（より大きい）
• &：シンボル&
• "：二重引用符
• '：単一引用符
• ©：著作権©
• ™：商標™

1.1.2.7リスト]タブ

• 1.ul順不同リストタグ

  UL - 順不同リスト

  • これは、サブレーベル李です

  • 円を満たさ:(デフォルトのtype属性）

    • 正方形の広場
    • サークルセンター

     <h3>我的teacher</h3>
        <ul type="square">
            <li>
                <a href="">小米手机</a>
            </li>
            <li>女神</li>
            <li>太白</li>
            <li>mjj</li>
            <li>江老板</li>
        </ul>

• 2.olは、リストタグを命じました

  オール - 順序付きリスト

  • また、サブレーベル李です
  • :(デフォルトtype属性1,2,3 ......）
    • A
    • A
    • 私
    • 私
  • 先頭を定義する場所：プロパティを開始

  <h3>我的课程</h3>
  <ol type="i">
      <li>python</li>
      <li>web前端</li>
      <li>java</li>
      <li>linux</li>
  </ol>

1.1.2.8テーブルタグテーブル

• 定義されたヘッダ番目
• TR定義テーブル行
• TDセルデータ定義テーブル

<!--border 外边框，cellspacing外边框间的间隙，width宽度填充整个屏幕-->
<table border="1" cellspacing="0" width="100%">
    <tr>
        <td>id</td>
        <td>name</td>
        <td>age</td>
        <td>sex</td>
    </tr>
    <tr>
        <td>1</td>
        <td>沛齐</td>
        <td>19</td>
        <td>女</td>
    </tr>
</table>

1.1.2.9フォームタグフォーム

<1>フォームフォーム

• アクションアクションは、カスタムフォームがサーバーハンドラ・アドレス（IP、ポート）に提出し、提出されたときに発生し、それは、サーバの現在のアドレスを表し、空の文字列が、ある場合

• 方法

  • 役割：フォームデータの定義を提出する方法

  • の提出：

    • 取得する

      デフォルト値は、明示アドレスに表示されて送信されたデータを提出し、セキュリティが低く、

      データの提出は2キロバイトまで、サイズが限られています

    • 役職

      暗黙のコミット - コンテンツ提出し、安全で、アドレスバーに表示されません。

      いいえサイズ制限ありません

<2>フォームコントロール分類

（1）.input族元素

• タイプ1.type制御

  • 単一行のテキスト入力ボックスのテキスト、ユーザーが入力したテキスト形式のデータ

    <p id="username">
        <input type="text" name="name" value="">
    </p>

  • パスワードコードブロック、ユーザによる暗号文入力データ

    <p id="password">
         <input type="password" name="pwd">
    </p>

  • ラジオラジオボタン

    • 排他的な効果を生成する、各ラジオボタンに同じ名前の属性値を提供
    • デフォルトで選択されたどのように、ラジオボタンがチェック属性を追加します

    <p>
        <input type="radio" name="sex" checked = 'checked'>男
        <input type="radio" name="sex">女
    </p>

  • チェックボックスのチェックボックス

    checkedプロパティがデフォルトで選択された追加

    <p>
        <input type="checkbox" name="a" value="唱歌"> 唱歌
        <input type="checkbox" name="b" value="跳舞"> 跳舞
        <input type="checkbox" name="c" value="音乐"> 音乐
    </p>

  • 使用されるファイルアップロードファイル

    <input type="file">

  • 日付時刻

  • 送信ボタン - サーバに表形式のコントロールを提出する責任固定化機能を、提出

    <!--默认为提交按钮-->
    <input type="submit">
    <--登录按钮-->
    <input type="submit" value="登录">

• 2.nameコントロール、サーバーの名前に提出キーに名前を付けます

• 提出サーバーの値にキー値3.value制御、

（2）ドロップダウン.selectリスト：複数

• 名前名]ドロップダウンリスト

• checkedプロパティがデフォルトで選択された追加

• オプションの値

  <select name="fav" multiple>
      <option value="smoke">吃饭</option>
      <option value="drink" selected>睡觉</option> <!--默认选中项-->
      <option value="tangtou">打豆豆</option>
      <option value="tangtou">唱</option>
      <option value="tangtou">跳</option>
      <option value="tangtou">rup</option>
      <option value="tangtou">音乐</option>
      <option value="tangtou">烫头</option>
      <option value="tangtou">烫头</option>
  </select>

（3）.textareaタグ

テキストtextareaタグは、複数行の入力コントロールを定義します。

テキストエリアには、テキストのフォントがデフォルトフォントの幅（通常宅配便）であるテキストの無制限の数を、保持することができます。

TEXTAREA所定のサイズは、行とcols特性によるものであり得ます

• 名前の
  値
• COLS列
• 行の行

<textarea name="" id="" cols="30" rows="10"></textarea>

1.1.2.10 divタグ

DIV：タグラベル用カセットと呼ばれる（部門セグメンテーション）

DIVタグ：Webページが独立して別の論理領域に分割されます

<div class="top_l">
    <a href="#">小米商城</a>|
    <a href="#">MIUI</a>|
    <a href="#">lot</a>
</div>

どのようにテキストを垂直方向と水平方向中心に作るには？

• 行の高さは、ボックスモデル垂直センタリングの高さにしてみましょう
• センター;テキストセンターを水平：テキスト整列を使用して

<style>
    div{
        width:200px;
        height: 60px;
        background-color: red;
        text-align:center;
        line-height: 60px;
    }
</style>
<div>
 wusir
</div>

1.1.2.11 spanタグ

スパンがある：タグの小さな領域、テキストの通常の表示に影響を与えずに、スタイルは別途に対応して設けられました

<div class="top_l">
    <a href="#">小米商城</a>
    <span class="sep">|</span>
    <a href="#">MIUI</a>
    <span class="sep">|</span>
    <a href="#">lot</a>
    <span class="sep">|</span>
    <a href="#">云服务</a>
</div>

<style>
    span.active{
        font-weight:bold;
    }
</style>
<p>
    <span class='active'>央视网消息</span>（新闻联播）：中共中央总书记、国家主席28日上午在北京人民大会堂亲切会见出席第九届世界华侨华人社团联谊大会和中华海外联谊会五届一次理事大会的全体代表，代表党中央、国务院向大家表示热烈欢迎和衷心祝贺，向世界各地华侨华人致以诚挚问候。
</p>

1.1.2.12 lableラベル

lableラベル：それはid属性に関連するフォームコントロールとプロパティのためです

<form action="">
    <label for="username">用户名：</label>
    <input type="text" id="username">
    <label for="pwd">密码：</label>
    <input type="text" id="pwd">
</form>

1.1.2.13 BRタグ、時間タグ

<br> ブレークタグ

<hr> 分割線タグ

HTMLタグの1.2ネスティング

（また、行レベルのタブとしても知られている）1.ブロックレベルのタグ

• 1.独占一行
• 2.幅と高さは、幅が設定されていない場合、デフォルト幅の親タグ100％であり、提供されてもよいです

一般的なブロックレベルのラベル：h1を〜H6、UL、OL、李、フォーム、テーブル、TR、P、DIV

2.インラインタグ（また、インライン要素と呼ばれます）

• 行に表示される1
• あなたは幅と高さ、デフォルトのフォントサイズを設定しない場合は、幅と高さは、することはできません設定します。2.

ライン内で一般的に使用されるラベル：B、強い、私、EM、TD、スパン

内側の列のブロックタグ3

行ラベル内のブロックの落下内行

• 行に表示される1
• 2.幅と高さを提供することができます

ブロックタグ内の行：入力、IMG

ページ4.：インラインブロック、行ブロックは非常に有用です

• 私たちは、ディスプレイの特性によって強制的にルールを変更することができます。
• ディスプレイの表示：
  • インライン表示インライン
  • ブロック表示ライン内のインラインブロック
  • ブロック表示ブロック

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: yellow;
        display: inline;
    }
    a{
        width: 100px;
        height: 40px;
        background-color: red;
        /*显示方式： block 显示块，inline 显示行内  inline-block 显示行内块*/
        display: inline-block;
        /*文本排列方式：left-靠左 center-居中 right-靠右*/
        text-align: center;
        /*行高：一行的高度。当行高=盒子模型的高度 实现垂直居中*/
        line-height: 40px;
        /*文本修饰：none-无修饰(去除下划线)，underline-下划线 ，line-through 删除线 ，over line-上划线*/
        text-decoration: underline;
        color: #333333;
    }
</style>
<body>
    <p class="box">wusir</p>
    <a href="">百度一下</a>
    <del>aaaaa</del>  /*删除线*/
</body>

5.ネスティング関係：

• 1.タグはブロックレベル、ブロックレベル、ブロック内の行ライン内にネストすることができます
• ネスティング・レベルのブロックしないように前記タグを実行し
• 3.Pラベルはdiv要素を入れ子にし、Pを入れ子にしていない、ネストA / IMG /フォームのコントロールをすることができません