Condivisione della tecnologia

HTML [Tutorial pratico] (ultima versione 2024)

2024-07-12

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

Idea centrale: semanticizzazione

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

  • 1

Il tipo di contenuto può essere determinato solo dai tag, in particolare titoli, paragrafi, immagini e tabelle.

  • Aumenta la leggibilità del codice e rendilo più facile da comprendere per le persone
  • Più amichevole per il SEO, rendendolo più facile da comprendere per i motori di ricerca

La struttura di base dei file html

Il suffisso file per i file html è .html, come index.html

Inserisci l'inglese nel vscode ! Inserimento rapido

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

Il browser analizza i documenti HTML dall'alto verso il basso. <style></style> L'etichetta dovrebbe essere scritta<head></head> Puoi caricare prima gli stili e poi caricare gli elementi.

Se vorrai <style></style> L'etichetta è scritta<body></body> Di seguito vengono caricati prima gli elementi e poi gli stili, con il risultato che l'utente vede una struttura della pagina senza stili.

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

  • 1

I browser analizzano i documenti HTML dall'alto verso il basso. <style></style> Se non posizionato<body></body> Nella parte inferiore della pagina, JS verrà prima caricato e analizzato, quindi verrà eseguito il rendering degli elementi, il che prolungherà il tempo di rendering della pagina. Se le operazioni DOM sono coinvolte in JS, bloccherà anche il rendering della pagina .

Classificazione dei tag html

In base al valore dello stile di visualizzazione predefinito dell'etichetta, questa è divisa in due categorie:

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

  • 1

elementi in linea

La larghezza è determinata dal contenuto

  • display :inline Senza sostituire l'elemento, non è possibile impostare la larghezza e l'altezza.
img，span ,  a ,  b 等

  • 1
  • display :inline-block Può impostare larghezza e altezza
input， button 等

  • 1

elementi di blocco

La larghezza è determinata dal contenitore (la larghezza riempirà l'intero contenitore) ed è possibile impostare larghezza e altezza

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

  • 1
  • display: table
table

  • 1
  • display: list-item
li

  • 1

Elementi sostitutivi in ​​HTML

Gli elementi il ​​cui contenuto visualizzato può essere sostituito modificando il valore di un attributo (principalmente l'attributo src) sono chiamati "elementi di sostituzione".

I seguenti tag sono tutti elementi sostitutivi:

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

  • 1

Caratteristiche degli elementi sostituiti

  • Sono tutti elementi in linea
  • L'aspetto del contenuto non è influenzato dal CSS di altri tag, come il testo nel contenuto sostituito, ecc.
  • Il contenuto sostituito stesso ha dimensioni
    • La dimensione predefinita di img è la dimensione dell'immagine caricata.
    • La dimensione predefinita (esclusi i bordi) di video, iframe, tela, ecc. è 300 px * 150 px.
  • La linea di base dell'elemento sostituito (il valore predefinito di vertical-align è baseline) è il bordo inferiore dell'elemento, non il bordo inferiore del carattere x
  • Se il contenuto sostitutivo non viene caricato (ad esempio, l'attributo src non è impostato), l'elemento sostitutivo perderà le caratteristiche dell'elemento sostitutivo e diventerà un normale elemento inline.

Sostituisci la dimensione dell'elemento

La dimensione finale dell'elemento sostituito è determinata da una combinazione dei tre metodi seguenti, their Priorità da alta a bassa Seguito da:

  1. Dimensioni impostate da larghezza CSS, altezza, larghezza massima/larghezza minima, altezza massima/altezza minima
  2. Puoi impostare la dimensione sostituendo gli attributi html sull'elemento, come gli attributi larghezza e altezza di img, l'attributo dimensione di input, gli attributi cols e rows di textarea, ecc.
  3. Il contenuto sostituito stesso ha dimensioni

Nuovi tag HTML5

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

  • 1

tag strutturali

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

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

tag multimediali

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

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

etichetta del modulo

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

  • 1
  • 2

Altri tag

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

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

Punti chiave pratici dei tag HTML comunemente utilizzati

collegare risorse di collegamento esterne

Utilizzato solo all'interno del tag head, può definire la relazione tra il documento e le risorse esterne, come lo stile CSS del collegamento esterno, la piccola icona prima del titolo della pagina del collegamento esterno, ecc.

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

  • 1
  • 2
  • 3
  • 4

un collegamento ipertestuale

Tag ordinari specifici del testo

br interruzione di riga all'interno del paragrafo

È applicabile solo alle interruzioni di riga all'interno dei tag p. Per modificare le righe tra i paragrafi o regolare la spaziatura tra gli elementi, utilizza stili come riempimento e margine.

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

  • 1

Inserisci qui la descrizione dell'immagine

estendere il testo in linea

Utilizzato per racchiudere parte del testo all'interno di una riga per aggiungere stili speciali.

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

  • 1

Inserisci qui la descrizione dell'immagine

sup apice

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

  • 1

Inserisci qui la descrizione dell'immagine

pedice

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

  • 1

Inserisci qui la descrizione dell'immagine

testo predefinito

elementi di blocco display: block

Può conservare tutti i caratteri degli spazi bianchi (spazi, ritorni a capo) e restituire i risultati intatti. Viene spesso utilizzato per visualizzare il codice sorgente del computer.

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

  • 1
  • 2
  • 3
  • 4

Inserisci qui la descrizione dell'immagine

codice codice

elementi in linea display: inline

Utilizzato per rappresentare il codice sorgente del computer o altro contenuto testuale leggibile dalla macchina. Per preservare il formato del rientro del codice, viene solitamente utilizzato con il tag pre.

Il testo all'interno del tag del codice verrà visualizzato con un carattere in stile telescrivente a larghezza fissa (Courier).

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

  • 1
  • 2
  • 3
  • 4
  • 5

Inserisci qui la descrizione dell'immagine

Elenca i tag correlati

ul elenco non ordinato

  • L'attributo type può modificare il tipo del numero di serie
    • origine solida del disco [impostazione predefinita]
    • punto quadrato solido quadrato
    • cerchio cerchio vuoto
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

  • 1
  • 2
  • 3
  • 4
  • 5

Inserisci qui la descrizione dell'immagine

ol elenco ordinato

  • Attributo tipo: tipo di numero di serie, ad esempio 1 (numeri arabi [predefiniti]), a, A, i, I
  • attributo iniziale: punto iniziale del conteggio
<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

  • 1
  • 2
  • 3
  • 4
  • 5

Inserisci qui la descrizione dell'immagine

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

  • 1
  • 2
  • 3
  • 4
  • 5

Inserisci qui la descrizione dell'immagine

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

  • 1
  • 2
  • 3
  • 4
  • 5

Inserisci qui la descrizione dell'immagine

Elenca l'annidamento

li è un tag a livello di contenitore che può contenere qualsiasi cosa, incluso 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

Inserisci qui la descrizione dell'immagine

tavolo

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

l'icona

Il tag i era originariamente utilizzato per rappresentare il testo in corsivo, con l'effetto corsivo del carattere per impostazione predefinita, ma ora il corsivo è implementato in modo uniforme tramite i CSS. Poiché i è la prima lettera dell'icona, è ormai consuetudine utilizzare il tag i per visualizzare l'icona, quindi è necessario aggiungere lo stile font-style:normal per annullare l'inclinazione predefinita.

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

  • 1

Inserisci qui la descrizione dell'immagine

immagini

display :inline elementi in linea

Formati immagine supportati: jpg (jpeg), gif, png, bmp, altri formati non sono supportati, come psd, ai

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

  • 1

Inserisci qui la descrizione dell'immagine

audioaudio

display :inline elementi in linea
Inserisci qui la descrizione dell'immagine

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

  • 1
  • 2
  • 3
  • 4
  • src [obbligatorio]: indirizzo audio
  • i controlli visualizzano il lettore musicale
  • riproduzione automatica riproduzione automatica
  • riproduzione in loop
  • preload preload (questo attributo non sarà valido quando si imposta la riproduzione automatica)

Di seguito è riportato un semplice lettore musicale implementato utilizzando vue3. Consulta i commenti per attributi e metodi correlati.

<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

videovideo

display :inline elementi in linea

Supporta solo tre formati: MP4, WebM e Ogg. Altri formati come flv, mkv, ecc. non sono supportati.

Inserisci qui la descrizione dell'immagine

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

  • 1
  • 2
  • 3

  • src [obbligatorio]: l'indirizzo del video

  • controlla il display del lettore video

  • riproduzione automatica riproduzione automatica

  • riproduzione in loop

  • preload preload (questo attributo non sarà valido quando si imposta la riproduzione automatica)

  • [Suggerimenti pratici] Scarica video sul computer locale-CSDN Blog
    Italiano: https://blog.csdn.net/weixin_41192489/article/details/140223996

cornice incorporata iframe

display :inline elementi in linea

Incorpora pagine web all'interno delle pagine

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

  • 1
  • src [obbligatorio]: l'indirizzo di altre pagine web
    Inserisci qui la descrizione dell'immagine

Tag relativi al modulo

pulsante pulsante

display :inline-block elementi in linea

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

  • 1

Inserisci qui la descrizione dell'immagine

Caratteri speciali di rendering HTML

caratteredescriverecodice
spaziospaziatura non divisibile&nbsp;
<meno di&lt;
>più grande di&gt;
©diritto d'autore©
&e commercialee

Per ulteriori caratteri speciali, fare riferimento a "Riepilogo di come scrivere caratteri speciali html, js e css in html"
Italiano: https://www.cnblogs.com/starof/p/4718550.html

Esempi pratici di tag HTML comuni

Layout della pagina

Profilo personale

Si dedica alla ricerca tecnologica da più di 30 anni ed è esperto in vari linguaggi come Java, Linux, Javascript, php, css, ecc. Ha dato numerosi contributi nel campo dell'open source stazione di documentazione per gli sviluppatori per condividere alcuni problemi nello sviluppo della tecnologia per riferimento futuro

le mie informazioni di contatto

Posta