Mi información de contacto
Correo[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Idea central——Semantización
【面试题】如何理解 HTML 语义化 ?
El tipo de contenido se puede determinar únicamente mediante etiquetas, especialmente títulos, párrafos, imágenes y tablas.
La estructura básica de los archivos html.
El sufijo de archivo para archivos html es .html, como index.html
Ingrese inglés en 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>
【面试题】为什么<style></style> 标签要写在<head></head> 中 ?
El navegador analiza los documentos HTML de arriba a abajo. <style></style> La etiqueta debe estar escrita en<head></head> Puede cargar estilos primero y luego cargar elementos.
Si tu quieres <style></style> La etiqueta está escrita en<body></body> A continuación, primero se cargan los elementos y luego los estilos, lo que hace que el usuario vea una estructura de página sin estilos.
【面试题】为什么<script></script> 标签要写在 <body></body> 内的底部 ?
Los navegadores analizan documentos HTML de arriba a abajo. <style></style> Si no se coloca<body></body> En la parte inferior de la página, JS se cargará y analizará primero, y luego se representarán los elementos, lo que prolongará el tiempo de representación de la página. Si hay operaciones DOM involucradas en JS, también bloqueará la representación de la página. .
Clasificación de etiquetas html.
Según el valor de estilo de visualización predeterminado de la etiqueta, se divide en dos categorías:
【面试题】HTML有哪些内联元素和块状元素 ?
El ancho está determinado por el contenido.
display :inline Sin reemplazar el elemento, no se pueden establecer el ancho y el alto.img，span , a , b 等
display :inline-block Puede establecer ancho y altoinput， button 等
El ancho lo determina el contenedor (el ancho llenará todo el contenedor) y se pueden establecer el ancho y el alto.
display: blockdiv，h1-h6，p，ul, ol ，form , hr 等
display: tabletable
display: list-itemli
Elementos de reemplazo en HTML
Los elementos cuyo contenido renderizado se puede reemplazar modificando el valor de un atributo (principalmente el atributo src) se denominan "elementos de reemplazo".
Las siguientes etiquetas son todos elementos de reemplazo:
img、video、iframe、canvas、textarea、input、select、object
Características de los elementos sustituidos.
Reemplazar el tamaño del elemento
El tamaño final del elemento reemplazado se determina mediante una combinación de los tres métodos siguientes, sus Prioridad de mayor a menor Seguido por:
Nuevas etiquetas HTML5
【面试题】HTML5 新增了哪些标签 ? (回答几个常用的即可)
etiquetas estructurales
<header>: 定义文档或节的头部。
<nav>: 定义导航链接。
<section>: 定义文档中的独立节。
<article>: 定义文档、页面、应用或网站中独立的内容区域。
<aside>: 定义页面的侧边栏内容。
<footer>: 定义文档或节的页脚。
<main>: 定义文档的主体内容。
etiquetas multimedia
<video>: 定义视频或电影。
<audio>: 定义音频内容。
<source>: 为<video>和<audio>元素定义媒体资源。
<track>: 为<video>和<audio>元素定义文本轨道。
<embed>: 定义嵌入的内容，比如插件。
<canvas>: 用于在网页上绘制图形。
etiqueta de formulario
<datalist>: 定义选项列表，与<input>元素配合使用，以提供“自动完成”功能。
<output>: 定义不同类型的输出，比如脚本的输出。
Otras etiquetas
<time>: 定义日期或时间。
<mark>: 定义高亮显示的文本。
<progress>: 定义任何类型的任务的进度。
<meter>: 定义已知范围或分数值内的标量测量。
<details>: 定义用户可见的或者隐藏的额外的细节。
<summary>: 定义<details>元素的可见标题。
<figure>: 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>: 定义<figure>元素的标题（caption）。
Puntos clave prácticos de las etiquetas HTML de uso común
Solo se usa dentro de la etiqueta head y puede definir la relación entre el documento y los recursos externos, como el estilo CSS del enlace externo, el pequeño ícono antes del título de la página del enlace externo, etc.
<!-- 外链--样式 -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- 外链--页面标题前的小图标 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Las cuatro funciones principales del hipervínculo y una etiqueta (salto de página, desplazamiento dentro de la página [ancla], actualización de página, descarga de archivos)
https://blog.csdn.net/weixin_41192489/article/details/140217094
Agregar hipervínculos a los párrafos
Envuelva a con p en lugar de p con a
<p><a href="">段落</a></p>
Solo se aplica a saltos de línea dentro de etiquetas p. Para cambiar líneas entre párrafos o ajustar el espacio entre elementos, utilice estilos como relleno y margen.
<p>广东省<br/>广州市<br/>黄埔大道西601号</p>
Se utiliza para ajustar parte del texto dentro de una línea para agregar estilos especiales.
<p><span style="color: red">要点：</span> 不能长时间睡觉。</p>
<p>m<sup>2</sup></p>
<p>m<sub>2</sub></p>
elementos de bloque display: block
Puede conservar todos los espacios en blanco (espacios, nuevas líneas) y generar los resultados intactos. A menudo se utiliza para mostrar el código fuente de la computadora.
<pre>
你好：
我昨天给你打了个电话。
</pre>
elementos en línea display: inline
Se utiliza para representar el código fuente de la computadora u otro contenido de texto legible por máquina. Para preservar el formato de sangría del código, generalmente se usa junto con la etiqueta previa.
El texto dentro de la etiqueta del código se mostrará en una fuente estilo teletipo de ancho fijo (Courier).
<pre>
<code>
let a = 1;
</code>
</pre>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<ol type="a">
<li>嘿嘿</li>
<li>嘿嘿</li>
<li>呵呵</li>
</ol>
<ol type="1" start="4">
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
</ol>
li es una etiqueta a nivel de contenedor que puede contener cualquier cosa, incluido 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>
https://blog.csdn.net/weixin_41192489/article/details/140217983
La etiqueta i se usó originalmente para representar texto en cursiva, con el efecto de fuente en cursiva de forma predeterminada, pero ahora la cursiva se implementa de manera uniforme a través de CSS. Debido a que i es la primera letra del ícono, ahora es habitual usar la etiqueta i para mostrar el ícono, por lo que debe agregar el estilo font-style:normal para cancelar la inclinación predeterminada.
<i style="font-style:normal">☎</i>
display :inline elementos en línea
Formatos de imagen admitidos: jpg (jpeg), gif, png, bmp; otros formatos no son compatibles, como psd, ai
<img src="./ecLogo.jpg" alt="EC编程俱乐部的logo" />
src [obligatorio]: la dirección de la imagen
alt [Importante]: cuando la imagen no se puede mostrar, los motores de búsqueda rastrearán este atributo en lugar del contenido que se muestra en la imagen. alt proviene de la palabra "alternativo", que significa reemplazar un recurso. (Algunos navegadores no lo admiten)
Para mantener la relación de aspecto de la imagen, normalmente solo establece uno de ancho y alto.
[Habilidades prácticas] Imágenes receptivas
https://blog.csdn.net/weixin_41192489/article/details/126038175
[Consejos prácticos] Carga diferida de imágenes (escritas a mano)
https://blog.csdn.net/weixin_41192489/article/details/126263221
display :inline elementos en línea
<audio controls>
<source src="./test.mp3" type="audio/mp3" />
您的浏览器不支持 audio 标签。
</audio>
A continuación se muestra un reproductor de música simple implementado con vue3. Consulte los comentarios para conocer los atributos y 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>
display :inline elementos en línea
Solo admite tres formatos: MP4, WebM y Ogg. No se admiten otros formatos como flv, mkv, etc.
<video controls>
<source src="./test.mp4" type="video/mp4" />
</video>
src [obligatorio]: la dirección del vídeo
controles pantalla reproductor de video
reproducción automática reproducción automática
reproducción en bucle
precargar precarga (este atributo no será válido al configurar la reproducción automática)
[Consejos prácticos] Descargar videos a la computadora local-Blog CSDN
https://blog.csdn.net/weixin_41192489/article/details/140223996
display :inline elementos en línea
Incrustar páginas web dentro de páginas
<iframe src="https://www.w3school.com.cn/index.html"></iframe>
display :inline-block elementos en línea
<button onclick="alert('你好!')">点击我！</button>
HTML representando caracteres especiales
| personaje | describir | código |
|---|---|---|
| espacio | espaciado indivisible | |
| < | menos que | < |
| > | mas grande que | > |
| © | derechos de autor | © |
| & | signo comercial | & |
Para obtener más caracteres especiales, consulte "Resumen de cómo escribir caracteres especiales html, js y css en html".
https://www.cnblogs.com/starof/p/4718550.html
Ejemplos prácticos de etiquetas HTML comunes
vue3 [Práctico] Diseño de página de inicio semántica-Blog CSDN
https://blog.csdn.net/weixin_41192489/article/details/140215515
CSS [Práctico] Diseño "Siheyuan"-Blog CSDN
https://blog.csdn.net/weixin_41192489/article/details/139243680
Se ha dedicado a la investigación de tecnología durante más de 30 años y domina varios lenguajes como java, linux, javascript, php, css, etc. Ha realizado muchas contribuciones en el campo del código abierto. Estación de documentación para desarrolladores para compartir algunos problemas en el desarrollo de tecnología para referencia futura.
Correo[email protected]