HTML [Πρακτικό Οδηγό] (2024 τελευταία έκδοση)

2024-07-12

Βασική ιδέα——Σημασιοποίηση

【面试题】如何理解 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 θα φορτωθεί και θα αναλυθεί πρώτα, και στη συνέχεια θα αποδοθούν τα στοιχεία, γεγονός που θα παρατείνει τον χρόνο απόδοσης της σελίδας Εάν εμπλέκονται λειτουργίες DOM στο JS, θα μπλοκάρει επίσης την απόδοση της σελίδας .

Ταξινόμηση ετικετών html

Σύμφωνα με την προεπιλεγμένη τιμή στυλ εμφάνισης της ετικέτας, χωρίζεται σε δύο κατηγορίες:

【面试题】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, καμβά κ.λπ. είναι 300 px * 150 px.
Η γραμμή βάσης του αντικατασταθέντος στοιχείου (η προεπιλεγμένη τιμή της κατακόρυφης στοίχισης είναι η γραμμή βάσης) είναι το κάτω άκρο του στοιχείου και όχι το κάτω άκρο του χαρακτήρα x
Εάν το περιεχόμενο αντικατάστασης δεν φορτωθεί (για παράδειγμα, το χαρακτηριστικό src δεν έχει οριστεί), το στοιχείο αντικατάστασης θα χάσει τα χαρακτηριστικά του στοιχείου αντικατάστασης και θα γίνει ένα συνηθισμένο ενσωματωμένο στοιχείο.

Αντικαταστήστε το μέγεθος του στοιχείου

Το τελικό μέγεθος του αντικατασταθέντος στοιχείου προσδιορίζεται με συνδυασμό των ακόλουθων τριών μεθόδων, τους Προτεραιότητα από υψηλή προς χαμηλή Ακολουθούμενη από:

Μέγεθος που ορίζεται από CSS πλάτος, ύψος, μέγιστο πλάτος/λεπτό πλάτος, μέγιστο ύψος/λεπτό ύψος
Μπορείτε να ορίσετε το μέγεθος αντικαθιστώντας τα χαρακτηριστικά html στο στοιχείο, όπως τα χαρακτηριστικά πλάτους και ύψους του img, το χαρακτηριστικό μέγεθος της εισαγωγής, τα χαρακτηριστικά cols και rows του textarea κ.λπ.
Το ίδιο το περιεχόμενο που αντικαταστάθηκε έχει διαστάσεις

Νέες ετικέτες 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

έναν υπερσύνδεσμο

Οι τέσσερις κύριες λειτουργίες της υπερσύνδεσης μιας ετικέτας (άλμα σελίδας, κύλιση στη σελίδα [άγκυρα], ανανέωση σελίδας, λήψη αρχείου)
https://blog.csdn.net/weixin_41192489/article/details/140217094
Προσθήκη υπερσυνδέσμων σε παραγράφους
Τυλίξτε το a με p αντί για p με a
```
<p><a href="">段落</a></p>
1
```

Συνήθεις ετικέτες για συγκεκριμένο κείμενο

br διάλειμμα γραμμής εντός της παραγράφου

Ισχύει μόνο για αλλαγές γραμμών εντός ετικετών p Για να αλλάξετε γραμμές μεταξύ των παραγράφων ή να προσαρμόσετε το διάστημα μεταξύ των στοιχείων, χρησιμοποιήστε στυλ όπως γέμιση και περιθώριο.

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

Εισαγάγετε την περιγραφή της εικόνας εδώ

καλύπτουν το ενσωματωμένο κείμενο

Χρησιμοποιείται για την αναδίπλωση μέρους του κειμένου σε μια γραμμή για την προσθήκη ειδικών στυλ.

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

Εισαγάγετε την περιγραφή της εικόνας εδώ

sup εκθέτης

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

Εισαγάγετε την περιγραφή της εικόνας εδώ

συνδρομητής

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

Εισαγάγετε την περιγραφή της εικόνας εδώ

προκαθορισμένο κείμενο

στοιχεία μπλοκ display: block

Μπορεί να διατηρήσει όλους τους χαρακτήρες κενού διαστήματος (κενά, νέες γραμμές) και να παράγει τα αποτελέσματα άθικτα. Χρησιμοποιείται συχνά για την εμφάνιση του πηγαίου κώδικα του υπολογιστή.

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

Εισαγάγετε την περιγραφή της εικόνας εδώ

κωδικός κώδικας

ενσωματωμένα στοιχεία display: inline

Χρησιμοποιείται για να αναπαραστήσει τον πηγαίο κώδικα του υπολογιστή ή άλλο περιεχόμενο κειμένου αναγνώσιμο από μηχανή Για να διατηρήσει τη μορφή εσοχής του κώδικα, χρησιμοποιείται συνήθως μαζί με την προετικέτα.

Το κείμενο εντός της ετικέτας κώδικα θα εμφανίζεται με γραμματοσειρά σταθερού πλάτους, τύπου τηλεγραφομηχανής (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

Εισαγάγετε την περιγραφή της εικόνας εδώ

παλιά παραγγελθείσα λίστα

χαρακτηριστικό 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

Η ετικέτα i χρησιμοποιήθηκε αρχικά για να αναπαραστήσει το πλάγιο κείμενο, με το εφέ πλάγιας γραμματοσειράς από προεπιλογή, αλλά τώρα τα πλάγια γράμματα εφαρμόζονται ομοιόμορφα μέσω του CSS. Επειδή το i είναι το πρώτο γράμμα του εικονιδίου, είναι πλέον σύνηθες να χρησιμοποιείτε την ετικέτα i για να εμφανίσετε το εικονίδιο, επομένως πρέπει να προσθέσετε το στυλ γραμματοσειράς-στυλ:κανονικό για να ακυρώσετε την προεπιλεγμένη κλίση.

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

Εισαγάγετε την περιγραφή της εικόνας εδώ

εικόνες img

display :inline ενσωματωμένα στοιχεία

Υποστηριζόμενες μορφές εικόνας: jpg (jpeg), gif, png, bmp, δεν υποστηρίζονται άλλες μορφές, όπως psd, ai

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

Εισαγάγετε την περιγραφή της εικόνας εδώ

src [απαιτείται]: η διεύθυνση της εικόνας
alt [Σημαντικό]: Όταν η εικόνα δεν μπορεί να εμφανιστεί, οι μηχανές αναζήτησης θα ανιχνεύσουν αυτό το χαρακτηριστικό αντί για το περιεχόμενο που εμφανίζεται στην εικόνα. Το alt προέρχεται από τη λέξη "εναλλακτικό", που σημαίνει αντικατάσταση ενός πόρου. (Μερικά προγράμματα περιήγησης δεν το υποστηρίζουν)
Για να διατηρήσετε την αναλογία διαστάσεων της εικόνας, ορίστε συνήθως μόνο μία αναλογία πλάτους και ύψους.
[Πρακτικές Δεξιότητες] Αποκριτικές εικόνες
https://blog.csdn.net/weixin_41192489/article/details/126038175
[Πρακτικές συμβουλές] Τεμπέλης φόρτωση εικόνων (χειρόγραφη)
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 [απαιτείται]: διεύθυνση ήχου
χειριστήρια προβολή μουσικής αναπαραγωγής
αυτόματη αναπαραγωγή αυτόματη αναπαραγωγή
αναπαραγωγή βρόχου βρόχου
προφόρτωση προφόρτωσης (αυτό το χαρακτηριστικό δεν θα είναι έγκυρο κατά τη ρύθμιση της αυτόματης αναπαραγωγής)

Παρακάτω είναι ένα απλό πρόγραμμα αναπαραγωγής μουσικής που υλοποιείται χρησιμοποιώντας το 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

[Πρακτικές συμβουλές] Λήψη μουσικής στον τοπικό υπολογιστή
https://blog.csdn.net/weixin_41192489/article/details/122680809

βίντεο βίντεο

display :inline ενσωματωμένα στοιχεία

Υποστηρίζει μόνο τρεις μορφές: MP4, WebM και Ogg Άλλες μορφές όπως flv, mkv, κ.λπ.

Εισαγάγετε την περιγραφή της εικόνας εδώ

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

src [απαιτείται]: η διεύθυνση του βίντεο
χειριστήρια προβολής του προγράμματος αναπαραγωγής βίντεο
αυτόματη αναπαραγωγή αυτόματη αναπαραγωγή
αναπαραγωγή βρόχου βρόχου
προφόρτωση προφόρτωσης (αυτό το χαρακτηριστικό δεν θα είναι έγκυρο κατά τη ρύθμιση της αυτόματης αναπαραγωγής)
[Πρακτικές συμβουλές] Λήψη βίντεο σε τοπικό υπολογιστή-Ιστολόγιο CSDN
https://blog.csdn.net/weixin_41192489/article/details/140223996

iframe ενσωματωμένο πλαίσιο

display :inline ενσωματωμένα στοιχεία

Ενσωματώστε ιστοσελίδες σε σελίδες

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

src [απαιτείται]: η διεύθυνση άλλων ιστοσελίδων

Ετικέτες που σχετίζονται με τη φόρμα

κουμπί κουμπιού

display :inline-block ενσωματωμένα στοιχεία

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

Εισαγάγετε την περιγραφή της εικόνας εδώ

HTML απόδοση ειδικών χαρακτήρων

χαρακτήρας	περιγράφω	κώδικας
χώρος	αδιάσπαστη απόσταση
<	λιγότερο από	<
>	μεγαλύτερος από	>
©	πνευματική ιδιοκτησία	©
&	σύμφωνο	&

Για περισσότερους ειδικούς χαρακτήρες, ανατρέξτε στην ενότητα "Σύνοψη του τρόπου γραφής ειδικών χαρακτήρων html, js και css σε html"
https://www.cnblogs.com/starof/p/4718550.html

Πρακτικά παραδείγματα κοινών ετικετών HTML

Διάταξη σελίδας

vue3 [Πρακτικό] Σημασιολογική διάταξη αρχικής σελίδας-CSDN Blog
https://blog.csdn.net/weixin_41192489/article/details/140215515
CSS [Πρακτικό] Διάταξη "Siheyuan"-Ιστολόγιο CSDN
https://blog.csdn.net/weixin_41192489/article/details/139243680

Κοινή χρήση τεχνολογίας