contenido
2. Estructura básica del archivo HTML
Sin etiquetas semánticas: div & span
4. Teclas de acceso directo comunes para Emment
1. Reconoce etiquetas HTML
El código HTML se compone de "etiquetas" .
P.ej:
<body>hello</body> ilustrar:
body es el nombre de la etiqueta , que debe colocarse en < >
La mayoría de las etiquetas aparecen en pares, <body> es la etiqueta de apertura y </body> es la etiqueta de cierre
Algunas etiquetas solo tienen una etiqueta de inicio, llamada etiqueta única
El contenido entre la etiqueta de inicio y la etiqueta final es el contenido de la etiqueta, y el contenido del ejemplo es hola
Puede haber atributos en el medio de la etiqueta de inicio, y el atributo id es equivalente a establecer un identificador único para esta etiqueta.
P.ej:
<body id="b1">hello</body>2. Estructura básica del archivo HTML
<html>
<head>
<title>第一个html页面</title>
</head>
<body>
hello word
</body>
</html>ilustrar:
La etiqueta html es la etiqueta raíz (etiqueta superior) de todo el archivo html
Escriba los atributos de la página en la etiqueta principal, la etiqueta de título en el ejemplo es el título
Lo que está escrito en la etiqueta del cuerpo es el contenido que se muestra en la página.
2.1 Ejecutar un archivo HTML
Podemos elegir crear un archivo html en idea o en vscode, y usar la tecla "!+Tab" para generar rápidamente un marco de código, como se muestra a continuación:
<!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>
Explicación detallada: (solo entienda, no es necesario hacer una investigación demasiado profunda)
· <!DOCTYPE html> se llama DTD (Tipo de definición de documento), y describe que el archivo actual es un archivo HTML5
· <html lang="en"> donde el atributo long indica que la página actual es una "página en inglés"
· <meta charset="UTF-8"> describe el método de codificación de los caracteres de la página. Sin esta línea, puede causar caracteres chinos ilegibles
· <meta name="viewport" content="width=device-width, initial-scale=1.0">, donde viewport se refiere al área de la pantalla del dispositivo que se puede utilizar para mostrar nuestra página web, y esta última está en la configuración disponible La ventana gráfica tiene el mismo ancho que el ancho del dispositivo, y la escala inicial está configurada para no escalar.
Podemos escribir el contenido en el cuerpo y luego ejecutarlo.Yo uso VScode aquí, haga clic derecho directamente, como se muestra en la figura:
resultado de la operación:
2.2 Jerarquía de etiquetas
· Relación padre-hijo · Relación entre hermanos
<html>
<head>
<title>第一个html页面</title>
</head>
<body>
hello word
</body>
</html>ilustrar:
head, body es una subetiqueta de html
title es la etiqueta secundaria de head, head es la etiqueta principal de title
cabeza, cuerpo son etiquetas de hermanos
3. Etiquetas HTML comunes
Etiqueta de anotación
Los comentarios no se muestran en la interfaz, el propósito es mejorar la legibilidad del código.
<!-- 注释 -->Teclas de acceso directo: ctrl + / puede comentar y descomentar rápidamente
Etiquetas de título: h1-h6
Hay 6, de h1-h6, cuanto mayor sea el número, menor será la fuente
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
Etiquetas de párrafo: p
<p>床前明月光</p>
<p>疑是地上霜</p>
Aviso:
Hay un espacio entre las etiquetas p
El párrafo descrito por la etiqueta p actual no está sangrado (se aprenderá más adelante cuando aprenda css)
Saltos de línea al principio y al final del contenido html, los espacios no son válidos
Los espacios múltiples ingresados entre el texto en html solo equivalen a un espacio
Ingresar una nueva línea directamente en html no se ajustará, pero es equivalente a un espacio
etiqueta de nueva línea: br
br es una sola etiqueta
<br/> es la forma estándar de escritura, no se recomienda escribirlo como <br>
举头望明月
<br/>
低头思故乡
etiquetas de formato
Negrita: etiquetas fuertes, etiquetas b
Inclinación: etiquetas em, etiquetas i
Tachado: etiqueta del, etiqueta s
· Guión bajo: etiqueta ins, etiqueta u
<strong>strong加粗</strong>
<b>b加粗</b>
<em>em倾斜</em>
<i>i倾斜</i>
<del>del删除线</del>
<s>s删除线</s>
<ins>ins下划线</ins>
<u>u下划线</u>
También se pueden lograr efectos similares usando css.En el desarrollo real, css es el método principal.
Etiqueta de imagen: img
La etiqueta img debe tener el atributo src, indicando la ruta de la imagen
<img src="xxx.jpg">En este punto , el archivo de imagen xxx.jpg debe colocarse en el directorio del mismo nivel en html
Otros atributos de la etiqueta img:
alt: reemplaza el texto, cuando la imagen no se puede mostrar correctamente, se mostrará un texto alternativo
· título: texto de indicación, cuando se coloca el mouse sobre la imagen, habrá una indicación
Ancho/alto: controle el ancho y el alto. Generalmente , puede cambiar uno de los dos, el alto y el ancho, y el otro se escalará proporcionalmente.
borde: borde, el parámetro es el ancho en píxeles, generalmente se establece con css'
P.ej:
<img src="tiger.jpg" title="老虎" width="500px" border="5px">Aviso:
Espacio entre varias propiedades
propiedades sin ningún orden en particular
Las propiedades se representan utilizando el formato de pares clave-valor
Etiqueta de hipervínculo: a
href: debe tener, que indica a qué página saltará después de hacer clic
objetivo: método abierto, el valor predeterminado es _self , _blank se abrirá en una nueva pestaña
ejemplo:
<a href="http://www.baidu.com">百度</a>
Haga clic para ir a la página de Baidu
· Enlace vacío: use # para colocar el lugar en href
<a href="#">空连接</a>· Enlace de descarga: La ruta correspondiente a href es un archivo (puedes usar un archivo zip)
<a href="test.zip">下载文件</a>· Enlaces a elementos de páginas web: puede agregar enlaces a cualquier elemento, como imágenes
<a href="http://www.baidu.com"><img src="tiger.jpg"></a>· Enlaces de anclaje: puede ubicar rápidamente una ubicación en la página
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
111<br>
222
</p>
<p id="two">
333<br>
444
</p>
<p id="three">
555<br>
666
</p>Prohibir un salto de etiqueta: <a href="javascript:void(0);"> o <a href="javascript:;">
pestaña de la tabla
etiqueta de la tabla: indica la tabla completa
tr: representa una fila b de la tabla
td: representa una celda
th: Indica la celda de encabezado, que estará centrada y en negrita
hilo: el área de la cabeza de la tabla (tenga en cuenta que se distingue de th, el rango es más grande que th)
tboday: la zona del cuerpo de la mesa
la tabla contiene tr, tr contiene td o th
La etiqueta de la tabla tiene algunas propiedades que se pueden usar para establecer bordes de tamaño, etc. Estas propiedades deben colocarse en la etiqueta de la tabla .
alinear: la alineación de la tabla en relación con los elementos circundantes (no la alineación de los elementos internos)
borde: indica un borde, 1 indica un borde (cuanto mayor sea el número, más grueso será el borde), " " indica que no hay borde
cellpadding: la distancia entre el contenido y el borde, el valor predeterminado es 1 píxel
espacio entre celdas : la distancia entre celdas, por defecto es de 2 píxeles
ancho/alto: establecer el tamaño
ejemplo:
<table align="center" border="1" cellpadding="20" cellspacing="0"
width="500px" heigth="500px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>小兰</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>女</td>
<td>19</td>
</tr>
</table>
etiqueta de lista
Se utiliza principalmente para el diseño
· Lista desordenada: ul , li
· Listas ordenadas: ol , li
· Lista personalizada, dl (etiqueta total), dt (subtítulo), dd (para describir alrededor del título)
Aviso:
Los elementos se yuxtaponen
En las etiquetas ul y ol, solo se pueden colocar etiquetas li, y en las etiquetas dl, solo se pueden colocar dt, dd
Se pueden colocar otras etiquetas en li
Ejemplo:
<h3>无序列表</h3>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>小学</li>
<li>中学</li>
<li>大学</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>蔬菜：</dt>
<dd>豆腐</dd>
<dd>菠菜</dd>
<dd>西红柿</dd>
</dl>
etiqueta de formulario
Los formularios son una forma importante para que los usuarios ingresen información
Dividido en dos partes:
Campo de formulario: el área que contiene los elementos del formulario, con énfasis en la etiqueta del formulario
Controles de formulario: cuadros de entrada, botones de envío, enfoque en la etiqueta de entrada
etiqueta de formulario
<form action="test.html">
...[form的内容]
</form>Describe a qué formato enviar los datos y qué página enviar. El formulario debe entenderse mejor en combinación con la programación del servidor y la red.
etiqueta de entrada
Varios controles de entrada, cuadros de texto de una sola línea, botones de radio, casillas de verificación
· tipo, tipo de valor: botón, casilla de verificación, texto, archivo, imagen, contraseña, contraseña, radio , etc.
nombre: Asigne un nombre a la entrada. Para los botones de radio, solo se puede seleccionar uno con el mismo nombre
valor: el valor predeterminado en la entrada
marcado: marcado de forma predeterminada (para botones de radio, botones de selección múltiple)
maxlength: establecer la longitud máxima
1. Cuadro de texto
<input type="text">
2. Cuadro de contraseña
<input type="password">
3. Botones de opción
<input type="radio" name="aaa">男
<input type="radio" name="aaa">女
4. Casilla de verificación
<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">打球
<input type="checkbox">跑步
5. Botón normal
<input type="button" value="按钮">
6. Botón Enviar
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
7. Botón Borrar
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>
Descripción: al ingresar contenido en el cuadro de texto, haga clic en Borrar para borrar el contenido ingresado en el cuadro de texto
8. Seleccionar archivo
<input type="file">
Descripción: Haga clic para seleccionar un archivo para seleccionar un archivo del local
etiqueta de etiqueta
Usado con la entrada, al hacer clic en la etiqueta también se puede seleccionar la casilla de radio/verificación correspondiente, lo que puede mejorar la experiencia del usuario
· para atributo: especifique qué etiqueta de entrada con la misma identificación corresponde a la etiqueta actual
<label for="aaa">男</label>
<input id="aaa" type="radio" name="sex">
<label for="bbb">女</label>
<input id="bbb" type="radio" name="sex">
Descripción: Al hacer clic en los caracteres chinos aquí también se puede seleccionar , la etiqueta de la etiqueta se utiliza para lograr esta función
seleccionar etiqueta
Menú desplegable
La definición de seleccionado = "seleccionado" en la opción significa que está seleccionado de forma predeterminada
<select>
<option>---请选择从哪里来---</option>
<option>北京</option>
<option selected="selected">上海</option>
<option>厦门</option>
</select>
etiqueta de área de texto
<textarea rows="3" cols="50">
众鸟高飞尽
孤云独去闲
相看两不厌
</textarea>
Nota: El contenido del campo de texto es el contenido predeterminado, tenga en cuenta que los espacios también afectarán
filas y columnas representan filas y columnas
Sin etiquetas semánticas: div & span
para diseño web
La etiqueta div , en su propia línea, es una caja grande
La etiqueta de intervalo , no en una sola línea, es un pequeño cuadro
<div>
<span>猴哥</span>
<span>八戒</span>
<span>沙僧</span>
</div>
<div>
<span>汽车</span>
<span>火车</span>
<span>地铁</span>
</div>
<div>
<span>语文</span>
<span>数学</span>
<span>英语</span>
</div>
4. Teclas de acceso directo comunes para Emment
· Pestaña de entrada de acceso directo: input[tab]
· Ingrese rápidamente múltiples etiquetas: div3[tab]
· Pestaña con id: div#sex[tab]
· Pestaña con nombre de clase: div.sex[tab]
· Subelemento tabulador: ul>li*3[tabulador]
· Etiqueta con elementos hermanos: span+span
· Etiqueta con contenido: div{hello}
· Etiqueta con contenido con número: div{$.hello}
5. Caracteres especiales HTML
Algunos caracteres especiales no se pueden representar directamente en archivos html, por ejemplo:
Espacio:
Signo menor que: <
Signo mayor que: >
Bit a bit Y: &
<div> </div>
<div><</div>
<div>></div>
<div>&</div>
6. Resumen
HTML simplemente describe la estructura básica de la página
Use css para embellecer aún más la página