Esta sección aprende los elementos de la lista en HTML. El formulario de lista representa una proporción relativamente grande del diseño del sitio web, y la información de la pantalla es muy ordenada e intuitiva, lo cual es fácil de entender para los usuarios. El papel avanzado de los elementos de la lista se utilizará ampliamente en el posterior aprendizaje de estilo CSS.
Listas para organizar datosDespués de aprender tantas etiquetas HTML que controlan la visualización de páginas web, los lectores pueden inicialmente crear páginas de artículos puros. Esta sección aprende los elementos de la lista en HTML. El formulario de lista representa una proporción relativamente grande del diseño del sitio web, y la información de la pantalla es muy ordenada e intuitiva, lo cual es fácil de entender para los usuarios. El papel avanzado de los elementos de la lista se utilizará ampliamente en el posterior aprendizaje de estilo CSS.
4.4.1 Composición estructural de la listaEl elemento de lista de HTML es una estructura encerrada por una etiqueta de lista, y los elementos de la lista contenidos están compuestos de <li> </li>. La estructura específica se muestra en la Figura 4.17.
4.4.2 Hacer una lista desordenadaComo su nombre indica, una lista desordenada es un formulario de lista en el que los elementos de la lista en la estructura de la lista no tienen pedido. La mayoría de las aplicaciones web utilizan listas desordenadas, y sus etiquetas de lista son <ul> </ul>. El método de escritura es el siguiente:
<ul>
<li> Lista del elemento 1 </li>
<li> Lista del elemento 2 </li>
<li> Lista del elemento 3 </li>
<li> Lista del elemento 4 </li>
<li> Lista del elemento 5 </li>
</ul>
4.4.3 Haga una lista ordenadaComo su nombre indica, una lista ordenada significa que los elementos de la lista en la estructura de la lista tienen una secuencia de listas. De arriba a abajo, puede haber varios números de secuencia, como 1, 2, 3 o A, B, C, etc., cree un archivo de página web en el directorio D:/ web/, llamado UL_OL.HTM, y escriba el código como se muestra en el código 4.17.
Código 4.17 Configuración de la lista: UL_OL.HTM
<html>
<Evista>
<title> Configuración de la lista </title>
</ablo>
<Body>
<tamaño de fuente = 5>
Tecnología de recepción web
<ul>
<li> html </li>
<li> CSS </li>
<li> JavaScript </li>
<li> flash </li>
</ul>
Aprendizaje de antecedentes web
<Ol>
<li> ASP </li>
<li> ASP.NET </li>
<li> php </li>
<li> CGI </li>
<li> Ruby </li>
<li> Python </li>
</ol>
</font>
</body>
</html>
Ingrese http: //localhost/ul_ol.htm en la barra de direcciones del navegador, y el efecto de navegación se muestra en la Figura 4.18.
Figura 4.18 Configuración de la lista