Este artículo cubrirá las preguntas de entrevista más frecuentes en HTML. Ya hemos creado el Conjunto de preguntas y respuestas de la entrevista HTML – 1. Por lo tanto, lea el Conjunto – 1 antes de pasar a este artículo.
Requisito previo: Conjunto de preguntas y respuestas de la entrevista HTML – 1
A continuación, se incluye la lista de las 20 preguntas de entrevista más comunes y frecuentes de HTML y HTML 5 con sus explicaciones.
-
¿Son similares las etiquetas <div> y <span>?
Ambas etiquetas ( <div> y <span> ) se utilizan para representar la parte de la página web. La etiqueta <div> se usa como componente de bloque y la etiqueta <span> se usa como componente en línea.
<div> A Computer Science Portal for Geeks <span> GeeksforGeeks <span> </div>
Etiqueta <div>: la etiqueta div se conoce como etiqueta de división. Es una etiqueta a nivel de bloque y se usa en HTML para hacer divisiones de contenido en la página web (texto, imágenes, encabezado, pie de página, barra de navegación, etc.). La etiqueta div tiene etiquetas tanto de apertura (<div>) como de cierre (</div>), y es obligatorio cerrar la etiqueta.
etiqueta <span>:
Diferencias entre las etiquetas <div> y <span>:
etiqueta <div>
etiqueta <span>
La etiqueta <div> es un elemento de nivel de bloque.
La etiqueta <span> es un elemento en línea.
Lo mejor es adjuntarlo a una sección de una página web.
Lo mejor es adjuntar CSS a una pequeña sección de una línea en una página web.
Acepta atributo de alineación.
No acepta atributos alineados.
Esta etiqueta debe usarse para envolver una sección, para resaltar esa sección.
Esta etiqueta debe usarse para envolver cualquier palabra específica que desee resaltar en su página web.
-
¿Cuál es la diferencia entre clases e id?
Atributo id : El atributo id es un identificador único que se utiliza para especificar el documento. Es utilizado por CSS y JavaScript para realizar una determinada tarea para un elemento único. En CSS, el atributo id se escribe usando el símbolo # seguido de id.
Sintaxis:
<element id="id_name"> In CSS Stylesheet: #id_name { // CSS Property }
Atributo de clase : el atributo de clase se utiliza para especificar uno o más nombres de clase para un elemento HTML. El atributo de clase se puede utilizar en cualquier elemento HTML. El nombre de clase puede ser utilizado por CSS y JavaScript para realizar ciertas tareas para elementos con el nombre de clase especificado. El nombre de la clase se puede representar usando el «.» símbolo.
Sintaxis:
<element class="class_name> In CSS Stylesheet: .class { // CSS Property }
Diferencia entre id y atributo de clase:
-
¿Cómo podemos crear una página web anidada en HTML?
La página web anidada se puede crear usando los siguientes 2 métodos:
- <iframe> etiqueta : iframe
<iframe src="URL"></iframe>
- Etiqueta <embed> : La etiqueta <embed> en HTML se usa para incrustar aplicaciones externas que generalmente son contenido multimedia como audio o video en un documento HTML.
Sintaxis:
<embed src="URL" type="text/html" />
El atributo ‘ src ‘ se usa para especificar la URL del documento que ocupa el iframe.
Ejemplo:
HTML
<!DOCTYPE html>
<
html
>
<
body
>
<
p
>Content goes here</
p
>
<
iframe
src
=
height
=
"300"
width
=
"400"
>
</
iframe
>
</
body
>
</
html
>
Producción:
-
¿Cuáles son las etiquetas que se pueden usar dentro de la etiqueta <head>?
El elemento <head> es como un contenedor de metadatos, es decir, datos sobre datos, y también se encuentra entre la etiqueta <html> y la etiqueta <body>. Los metadatos son los datos sobre el documento HTML y no se muestran en la página web. Define el título del documento, el estilo, el guión y otra metainformación.
El elemento HTML <head> es un contenedor para los siguientes elementos:
- <title> : Define el título de la página web.
- <enlace> : se usa con mayor frecuencia para vincular un archivo CSS externo.
- <meta> : se utiliza para especificar el conjunto de caracteres, la descripción de la página, las palabras clave, el autor del documento y la configuración de la ventana gráfica. No se mostrará, pero lo utilizan los navegadores para mostrar contenido o recargar páginas y los motores de búsqueda y otros servicios web.
- <base> : se utiliza para especificar la URL base o el destino de las URL relativas.
- <style> : Se usa para hacer CSS interno dentro de nuestra página web HTML.
- <script> : Se utiliza para definir dentro de la página web HTML.
-
¿Qué son las metaetiquetas? ¿Cómo son importantes?
Los metadatos significan información sobre los datos. La etiqueta <meta> en HTML proporciona información sobre el documento HTML o, en palabras simples, proporciona información importante sobre un documento. Estas etiquetas se utilizan básicamente para agregar pares de nombre/valor para describir las propiedades de los documentos HTML, como la fecha de caducidad, el nombre del autor, la lista de palabras clave, el autor del documento, etc. Esta etiqueta es un elemento vacío porque solo tiene una etiqueta de apertura y no etiqueta de cierre, pero lleva información dentro de sus atributos. Un documento web puede incluir una o más etiquetas meta según la información, pero en general, no afecta la apariencia física del documento.
Sintaxis:
<meta attribute-name="value">
Puntos clave:
- El contenido de la etiqueta <meta> no está visible en su navegador y se agrega dentro de la etiqueta <head>.
- Solo se utilizan para dar información adicional sobre el documento HTML.
- Las etiquetas <meta> se agregan a nuestro documento HTML con el fin de optimizar los motores de búsqueda.
-
El diseño de página es la parte del diseño gráfico que se ocupa de la disposición de los elementos visuales en una página. El diseño de página se utiliza para que las páginas web se vean mejor. Establece la apariencia general, la importancia relativa y las relaciones entre los elementos gráficos para lograr un flujo fluido de información y movimiento ocular para lograr la máxima efectividad o impacto.
Información de diseño de página:
- Encabezado: La parte del front-end que se utiliza en la parte superior de la página. La etiqueta <header> se usa para agregar una sección de encabezado en las páginas web.
- Barra de navegación: La barra de navegación es la misma que la lista del menú. Se utiliza para mostrar la información del contenido mediante hipervínculos.
- Índice / Barra lateral: contiene información adicional o anuncios y no siempre es necesario agregarlo a la página.
- Sección de contenido: La sección de contenido es la parte principal donde se muestra el contenido.
- Pie de página: La sección de pie de página contiene la información de contacto y otras consultas relacionadas con las páginas web. La sección de pie de página siempre se coloca en la parte inferior de las páginas web. La etiqueta <footer> se utiliza para establecer el pie de página en las páginas web.
-
¿Qué son los elementos semánticos?
Los elementos semánticos tienen nombres significativos que informan sobre el tipo de contenido. Por ejemplo, encabezado, pie de página, tabla, etc. HTML5 introduce muchos elementos semánticos, como se menciona a continuación, que hacen que el código sea más fácil de escribir y comprender para el desarrollador, así como instruir al navegador sobre cómo tratarlos.
- artículo : contiene contenido independiente que no requiere ningún otro contexto.
- a un lado : Se utiliza para colocar contenido en una barra lateral, es decir, aparte del contenido existente.
- detalles : Define detalles adicionales que el usuario puede ocultar o ver.
- figure & figcaption : Se utiliza para añadir una imagen a una página web con una pequeña descripción.
- pie de página : Se encuentra en la parte inferior de cualquier artículo o documento, pueden contener datos de contacto, información de derechos de autor, etc.
- header : Se utiliza para el encabezado de una sección introductoria de una página.
- main : Define el contenido principal del documento.
- marca : Se utiliza para resaltar el texto.
- nav : se utiliza para definir un conjunto de enlaces de navegación en forma de barra de navegación o menú de navegación.
- sección : una página se puede dividir en secciones como Introducción, Información de contacto, Detalles, etc. y cada una de estas secciones puede estar en una etiqueta de sección diferente.
-
Por ejemplo:
-
¿Cómo podemos agregar símbolos en HTML?
Hay algunos caracteres en HTML que están reservados y tienen un significado especial cuando se usan en un documento HTML. Por ejemplo, si usó menor que o mayor que para iniciar sesión en su documento HTML, el navegador los tratará de manera diferente. Así que usaremos entidades HTML para insertar símbolos en una página web.
Símbolos especiales
Sintaxis
©: derechos de autor
&Copiar;
®:marca registrada
reg;
™: marca registrada
&comercio;
@: a
@
¶: párrafo
¶ca;
§: sección
§a;
ℂ: doble c mayúscula
𝕔
℅: cuidado de
&en cuidado;
-
Un localizador uniforme de recursos (URL) es simplemente la dirección de un sitio web para acceder al contenido del sitio web como www.geeksforgeeks.org . Pero hay ciertos caracteres que se pueden usar en la URL, como los alfabetos AZ y az, los números 0-9 y algunos caracteres especiales. Se pueden usar tal cual, pero el resto de los caracteres que no están en esta lista se usan después de codificarlos en una forma adecuada.
La codificación de URL es el proceso de convertir la URL en un formato válido que sea aceptado por los navegadores web. La codificación de URL se realiza reemplazando todos los caracteres que no están permitidos con un signo % seguido de dos dígitos hexadecimales. Estos dos valores hexadecimales representan los valores numéricos del carácter en el juego de caracteres ASCII. Por ejemplo, un espacio no es aceptable en una URL y se reemplaza por ‘%20’ o un signo ‘+’ durante la codificación. De manera similar, un signo $se reemplaza por ‘%24’.Caracteres reservados: hay ciertos caracteres que a veces tienen significados especiales en la URL y se pueden usar de ambas formas. Por ejemplo, el carácter ‘/’ es un carácter reservado y tiene un significado especial cuando se usa como delimitador para separar las rutas de una URL. Aquí se utiliza codificándolo en ‘%2F’. De lo contrario, cuando no tiene un propósito especial, se puede usar normalmente.
-
¿Cuál es la diferencia entre el método POST y el método GET?
Hay 2 métodos de solicitud HTTP, es decir, GET & POST
- GET: Solicita datos de un recurso específico.
- POST: este método se utiliza para enviar datos para que se procesen en un recurso específico.
El método GET: los datos se envían como parámetros de URL que suelen ser strings de pares de nombre y valor separados por signos de y comercial (&). En general, una URL con datos GET se verá así:
Ejemplo:
http://www.example.com/action.php?name=Sam&weight=55
Explicación:
- Las partes en negrita en la URL son los parámetros GET y las partes en cursiva son el valor de esos parámetros.
- Se puede incrustar más de un parámetro=valor en la URL mediante la concatenación con signos de y comercial (&).
- Solo se pueden enviar datos de texto simple a través del método GET.
El método POST: los datos se envían al servidor como un paquete en una comunicación separada con el script de procesamiento. Los datos enviados a través del método POST no serán visibles en la URL.
Ejemplo:
POST /test/demo_form.php HTTP/1.1 Host: gfs.com SAM=451&MAT=62
Explicación: la string de consulta (nombre/peso) se envía en el cuerpo del mensaje HTTP de una solicitud POST.
-
El elemento HTML «lienzo» se utiliza para dibujar gráficos a través de JavaScript. El elemento «lienzo» es solo un contenedor para gráficos. Uno debe usar JavaScript para dibujar los gráficos. Canvas tiene varios métodos para dibujar rutas, cuadros, círculos, texto y agregar imágenes.
Ejemplo: el lienzo sería un área rectangular en una página HTML. De forma predeterminada, un lienzo no tiene borde ni contenido. Se ha especificado un atributo id para referirse a él en un script y un atributo de ancho y alto para definir el tamaño del lienzo. El atributo de estilo se utiliza para agregar un borde.
HTML
<!DOCTYPE html>
<
html
>
<
body
>
<
canvas
id
=
"myCanvas"
width
=
"400"
height
=
"200"
style
=
"border:2px solid #000000;"
>
</
canvas
>
</
body
>
</
html
>
Producción:
-
Ventajas de SVG: Las ventajas de usar SVG sobre otros formatos de imagen (como JPEG y GIF) son:
- Las imágenes SVG se pueden crear y editar con cualquier editor de texto.
- Las imágenes SVG se pueden buscar, indexar, codificar y comprimir.
- Las imágenes SVG son escalables.
- Las imágenes SVG se pueden imprimir con alta calidad en cualquier resolución.
Ejemplo:
HTML
<!DOCTYPE html>
<
html
>
<
body
>
<
svg
width
=
"200"
height
=
"200"
>
<
circle
cx
=
"80"
cy
=
"80"
r
=
"50"
stroke
=
"black"
stroke-width
=
"2"
fill
=
"grey"
/>
</
svg
>
</
body
>
</
html
>
Producción:
-
¿Cuáles son los diferentes formatos multimedia compatibles con HTML?
-
La ubicación geográfica en HTML5 se utiliza para compartir la ubicación con algún sitio web y conocer la ubicación exacta. Se utiliza principalmente para negocios locales, restaurantes o para mostrar ubicaciones en el mapa. Utiliza JavaScript para dar la latitud y la longitud al servidor backend. La mayoría de los navegadores admiten la API de geolocalización. La API de ubicación geográfica utiliza un objeto de navegador global que se puede crear de la siguiente manera:
var loc = navigator.geolocation
Visualización de la ubicación mediante geolocalización HTML:
HTML
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Lattitude and longitude</
title
>
<
style
>
.gfg {
font-size: 40px;
font-weight: bold;
color: #009900;
margin-left: 50px;
}
.geeks {
margin-left: 150px;
}
p {
font-size: 20px;
margin-left: 20px;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"gfg"
>GeeksforGeeks</
div
>
<
p
>Displaying location using Latitude and Longitude</
p
>
<
button
class
=
"geeks"
onclick
=
"getlocation()"
>
Click
</
button
>
<
p
id
=
"demo1"
></
p
>
<
script
>
var variable1 = document.getElementById("demo1");
function getlocation() {
navigator.geolocation.getCurrentPosition(showLoc);
}
function showLoc(pos) {
variable1.innerHTML = "Latitude: "
+ pos.coords.latitude
+ "<
br
>Longitude: "
+ pos.coords.longitude;
}
</
script
>
</
body
>
</
html
>
Producción:
-
¿Qué es la API de almacenamiento web HTML?
SessionStorage y LocalStorage se conocen como la API de almacenamiento web. Los datos se pueden almacenar en el lado del cliente mediante el uso de estas API.
- SessionStorage se utiliza para almacenar datos en el lado del cliente.
- El límite máximo de almacenamiento de datos en SessionStorage es de unos 5 MB.
- Los datos en el SessionStorage existen hasta que la pestaña actual está abierta si cerramos la pestaña actual, nuestros datos también se borrarán automáticamente del SessionStorage.
- Al igual que SessionStorage, LocalStorage también se utiliza para almacenar datos en el lado del cliente.
- El límite máximo de almacenamiento de datos es de unos 5 MB también en LocalStorage.
- LocalStorage no tiene tiempo de caducidad, los datos en LocalStorage persisten hasta que el usuario los elimina manualmente. Esta es la única diferencia entre LocalStorage y SessionStorage
S. No.
Elemento semántico
Elemento no semántico
1. Estos elementos transmiten algún significado.
no tienen significado
2. Describen cómo se supone que debe comportarse el contenido dentro de ellos.
Pueden contener cualquier cosa
3. Tienen atributos específicos para su estructura.
El atributo ‘clase’ se puede usar para trabajar con su estructura
-
¿Qué son los formularios en HTML?
El formulario HTML es un documento que almacena información de un usuario en un servidor web mediante controles interactivos. Un formulario HTML contiene diferentes tipos de información, como nombre de usuario, contraseña, número de contacto, identificación de correo electrónico, etc.
Los elementos utilizados en un formulario HTML son la casilla de verificación, el cuadro de entrada, los botones de radio, los botones de envío, etc. Con estos elementos, la información de un usuario se envía a un servidor web. La etiqueta de formulario se utiliza para crear un formulario HTML.
Ejemplo:
HTML
<!DOCTYPE html>
<
html
>
<
body
>
<
form
>
Username:
<
br
>
<
input
type
=
"text"
name
=
"username"
>
<
br
>
Email id:
<
input
type
=
"text"
name
=
"email_id"
>
<
br
>
<
input
type
=
"submit"
value
=
"Submit"
>
</
form
>
</
body
>
</
html
>
Producción:
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA