Hola a todos y bienvenidos al primer blog de la serie Primeros pasos con Front End. En esta serie, aprenderemos juntos los conceptos básicos del desarrollo front-end, la creación de páginas web y aplicaciones web desde cero. Este blog le presentará los conceptos básicos y las etiquetas de HTML (lenguaje de marcado de hipertexto), ayudándole a comenzar rápidamente.
La introducción básica y el primer intento de HTML.
Prefacio: Objetivos de aprendizaje
Los objetivos para este semestre son:
- Saber qué es HTML
- Aprende a entender la estructura HTML de una página completa
- Comprender la relación entre las etiquetas HTML y los elementos
- hola mundo práctica
- Dominar herramientas comunes de desarrollo
- Más información sobre navegadores comunes y sus kernels
¿Qué es HTML?
HTML es un lenguaje utilizado para describir páginas web.
- HTML significa Lenguaje de marcado de hipertexto : Lenguaje de marcado de hipertexto
- HTML no es un lenguaje de programación, sino un lenguaje de marcado
- Un lenguaje de marcado es un conjunto de etiquetas de marcado
- HTML usa etiquetas de marcado para describir páginas web
- Los documentos HTML contienen etiquetas HTML y contenido de texto .
- Los documentos HTML también se denominan páginas web.
Etiquetas y elementos HTML
Etiquetas HTML
Las etiquetas de marcado HTML a menudo se denominan etiquetas HTML (etiqueta HTML).
- Las etiquetas HTML son palabras clave rodeadas por corchetes angulares , como
- Las etiquetas HTML generalmente vienen en pares , como y
- La primera etiqueta en un par de etiquetas es la etiqueta de apertura y la segunda etiqueta es la etiqueta de cierre.
- Las etiquetas de apertura y cierre también se conocen como etiquetas de apertura y cierre.
<标签>内容</标签>
elementos HTML
Las "etiquetas HTML" y los "elementos HTML" suelen describir lo mismo.
Pero estrictamente hablando, un elemento HTML contiene una etiqueta de inicio y una etiqueta de finalización, como en el siguiente ejemplo:
Elementos HTML:
<p>这是一个段落。</p>
Estructura de la página HTML
Aquí hay un esqueleto HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端入门-html系列</title>
</head>
<body>
<p>程序员小豪</p>
</body>
</html>
Ejemplo de análisis
![[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-Sr0n11P2-1687583272139)(/Users/adherezheng/mynote/note/csdn/html/ activos/imagen-20230623164323975. png)]](https://img-blog.csdnimg.cn/e476e1aba62e4dc1a054219876386b17.png)
1. <!DOCTYPE html>声明为 HTML5 文档
2. <html>元素是 HTML 页面的根元素
3. <head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。
4. <title>元素描述了文档的标题
5. <body>元素包含了可见的页面内容
6. <h1>元素定义一个大标题
7. <p>元素定义一个段落
Nota : en la página del navegador, use la tecla F12 en el teclado para abrir el modo de depuración y podrá ver las etiquetas de los componentes.
Hola mundo escrito a mano
Seleccionar herramientas de desarrollo
Podemos elegir las siguientes herramientas de desarrollo para desarrollar html:
- Código de Visual Studio (preferido)
- Tormenta web
- Texto sublime
- Tejedor de sueños
- constructor
crear un archivo
Estoy usando el código vs, podemos abrir una carpeta, crear un nuevo archivo, nombrarlo test.html e ingresar '!+Enter' en este nuevo archivo, generará directamente un esqueleto html, estamos en el cuerpo Use el etiqueta div para escribir hola palabra en la etiqueta:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端入门-html系列</title>
</head>
<body>
<div>hello world</div>
</body>
</html>
navegador abierto
Haga clic derecho en 'abrir en el navegador predeterminado' en este archivo, podemos ver que html se representa en la página web
![[La transferencia de la imagen del enlace externo falló, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-x0YTW66J-1687583272142)(/Users/adherezheng/mynote/note/csdn/html/ activos/imagen-20230623165500223. png)]](https://img-blog.csdnimg.cn/3ebcdba1710f42e3a09893938b35affd.png)
Los cinco navegadores comunes y sus núcleos
Aquí, por cierto, popularice los cinco navegadores comunes:
| navegador | núcleo del motor de renderizado |
|---|---|
| Cromo/Cromo | Parpadear |
| Firefox | Geco |
| Safari | WebKit |
| Borde de Microsoft | EdgeHTML (versión anterior) / Blink (versión nueva) |
| Ópera | Parpadear |
Cada navegador usa un motor de renderizado diferente para analizar y renderizar el contenido web, y estos motores de renderizado pueden tener diferencias en el rendimiento, las funciones y el soporte estándar.