Compartilhamento de tecnologia

HTML [Tutorial Prático] (versão mais recente de 2024)

2024-07-12

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

Ideia central——Semantização

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

  • 1

O tipo de conteúdo pode ser determinado apenas por tags, principalmente títulos, parágrafos, imagens e tabelas.

  • Aumente a legibilidade do código e facilite a compreensão das pessoas
  • Mais amigável para SEO, facilitando a compreensão dos mecanismos de pesquisa

A estrutura básica dos arquivos HTML

O sufixo de arquivo para arquivos HTML é .html, como index.html

Digite inglês no vscode ! Entrada rápida

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

O navegador analisa documentos HTML de cima para baixo. <style></style> O rótulo deve ser escrito em<head></head> Você pode carregar os estilos primeiro e depois carregar os elementos.

Se você for <style></style> A etiqueta está escrita em<body></body> Abaixo, os elementos são carregados primeiro e depois os estilos, fazendo com que o usuário veja uma estrutura de página sem estilos.

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

  • 1

Os navegadores analisam documentos HTML de cima para baixo. <style></style> Se não for colocado<body></body> Na parte inferior da página, o JS será carregado e analisado primeiro e, em seguida, os elementos serão renderizados, o que prolongará o tempo de renderização da página. Se as operações DOM estiverem envolvidas no JS, também bloqueará a renderização da página. .

Classificação de tags HTML

De acordo com o valor do estilo de exibição padrão do rótulo, ele é dividido em duas categorias:

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

  • 1

elementos embutidos

A largura é determinada pelo conteúdo

  • display :inline Sem substituir o elemento, a largura e a altura não podem ser definidas.
img，span ,  a ,  b 等

  • 1
  • display :inline-block Pode definir largura e altura
input， button 等

  • 1

elementos de bloco

A largura é determinada pelo contêiner (a largura preencherá todo o contêiner), e a largura e a altura podem ser definidas

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

  • 1
  • display: table
table

  • 1
  • display: list-item
li

  • 1

Elementos de substituição em HTML

Elementos cujo conteúdo renderizado pode ser substituído pela modificação do valor de um atributo (principalmente o atributo src) são chamados de "elementos de substituição".

As seguintes tags são todos elementos de substituição:

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

  • 1

Características dos elementos substituídos

  • Todos são elementos embutidos
  • A aparência do conteúdo não é afetada pelo CSS de outras tags, como texto no conteúdo substituído, etc.
  • O próprio conteúdo substituído tem dimensões
    • O tamanho padrão de img é o tamanho da imagem que ele carrega.
    • O tamanho padrão (excluindo bordas) de vídeo, iframe, tela, etc. é 300px * 150px.
  • A linha de base do elemento substituído (o valor padrão de alinhamento vertical é linha de base) é a borda inferior do elemento, não a borda inferior do caractere x
  • Se o conteúdo de substituição não for carregado (por exemplo, o atributo src não estiver definido), o elemento de substituição perderá as características do elemento de substituição e se tornará um elemento embutido comum.

Substituir tamanho do elemento

O tamanho final do elemento substituído é determinado por uma combinação dos três métodos seguintes, sua Prioridade de alta para baixa Seguido pela:

  1. Tamanho definido por largura CSS, altura, largura máxima/largura mínima, altura máxima/altura mínima
  2. Você pode definir o tamanho substituindo os atributos html no elemento, como os atributos de largura e altura de img, o atributo size de entrada, os atributos cols e rows de textarea, etc.
  3. O próprio conteúdo substituído tem dimensões

Novas tags HTML5

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

  • 1

etiquetas estruturais

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

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

tags multimídia

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

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

etiqueta de formulário

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

  • 1
  • 2

Outras tags

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

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

Pontos-chave práticos das tags HTML comumente usadas

vincular recursos de link externo

Utilizado apenas dentro da tag head, pode definir a relação entre o documento e recursos externos, como o estilo css do link externo, o pequeno ícone antes do título da página do link externo, etc.

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

  • 1
  • 2
  • 3
  • 4

um hiperlink

Tags específicas de texto comuns

br quebra de linha dentro do parágrafo

É aplicável apenas a quebras de linha dentro de tags p. Para alterar linhas entre parágrafos ou ajustar o espaçamento entre elementos, use estilos como preenchimento e margem.

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

  • 1

Insira a descrição da imagem aqui

abranger texto embutido

Usado para quebrar parte do texto em uma linha para adicionar estilos especiais.

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

  • 1

Insira a descrição da imagem aqui

e aí sobrescrito

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

  • 1

Insira a descrição da imagem aqui

subscrito

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

  • 1

Insira a descrição da imagem aqui

texto pré-definido

elementos de bloco display: block

Ele pode reter todos os caracteres de espaço em branco (espaços, novas linhas) e gerar os resultados intactos. É frequentemente usado para exibir o código-fonte do computador.

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

  • 1
  • 2
  • 3
  • 4

Insira a descrição da imagem aqui

código código

elementos embutidos display: inline

Usado para representar o código-fonte do computador ou outro conteúdo de texto legível por máquina. Para preservar o formato de recuo do código, geralmente é usado junto com a tag pré.

O texto dentro da tag de código será exibido em uma fonte estilo teletypewriter de largura fixa (Courier).

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

  • 1
  • 2
  • 3
  • 4
  • 5

Insira a descrição da imagem aqui

Listar tags relacionadas

ul lista não ordenada

  • O atributo type pode modificar o tipo de número de série
    • origem sólida do disco [padrão]
    • ponto quadrado sólido quadrado
    • círculo círculo oco
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

  • 1
  • 2
  • 3
  • 4
  • 5

Insira a descrição da imagem aqui

ol lista ordenada

  • atributo type - tipo de número de série, como 1 (algarismos arábicos [padrão]), a, A, i, I
  • atributo inicial —— ponto inicial da contagem
<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

  • 1
  • 2
  • 3
  • 4
  • 5

Insira a descrição da imagem aqui

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

  • 1
  • 2
  • 3
  • 4
  • 5

Insira a descrição da imagem aqui

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

  • 1
  • 2
  • 3
  • 4
  • 5

Insira a descrição da imagem aqui

Aninhamento de lista

li é uma tag em nível de contêiner que pode conter qualquer coisa, incluindo 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

Insira a descrição da imagem aqui

mesa

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

eu ícone

A tag i foi originalmente usada para representar texto em itálico, com o efeito de fonte em itálico por padrão, mas agora o itálico é implementado uniformemente por meio de CSS. Como i é a primeira letra do ícone, agora é comum usar a tag i para exibir o ícone, então você precisa adicionar o estilo font-style:normal para cancelar a inclinação padrão.

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

  • 1

Insira a descrição da imagem aqui

imagens img

display :inline elementos embutidos

Formatos de imagem suportados: jpg (jpeg), gif, png, bmp, outros formatos não são suportados, como psd, ai

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

  • 1

Insira a descrição da imagem aqui

áudio áudio

display :inline elementos embutidos
Insira a descrição da imagem aqui

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

  • 1
  • 2
  • 3
  • 4
  • src [obrigatório]: endereço de áudio
  • controles exibem reprodutor de música
  • reprodução automática reprodução automática
  • reprodução em loop
  • pré-carregamento pré-carregamento (este atributo será inválido ao definir a reprodução automática)

Abaixo está um reprodutor de música simples implementado usando vue3. Consulte os comentários para atributos e métodos relacionados.

<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

vídeo vídeo

display :inline elementos embutidos

Suporta apenas três formatos: MP4, WebM e Ogg. Outros formatos como flv, mkv, etc.

Insira a descrição da imagem aqui

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

  • 1
  • 2
  • 3

  • src [obrigatório]: o endereço do vídeo

  • controla a exibição do player de vídeo

  • reprodução automática reprodução automática

  • reprodução em loop

  • pré-carregamento pré-carregamento (este atributo será inválido ao definir a reprodução automática)

  • [Dicas Práticas] Baixe vídeos para o computador local-Blog CSDN
    https://blog.csdn.net/weixin_41192489/article/details/140223996

quadro incorporado iframe

display :inline elementos embutidos

Incorporar páginas da web em páginas

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

  • 1
  • src [obrigatório]: o endereço de outras páginas da web
    Insira a descrição da imagem aqui

Tags relacionadas ao formulário

botão botão

display :inline-block elementos embutidos

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

  • 1

Insira a descrição da imagem aqui

Caracteres especiais de renderização de HTML

personagemdescrevercódigo
espaçoespaçamento ininterrupto&nbsp;
<menor que&lt;
>Maior que&gt;
©direito autoral©
&E comercial&

Para obter mais caracteres especiais, consulte "Resumo de como escrever caracteres especiais HTML, JS e CSS em HTML"
https://www.cnblogs.com/starof/p/4718550.html

Exemplos práticos de tags HTML comuns

Layout da página

Perfil pessoal

Ele se dedica à pesquisa de tecnologia há mais de 30 anos e é proficiente em diversas linguagens como java, linux, javascript, php, css, etc. estação de documentação do desenvolvedor para compartilhar alguns problemas no desenvolvimento de tecnologia para referência futura.

minhas informações de contato

Correspondência