Tabla de contenido
2.1 Comprender las etiquetas HTML
2.2 Estructura básica del archivo HTML
2.4 Propiedades de las etiquetas
2.5 Comprender el marco predeterminado generado por VScode
Tres etiquetas comunes de HTML
3.2 Etiquetas de encabezado: h1 ~ h6
3.4 Etiqueta de nueva línea: br
3.5 Etiquetas de formato de texto
3.7 Etiqueta de hipervínculo: a
1. ¿Qué es HTML?
El nombre completo de HTML es Hyper Text Markup Language (Lenguaje de marcado de hipertexto), que es un lenguaje de marcado. Incluye una serie de etiquetas a través de las cuales se puede unificar el formato del documento en la red y los recursos dispersos de Internet se pueden conectar en un todo lógico. En términos sencillos, HTML se usa para escribir páginas frontales, y varias páginas en nuestros navegadores habituales están escritas en HTML.
Podemos usar la tecla de acceso directo F12 o fn+F12 para ver el código fuente HTML de cualquier página del navegador
Dos infraestructuras HTML
2.1 Comprender las etiquetas HTML
El código HTML se compone de " etiquetas ", y el formato básico de las etiquetas es el siguiente:
<body>hello</body>- El nombre de la etiqueta (cuerpo) debe colocarse en <>
- La mayoría de las etiquetas HTML aparecen en pares, <body> es la etiqueta de inicio y </body> es la etiqueta final
- Una pequeña cantidad de etiquetas solo tienen la etiqueta de inicio, que se denomina etiqueta única
- Entre la etiqueta de inicio y la etiqueta final está el contenido
- Algunos atributos se pueden incluir en la etiqueta de inicio
Con forma de:
<body id="hello">hello</body>Esto es equivalente a establecer un identificador único para el par de etiquetas actual
2.2 Estructura básica del archivo HTML
<html>
<head>
<title>我的页面</title>
</head>
<body>
hello world
</body>
</html>- La etiqueta html es la etiqueta raíz de todo el archivo html y también es la etiqueta superior
- La etiqueta de encabezado escribe los atributos de la página, como el título de la página, el conjunto de caracteres de la página, etc.
- La etiqueta del cuerpo escribe el contenido específico que se mostrará en la página.
- La etiqueta de título contiene el título de la página.
Cuando se ejecuta el código anterior, podemos obtener la siguiente página
2.3 Jerarquía de etiquetas
Cada etiqueta tiene las siguientes dos relaciones
- relación padre-hijo
- Fraternidad
<html>
<head>
<title>我的页面</title>
</head>
<body>
hello world
</body>
</html>Esto tiene la siguiente relación
- head y body son etiquetas secundarias de html, y html es la etiqueta principal de head y body, y son relaciones padre-hijo
- title es la etiqueta secundaria de head y head es la etiqueta principal de title
- Hay una relación de hermanos entre la cabeza y el cuerpo.
2.4 Propiedades de las etiquetas
Los atributos de la etiqueta tienen las siguientes características
- Puede haber múltiples atributos, pero ninguno de ellos puede escribirse antes de la etiqueta.
- Los atributos están separados por espacios, puede haber múltiples espacios o saltos de línea
- Los atributos no están en ningún orden en particular
- Las propiedades se representan en formato de pares clave-valor
El ejemplo es el siguiente (la etiqueta src y sus atributos se explican en detalle más adelante en este artículo):
<img src="dog.jpg" alt="狗" title="这是一个小狗"
width="500px" height="800px">2.5 Comprender el marco predeterminado generado por VScode
En VScode, después de ingresar html , seleccione html:5 para generar el siguiente marco html por defecto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>- <!DOCTYPE html> se denomina DTD (Definición de tipo de documento), que describe que el archivo actual es un archivo HTML5
- <html lang="en"> Esto en realidad es agregar un atributo lang a la etiqueta html, y el valor de long es en, lo que indica que la página actual es una página en inglés (algunos navegadores traducirán automáticamente de acuerdo con el mensaje de vida aquí)
- <meta charset="UTF-8"> Describe el método de codificación de caracteres de la página actual. Sin esta línea, es posible que los caracteres chinos no se analicen correctamente y que aparezcan caracteres ilegibles.
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> Entre ellos, viewport se refiere al área en la pantalla del dispositivo que se puede usar para mostrar páginas web, width=device- width, initial -scale=1.0 es establecer el ancho del área visible y el dispositivo para que sean iguales, y establecer el zoom inicial para que no sea escalable.
- <title>Documento</title> La etiqueta de título describe el nombre de la página actual, es decir, el nombre inicial de la página actual es Documento
Tres etiquetas comunes de HTML
Con la comprensión básica anterior de HTML, aprendamos algunas etiquetas comunes para hacer una interfaz especial por nosotros mismos.
3.1 Etiquetas de anotación
<!-- 这是注释的基本格式 -->Los comentarios no aparecerán en la interfaz web, y su objetivo principal es mejorar la legibilidad del código.Podemos comentar y descomentar rápidamente a través de ctrl+/ en VScode
3.2 Etiquetas de encabezado: h1 ~ h6
El ejemplo de código es el siguiente
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>El efecto es el siguiente
Cuando utilice etiquetas de título, preste atención a los siguientes dos puntos
- Las etiquetas de título tienen sus propios saltos de línea
- Cuanto mayor sea el número de la etiqueta del título, menor será la fuente. Podemos referirnos al título de primer nivel, al título de segundo nivel y al título de tercer nivel para entender, es decir, el título de primer nivel tiene el más grande palabra.
3.3 Etiquetas de párrafo: p
Podemos encontrar que cuando pegamos un fragmento de texto relativamente largo en la etiqueta del cuerpo con html, incluso si hemos dividido los párrafos en VScode, cuando lo ejecuto, encontraré que no está dividido en párrafos, por lo que debemos use etiquetas de párrafo para implementar la segmentación
El ejemplo de código es el siguiente
<p>这是第一段</p>
<p>这是第二段</p>El efecto es el siguiente
Tenga en cuenta lo siguiente cuando utilice la etiqueta p :
- La etiqueta p no es solo una nueva línea, es decir, un espacio entre la etiqueta p y otro contenido
- El párrafo descrito por la etiqueta p no tiene sangría al principio
- Para el contenido de cada par de etiquetas p, el diseño se determinará automáticamente de acuerdo con el ancho del navegador.
- Los saltos de línea y los espacios al principio y al final del contenido html no son válidos
- Múltiples espacios ingresados entre palabras en html solo equivalen a un espacio
- La nueva línea ingresada directamente en el código fuente html no se analizará como una nueva línea al analizar, pero se mostrará un espacio en blanco en la página
3.4 Etiqueta de nueva línea: br
Un ejemplo de uso es el siguiente
<p>
p 标签不单单是换行,即 p 标签和别的内容之间一个空隙 <br/>
p 标签描述的段落开头没有缩进<br/>
对于每一对 p 标签中的内容,会自动根据浏览器宽度来决定排版<br/>
html 内容首尾处的换行,空格均无效<br/>
在 html 中文字之间输入的多个空格只相当于一个空格<br/>
html 源码中直接输入的换行在解析的时候不会解析为换行,而是在页面中显示一个空格<br/>
</p>El efecto es el siguiente
Tenga en cuenta lo siguiente cuando use la etiqueta br
- br es una sola etiqueta
- La etiqueta br no tiene un gran espacio como la etiqueta p, la etiqueta br es solo un salto de línea
- <br/> es una forma estándar de escribir, no se recomienda escribir como<br>
3.5 Etiquetas de formato de texto
- Negrita: etiqueta fuerte y etiqueta b
- Cursiva: etiquetas em y etiquetas i
- Tachado: etiqueta del y etiqueta s
- Subrayado: etiquetas ins y etiquetas u
El ejemplo de código es el siguiente
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>El efecto es el siguiente
3.6 Etiquetas de imagen: img
Atributos comunes de la etiqueta img:
- src: indica la ruta de la imagen, que puede ser una ruta relativa o una ruta absoluta (no explicaré mucho sobre la diferencia y el uso de rutas relativas y rutas absolutas aquí, y viejos hierros que no lo saben puede comprobarlo)
- alt: texto de reemplazo, cuando la imagen no se puede mostrar correctamente, muestra el texto reemplazado
- Ancho / alto: controle el ancho y el alto. Generalmente, uno de los dos, el alto y el ancho, se puede cambiar y el otro se puede escalar proporcionalmente. Si se cambian al mismo tiempo, la imagen puede estar desequilibrada.
- borde: borde, el parámetro es el ancho del píxel
- título: El título de la imagen, es decir, cuando nuestro cursor cae sobre la imagen, el texto que se muestra en el cursor
Usamos la etiqueta img para mostrar imágenes en la interfaz, por lo que la etiqueta img debe tener el atributo src
El ejemplo de código es el siguiente
<img src="dog.png" alt="狗" title="这是一个小狗" width="500px">Nota: La ruta src es una ruta relativa, es decir, puse la imagen en el mismo directorio que el archivo html de antemano, y su nombre de archivo es dog.png
El efecto es el siguiente
3.7 Etiqueta de hipervínculo: a
Atributos comunes de una etiqueta:
- href: el enlace a la página que desea después de hacer clic
- objetivo: modo abierto, el valor predeterminado es _self, en este modo, la nueva página que salta después de hacer clic ocupará nuestra página actual, y cuando la usamos habitualmente, la cambiaremos a _blank, después de cambiarla, al hacer clic se abrirá el enlace una nueva página muestra
Preste especial atención a los dos puntos siguientes cuando utilice una etiqueta:
- Debe tener el atributo href de la etiqueta a, de lo contrario no se puede realizar el salto
- La etiqueta debe tener contenido; de lo contrario, no se mostrará nada en la etiqueta en la página.
Varias formas de enlaces en el atributo href en la etiqueta a:
1. Enlace externo: Consulte la dirección de otros sitios web
<a href="http://www.baidu.com">百度</a>2. Enlaces internos: Para enlaces entre páginas web, solo escriba la ruta relativa
Primero, crea un test.html en el mismo directorio, y luego estamos escribiendo un archivo html. En este archivo, puedes saltar a la página de prueba a través de este código.
<a href="test.html">跳转到test页面</a>
3. Enlace de descarga: cuando la ruta correspondiente a href es un archivo, el navegador ejecutará la tarea de descarga
<a href="test.zip">下载文件</a>4. Enlace vacío: use # para colocar el espacio
<a href="#">空链接</a>En este caso, hacemos clic en el texto del enlace vacío en la página y no saltaremos
5. Enlaces a elementos de la página web: Podemos añadir enlaces a cualquier elemento de la página web
<!-- 这是给一个图片添加链接 -->
<!-- 点击图片之后就会跳转到搜狗主页 -->
<a href="http://www.sogou.com">
<img src="dog.png">
</a>6 Enlace de anclaje: a través de este, puede saltar a la ubicación de la página web, similar a hacer clic en el directorio, saltando al párrafo correspondiente
El siguiente es un ejemplo de código, solo para demostrar el método básico utilizado
<a href="#one">第一段</a>
<a href="#tow">第二段</a>
<a href="#three">第三段</a>
<!-- 这是第一段 -->
<p id="one">
...
</p>
<!-- 这是第二段 -->
<p id="two">
...
</p>
<!-- 这是第三段 -->
<p id="three">
...
</p>7. Prohibición de salto de enlaces: Cuando no queremos que el enlace salte, basta con configurar su atributo href en javascript:void(0) o javascript :;
3.7 Etiquetas de lista
1. Lista desordenada: ul y li
ejemplo de código
<ul>
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙悟净</li>
</ul>El efecto es el siguiente
2. Listas ordenadas: ol y li
ejemplo de código
<ol>
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙悟净</li>
</ol>El efecto es el siguiente
3. Lista personalizada dl dt (subtítulo) y dd
ejemplo de código
<dl>
<dt>西游记四人组</dt>
<dd>唐僧</dd>
<dd>孙悟空</dd>
<dd>猪八戒</dd>
<dd>沙悟净</dd>
</dl>El efecto es el siguiente
4. Precauciones
- Las etiquetas en cada lista están en una relación paralela
- Solo las etiquetas li se pueden colocar en etiquetas ul / ol, y solo las etiquetas dt y dd se pueden colocar en etiquetas dl
- Si desea anidar diferentes listas, puede colocar otras etiquetas en la etiqueta li
Cuatro ejercicios completos.
Después de aprender el uso de estas etiquetas básicas arriba, podemos escribir algunas páginas web básicas. Aquí hay un currículum de página web simple.
Efecto de página esperado
el código se muestra a continuación
Recordatorio, puede encontrar una imagen en Internet usted mismo, descargarla en el mismo directorio que el archivo html y luego modificar el nombre de la ruta de la imagen en el código para mostrar la imagen correctamente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的简历</title>
</head>
<body>
<h2>某某某</h2>
<div>
<!-- 基本信息 -->
<div>
<h3>基本信息</h3>
<!-- 这里填写正确的图片路径 -->
<img src="dog.png" alt="个人图片" title="某某某" height="300px" height="150px">
</div>
<div>
<p>求职意向: Java开发工程师</p>
</div>
<div>
<p>联系电话: XXX-XXX-XXXX</p>
</div>
<div>
<p>邮箱: [email protected]</p>
</div>
<div>
<!-- 这里可以填写你的gitee地址 -->
<p><a href="#" target="_blank">我的 gitee</a></p>
</div>
<div>
<!-- 这里可以填写你的博客地址 -->
<p><a href="#" target="_blank">我的 博客</a></p>
</div>
</div>
<!-- 教育背景 -->
<div>
<h3>教育背景</h3>
<ol>
<li>1990 - 1996 小葵花幼儿园 幼儿园</li>
<li>1996 - 2002 小葵花小学 小学</li>
<li>2002 - 2005 小葵花中学 中学</li>
<li>2005 - 2008 小葵花中学 高中</li>
<li>2008 - 2012 小葵花大学 计算机专业 本科</li>
</ol>
</div>
<!-- 专业技能 -->
<div>
<h3>专业技能</h3>
<ul>
<li>Java基础语法扎实, 已经刷了800道Leetcode题</li>
<li>常见数据结构都可以独立实现并熟练运用</li>
<li>熟知计算机网络理论, 并且可以独立排查常见问题</li>
<li>掌握Web开发能力, 并且独立开发了学校的留言墙功能</li>
</ul>
</div>
<!-- 我的项目 -->
<div>
<h3>我的项目</h3>
<ol>
<li>
<h3>留言墙</h3>
<p>开发时间: 2008年9月->2008年12月</p>
<p>功能介绍:
<ul>
<li>支持留言发布</li>
<li>支持匿名留言</li>
</ul>
</p>
</li>
<li>
<h3>学习小助手</h3>
<p>开发时间: 2008年9月->2008年12月</p>
<p>功能介绍:
<ul>
<li>支持错题检索</li>
<li>支持同学探讨</li>
</ul>
</p>
</li>
</ol>
</div>
<!-- 个人评价 -->
<div>
<h3>个人评价</h3>
<p>在校期间，学习成绩优良，多次获得奖学金</p>
</div>
</body>
</html>Resumir
Aquí está el conocimiento relativamente básico en html, que es muy interesante y útil, y espero que pueda tener una buena influencia en todos los lectores.
No es fácil de hacer, si este blog es útil para ti, dale me gusta, marca + sigue y apoya una ola de editores, ¡gracias!