En primer lugar, lo que es HTML?
htyper lenguaje de marcado de texto que es HTML
HTML es la parte principal de una página, también la base para una página web. Debido a que una página no puede tener estilo, no puede interactuar, sino que debe tener una necesidad de contenido web para ser prestados. Así que es la base de HTML porción de extremo delantero.
Hipertexto: se refiere a las páginas interiores pueden contener imágenes, enlaces y música, incluso, programas y otros elementos no textuales.
Markup Language: marca (etiqueta) constituyen el lenguaje.
Es un lenguaje de marcas utilizado para crear páginas web. Markup Language es un texto (texto) y otra información relacionada con la combinación de texto, la codificación de texto en el ordenador para mostrar la estructura del documento y los datos de los detalles del proceso. Otra información relacionada con el texto (incluyendo, por ejemplo, y la estructura de la información de texto que indica similares) en combinación con el texto original, pero usando marcado (marcado) identificado.
Página == documento HTML analizado por el navegador para la visualización
Las páginas estáticas: recursos estáticos como xxx.html
Las páginas dinámicas HTML: lenguaje de código desarrolladas por algunas generados dinámicamente de acuerdo con una solicitud del usuario
En segundo lugar, ¿cuál es la etiqueta?
HTML como un lenguaje de marcado, es para marcar el contenido web a través de una variedad de etiquetas. Aprendemos HTML es aprender las principales etiquetas HTML.
- Está compuesto por una envoltura de palabra entre paréntesis angulares, por ejemplo: <html> * todas las etiquetas no pueden comenzar con una serie de palabras.
- Las etiquetas no son mayúsculas y minúsculas. <Html> y <HTML>. Minúsculas recomienda.
- Etiqueta se divide en dos partes: la etiqueta de inicio y la sección </a> etiqueta final <a> entre las dos etiquetas que se llama el cuerpo de la etiqueta.
- Algunas etiquetas utilizan una función relativamente simple de esta etiqueta a etiqueta y la etiqueta se llama ejemplo de cierre automático: ... <br/> <hr /> <input /> <img />
- Las etiquetas pueden ser anidados, pero no cruzar anidada. <a> <b> </a> </ b>
¿Qué es la propiedad de la etiqueta?
- Por lo general, en forma de pares de valores clave Por ejemplo name = "alex".
- Propiedad sólo puede aparecer al principio o etiquetas de cierre automático y etiquetas.
- Todo nombre de atributo minúsculas. * Los valores de atributo debe ser envueltos en comillas simples o dobles, por ejemplo, name = "alex"
- Si el valor de la propiedad y los nombres de atributos exactamente la misma. Escribir directamente el nombre del atributo. Por ejemplo sólo lectura
<! DOCTYPE html> etiqueta de lo que es?
Debido a razones históricas, cada navegador hay diferencias en la prestación de la página, o incluso diferentes versiones del mismo navegador, la prestación de la página es diferente. Antes de la introducción de los estándares del W3C, no hay unificaron navegador estándar en la renderización de páginas, lo que resulta en una diferencia (modo no estándar o llama modo de compatibilidad); debido a la introducción de los estándares del W3C, el navegador de representación a la página con un estándar unificado (CSScompat o llama el modo estricto también se llama el modo de Standars), que es a la vez la diferencia más simple.
Después de la introducción de los estándares del W3C, los navegadores están empezando a adoptar las nuevas normas, pero hay un problema es cómo asegurar que la edad puede seguir navegando por la web, antes de que la norma salió, muchas páginas se escriben de acuerdo con el método de representación de edad, si los criterios utilizados para renderizado, hará que la página que se muestra correctamente. A fin de mantener la compatibilidad del navegador de representación, la página anterior se puede ver correctamente el navegador conserva los viejos métodos de representación (tales como: Microsoft Internet Explorer). De esta manera surge la prestación del navegador modo Quircks y el modo de Standars, dos tipos de métodos de representación de co-existir en un navegador.
window.top.document.compatMode: // BackCompat: peculiaridades modo, el navegador utiliza su propio modo de peculiaridades prestación analizar la página. // CSS1Compat: modo estándar, el navegador utiliza el W3C representación analítica estándar de la página.
Esta propiedad será identificar y utilizar el navegador, pero si la página no DOCTYPE declaración, entonces por defecto compatMode es BackCompat, que es el comienzo del diablo - el navegador en su propia manera de resolver la prestación de la página, a continuación, en diferentes navegadores muestra el dispositivo un estilo diferente.
Si se agrega una página <! DOCTYPE html> Por lo tanto, es equivalente al modo estándar está activado, el navegador tiene que resolver con honestidad para representar la página de acuerdo con el estándar W3C, para que sus páginas en todos los navegadores lane es una forma de mostrar el. Este es el papel <! DOCTYPE html>.
En tercer lugar, el entorno de desarrollo
Hay muchos editores de HTML para elegir, la HBUILD común, Sublime Text, Dreamweare puede ser utilizado para desarrollar HTML. Por supuesto PyCharm también apoya el desarrollo de HTML.
En cuarto lugar, la especificación de extensión de archivo
Archivo de extensión .htm o .html uso general .htm y .html páginas son de extensión estática, el archivo de paginación no es diferente distinción, página html con htm sufijo sufijo puede ser utilizado de manera intercambiable, no hay impacto en la web, así como no hace ninguna diferencia. Htm html y se puede considerar no es diferente, con la única diferencia de que es algo más que un poco de "L".
Para el entorno de desarrollo no introducimos adicional, ah, entramos oficialmente aprender las etiquetas HTML de TI. ps: los estudiantes! Si quieres conocer a los estudiantes a lo largo de todas las etiquetas ¿Cuáles son algunos de los front-end, entonces se puede abrir una página de inicio Baidu, F12, o haga clic en la inspección, se encuentra, como:
Cinco, estructura de documento HTML
En esta sección se aprende la estructura de archivos HTML: un archivo HTML tienen su propia estructura fija.
<! DOCTYPE HTML>
<Html>
<Head> ... </ head>
<Body> ... </ body>
</ Html>
El código anterior se explica como sigue:
En primer lugar, <!DOCTYPE HTML>es la declaración de documento debe ser escrito en la primera línea del documento HTML, que se encuentra antes de la etiqueta, lo que indica que el documento es un documento HTML 5.<html>
<html></html>Conocida como la etiqueta raíz, etiquetar todas las páginas están en.<html></html><head></head>Etiqueta se utiliza para definir la cabeza del documento, se trata de un contenedor para todos los elementos del cabezal. Hay elementos comunes de la cabeza , , , y otras etiquetas, cabeza etiqueta se describe en detalle en la siguiente sección.<title><script><style><link><meta>- En y contenido entre las etiquetas es el contenido principal de la página, como , , , y otra etiqueta de contenido web, en el contenido de la etiqueta (Figura parte de color verde claro) con el tiempo se pueden mostrar en el navegador.
<body></body><h1><p><a><img><body>
documentos HTML contienen etiquetas HTML y el contenido del texto, diferentes etiquetas en el navegador mostrará resultados diferentes, así que tenemos que tener en cuenta las características de la mayoría de las etiquetas comunes.
Seis, los comentarios HTML
No importa lo que la programación de lenguaje que aprender, hay que prestar atención es el comentario, el comentario de la importancia de la auto-evidente, estamos aquí sin más preámbulos, vamos a hablar de HTML en formato Notas:
<! - Aquí está el comentario del contenido ->
Nota: Los comentarios pueden ser utilizados en los saltos de línea directa. Y estamos acostumbrados a anotar la etiqueta para envolver el código HTML. Tales como:
<! - Sección XX Inicio ->
Aquí se pone HTML parte de código xx
<! - Xx porción del extremo ->
Comentarios HTML Notas:
- HTML no admite comentarios anidados
- Los comentarios no pueden escribir HTML en HTML etiquetas
Siete atributos de etiqueta, HTML
etiquetas HTML pueden establecer las propiedades, la propiedad de una manera generalmente pares de clave y valor escrito en la etiqueta de inicio. como
<Div id = " I1 " > Esta es una etiqueta div </ div> <P clase = ' P1 P2 P3 ' > tag Este es un párrafo </ p> <a href= "http://www.baidu.com"> Este es un enlace </a> <input type = ' botón ' onclick = ' añadirHacer () ' > </ input>
¿Por qué usted puede establecer las propiedades puede?
En realidad, puede ser tan simple de entender, porque al final vamos a ir a embellecer estas etiquetas a través de css, operado por el javascript, entonces estas etiquetas que se pueden ver como un objeto, el objeto debe tener sus propias propiedades y métodos. Por lo que al igual que el anterior cuando se trata de etiquetas de entrada, type = 'botón' es su propiedad, onclick = 'añadirHacer ()' es su método.
Notas sobre los atributos de las etiquetas:
. 1 .HTML etiqueta a excepción de algunas propiedades específicas pueden establecer un atributo personalizado, se puede proporcionar una pluralidad de atributos de etiquetas separadas por un espacio, la pluralidad de atributos no son orden distinguido. 2 . Valores de atributo Citado utilizan la envoltura, por lo general comillas dobles pueden ser comillas simples. 3. Los atributos y valores de atributos no son mayúsculas y minúsculas, pero se recomienda utilizar minúsculas.
Ocho, clasificaciones de la etiqueta
Tres tipos diferentes de etiquetas en los elementos HTML: elemento de bloque, la fila de elementos, la fila de elementos de bloque.
8.1 elementos de bloque comunes:
|
1
|
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
|
Características: display: block;
- Cada elemento en bloque se inicia una nueva línea, y los elementos posteriores también están en una línea separada. línea propia
- Altura, anchura, altura de la línea y los márgenes superior e inferior son los elementos se pueden proporcionar .
- anchura del elemento sin ajuste, es (una anchura uniforme y el elemento de matriz) 100% del contenedor padre en sí, a menos que una anchura de conjunto.
8.2 elementos en línea comunes:
<a> <span> <br> <i> <em> <strong> <label>
Características: display: inline;
- Y otros elementos en una sola línea ;
- La altura del elemento, la anchura, y superior e inferior márgenes no se puede ajustar ;
- La anchura de los elementos es que contiene texto o ancho de la imagen no se puede cambiar.
8.3 comúnmente utilizados elementos de bloque en línea:
<Img> <input>
Características: display: inline-block;
- Y otros elementos en una sola línea ;
- Altura, anchura, altura de la línea y los márgenes superior e inferior son los elementos pueden ser proporcionados
nota:
Podemos ser convertidos en elementos de bloque, los elementos en línea, los elementos de bloque en línea de visualización de atributos, listo para el diseño de página hacia atrás.
Nueve, reglas de etiquetas anidadas
elemento de bloque Inline puede comprender un elemento o elementos de algunos de los bloques, pero no puede contener los elementos en línea bloquean elementos, puede contener otros elementos en línea, por ejemplo:
<div> <div> </ div> <h1> </ h1> <p> <p> </ div> ✔️ <a href=" "> # <span> </ span> </a> ✔️ <Span> <div> </ div> </ span> ❌
elementos de bloque P no pueden ser colocados dentro de la etiqueta, por ejemplo
<p> <ol> <li> </ li> </ ol> </ p> ❌
<P> <div> </ div> </ p> ❌
Hay varios elementos a nivel de bloque especial sólo puede contener elementos en línea no pueden contener elementos de bloque, estas etiquetas especiales son:
h1, h2, h3, h4, h5, h6, p
elemento li puede ser embebido ul, ol, div y otras etiquetas
<Ul> <Li> <Ul> <Li> <Div> </ Div> </ Li> <Li> <Ol> <Li> </ li> <Li> </ li> <Li> </ li> <Li> </ li> </ Ol> </ Li> </ Ul> </ Li> </ Ul>