技術共有

HTML【実践チュートリアル】（2024年最新版）

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

核となるアイデア——意味論化

【面试题】如何理解 HTML 语义化 ?

  • 1

コンテンツのタイプは、タグのみ、特にタイトル、段落、写真、表によって決定できます。

  • コードの可読性を高め、人々が理解しやすくする
  • SEO にさらに優しく、検索エンジンが理解しやすくなります。

htmlファイルの基本構造

HTML ファイルのファイル拡張子は次のとおりです。 .html、index.html など

vscodeに英語を入力 ! 素早い入力

<!-- HTML5的文档类型声明【必要】 -->
<!doctype html>
<!-- 整个页面，语言为英文【必要】 -->
<html lang="en">
  <!-- 页面的头部【必要】 -->
  <head>
    <!-- 页面的元信息-- 文档的字符编码为 UTF-8 -->
    <meta charset="UTF-8" />
    <!-- 页面的元信息-- 设备上显示页面的区域 viewport 的配置 -- width 为 device-width ，即采用设备宽度；intial-scale 为 1 ，即按原比例显示（无缩放）-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 页面的标题【必要】 -->
    <title>Document</title>
    <!-- 页面中的样式 -->
    <style>
      html,
      body {
        height: 100%;
      }
    </style>
  </head>
  <!-- 页面的身体【必要】 -->
  <body>
  <!-- 页面的内容 -->
  <div></div>
  <!-- 页面的脚本 ——  JS 代码 -->
  <script></script>
  </body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
【面试题】为什么<style></style> 标签要写在<head></head> 中  ?

  • 1

ブラウザは HTML ドキュメントを上から下に解析します。 <style></style> ラベルは次のように書く必要があります<head></head> 最初にスタイルをロードしてから要素をロードできます。

もしよろしければ <style></style> ラベルにはこう書かれています<body></body> 以下では、最初に要素が読み込まれ、次にスタイルが読み込まれるため、ユーザーにはスタイルのないページ構造が表示されます。

【面试题】为什么<script></script> 标签要写在 <body></body> 内的底部  ?

  • 1

ブラウザは HTML ドキュメントを上から下に解析します。 <style></style> 置かれていない場合<body></body> ページの下部では、最初に JS がロードされて解析され、次に要素がレンダリングされます。これにより、JS に DOM 操作が含まれる場合、ページのレンダリング時間が長くなります。 。

htmlタグの分類

ラベルのデフォルトの表示スタイル値に従って、ラベルは 2 つのカテゴリに分類されます。

【面试题】HTML有哪些内联元素和块状元素 ?

  • 1

インライン要素

幅は内容によって決まります

  • display :inline 要素を置き換えないと幅と高さを設定できません。
img，span ,  a ,  b 等

  • 1
  • display :inline-block 幅と高さを設定できる
input， button 等

  • 1

ブロック要素

幅はコンテナによって決まります（幅はコンテナ全体を埋めます）。幅と高さを設定できます。

  • display: block
div，h1-h6，p，ul, ol ，form , hr 等

  • 1
  • display: table
table

  • 1
  • display: list-item
li

  • 1

HTML 内の置換要素

属性 (主に src 属性) の値を変更することでレンダリングされたコンテンツを置き換えることができる要素は、「置換要素」と呼ばれます。

次のタグはすべて置換要素です。

img、video、iframe、canvas、textarea、input、select、object

  • 1

置き換えられたエレメントの特徴

  • すべてインライン要素です
  • コンテンツの外観は、置換されたコンテンツ内のテキストなど、他のタグの CSS の影響を受けません。
  • 置き換えられたコンテンツ自体には次元があります
    • img のデフォルトのサイズは、ロードされる画像のサイズです。
    • ビデオ、iframe、キャンバスなどのデフォルトのサイズ（枠線を除く）は 300px * 150px です。
  • 置換された要素のベースライン (vertical-align のデフォルト値はベースライン) は、文字 x の下端ではなく、要素の下端です。
  • 置換コンテンツがロードされていない場合 (たとえば、 src 属性が設定されていない場合)、置換要素は置換要素の特性を失い、通常のインライン要素になります。

要素サイズを置き換える

置換される要素の最終的なサイズは、次の 3 つの方法の組み合わせによって決定されます。 優先度は高いものから低いものへ に続く：

  1. CSS の幅、高さ、最大幅/最小幅、最大高さ/最小高さによって設定されるサイズ
  2. img の width 属性と height 属性、input の size 属性、textarea のcols 属性と rows 属性など、要素の html 属性を置き換えることによってサイズを設定できます。
  3. 置き換えられたコンテンツ自体には次元があります

HTML5の新しいタグ

【面试题】HTML5 新增了哪些标签 ? (回答几个常用的即可)

  • 1

構造タグ

<header>: 定义文档或节的头部。
<nav>: 定义导航链接。
<section>: 定义文档中的独立节。
<article>: 定义文档、页面、应用或网站中独立的内容区域。
<aside>: 定义页面的侧边栏内容。
<footer>: 定义文档或节的页脚。
<main>: 定义文档的主体内容。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

マルチメディアタグ

<video>: 定义视频或电影。
<audio>: 定义音频内容。
<source>: 为<video>和<audio>元素定义媒体资源。
<track>: 为<video>和<audio>元素定义文本轨道。
<embed>: 定义嵌入的内容，比如插件。
<canvas>: 用于在网页上绘制图形。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

フォームタグ

<datalist>: 定义选项列表，与<input>元素配合使用，以提供“自动完成”功能。
<output>: 定义不同类型的输出，比如脚本的输出。

  • 1
  • 2

その他のタグ

<time>: 定义日期或时间。
<mark>: 定义高亮显示的文本。
<progress>: 定义任何类型的任务的进度。
<meter>: 定义已知范围或分数值内的标量测量。
<details>: 定义用户可见的或者隐藏的额外的细节。
<summary>: 定义<details>元素的可见标题。
<figure>: 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>: 定义<figure>元素的标题（caption）。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

よく使われるHTMLタグの実践ポイント

外部リンクリソースをリンクする

head タグ内でのみ使用され、ドキュメントと外部リソース (外部リンクの CSS スタイル、外部リンク ページのタイトルの前の小さなアイコンなど) との関係を定義できます。

<!-- 外链--样式 -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- 外链--页面标题前的小图标 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

  • 1
  • 2
  • 3
  • 4

ハイパーリンク

  • ハイパーリンクaタグの4大機能（ページジャンプ、ページ内スクロール[アンカー]、ページ更新、ファイルダウンロード）
    https://blog.csdn.net/weixin_41192489/article/details/140217094

  • 段落にハイパーリンクを追加する
    p を a で囲むのではなく、a を p で囲みます

    <p><a href="">段落</a></p>

    • 1

通常のテキスト固有のタグ

br 段落内の改行

p タグ内の改行にのみ適用されます。段落間の行を変更したり、要素間の間隔を調整するには、padding や margin などのスタイルを使用してください。

<p>广东省<br/>广州市<br/>黄埔大道西601号</p>

  • 1

ここに画像の説明を挿入します

インラインテキストにまたがる

特別なスタイルを追加するために、行内のテキストの一部を折り返すために使用されます。

<p><span style="color: red">要点：</span> 不能长时间睡觉。</p>

  • 1

ここに画像の説明を挿入します

上付き文字

<p>m<sup>2</sup></p>

  • 1

ここに画像の説明を挿入します

下付き添え字

<p>m<sub>2</sub></p>

  • 1

ここに画像の説明を挿入します

事前に定義されたテキスト

ブロック要素 display: block

すべての空白文字 (スペース、改行) を保持し、結果をそのまま出力することができ、コンピューターのソース コードを表示するためによく使用されます。

<pre>
你好：
      我昨天给你打了个电话。
</pre>

  • 1
  • 2
  • 3
  • 4

ここに画像の説明を挿入します

コードコード

インライン要素 display: inline

コンピューターのソース コードまたはその他の機械可読テキスト コンテンツを表すために使用され、コードのインデント形式を保持するために、通常は pre タグと一緒に使用されます。

コード タグ内のテキストは、固定幅のテレタイプライター スタイルのフォント (Courier) で表示されます。

<pre>
    <code>
        let a = 1;
    </code>
</pre>

  • 1
  • 2
  • 3
  • 4
  • 5

ここに画像の説明を挿入します

関連するタグを一覧表示する

UL 順序なしリスト

  • type 属性はシリアル番号のタイプを変更できます
    • ディスクソリッド原点 [デフォルト]
    • 正方形の実線四角点
    • 円中空円
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

  • 1
  • 2
  • 3
  • 4
  • 5

ここに画像の説明を挿入します

OL 順序付きリスト

  • type 属性 - シリアル番号タイプ (1 (アラビア数字 [デフォルト])、a、A、i、I など)
  • start 属性 - カウントの開始点
<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

  • 1
  • 2
  • 3
  • 4
  • 5

ここに画像の説明を挿入します

<ol type="a">   
    <li>嘿嘿</li>
    <li>嘿嘿</li>
    <li>呵呵</li>
</ol>

  • 1
  • 2
  • 3
  • 4
  • 5

ここに画像の説明を挿入します

<ol type="1" start="4"> 
    <li>哈哈</li>
    <li>哈哈</li>
    <li>哈哈</li>
</ol>

  • 1
  • 2
  • 3
  • 4
  • 5

ここに画像の説明を挿入します

リストのネスト

li はコンテナレベルのタグで、ul を含むあらゆるものを含めることができます。

<ul>
  <li>
    <b>北京市</b>
    <ul>
      <li>海淀区</li>
      <li>朝阳区</li>
      <li>东城区</li>
    </ul>
  </li>

  <li>
    <b>广州市</b>
    <ul>
      <li>天河区</li>
      <li>越秀区</li>
    </ul>
  </li>
</ul>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

ここに画像の説明を挿入します

テーブル テーブル

https://blog.csdn.net/weixin_41192489/article/details/140217983

私アイコン

i タグは元々、イタリック テキストを表すために使用され、デフォルトでフォント イタリック効果が設定されていましたが、現在ではイタリックは CSS を通じて均一に実装されています。 i はアイコンの最初の文字であるため、アイコンを表示するには i タグを使用するのが一般的になっています。そのため、デフォルトの傾きをキャンセルするにはスタイル font-style:normal を追加する必要があります。

<i style="font-style:normal">&#9742</i>

  • 1

ここに画像の説明を挿入します

画像写真

display :inline インライン要素

サポートされている画像形式: jpg (jpeg)、gif、png、bmp、psd、ai などの他の形式はサポートされていません

 <img src="./ecLogo.jpg" alt="EC编程俱乐部的logo" />

  • 1

ここに画像の説明を挿入します

  • src [必須]: イメージのアドレス

  • alt [重要]: 画像を表示できない場合、検索エンジンは画像に表示されているコンテンツの代わりにこの属性をクロールします。 alt は、リソースを置き換えることを意味する「alternate」という言葉に由来しています。 (一部ブラウザでは対応しておりません)

  • 画像の縦横比を維持するには、通常は幅と高さのいずれか 1 つだけを設定します。

  • 【実践スキル】レスポンシブイメージ
    https://blog.csdn.net/weixin_41192489/article/details/126038175

  • 【実践Tips】画像の遅延読み込み（手書き）
    https://blog.csdn.net/weixin_41192489/article/details/126263221

オーディオ オーディオ

display :inline インライン要素
ここに画像の説明を挿入します

<audio controls>
  <source src="./test.mp3" type="audio/mp3" />
  您的浏览器不支持 audio 标签。
</audio>

  • 1
  • 2
  • 3
  • 4
  • src [必須]: オーディオアドレス
  • コントロールディスプレイ音楽プレーヤー
  • 自動再生 自動再生
  • ループループ再生
  • preload preload (自動再生を設定する場合、この属性は無効になります)

以下は vue3 を使用して実装された単純な音楽プレーヤーです。関連する属性とメソッドについてはコメントを参照してください。

<script setup>
let bgMusic_ref = ref(null)

function printInfo() {
  let musicInfo = {
    //currentTime 当前播放进度（单位秒s）
    currentTime: bgMusic_ref.value.currentTime,
    //duration 音频总时长（单位秒s）
    duration: bgMusic_ref.value.duration
  }

  console.log(musicInfo)
}

function play() {
  // 播放音频
  bgMusic_ref.value.play()
}

function pause() {
  // 暂停播放音频
  bgMusic_ref.value.pause()
}

// 重新播放音频（从头开始播放）
function rePlay() {
  // 先将当前播放进度重置为 0
  bgMusic_ref.value.currentTime = 0
  // 再播放音频
  bgMusic_ref.value.play()
}
</script>

<template>
  <audio ref="bgMusic_ref" controls autoplay>
    <source src="./test.mp3" type="audio/mp3" />
    您的浏览器不支持 audio 标签。
  </audio>
  <button @click="play">播放</button>
  <button @click="pause">暂停</button>
  <button @click="rePlay">重新播放</button>
  <button @click="printInfo">打印音频信息</button>
</template>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43

ビデオビデオ

display :inline インライン要素

MP4、WebM、Ogg の 3 つの形式のみをサポートします。flv、mkv などの他の形式はサポートされていません。

ここに画像の説明を挿入します

  <video controls>
    <source src="./test.mp4" type="video/mp4" />
  </video>

  • 1
  • 2
  • 3

  • src [必須]: ビデオのアドレス

  • コントロールディスプレイビデオプレーヤー

  • 自動再生 自動再生

  • ループループ再生

  • preload preload (自動再生を設定する場合、この属性は無効になります)

  • [実践的なヒント] ビデオをローカル コンピューターにダウンロードする - CSDN ブログ
    https://blog.csdn.net/weixin_41192489/article/details/140223996

iframe 埋め込みフレーム

display :inline インライン要素

ページ内に Web ページを埋め込む

<iframe src="https://www.w3school.com.cn/index.html"></iframe>

  • 1
  • src [必須]: 他の Web ページのアドレス
    ここに画像の説明を挿入します

フォーム関連のタグ

ボタン ボタン

display :inline-block インライン要素

<button onclick="alert('你好!')">点击我！</button>

  • 1

ここに画像の説明を挿入します

HTML レンダリングの特殊文字

キャラクター説明するコード
空間改行なしのスペース&nbsp;
<未満&lt;
>より大きい&gt;
©著作権©
&アンパサンド＆

その他の特殊文字については「htmlでのhtml、js、cssの特殊文字の書き方まとめ」を参照してください。
https://www.cnblogs.com/starof/p/4718550.html

一般的な HTML タグの実践例

ページレイアウト

個人プロフィール

彼は 30 年以上テクノロジーの研究に専念しており、java、linux、javascript、php、css などのさまざまな言語に堪能であり、オープンソース分野で多くの貢献を行っています。将来の参考のために技術開発におけるいくつかの問題を共有する開発者ドキュメント ステーション。

私の連絡先情報

郵便