HTML [Praktisches Tutorial] (neueste Version 2024)

2024-07-12

Kernidee: Semantisierung

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

Die Art des Inhalts kann allein durch Tags bestimmt werden, insbesondere durch Titel, Absätze, Bilder und Tabellen.

Erhöhen Sie die Lesbarkeit des Codes und machen Sie ihn für andere verständlicher
SEO-freundlicher, wodurch es für Suchmaschinen leichter verständlich ist

Die Grundstruktur von HTML-Dateien

Das Dateisuffix für HTML-Dateien lautet .html, wie zum Beispiel index.html

Geben Sie Englisch in vscode ein ! Schnelle Eingabe

<!-- 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

Der Browser analysiert HTML-Dokumente von oben nach unten. <style></style> Das Etikett sollte beschriftet sein<head></head> Sie können zuerst Stile und dann Elemente laden.

Wenn du möchtest <style></style> Das Etikett ist eingeschrieben<body></body> Im Folgenden werden zuerst die Elemente und dann die Stile geladen, sodass der Benutzer eine Seitenstruktur ohne Stile sieht.

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

Browser analysieren HTML-Dokumente von oben nach unten. <style></style> Wenn nicht platziert<body></body> Am Ende der Seite wird zuerst JS geladen und analysiert, und dann werden die Elemente gerendert, was die Renderzeit der Seite verlängert. Wenn DOM-Operationen in JS involviert sind, wird auch das Rendern der Seite blockiert .

Klassifizierung von HTML-Tags

Entsprechend dem Standardwert für den Anzeigestil des Etiketts ist es in zwei Kategorien unterteilt:

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

Inline-Elemente

Die Breite wird durch den Inhalt bestimmt

display :inline Ohne Austausch des Elements können Breite und Höhe nicht eingestellt werden.

img，span ,  a ,  b 等
1

display :inline-block Kann Breite und Höhe einstellen

input， button 等
1

Blockelemente

Die Breite wird durch den Container bestimmt (die Breite füllt den gesamten Container aus) und Breite und Höhe können eingestellt werden

display: block

div，h1-h6，p，ul, ol ，form , hr 等
1

display: table

table
1

display: list-item

li
1

Ersetzungselemente in HTML

Elemente, deren gerenderter Inhalt durch Ändern des Werts eines Attributs (meist des src-Attributs) ersetzt werden kann, werden als „Ersatzelemente“ bezeichnet.

Die folgenden Tags sind allesamt Ersatzelemente:

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

Eigenschaften ersetzter Elemente

Alle sind Inline-Elemente
Das Erscheinungsbild des Inhalts wird durch das CSS anderer Tags, wie z. B. Text im ersetzten Inhalt usw., nicht beeinflusst.
Der ersetzte Inhalt selbst hat Dimensionen
- Die Standardgröße von img ist die Größe des geladenen Bildes.
- Die Standardgröße (ohne Ränder) von Video, Iframe, Canvas usw. beträgt 300 Pixel * 150 Pixel.
Die Grundlinie des ersetzten Elements (der Standardwert von Vertical-Align ist Grundlinie) ist die Unterkante des Elements, nicht die Unterkante des Zeichens x
Wenn der Ersatzinhalt nicht geladen wird (z. B. wenn das src-Attribut nicht festgelegt ist), verliert das Ersatzelement die Eigenschaften des Ersatzelements und wird zu einem gewöhnlichen Inline-Element.

Elementgröße ersetzen

Die endgültige Größe des ersetzten Elements wird durch eine Kombination der folgenden drei Methoden bestimmt: Priorität von hoch nach niedrig Gefolgt von:

Größe wird durch CSS-Breite, Höhe, maximale Breite/minimale Breite, maximale Höhe/minimale Höhe festgelegt
Sie können die Größe festlegen, indem Sie die HTML-Attribute des Elements ersetzen, z. B. die Breiten- und Höhenattribute von img, das Größenattribut von input, die cols- und rows-Attribute von textarea usw.
Der ersetzte Inhalt selbst hat Dimensionen

Neue HTML5-Tags

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

Struktur-Tags

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

Multimedia-Tags

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

Formular-Tag

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

Andere Tags

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

Praktische Kernpunkte häufig verwendeter HTML-Tags

Verlinken Sie externe Linkressourcen

Es wird nur im Head-Tag verwendet und kann die Beziehung zwischen dem Dokument und externen Ressourcen definieren, z. B. den CSS-Stil des externen Links, das kleine Symbol vor dem Titel der externen Linkseite usw.

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

ein Hyperlink

Die vier Hauptfunktionen des Hyperlink-Tags (Seitensprung, In-Page-Scrolling [Anker], Seitenaktualisierung, Dateidownload)
https://blog.csdn.net/weixin_41192489/article/details/140217094
Fügen Sie Hyperlinks zu Absätzen hinzu
Wickeln Sie a mit p statt p mit a ein
```
<p><a href="">段落</a></p>
1
```

Gewöhnliche textspezifische Tags

br Zeilenumbruch innerhalb des Absatzes

Dies gilt nur für Zeilenumbrüche innerhalb von p-Tags. Um Zeilen zwischen Absätzen zu ändern oder den Abstand zwischen Elementen anzupassen, verwenden Sie bitte Stile wie Innenabstand und Rand.

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

Fügen Sie hier eine Bildbeschreibung ein

überspannt Inline-Text

Wird verwendet, um einen Teil des Textes innerhalb einer Zeile umzubrechen und so spezielle Stile hinzuzufügen.

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

Fügen Sie hier eine Bildbeschreibung ein

sup hochgestellt

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

Fügen Sie hier eine Bildbeschreibung ein

sub subscript

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

Fügen Sie hier eine Bildbeschreibung ein

vordefinierter Text

Blockelemente display: block

Es kann alle Leerzeichen (Leerzeichen, Zeilenumbrüche) beibehalten und die Ergebnisse intakt ausgeben. Es wird häufig zur Anzeige von Computer-Quellcode verwendet.

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

Fügen Sie hier eine Bildbeschreibung ein

Code-Code

Inline-Elemente display: inline

Wird zur Darstellung von Computerquellcode oder anderen maschinenlesbaren Textinhalten verwendet. Um das Einrückungsformat des Codes beizubehalten, wird es normalerweise zusammen mit dem Pre-Tag verwendet.

Der Text innerhalb des Code-Tags wird in einer Schriftart mit fester Breite im Fernschreiber-Stil (Courier) angezeigt.

<pre>
    <code>
        let a = 1;
    </code>
</pre>
1
2
3
4
5

Fügen Sie hier eine Bildbeschreibung ein

Listen Sie verwandte Tags auf

ul ungeordnete Liste

Das Typattribut kann den Seriennummerntyp ändern
- Disc-Solid-Ursprung [Standard]
- quadratischer fester quadratischer Punkt
- Kreis Hohlkreis

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
1
2
3
4
5

Fügen Sie hier eine Bildbeschreibung ein

Alte geordnete Liste

Typattribut – Seriennummerntyp, z. B. 1 (arabische Ziffern [Standard]), a, A, i, I
Startattribut – Startpunkt der Zählung

<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>
1
2
3
4
5

Fügen Sie hier eine Bildbeschreibung ein

<ol type="a">   
    <li>嘿嘿</li>
    <li>嘿嘿</li>
    <li>呵呵</li>
</ol>
1
2
3
4
5

Fügen Sie hier eine Bildbeschreibung ein

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

Fügen Sie hier eine Bildbeschreibung ein

Listenverschachtelung

li ist ein Tag auf Containerebene, das alles enthalten kann, einschließlich 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

Fügen Sie hier eine Bildbeschreibung ein

Tisch Tisch

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

Ich-Symbol

Das i-Tag wurde ursprünglich zur Darstellung von kursivem Text verwendet, standardmäßig mit dem kursiven Schrifteffekt, aber jetzt wird Kursivschrift einheitlich über CSS implementiert. Da i der erste Buchstabe des Symbols ist, ist es mittlerweile üblich, das i-Tag zum Anzeigen des Symbols zu verwenden. Daher müssen Sie den Stil „font-style:normal“ hinzufügen, um die Standardneigung aufzuheben.

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

Fügen Sie hier eine Bildbeschreibung ein

img Bilder

display :inline Inline-Elemente

Unterstützte Bildformate: JPG (JPEG), GIF, PNG, BMP, andere Formate wie PSD, AI werden nicht unterstützt

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

Fügen Sie hier eine Bildbeschreibung ein

src [erforderlich]: die Adresse des Bildes
alt [Wichtig]: Wenn das Bild nicht angezeigt werden kann, crawlen Suchmaschinen dieses Attribut anstelle des im Bild angezeigten Inhalts. alt kommt vom Wort „alternate“, was „Ersetzen einer Ressource“ bedeutet. (Einige Browser unterstützen es nicht)
Um das Seitenverhältnis des Bildes beizubehalten, stellen Sie normalerweise nur Breite und Höhe ein.
[Praktische Fähigkeiten] Responsive Bilder
https://blog.csdn.net/weixin_41192489/article/details/126038175
[Praktische Tipps] Lazy Loading von Bildern (handschriftlich)
https://blog.csdn.net/weixin_41192489/article/details/126263221

Audio-Audio

display :inline Inline-Elemente
Fügen Sie hier eine Bildbeschreibung ein

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

src [erforderlich]: Audioadresse
Steuerelemente zeigen Musik-Player an
Automatische Wiedergabe
Loop-Loop-Wiedergabe
Preload Preload (dieses Attribut ist ungültig, wenn die automatische Wiedergabe eingestellt wird)

Unten finden Sie einen einfachen Musikplayer, der mit vue3 implementiert wurde. Die zugehörigen Attribute und Methoden finden Sie in den Kommentaren.

<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

[Praktische Tipps] Laden Sie Musik auf den lokalen Computer herunter
https://blog.csdn.net/weixin_41192489/article/details/122680809

Video-Video

display :inline Inline-Elemente

Unterstützt nur drei Formate: MP4, WebM und Ogg. Andere Formate wie flv, mkv usw. werden nicht unterstützt.

Fügen Sie hier eine Bildbeschreibung ein

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

src [erforderlich]: die Adresse des Videos
Steuert die Anzeige des Videoplayers
Automatische Wiedergabe
Loop-Loop-Wiedergabe
Preload Preload (dieses Attribut ist ungültig, wenn die automatische Wiedergabe eingestellt wird)
[Praktische Tipps] Laden Sie Videos auf den lokalen Computer herunter – CSDN-Blog
https://blog.csdn.net/weixin_41192489/article/details/140223996

iframe eingebetteter Frame

display :inline Inline-Elemente

Betten Sie Webseiten in Seiten ein

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

src [erforderlich]: die Adresse anderer Webseiten

Formularbezogene Tags

Knopfknopf

display :inline-block Inline-Elemente

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

Fügen Sie hier eine Bildbeschreibung ein

HTML-Rendering von Sonderzeichen

Charakter	beschreiben	Code
Raum	geschützte Leerzeichen
<	weniger als	<
>	größer als	>
©	Urheberrechte ©	©
&	Et-Zeichen	und

Weitere Sonderzeichen finden Sie unter „Zusammenfassung zum Schreiben von HTML-, JS- und CSS-Sonderzeichen in HTML“.
https://www.cnblogs.com/starof/p/4718550.html

Praktische Beispiele für gängige HTML-Tags

Seitenlayout

vue3 [Praktisch] Semantisches Homepage-Layout – CSDN-Blog
https://blog.csdn.net/weixin_41192489/article/details/140215515
CSS [Praktisch] „Siheyuan“-Layout-CSDN-Blog
https://blog.csdn.net/weixin_41192489/article/details/139243680

Technologieaustausch