Antes de explicar este curso: echemos un vistazo a lo que es un navegador:
El llamado navegador es una herramienta que puede interpretar y ejecutar el código HTML. ¡Hay otro concepto que debemos descubrir, navegador! = Es decir, es decir, es solo uno de los navegadores. Además de IE, hay muchos navegadores, puedes saberlo de Google. No entraremos en detalles.
Primero, comprendamos qué es HTML
Que es htmlEl nombre completo de HTML: Lenguaje de margen de texto Hyper Text (lenguaje de marcado de Hyper Text). Es el texto el que describe la apariencia de la página web y el contenido de la página web. La razón por la cual HTML puede mostrar varios efectos es la función del navegador.
Contenido complementario: aquí ampliaremos algún contenido, que es el mismo texto HTML, y el efecto puede ser diferente sin el navegador. Esto se debe a que primero aparecen múltiples navegadores, y luego están disponibles los estándares correspondientes. Dada esta situación, podemos usar Ietester para probar los problemas de compatibilidad del mismo código HTML en diferentes navegadores.
2. Páginas estáticas y páginas dinámicas
Otra cosa que debemos saber es la diferencia entre páginas estáticas y páginas dinámicas.
En primer lugar, las páginas de un sitio web se dividen en páginas estáticas y páginas dinámicas.
Página estática: todas las páginas estáticas con sufijos HTML o HTML son páginas estáticas, y hay una página HTML fija en el servidor.
Página dinámica: no hay una página en el servidor que los usuarios necesiten navegar, pero el servidor puede generar dinámicamente las páginas HTML requeridas por el cliente y luego mostrarlas al cliente.
Para resumir la diferencia entre las dos en una oración: las páginas dinámicas ejecutan el código del lado del servidor, las páginas estáticas no ejecutan el código del lado del servidor (puede aprender sobre ella primero, está bien, después de todo, las páginas estáticas son el foco de nuestra discusión hoy en día)
3. ¿Cómo escribir una página HTML?
Hay muchas herramientas para escribir HTML. Creo que todos conocen el bloc de notas, y puedes escribir páginas HTML con el bloc de notas. Por supuesto, también puede escribir con blocs de notas avanzados como EditPlus/Ultraedit, o usar herramientas como DreamWeaver.
La siguiente figura es la estructura básica de una página web HTML
De la imagen de arriba, podemos ver que todo el contenido está dentro de la etiqueta <hml> </html>; <HEAD> </HEAD> Pone la información de la cabeza, y la descripción de la página no se mostrará en la página. El título de la página se establece en <title> </title>, y <title> solo se puede colocar en <HEAD>; <Body> </body> es el cuerpo principal de la página, y el texto en esta etiqueta se mostrará en la página web. Por supuesto, todas las páginas deben contener al menos estas piezas.
Consejo: Si la etiqueta final de la etiqueta de título no está cerrada, no se mostrará la página completa.
4. Similidades y diferencias entre HTML y XML
Similidades: todos son lenguajes de marcado, se puede acceder a través de DOM y se pueden cambiar a través de CSS
Diferencias:
XML es más estricto que la sintaxis HTML: si hay una etiqueta de inicio, debe tener una etiqueta final, un caso consistente, cotizaciones dobles de atributos, etc. XML se centra en el almacenamiento de datos, mientras que HTML se centra en la pantalla de datos.5.xhtml y dhtml
XHTML: el lenguaje de marcado extensible, es un HTML que está más en línea con la especificación de sintaxis XML. La aparición de XHTML es principalmente a la transición a XML. XHTML requiere: todos los minúsculas, emparejamiento de etiquetas y atributos en citas dobles.
DHTML: La abreviatura de HTML dinámico es HTML dinámico. Combinación de html, hojas de estilo y javascript
Suplemento: los estándares web no son un estándar, sino una colección de series de estándares.
La página web consta de tres partes: estructura, rendimiento y comportamiento
Estructura: texto, imágenes y otros idiomas correspondientes: xml, xhtml
Expresión: también conocido como estilos, como el tamaño del texto y el color, etc. Estos también se logran a través de los estilos. CSS
Comportamiento: el efecto dinámico del cliente generalmente se completa a través de JavaScript. Dom, Ecmascript
A continuación, vamos al tema: aprenda etiquetas comúnmente utilizadas para HTML.
6.html etiqueta
01, HAG (Título), HTML define seis etiquetas H de <h1> </h1> a <h6> </h6>, que representan fuentes de diferentes tamaños respectivamente. H1 es el más grande y H6 es el más pequeño.
02, <br/> Solo ingrese, es la etiqueta que se cierra
03, <p> es segmentación. <p> Habrá espacios en blanco relativamente grandes antes y después, pero no habrá.
04, <Center> Center </Center> Center> Center. (No recomendado)
05, <b> a </b> Bold, recomendado. <i> b </i> cursiva. <u> c </u> subrayado. <em> Emperatriz, italic </em>
06, <font> </font> font etiqueta, <font color = "rojo" size = "7" face = "lishu"> rojo </font>
07, <hr> Propiedades comunes de las líneas horizontales: tamaño de tamaño de color (grosor) (longitud) Align = Left/Center/Right (el valor predeterminado se muestra en la reproducción)
7. Html caracteres especiales
& quot;
& & amp;
<& lt;
> & gt;
Espacio y nbsp;
© y copiar;
® & reg;
² y sup2;
¥ y yen;
³ & SUP3;
8. Extensión del formato de imagen
9. Etiqueta de imagen: <img alt = "texto de inmediato cuando no se puede mostrar">
ALT: el texto de inmediato cuando no se puede mostrar la imagen.
10. Hyperlink:
HREF señala que la página de destino se conecte, el objetivo que apunta a la ventana de destino es el valor y el valor se toma
_Blank: se abre en una nueva ventana
_elf: Abre en tu propia ventana
_Parent: Abra en la ventana principal
_TOP: significa abrir en la ventana de nivel superior
Nombre del marco: se abre en el marco especificado. (aprender)
Enlace de anclaje: 01 Establezca la posición de anclaje
<a name = showBigimg> <img src = image/02.jpg> </a>
02. Llamando al ancla
<a href =#showBigimg> Mira a las mujeres hermosas </a>
11. Lista en HTML:
Dividido en listas desordenadas, listas ordenadas y listas definidas
Veamos los diagramas de efectos de visualización de varias listas
Lista desordenada:
<ul>
<li> </li>
<li> </li>
</ul>
Lista ordenada
<Ol>
<li> </li>
<li> </li>
</ol>
Lista de definición:
<dl>
<dt> China </dt>
<dd> shanghai </dd>
<dd> Guangzhou </dd>
<dd> beijing </dd>
</dl>
El valor de tipo puede ser: 1 , a, a, i, i, disco, círculo, cuadrado.
12. Tabla: muestra datos regulares, a veces utilizados para el diseño.
Como se puede ver en la figura anterior, una tabla consiste en filas y columnas, las filas están representadas por TR y las columnas están representadas por TD. También puede usar RowsPan (Fusionar filas), Colspan (y paralelo) para fusionar las células.
Ejercicio 1: use el código HTML para generar la tabla
Ejercicio 2: filas cruzadas y columnas cruzadas de tablas
13. Forma
Acción Enviar datos a esta página de forma predeterminada
Si desea enviar datos al servidor, debe colocar elementos de formulario como <input>, <xtexarea>, <select>, etc. en el formulario. El valor del tipo de entrada es el siguiente:
El atributo marcado está preparado para botones de radio y casillas de verificación.
Los botones de radio se usan para un conjunto de valores mutuamente excluyentes, el diagrama de efectos es el siguiente
El diagrama de efecto de la casilla de verificación es el siguiente
Hay tres tipos principales de botones: botón de envío, botón de reinicio y botón normal
Cuadro de lista desplegable
gramática:
14. Cuadro de texto de múltiples líneas:
<ExteAea> Text </extAREA>, cols = "50", filas = "15" Los atributos representan el número de filas y columnas.
Uso de elementos de forma común:
Este es el final de nuestra discusión sobre HTML hoy.