- Escrito al frente: consulte el tutorial de Bilibili Dark Horse Programmer Pink Teacher
- Dirección: https://www.bilibili.com/video/BV14J4114768?t=328&p=26
Tabla de contenido
Etiqueta de composición tipográfica
Etiqueta de título h (de memoria)
Etiqueta de párrafo p (de memoria)
Etiqueta de línea horizontal hr (reconocimiento)
Etiqueta de salto de línea br (memoria)
etiquetas div y span (énfasis)
Resumen de etiquetas tipográficas
Etiquetas de formato de texto (de memoria)
Etiqueta de imagen img (énfasis)
Posicionamiento del punto de anclaje (dificultad)
Etiqueta previa de texto con formato previo
Etiquetas comunes HTML
Etiqueta de composición tipográfica
- Las etiquetas de composición tipográfica se utilizan principalmente junto con css para mostrar las etiquetas de la estructura de la página web y son las etiquetas más utilizadas para el diseño de páginas web
Etiqueta de título h (de memoria)
- Abreviatura de la palabra: título título título del documento
- Para hacer que la página web sea más semántica, a menudo usamos la etiqueta de título en la página. HTML proporciona 6 niveles de título, a saber
- Semántica de la etiqueta de título : se utiliza como título y su importancia va disminuyendo
- El formato de sintaxis básico es el siguiente:
<h1> 标题文本 </h1> <h2> 标题文本 </h2> <h3> 标题文本 </h3> <h4> 标题文本 </h4> <h5> 标题文本 </h5> <h6> 标题文本 </h6>
- El efecto de visualización es el siguiente:
- Resumen:
- El texto del título se volverá más audaz y el tamaño de fuente aumentará a su vez
- Solo puede haber un título en una línea
Etiqueta de párrafo p (de memoria)
- Abreviatura de la palabra: párrafo párrafo [ˈpærəgræf] No recuerdo esta palabra
- Semántica de funciones:
- El documento HTML se puede dividir en varios párrafos.
- El texto debe mostrarse de manera ordenada en la página web y las etiquetas de párrafo son inseparables. Al igual que solemos escribir artículos, toda la página web también se puede dividir en varios párrafos, y las etiquetas de párrafo son
<p> 文本内容 </p>
- Es la etiqueta más común en los documentos HTML. De forma predeterminada, el texto de un párrafo se ajustará automáticamente al tamaño de la ventana del navegador .
Etiqueta de línea horizontal hr (reconocimiento)
- Abreviatura de la palabra: horizontal 横线 [ˌhɔrəˈzɑntl] Igual que arriba
- En las páginas web, a menudo vemos algunas líneas horizontales que separan los párrafos de los párrafos, lo que hace que la estructura del documento sea clara y distinta.
- Estas líneas horizontales se pueden lograr insertando imágenes o simplemente a través de etiquetas. <Hr /> es para crear etiquetas que abarcan las líneas horizontales de la página web. El formato de sintaxis básico es el siguiente:
<hr />是单标签
- Muestra la línea horizontal de estilo predeterminado en la página web.
Etiqueta de salto de línea br (memoria)
- Abreviaturas: romper romper, romper
- En HTML, el texto de un párrafo se organizará de izquierda a derecha hasta el extremo derecho de la ventana del navegador y luego se ajustará automáticamente.
- Si desea que un determinado texto se vea obligado a ajustarse, debe utilizar una etiqueta de ajuste
<br />
- En este momento, no funcionará si solo presiona la tecla Intro y el avance de línea directamente en Word.
etiquetas div y span (énfasis)
- Div span no tiene semántica. Son los dos cuadros principales de nuestro diseño de página web. Debes haber oído hablar de css + div
- Div es la abreviatura de división, lo que significa que en realidad hay muchos divs para combinar páginas web.
- span span
- Formato de sintaxis:
<div> 这是头部 </div> <span>今日价格</span>
- Ambos son cajas, que sirven para contener elementos de nuestra página web, pero son diferentes, ahora recordamos principalmente el uso y las características.
etiqueta div Se usa para el diseño, pero ahora solo se puede colocar un div en una fila etiquetas de intervalo Utilizado para el diseño, se pueden colocar varios tramos en una línea
Resumen de etiquetas tipográficas
Nombre de etiqueta definición Descripción <hx> </hx> Etiqueta de título Úselo como título y disminuya su importancia <p> </p> Etiqueta de párrafo El documento HTML se puede dividir en varios párrafos. <h /> Etiqueta de línea horizontal No hay nada que decir, solo una línea <br /> Etiqueta de nueva línea <div> </div> etiqueta div Se usa para el diseño, pero ahora solo se puede colocar un div en una fila <span> </span> etiquetas de intervalo Utilizado para el diseño, se pueden colocar varios tramos en una línea
Etiquetas de formato de texto (de memoria)
- En las páginas web, a veces es necesario establecer efectos de negrita, cursiva o subrayado para el texto. En este momento, debe utilizar etiquetas de formato de texto en HTML para mostrar el texto de una manera especial.
- la diferencia:
- b es simplemente negrita. Además de ser negrita, también significa enfatizar. La semántica es más fuerte.
- El resto es igual ...
Atributos de etiqueta
- Los denominados atributos son las características externas, como el color del teléfono móvil y el tamaño del teléfono móvil. .
- El color del teléfono es negro.
- El tamaño del teléfono es de 8 pulgadas.
- La longitud de la línea horizontal es 200
- El ancho de la imagen es 300.
- Al usar HTML para crear páginas web, si desea que las etiquetas HTML proporcionen más información, puede usar los atributos de las etiquetas HTML para configurarlas . El formato de sintaxis básico es el siguiente:
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名> <手机 颜色="红色" 大小="5寸"> </手机>
Etiqueta de imagen img (énfasis)
- Abreviatura de la palabra: imagen
- Si desea mostrar una imagen en una página web, debe utilizar la etiqueta de imagen. A continuación, la etiqueta de imagen <img /> y sus atributos relacionados se introducirán en detalle. (Es un perro soltero)
- La sintaxis es la siguiente:
<img src="图像URL" />
- El atributo src en esta gramática se utiliza para especificar la ruta y el nombre de archivo del archivo de imagen. Es un atributo obligatorio de la etiqueta img .
- Usaremos css para hacer el borde
- Nota:
- La etiqueta puede tener varios atributos, que deben escribirse en la etiqueta de apertura, después del nombre de la etiqueta .
- El orden de los atributos no se distingue. El nombre y el atributo de la etiqueta, y el atributo y el atributo están separados por espacios .
- Utilice el formato de par clave-valor clave = formato "valor"
- Caso:
<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="图片不存在" />
Etiqueta de enlace (énfasis)
- Abreviatura de la palabra: la abreviatura de ancla [ˈæŋkə (r)]. Explicación básica de ancla, ancla de hierro
- Crear un hipervínculo en HTML es muy simple, solo use etiquetas para incluir el texto.
- Formato de sintaxis:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
Atributos efecto href Se utiliza para especificar la dirección URL del destino del enlace (atributo obligatorio). Cuando se aplica el atributo href a la etiqueta, tiene la función de un hipervínculo. objetivo Se utiliza para especificar el método de apertura de la página vinculada. Sus valores son self y blank. _Self es el valor predeterminado y __blank es el método de apertura en una nueva ventana.
- Nota:
- Es necesario agregar enlaces externos http: // www.baidu.com
- Los enlaces internos se pueden vincular directamente al nombre de la página interna, como <a href="index.html"> página de inicio </a>
- Si el destino del enlace no se determina en ese momento, el valor del atributo href de la etiqueta del enlace generalmente se define como "#" (es decir, href = "#"), lo que indica que el enlace es temporalmente un enlace vacío .
- No solo puede crear hipervínculos de texto, también puede agregar hipervínculos a varios elementos de la página web, como imágenes, tablas, audio y video.
Etiqueta de anotación
- También hay una etiqueta especial en la etiqueta HTML-comment.
- Si necesita agregar algún texto de anotación al documento HTML que sea fácil de leer y comprender, pero que no necesite mostrarse en la página, debe usar la etiqueta de anotación.
- Breve explicacion:
- El contenido del comentario no se mostrará en la ventana del navegador, pero como parte del contenido del documento HTML, también se descargará en la computadora del usuario y se podrá ver al ver el código fuente.
- Formato de sintaxis:
<!-- 注释语句 --> 快捷键是： ctrl + / 或者 ctrl +shift + /
- Importancia de nota:
- El comentario es para que la gente lo vea, el propósito es explicar mejor qué está haciendo esta parte del código, el programa no ejecuta este código
- Generalmente se usa para descripciones simples, como algunas descripciones de estados, descripciones de atributos, etc.
- Un carácter de espacio antes y después del contenido del comentario, el comentario se encuentra encima del código que se va a comentar, en una línea separada.
- recomendar:
<!-- Comment Text --> <div>...</div>
- No recomendado:
<div>...</div><!-- Comment Text --> <div><!-- Comment Text --> ... </div>
Camino (énfasis, dificultad)
- En el trabajo real, nuestros archivos no se pueden colocar de forma aleatoria, de lo contrario es difícil encontrarlos rápidamente, por lo que necesitamos una carpeta para administrarlos.
- Carpeta de directorio:
- Es una carpeta ordinaria, que solo almacena los materiales relevantes que necesitamos para hacer la página, como archivos html, imágenes, etc.
- Directorio raíz
- Abra el primer nivel de la carpeta del directorio es el directorio raíz
- Habrá muchas imágenes en la página, generalmente creamos una nueva carpeta dedicada a almacenar archivos de imagen (imágenes), luego inserta la imagen, necesita usar el método "ruta" para especificar la ubicación del archivo de imagen. La ruta se puede dividir en: ruta relativa y ruta absoluta
camino relativo
- La ruta del directorio establecida en base a la ubicación de la página web del archivo citado. Por lo tanto, cuando las páginas web almacenadas en diferentes directorios hacen referencia al mismo archivo, la ruta utilizada será diferente, por lo que se denomina ruta relativa.
- La ruta relativa comienza desde el archivo donde se encuentra el código para encontrar nuestro archivo de destino, y lo que llamamos el nivel superior y el siguiente nivel es el mismo nivel.En pocas palabras, la imagen se encuentra en la página HTML.
Camino absoluto
- La ruta absoluta se refiere a la ruta del directorio basada en el directorio raíz del sitio web. La razón por la que se llama absoluto significa que cuando todas las páginas web hacen referencia al mismo archivo, la ruta utilizada es la misma.
- Nota:
- El camino absoluto se usa menos, podemos entenderlo. Pero tenga en cuenta que su escritura, especialmente el símbolo \, no es una ruta relativa /
Posicionamiento del punto de anclaje (dificultad)
- Al crear enlaces de ancla, los usuarios pueden localizar rápidamente el contenido de destino.
- Hay dos pasos para crear un vínculo de anclaje:
- 1. Utilice el nombre de identificación correspondiente para marcar la ubicación del objetivo del salto. (Buscar objetivo)
<h3 id="two">第2集</h3>
- 2. Utilice <a href="#id名"> texto del enlace </a> para crear el texto del enlace (se hace clic) (relación de extracción ) También tengo un abuelo cuyo apellido es Bi ..
<a href="#two">
- Diagrama esquemático:
- Método de memoria rápida:
- Es como buscar a alguien que haga algo: primero encuéntrelo, luego establezca relaciones y finalmente vea el efecto.
etiqueta base
- gramática:
<base target="_blank" />
- para resumir:
- la base puede establecer el estado abierto del enlace general
- la base está escrita entre <head> </head>
- Todas las conexiones se agregan de forma predeterminada target = "_ blank"
Etiqueta previa de texto con formato previo
- Las etiquetas pueden definir texto con formato previo.
- El texto incluido en el elemento de etiqueta <pre> normalmente conserva espacios y saltos de línea, y el texto también se representa en una fuente monoespaciada.
<pre> 此例演示如何使用 pre 标签 对空行和 空格 进行控制 </pre>
- El llamado texto preformateado consiste en mostrar la página de acuerdo con el formato de texto que hemos escrito de antemano, con espacios y saltos de línea reservados .
- Con esta etiqueta, el texto del interior se mostrará de acuerdo con nuestro modo de escritura, sin etiquetas de párrafo y salto de línea. Sin embargo, se usa menos porque no es fácil de controlar en general.
Caracteres especiales (entender)
- Algunos símbolos especiales nos resultan difíciles o inconvenientes de utilizar directamente en html. En este momento, podemos utilizar los siguientes códigos alternativos.
- para resumir:
- Comienza con el operador & y termina con el operador de punto y coma ;.
- No son etiquetas, sino símbolos.
- Los caracteres especiales menores que "<" y mayores que ">" no se pueden usar en HTML. El navegador los analizará como etiquetas. Para mostrarlos correctamente, use entidades de caracteres en el código fuente HTML
