Directorio de artículos
1. ¿Qué es HTML?
HTML es una especie de HTML 超文本标记语言, ¿cómo entenderlo?
Hipertexto : se refiere a texto, sonido, imágenes, tablas, enlaces, etc.
Etiquetas : Para mostrar el contenido en hipertexto de una página, se realiza a través de etiquetas, estas etiquetas son etiquetas una por una.
¡La página HTML se ejecuta en el navegador!
2. Creación de herramientas de desarrollo vscode
vscode es una herramienta de desarrollo muy utilizada en las empresas cuando se desarrollan front-end. Echemos un vistazo a los complementos que necesita descargar para usarlo en el desarrollo de front-end.
- Etiqueta de cambio de nombre automático
- ver en el navegador
- Servidor en vivo
Cómo vscode genera rápidamente un marco de código:
3. Escribir la primera página HTML
Primero podemos usar el Bloc de notas normal para escribir un código HTML simple.
A continuación cambiamos el sufijo del archivo de texto a html y hacemos doble clic para ejecutarlo.
Cada etiqueta es equivalente a un objeto. Los programadores pueden obtener estos objetos a través del código. Después de obtenerlos, pueden agregarlos, eliminarlos, verificarlos y modificarlos.
4. Etiquetas comunes
1. Comentarios|Título|Párrafo|Etiquetas de salto de línea
- etiqueta de anotación
<!-- 注释内容 -->
En vscode solo debemos seleccionar el contenido que queremos anotar y presionar en el teclado ctrl + /.
- etiqueta de título
<h1>这是h1标题</h1>
<h2>这是h2标题</h2>
<h3>这是h3标题</h3>
<h4>这是h4标题</h4>
<h5>这是h5标题</h5>
<h6>这是h6标题</h6>
Hay seis etiquetas de título, desde h1 - h6, cuanto mayor sea el número, más pequeña será la fuente
- etiquetas de párrafo
<p>段落内容</p>
- etiqueta de nueva línea
<br> 或者 <br/>
Aquí debemos prestar atención a algunos puntos:
- br es la abreviatura de break, que significa salto de línea.
- br es una etiqueta única (no se requiere etiqueta de cierre)
- La etiqueta br no tiene un espacio tan grande como la etiqueta p.
<br/>Esta es la forma estándar de escribir, no se recomienda escribir<br>
2. Dar formato a las etiquetas
加粗: etiqueta fuerte y etiqueta b倾斜: ellos etiquetan y yo etiquetan删除线: etiqueta del y etiqueta s下划线: etiqueta ins y etiqueta u
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
3. Etiqueta de imagen: img
imgLa función de la etiqueta es incrustar imágenes en páginas web, la etiqueta debe tener srcun atributo que indique la ruta de la imagen. El atributo src tiene dos métodos de representación: ruta absoluta y ruta relativa :
Ruta relativa: ./xxx.png , ./img/xxx.pngo../xxx.png
Camino absoluto:图片路径 o网络上的图片资源
Otros atributos de la etiqueta img
alt: Texto de reemplazo. Cuando el texto no se puede mostrar correctamente, se mostrará un texto de reemplazo.
title: Texto de aviso. Cuando se coloca el mouse sobre la imagen, aparecerá un aviso.
width/height: Controla el ancho y el alto. Generalmente, solo necesitas cambiar uno de los valores de alto y ancho, y el otro se escalará proporcionalmente. De lo contrario, la imagen quedará desequilibrada.
border: Borde, el parámetro es el ancho en píxeles, pero generalmente se establece usando CSS,
es obvio que la imagen tiene un borde negro.
Aquí debemos prestar atención a algunos puntos:
- Puede haber varios atributos y no se pueden escribir antes de la etiqueta.
- Separe los atributos con espacios, que pueden ser varios espacios o nuevas líneas.
- Las propiedades no están en ningún orden particular.
- Los atributos se representan en el formato de "pares clave-valor".
4. Etiqueta de hipervínculo: a
1. href: Debe tener, indicando a qué página saltará después de hacer clic
- Enlaces externos: href se refiere a la dirección de otros sitios web
<a href="http://www.baidu.com">百度</a>
-
Enlaces internos: enlaces entre páginas internas del sitio web. Simplemente escriba una ruta relativa.
Por supuesto, si solo desea insertar un hipervínculo, pero su función es actualizar esta página, puede utilizar el siguiente método.
-
Los hipervínculos también funcionan
以图片的方式插入:
<a href="https://www.baidu.com/">
<img src="./百度logo图标.png" width="100px", height="100px">
</a>
Cuando hacemos clic en esta imagen, podemos ir a la página de inicio del sitio web oficial de Baidu.
2. target属性: Especifique dónde abrir el documento vinculado
El método de apertura predeterminado del objetivo es _self. Si está _en blanco, se abrirá en una página nueva.
Para el hipervínculo anterior, no configuramos el atributo de destino. Cuando hacemos clic en él, se abrirá una nueva página en la página actual de forma predeterminada. Cuando configuramos el atributo de destino _selfen , el hipervínculo se abrirá en la página actual de forma predeterminada. _blankCuando configuramos el atributo de destino en , se abrirá un hipervínculo en una página nueva.
<a href="https://www.baidu.com/" target="_blank">
<img src="./百度logo图标.png" width="100px", height="100px">
</a>
5. Tabla de etiquetas de mesa
table标签: representa toda la tablatr标签: representa una fila de la tablatd标签: representa una celdath标签: Representa la celda del encabezado. Estará centrada y en negrita.thead标签: Área de encabezado de la tabla (tenga en cuenta que es diferente de th, el rango es mayor que th)tbody标签: La tabla obtiene el área del cuerpo.
la tabla contiene tr , tr 包含 td 或者 th.
Las etiquetas de las tablas tienen algunos atributos que se pueden usar para establecer bordes de tamaño, etc. Pero generalmente se CSSconfiguran mediante el método.
<table border="1" width="500" height="300" cellspacing="0" cellpadding="50" align="center">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>3</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>4</td>
</tr>
<tr>
<td>王五</td>
<td>女</td>
<td>5</td>
</tr>
</table>
En términos generales, el encabezado de la tabla tendrá un formato y el área principal de la tabla tendrá otro formato. Ahí es cuando thead标签y tbody标签resulta útil.
- Se muestra el contenido dentro del hilo
居中+加粗.
- Fusión de celdas
6. Listar etiquetas ul, ol, dl
- Lista desordenada [importante]
ul li- Lista ordenada [no se usa mucho]
ol li- La lista personalizada [Importante]
dl (总标签) dt (小标题) dd (围绕标题来说明)tiene un subtítulo en la parte superior y hay varios debajo que giran en torno al título.
lista desordenadaul li
Formato básico:
<ul>
<li>这是内容一</li>
<li>这是内容二</li>
<li>这是内容三</li>
</ul>
ulLos atributos de la etiqueta typese pueden modificar, por defecto es un punto sólido. Podemos controlarlo para cambiar a otros estilos.
disccirculo llenosquarecuadrado pequeño sólidocirclecirculo hueco
lista ordenadaol li
<ol>
<li>这是有序列表1</li>
<li>这是有序列表2</li>
<li>这是有序列表3</li>
<li>这是有序列表4</li>
</ol>
De manera similar, olla etiqueta tiene typeatributos y startpropiedades, el atributo de tipo es el mismo que la lista desordenada, mostrando el estilo del número de serie a la izquierda, el atributo de inicio determina el número desde el cual comienza la lista.
typeLas propiedades se establecen de la siguiente manera:
- a representa un número de letra minúscula en inglés
- A representa el número de letra mayúscula en inglés.
- i representa un número romano en minúscula
- I representa el número romano en mayúscula
- 1 representa un número numérico (predeterminado)
lista personalizadadl (总标签) dt (小标题) dd (围绕标题来说明)
<h1>这是自定义列表</h1>
<dl>
<dt> 自定义列表显示内容
<dd>自定义列表内容1</dd>
<dd>自定义列表内容2</dd>
<dd>自定义列表内容3</dd>
</dt>
</dl>
7. Formulario de etiquetas de formulario, entrada
Los formularios son una forma importante para que los usuarios ingresen información y se dividen en dos partes:
表单域: El área que contiene los elementos del formulario. El punto esformaEtiqueta.表单控件: Cuadro de entrada, botón de enviar, etc. El punto clave esaporteEtiqueta
formEtiqueta
<form action="test.html">
... [form 的内容]
</form>
El formulario describe cómo enviar los datos a qué página. El formulario debe comprenderse mejor en combinación con 服务器& , que se estudiará en detalle más adelante.网络编程
inputEtiqueta
Varios controles de entrada, cuadros de texto de una sola línea, botones, cuadros de opción, casillas de verificación, los siguientes son algunos de los atributos de la etiqueta de entrada:
type(debe tener), hay muchos tipos de valores,botón, casilla de verificación, texto, archivo, imagen, contraseña, radioesperar.name: Asigne un nombre a la entrada. Especialmente para los botones de opción, solo se puede seleccionar uno con el mismo nombre.value:Valor predeterminado en la entrada.checked: Seleccionado de forma predeterminada (para botones de opción y botones de selección múltiple)maxlength: establece la longitud máxima.
- caja de texto
<input type="text">
- cuadro de contraseña
<input type="password">
Cuando ingresamos la contraseña en el cuadro de contraseña, se muestra un estado cifrado.
- Caja individual
性别:
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
El atributo aquí typeindica que es un botón de opción. nameConfigurar el atributo en la misma cadena garantiza que solo se pueda seleccionar uno. checkedLa opción en la que esté configurado el atributo se seleccionará de forma predeterminada.
- caja
爱好:
<input type="checkbox"> 吃饭
<input type="checkbox"> 睡觉
<input type="checkbox">打游戏
- botón normal
<input type="button" value="我是个按钮">
No hay respuesta después de presionar este botón, esto se debe a que es necesario usarlo en conjunto JS(nos centraremos en ello más adelante), demostrémoslo primero:
<input type="button" value="我是个按钮" onclick="alert('hello')">
- Botón Enviar, botón Borrar y botón Seleccionar archivo
提交按钮Debe colocarse dentro de la etiqueta del formulario, tras hacer clic intentará enviarlo al servidor.
<input type="submit">
清空按钮Debe colocarse en el formulario. Al hacer clic se restablecerá todo el contenido ingresado por el usuario en el formulario.
<input type="reset">
选择文件按钮
<input type="file">
Demostremos con un ejemplo:
<form action="https://www.baidu.com/">
课程<input type="text" name="course">
<input type="submit">
<input type="reset">
<input type="file">
</form>
- La etiqueta de etiqueta
se utiliza con la entrada. Al hacer clic en la etiqueta también se puede seleccionar la casilla de verificación/radio correspondiente, lo que puede mejorar la experiencia del usuario.forAtributo: Especifica a qué etiqueta de entrada corresponde la etiquetaidactual (es útil hacer clic en este momento).
<label for="name">姓名</label>
<input type="text" id="name">
- Seleccionar etiqueta - menú desplegable
La etiqueta de selección se utiliza para crear un menú desplegable.selectLas etiquetas generalmente seoptionusan con etiquetas,optionque muestran las opciones entre las que puede elegir. El primer elemento está seleccionado de forma predeterminada. Por supuesto,Seleccionado="seleccionado" definido en la opción significa seleccionado de forma predeterminada. La etiqueta de selección tiene atributossizeymultiple. Si se define en la etiqueta de selecciónmultiple = "multiple", el menú desplegable tiene la función de selecciones múltiples. El método es mantener presionada la tecla Ctrl para seleccionar varias veces. El atributo de tamaño especifica la cantidad de opciones visibles en el menú desplegable.
<select name="" id="">
<option>北京</option>
<option selected="select">上海</option>
<option>广州</option>
<option>深圳</option>
</select>
- etiqueta textarea - área de texto
El contenido del área de texto es el contenido predeterminado. Tenga en cuenta que los espacios también tendrán un impacto. filas representa la cantidad de filas que se pueden acomodar en el campo de texto y cols representa la cantidad de columnas que se pueden acomodar en el campo de texto.
<textarea rows="20" cols="50">
Redis入门到实战
</textarea>
8. Etiquetas sin semántica div & span
Semántica significa que no hay un uso fijo, puedes hacer cualquier cosa con esta etiqueta. divTag, la abreviatura de división, significa división. spanEtiqueta, significa lapso. Solo dos cuadros Se utiliza para el diseño de páginas web .
divOcupa su propia fila y es una caja grande.spanNo ocupa una línea, es un cuadro pequeño.
<div>
<div>
<span>吃饭</span>
<span>睡觉</span>
<span>玩游戏</span>
<span>运动</span>
</div>
<div>吃饭</div>
<div>睡觉</div>
<div>玩游戏</div>
<div>运动</div>
</div>
5. Casos prácticos
1. Visualización de currículum personal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>陈某某</h1>
<div>
<h2>基本信息</h2>
<img src="./图片.png" alt="" width="300" height="200">
<span><p>求职意向: Java后端开发</p></span>
<span><p>联系方式: xxx-xxxx-xxxx</p></span>
<span><p>个人邮箱: [email protected]</p></span>
<span><p><a href="https://gitee.com/">我的Gitee</a></p></span>
<span><p><a href="https://www.csdn.net/">我的博客</a></p></span>
</div>
<div>
<h2>教育经历</h2>
<ol>
<li>xxxx年-xxxx年, 幼儿园</li>
<li>xxxx年-xxxx年, 小学</li>
<li>xxxx年-xxxx年, 初中</li>
<li>xxxx年-xxxx年, 高中</li>
<li>xxxx年-xxxx年, 大学</li>
</ol>
</div>
<div>
<h2>专业技能</h2>
<ul>
<li>Java基础语法扎实,已经刷了800道力扣</li>
<li>常见的数据结构可以独立实现并熟练应用</li>
<li>熟知计算机网络理论,并且可以独立排查常见问题</li>
<li>掌握Web开发能力,并且独立的开发了学校的留言墙功能</li>
</ul>
</div>
<div>
<h2>个人项目</h2>
<ol>
<h3><li>留言墙</li></h3>
<p>开发时间:2023年4月1日~2023年4月28日</p>
<p>功能介绍</p>
<ul>
<li>支持留言发布</li>
<li>支持匿名留言</li>
</ul>
<h3><li>学习小助手</li></h3>
<p>开发时间:2008年9月到2008年12月</p>
<p>功能介绍</p>
<ul>
<li>支持错题检索</li>
<li>支持同学探讨</li>
</ul>
</ol>
</div>
<div>
<h2>个人评价</h2>
<p>热爱生活,热爱编程</p>
</div>
</body>
</html>
El efecto es el siguiente:
2. Reanudar la página de llenado
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<thead><h3>请填写简历信息</h3></thead>
<tr>
<td>
<label for="name">姓名</label>
</td>
<td>
<input type="text" id="name">
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" checked="checked" id="male">
<label for="male">
<img src="./male.png" alt="" width="25" height="25">男
</label>
<input type="radio" name="sex" id="female">
<label for="female">
<img src="./female.png" alt="" width="25" height="25">女
</label>
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<select name="" id="">
<option value="">--请选择年份--</option>
<option value="">2000</option>
<option value="">2001</option>
<option value="">2002</option>
<option value="">2003</option>
<option value="">2004</option>
<option value="">2005</option>
<option value="">2006</option>
<option value="">2007</option>
<option value="">2008</option>
<option value="">2009</option>
<option value="">2010</option>
</select>
<select name="" id="">
<option value="">--请选择月份--</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
</select>
<select name="" id="">
<option value="">--请选择日期--</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="school">就读学校</label>
</td>
<td>
<input type="text" id="school">
</td>
</tr>
<tr>
<td>应聘岗位</td>
<td>
<input type="checkbox" id="fe">
<label for="fe">前端开发</label>
<input type="checkbox" id="server">
<label for="server">后端开发</label>
<input type="checkbox" id="test">
<label for="test">测试开发</label>
<input type="checkbox" id="yunwei">
<label for="yunwei">运维开发</label>
</td>
</tr>
<tr>
<td>掌握的技能</td>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td>项目经历</td>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" id="read">
<label for="read">我已仔细阅读公司的招聘要求</label>
</td>
</tr>
<tr>
<td></td>
<td><a href="#">查看我的状态</a></td>
</tr>
<tr>
<td></td>
<td><h3>请应聘者确认信息</h3></td>
</tr>
<tr>
<td></td>
<td>
<ul>
<li>以上信息真实有效</li>
<li>能够尽早去公司实习</li>
<li>能接受公司的加班文化</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
El efecto es el siguiente:
Aquí hay algunos caracteres especiales más en HTML.
Algunos caracteres especiales no se pueden representar directamente en archivos html, por ejemplo
空格: 小于号: <大于号: >按位与: &
Nota: Las etiquetas HTML están representadas por < >. Por lo tanto, si < > existe en el contenido, se producirá confusión.