03-etiquetas HTML utilizadas

写在前面，该博客是对黑马前端课程笔记的再整理，方便自己复习回顾，侵删

---

La primera fase de 01 front-end de base .HTML etiquetas usadas comúnmente

Objetivos de aprendizaje

• comprender:
  • Tres formas de ruta relativos
• solicitud
  • etiqueta Publishing
  • etiquetas de formato al texto
  • etiqueta de imagen
  • enlace
  • Utilice una ruta relativa, ruta absoluta

1. etiquetas HTML utilizado

etiquetas HTML son muchas, aquí aprendemos el más utilizado, seguido por algunos menos utilizado, podemos mirar el manual sobre el mismo.

etiqueta 1,1 publicación

diseño CSS y las principales etiquetas con el uso de mostrar las etiquetas de estructura de la página, diseño de página es las etiquetas más utilizadas.

1) Título Tag h (Memorizar)

abreviaturas en inglés: Título de la cabeza del título cabeza título del documento.

Con el fin de hacer una web más semántica, a menudo utilizamos la etiqueta del título de la página, HTML ofrece seis niveles del título, es decir,

Título Semántica de la etiqueta: el título a su uso, y la disminución de orden de importancia

La sintaxis básica es la siguiente:

<h1>   标题文本   </h1>
<h2>   标题文本   </h2>
<h3>   标题文本   </h3>
<h4>   标题文本   </h4>
<h5>   标题文本   </h5>
<h6>   标题文本   </h6>

Mostrar la siguiente manera:

resumen:

• Añadir el título del texto se convierte en negrita, tamaño de fuente se incrementará en este orden
• Línea única se pone un título

2) etiqueta de párrafo p (Memorizar)

abreviaturas en inglés: párrafo párrafo [pærəgræf] hay necesidad de recordar la palabra

El papel semántico:

Los documentos HTML se pueden dividir en varios párrafos

El texto de la página se debe mostrar de manera ordenada, es inseparable de las etiquetas de párrafo, del mismo modo que normalmente escribir artículos, toda la página se puede dividir en varios párrafos y párrafos etiqueta es

<p>  文本内容  </p>

documento HTML es la etiqueta más común, de forma predeterminada, el texto de un párrafo envoltura automáticamente en función del tamaño de la ventana del navegador.

3) hr etiqueta horizontal (entendimiento)

abreviaturas en inglés: guión horizontal [ˌhɔrəzɑntl] Ibid.

Página menudo ver algunas líneas horizontales de separación entre párrafos y párrafos, por lo que la estructura del documento claro, estructurado. Estas líneas horizontales se pueden lograr mediante la inserción de una imagen, sino que simplemente se puede hacer mediante la etiqueta, <hr />dicha etiqueta a través de la página para crear líneas horizontales. La sintaxis básica es la siguiente:

<hr />是单标签

En una página Web muestra las líneas horizontales de estilo por defecto.

4) br etiqueta Break (Memorizar)

abreviaturas en inglés: ruptura envoltura interrumpido

En HTML, se organizará un párrafo de texto de izquierda a derecha, hasta que un extremo derecho de la ventana del navegador, y luego envolver. Si desea mostrar un texto determinado a forzar una línea, es necesario utilizar la etiqueta de salto

<br />

Si te gusta este tiempo de llegar a la línea de alimentación Introduzca clave directamente en la palabra no va a funcionar.

5) etiquetas div y span (Key)

lapso div hay diseño web semántica es nuestros principales dos cajas Seguramente usted ha escuchado css + div

div división es la división abreviatura, medios de partición de hecho hay muchos div combinar páginas.

lapso lapso lapso; rangos

sintaxis:

<div> 这是头部 </div>    <span>今日价格</span>

Se trata de dos cajas, se utiliza para mantener nuestros elementos de la página, pero son diferentes, y ahora nos recuerdan principalmente a utilizar y las características como

• div etiquetas para el diseño, pero ahora su partido sólo se puede poner un div
• etiquetar el diseño para el tramo y para ser puesto en una pluralidad de tramo de línea

Detrás de la parte posterior del modo de visualización del tiempo de palabra, te diré

Resumen composición tipográfica etiqueta

nombre de la etiqueta	definiciones	explicación
<hx></hx>	etiqueta del título	Como el uso del título, y el orden decreciente de importancia
<p></p>	etiqueta de párrafo	Los documentos HTML se pueden dividir en varios párrafos
<hr />	etiqueta Horizontal	Nada que decir, es una línea
<br />	etiqueta de salto
<div></div>	etiqueta div	Para el diseño, pero ahora su partido sólo puede poner un div
<span></span>	etiqueta span	Para el diseño se puede poner en una pluralidad de tramo de línea

1.2 etiquetas de texto de formato (Memorizar)

página web, a veces es necesario para establecer los efectos de texto en negrita, cursiva o subrayado, entonces usted necesita para el uso de texto etiquetas de formato en HTML, el texto que se muestra de una manera especial.

diferencia:

b simplemente negrita, fuerte además de enfatizar aún significado negrita, semántica más fuerte.

La empatía que queda ...

Pedir a alguien importante recordar dos grupos antes negrita y cursiva, vuelva más tarde dos grupos no recordaban

1.3 Propiedades de etiqueta

Al utilizar HTML para crear páginas web, etiqueta HTML si desea obtener más información, se pueden establecer mediante atributos HTML etiquetas. La sintaxis básica es la siguiente:

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸">  </手机>

imagen de la etiqueta img 1,4 (enfoque)

abreviaturas en inglés: Imagen
Para mostrar una imagen es necesario utilizar la etiqueta de imagen, etiqueta de la imagen siguiente se describirán en detalle en la página web , así como y otros atributos relevantes. (Se trata de un solo perro)

La sintaxis es la siguiente:

<img src="图像URL" />

La sintaxis del atributo src se utiliza para especificar la ruta del archivo de imagen y nombre del archivo, que es la etiqueta img de los atributos requeridos.

Detrás de la frontera vamos a utilizar CSS para hacerlo, los zapatos para niños están aquí para recordar esta palabra como una frontera

nota:

1. Las etiquetas pueden tener varios atributos, debe estar escrito en el comienzo de la etiqueta, el nombre detrás de la etiqueta.
2. Independientemente del orden entre las propiedades, son espacios separados entre nombres de etiquetas y atributos, propiedades y atributos.
3. Tome el formato de pares de valores clave = formato de "valor"

Por ejemplo:

	正常的<br />
    <img src="cz.jpg" width="300" height="300" /><br />
     带有边框的<br />
    <img src="cz.jpg" width="300" height="300" border="3" /><br />
	有提示文本的<br />
	<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" /><br />
	有替换文本的<br />
	<img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />

Dominar los puntos clave:

• Por favor atributos de etiqueta imagen del estado que son necesarios para escribir?
• Por favor, alt de la imagen diferencias atributo de etiqueta de estado y título?

1.5 Enlaces pestaña (enfoque)

abreviaturas en inglés: abreviaturas de anclaje [æŋkə®]. La explicación básica del ancla, el ancla

Crear un hipervínculo en HTML es muy sencillo, basta con utilizar el texto de la etiqueta para incluir hasta muy bien.

sintaxis:

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

propiedad	efecto
href	dirección URL especifica el destino del enlace, (atributo imprescindible) cuando el atributo href para las aplicaciones de etiquetas, que tiene una función de hipervínculo
objetivo	Especifica el enlace Abrir la página, su valor tiene _self y _blank dos de ellos _self es el valor por defecto, __ en blanco para el Abrir en una nueva ventana.

nota:

1. Enlaces externos necesitan agregar http: // www.baidu.com
2. enlace de enlace interno interno directamente a nombre de la página, como <a href = "index.html"> Inicio
3. Si no determina el destino del enlace, por lo general el valor del atributo href se define como la etiqueta de enlace "#" (es decir, href = "#"), indica que el enlace está temporalmente a un enlace vacío.
4. No sólo se puede crear un hipervínculo de texto en la página en una variedad de elementos de página, como imágenes, tablas, audio, vídeo, y así puede agregar hipervínculos.

Dominar los puntos clave:

• Por ejemplo atributo de etiqueta de enlace que es necesario escribir?
• Por favor, por qué la nueva ventana se abre un enlace a esta página?

1.6 Notas Tab

En HTML, hay un especial de etiquetas - etiquetas de comentario. Si necesita añadir un poco fácil de leer y entender, pero no es necesario para mostrar el comentario de texto en la página en un documento HTML, es necesario utilizar etiquetas de comentario.

explicación sencilla:

Notas contenido no se muestra en la ventana del navegador, sino como parte del contenido HTML del documento será descargado en el ordenador del usuario, se puede ver al ver el código fuente.

sintaxis:

    <!-- 注释语句 -->     快捷键是：    ctrl + /       或者 ctrl +shift + / 

Señala la importancia de:

Los comentarios son carteles, el propósito es explicar mejor esta parte del código está haciendo, el programa no se ejecuta este código

Acuerdo de las personas

Generalmente se usa para la descripción simple, como se describe en algunos estados, y otras propiedades descritas

Un carácter de espacio antes y después de cada anotación de contenido, comentarios, situado por encima del comentario en el propio código en la línea

recomendado:

<!-- Comment Text -->
<div>...</div>

No se recomienda:

<div>...</div><!-- Comment Text -->	
	
<div><!-- Comment Text -->
    ...
</div>

2. Ruta (importante y difícil)

El trabajo real, que no sólo puede extraviar documentos, o para encontrar rápidamente difíciles de usar ellos, por lo que necesitamos una carpeta para su gestión.

carpeta de directorio:

Se trata de una carpeta normal, que simplemente almacenar la página que tenemos que hacer materiales relacionados, tales como archivos, imágenes y otros elementos HTML.

directorio raíz

Abrir la primera capa es la carpeta directorio raíz

Página será mucho en la imagen, por lo general que a continuación, crear una carpeta específica para almacenar archivos de imagen (imágenes), la próxima vez que se inserta una imagen, es necesario utilizar el enfoque del "camino" para especificar la ubicación del archivo de imagen. La ruta puede ser dividida en: las rutas relativas y absolutas

ruta relativa

La posición de la página en los documentos de referencia serán la base de referencia para el establecimiento de una ruta de directorio. En consecuencia, cuando se almacena en una referencia de página directorio diferente del mismo archivo, el camino no será utilizado por el mismo, se le llama una ruta relativa.

ruta de la categoría	símbolo	explicación
Con una trayectoria		Basta con introducir el nombre del archivo de imagen puede ser, como <img src = "baidu.gif" />.
Bajo un camino	“/”	El archivo de imagen se encuentra en la carpeta archivos HTML hermanos (nombre de la carpeta, por ejemplo: imágenes) como <img src = "images / baidu.gif" />.
En un camino	“... /”	Añadido antes del nombre de archivo "... /", y si los niveles, es necesario utilizar "... / ... /", y así sucesivamente, como <img src = "... / baidu.gif" />.

ruta relativa, a partir del archivo en el que el código, tenemos que encontrar el archivo de destino, y lo llamamos en el mismo nivel a un nivel simplemente, es la imagen ubicada la página HTML

ruta absoluta

Ruta absoluta a la ruta del directorio en el directorio raíz del sitio web para a base de referencia. Se llama absoluta, significa que cuando todas las páginas referenciadas por el mismo archivo, la ruta utilizada es la misma.

"D: \ web \ img \ logo.gif", o la dirección de red completa, como "http://www.itcast.cn/images/logo.gif".

nota:

Menos uso de la ruta absoluta, nuestra comprensión de la misma. Nótese, sin embargo, que la redacción en particular, el símbolo \ no es una ruta relativa /

3. Resumen Hoy

4. Lectura adicional @

4,1 anclaje de posición (dificultad)

Mediante la creación de un enlace de anclaje, el usuario puede navegar rápidamente al contenido objetivo.

Crear vínculos de anclaje en dos pasos:

1. 使用相应的id名标注跳转目标的位置。 (找目标)
  <h3 id="two">第2集</h3> 

2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的） （拉关系）  
  <a href="#two">   

Método de memoria rápida:

Al igual que encontrar a alguien para el trabajo, para encontrarlo en primer lugar, a continuación, América Latina, y finalmente ver resultados.

4,2 etiqueta de base

sintaxis:

<base target="_blank" />

resumen:

1. Puede establecer la base de los eslabones abiertos global
2. Escrito entre la base
3. Todas las conexiones se añaden por objetivo por defecto = "_ blank"

~ ~ Todos los enlaces a todo el conjunto de todos los enlaces se abren en una ventana nueva página se ~

4.3 pre formato previo etiquetas de texto

<pre>etiqueta de texto con formato previo se puede definir.

Rodeado por el <pre>texto de la etiqueta en el elemento es usualmente espacios reservados y saltos de línea. El texto se presenta como una fuente de espacio fijo.

<pre>

  此例演示如何使用 pre 标签

  对空行和 空格

  进行控制

</pre>

El llamado texto con formato previo es, según nuestro formato de texto previamente escrito para mostrar la página, espacios reservados y saltos de línea y así sucesivamente.

Con esta etiqueta, en el interior del texto, vamos a seguir la escritura de visualización modo, párrafos y saltos de línea no necesitan una etiqueta. Sin embargo, rara vez se utiliza, debido al control general pobres.

4.4 Los caracteres especiales (entender)

Algunos símbolos especiales, que luego html difícil o incómodo de usar directamente, en este momento podemos utilizar el siguiente código alternativo.

Aunque hay muchos, pero por lo general el uso es relativamente pequeño, nos centramos en cuenta el espacio es mayor que el número es menor que el número en él, el resto de la parte posterior verificación.

resumen:

1. Estos caracteres especiales son los operadores& empiezan a operador de punto y coma; final.
2. No son etiquetas, sino símbolos.
3. HTML no se puede utilizar menos de la cantidad de "<" y el signo mayor que ">" caracteres especiales, el navegador va a analizar como etiquetas, para mostrar las entidades de caracteres correctos usados ​​en el código fuente HTML

Acuerdo de las personas

recomendado:

   <a href="#">more &gt;&gt;</a>

No se recomienda:

   <a href="#">more >> </a>

camino de desarrollo 4.5 html5

Lo que es XHTML 4.6

XHTML es más estricto y puro código HTML.

• XHTML se refiere a la Extensible Hypertext Markup Language (eXtensible HyperText Markup Language).
• El objetivo de XHTML es reemplazar HTML.
• XHTML y HTML 4.01 son casi idénticos.
• XHTML es más estricta y más pura versión HTML.
• XHTML es HTML como una aplicación XML para ser re-definido.
• XHTML es un estándar W3C.

¿Cuál es la diferencia entre 4.7 HTML y XHTML?

• XHTML se refiere al HTML Extensible

• XHTML y HTML 4.01 son casi idénticos

• XHTML es más estricta y más pura versión HTML

• XHTML es una aplicación XML define el código HTML

• XHTML fue lanzado en enero de 2001 Recomendación del W3C

• XHTML es compatible con todos los principales navegadores

• elementos XHTML están escritos en los elementos HTML formato XML. XHTML estricta versión de HTML, por ejemplo, se requiere de la etiqueta debe estar en minúsculas, la etiqueta debe estar debidamente cerrado, la etiqueta debe estar correctamente alineado fin, para el atributo debe estar entre comillas dobles y similares.

  ​