Un resumen de etiquetas comunes y su uso en html

Language 2023-10-01 05:21:54 views: null

Una lectura obligada para conocer los conceptos básicos de HTML: una lista completa de etiquetas HTML comunes

Capítulo 2: Etiquetas HTML comunes

Prefacio

En el capítulo anterior, aprendimos sobre la estructura de la página html y las etiquetas. ¿Cuáles son entonces las etiquetas? ¿Cuáles son las funciones de varias etiquetas? ¡Este artículo lo guiará a través de una serie de etiquetas comunes!

1. Etiquetas comunes (1)

1. etiqueta del cuerpo

Etiqueta del cuerpo de la página web, todo el contenido web está dentro y se almacenan varias etiquetas

2. etiqueta de cuadro div

Generalmente dividido en áreas, se utilizará la idea de construir un esqueleto. Se utiliza para almacenar: texto, imágenes, contenido, etc.

3. p etiqueta de párrafo de texto

Es una etiqueta de párrafo de texto que puede almacenar grandes párrafos de texto.

4. etiquetas de título h1 ~ h6

  • Los niveles de h1 a h6 disminuyen gradualmente
  • Estándares de escritura, solo se permite que aparezca una h1 (etiqueta de título de primer nivel) en una página. Si la página web aparece repetidamente, será difícil distinguir el contenido primario y secundario, al igual que un ensayo solo puede tener un título de ensayo. .

5. etiqueta b y etiqueta fuerte (etiqueta de texto en negrita)

Todos se utilizan para texto en negrita. La diferencia entre los dos es: la etiqueta fuerte es para resaltar los puntos clave

6. etiqueta del paquete de texto abarcado

  • Una etiqueta que envuelve el texto.
  • La diferencia entre la etiqueta p y la etiqueta span es que la etiqueta p se ajustará automáticamente, pero la etiqueta span no se ajustará automáticamente. Generalmente, las declaraciones cortas se pueden envolver con etiquetas span y las más largas con etiquetas p.

7. etiqueta de salto de línea br y etiqueta delimitadora de hora

  • La etiqueta br y la etiqueta hr no son más que etiquetas.
  • La etiqueta br es una etiqueta de salto de línea.
  • La etiqueta hr es una etiqueta separadora

8. Etiquetas i y etiquetas em (etiquetas de texto en cursiva)

  • Ambas son etiquetas en cursiva, lo que le da al texto un efecto inclinado.
  • La diferencia entre los dos: la etiqueta em es más fácil de reconocer por el navegador

9. eliminar etiqueta

Generalmente se utiliza para tachar precios

10. etiqueta central

centrar texto

11. sup superíndice y subíndice

El contenido de la etiqueta estará por debajo o por encima de la línea base, la mitad de la altura del carácter actual, y el tamaño de fuente será más pequeño.

12. etiquetas preformateadas

El texto encerrado en etiquetas previas generalmente conserva espacios y saltos de línea, y el texto también se representa en una fuente monoespaciada.

Cómo utilizar las etiquetas anteriores y la visualización del código:

<body>
    <!-- 这是身体标签 -->

    <div class="div1">
        <!--这是一个盒子标签-->
        <p>我是段落文本p标签</p>
        <h1>我是一级标题标签</h1>
        <h2>我是二级标题标签</h2>
        <h3>我是三级标题标签</h3>
        <h4>我是四级标题标签</h4>
        <h5>我是五级标题标签</h5>
        <h6>我是六级标题标签</h6>
    </div>
    <hr>

    <div class="div2">
        <!--这也是一个盒子标签-->

        <!-- 区别是p会自动换行，而span不会自动换行，共用一行 -->
        <p>你好</p>
        <p>我爱前端</p>
        <p>好好学习</p>
        <hr>
        <!--分隔符-->
        <span>你好</span>
        <span>我爱前端</span>
        <span>好好学习</span>
        <br>
        <span>我被br强制换行了</span>
    </div>
    <hr>

    <div class="div3">
        <!--这还是一个盒子标签-->
        <p>我是正常的p</p>
        <p><i>我是被斜体i定义后的p</i></p>
        <p><em>我是被斜体em定义后的p，我更容易被浏览器识别</em></p>
    </div>
    <hr>

    <div class="div4">
        <span>现价：￥99
            <del>原价：￥399</del>
            <!--这是删除符-->
            <center>我是居中对齐</center>
            H<sub>2</sub>O
            CO<sup>2</sup>

        </span>
    </div>
    <hr>

    <div class="5">
        <p>
            你好 我是前端小白
            我爱学前端
            我的空格和换行没有被p保留
        </p>

        <pre>
            你好   我是前端小白
            我爱学前端
            我是被pre保留了空格和换行
        </pre>
    </div>
</body>

Efecto de presentación:
Insertar descripción de la imagen aquí

2. Etiquetas de uso común (2)

2.1.a etiquetas (enlaces, hipervínculos, etiquetas ancla)

2.1.1.Etiqueta de hipervínculo

<a href="https://www.baidu.com/" name="baidu" target="_blank" title="百度首页" accesskey="s">百度一下</a>

  • a:a etiqueta (etiqueta de hipervínculo)

  • Atributo href: la ruta de dirección a la que debe saltar el hipervínculo.

  • atributo de nombre: nombre del enlace (generalmente utilizado para enlaces de salto de enlace de anclaje)

  • atributo de título: el texto del mensaje del enlace (mensaje cuando se pasa el mouse)

  • atributo de destino: ventana de destino del enlace, donde se abre el enlace, ubicación de la página web

    • Valor de atributo _self: la conexión se abre en la página actual ( este es el valor predeterminado; si no se especifica ningún valor de atributo, el valor predeterminado es _self se abre en la página actual )
    • _valor del atributo en blanco: Abrir en una ventana nueva (abre varias ventanas nuevas con unos pocos clics)
    • _nuevo valor de atributo: abrir en una nueva ventana (no importa cuántas veces haga clic, solo se abrirá una, excepto para los sitios web de productos especiales, como una determinada página del este, que requiere abrir varias páginas para aumentar el número de visitas)

  • atributo de clave de acceso: tecla de acceso rápido de enlace (a qué letra está el valor del conjunto de atributos de clave de acceso, use Alt+la letra de este valor para saltar automáticamente al enlace)

<!--百度网站和哔哩哔哩网站
       1.用_blank属性点几次，打开几个新的页面
       2.用_new属性无论点几次都只会打开一个页面
       3.用_self属性，就在当前页面中跳转。它是默认属性
       特殊：京东网站用_new属性，点几次都会打开几个页面，因为人家是内部强制设定了，为了增加访问量。其他两个属性一样-->
   
   <a href="https://www.baidu.com/" target="_blank" >用_blank属性，百度一下</a><br>
   <a href="https://www.baidu.com/" target="_new" >用_new属性，百度一下</a><br>
   <a href="https://www.baidu.com/" target="_self" >用_self属性，百度一下</a><br>
   <br><br><hr>
   <!-- _self是默认值，在没有指定target属性值的时候，默认在当前页面打开 -->
   <a href="https://www.jd.com/" target="_blank" >用_blank属性，京东一下</a><br>
   <a href="https://www.jd.com/" target="_new" >用_new属性，京东一下</a><br>
   <a href="https://www.jd.com/" target="_self" >用_self属性，京东一下</a><br>
   <br><br><hr>
   <a href="https://www.bilibili.com/" target="_blank" >用_blank属性，哔哩哔哩</a><br>
   <a href="https://www.bilibili.com/" target="_new" >用_new属性，哔哩哔哩</a><br>
   <a href="https://www.bilibili.com/" target="_self" >用_self属性，哔哩哔哩</a><br>
   <br><br><hr>

2.1.2 Enlaces de anclaje

  • Crear enlaces de anclaje, formato básico:
    <a name="锚点名称">链接对象名称</a>
  • Establecer un enlace, formato básico:
    <a href="#跳转的锚点名称" name="锚点名称">链接对象名称</a>
  • Los enlaces de anclaje no sólo pueden saltar entre sí dentro de la misma página, sino que también pueden saltar entre sí entre páginas.

Crea una página llamada index01.html

<body>
     <!-- <a href="#跳转的锚点名称" name="锚点名称">链接对象名称</a> -->
     
    <a name="top" href="#bottom">我是顶部，点我可以跳到底部</a>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
    <a name="bottom" href="#top">我是底部，点我可以跳到顶部</a>
   
    <!-- 锚点不但可以在同一个页面中互跳，也可在不同页面中互跳 -->
    <hr>
    <hr>
    <a href="index02.html#top">点我跳到index02.html页面中的top锚点链接</a>
</body>

Crea otra página llamada index02.html

<body>
    <!-- 空连接：href属性值就只写个#，空连接不跳转-->
    <a href="#">我是空连接</a>
    <hr>
    <a ></a>
    <a href="index01.html">点我回到index01.html网页，实现跨页面互跳</a>
    <hr>
    <a name="top" href="index01.html#bottom">点我回到index01.html的底部,实现跨页面互跳锚点链接</a>
</body>

2.1.3 Conexión nula

Un enlace vacío significa que el enlace de destino está vacío, representado por "#". Después de hacer clic en el enlace vacío, la página seguirá en la página actual.
Formato:<a href="#">我是空连接</a>

2.2 Etiquetas de imagen

Formato:<img src="./img/1.jpg" alt="图片加载失败" title="这是漂亮的小姐姐" width="200px" height="200px">

  • etiqueta de imagen img
  • Atributo de dirección de imagen src: se utiliza para poner la dirección de la imagen.
  • alt: cuando la ruta de la imagen es incorrecta, aparecerá el mensaje de texto alternativo.
  • Título: Descripción de la imagen. Cuando se coloca el mouse sobre la imagen, aparecerá el texto que describe la imagen. Se
    muestran los atributos de ancho, alto y alto. Los valores de los atributos son números y la unidad generalmente es píxeles de px. (El tamaño de la imagen se puede controlar en la etiqueta de imagen img)

Información adicional sobre problemas de ruta:

  • ./Archivos de directorio en la misma carpeta (de uso común)
  • .../Archivos de directorio en la carpeta de nivel superior

Cómo importar imágenes:

1. Ruta relativa: [./ Encuentra archivos de directorio en la misma carpeta. 】【.../Busque el archivo de directorio en la carpeta de nivel superior】.
2. Ruta absoluta: la ruta que comienza desde la unidad C/D/F de la computadora. No se usa comúnmente porque la imagen está en su propia computadora, lo que no favorece el uso de otras personas
3. Dirección de red: busque directamente una dirección de enlace de imagen en línea. La limitación es que puede ver las imágenes cuando hay una conexión a Internet y las imágenes no se han eliminado de Internet.

Manifestación:

 <!-- 相对路径引入图片 -->

    <img src="./img/1.jpg" alt="图片加载失败" title="这是漂亮的小姐姐" ><!-- 这个是图片实际大小 -->
    <hr>
    <!-- 这个是通过img标签行内设置宽高之后的 -->
    <img src="./img/1.jpg" alt="图片加载失败" title="这是漂亮的小姐姐" width="200px" height="200px">
    <!-- 故意放错图片，alt里的文字就会显现出来 -->
    <img src="1.jpg" alt="图片加载失败">

    <!-- 网路地址引入图片 -->
    <img src="http://www.jj20.com/tx/qita/213161.html" alt="">

3. Listar etiquetas

3.1 Etiquetas de lista desordenada<ul>

1. Las etiquetas de lista desordenadas están <ul>marcadas y los subelementos son <li>elementos de lista de etiquetas
2. Los atajos se pueden utilizar para generar múltiples <li>etiquetas de lista de subelementos. Tales como: ul>li*3；li*6. Se generarán varios elementos de la sublista li.
3. En la etiqueta, puede utilizar el atributo de tipo para modificar el tipo de punto negro delante del <ul>elemento de la sublista.<li>

<ul type="disC">

-Predeterminado: disco (círculo relleno)

  • Punto hueco: círculo
  • Cuadrado sólido: cuadrado
  • No mostrar el símbolo ninguno

demostración de código

 <body>
    <!-- 快捷生成多个子列表项：ul>li*3或li*5或ul.li{$}*5 -->
    <ul>
        <!-- 列表项的默认样式是实心圆 -->
        <li>我是列表项一</li>
        <li>我是列表项二</li>
        <li>我是列表项三</li>
    </ul>

    <ul type="circle">
        <!-- 指定列表项的样式是空心点 -->
        <li>我是列表项一</li>
        <li>我是列表项二</li>
        <li>我是列表项三</li>
    </ul>
    <ul type="square">
        <!-- 指定列表项的样式是实心方块 -->
        <li>我是列表项一</li>
        <li>我是列表项二</li>
        <li>我是列表项三</li>
    </ul>
    <ul type="none">
        <!-- 指定列表项不显示符号 -->
        <li>我是列表项一</li>
        <li>我是列表项二</li>
        <li>我是列表项三</li>
    </ul>

</body>

Mostrar resultados:
Insertar descripción de la imagen aquí

3.2 Etiquetas de lista ordenada<ol>

1. La etiqueta de la lista ordenada está <ol>marcada y el subelemento es <li>el elemento de la lista de etiquetas.
2. Modifique el tipo de clasificación a través del atributo de tipo: el valor predeterminado es el número arábigo 1 para comenzar a ordenar

<ol type="a"><!--用小写字母a开始排序-->
  • El valor del atributo tipo puede ser: Listar varios tipos
  • aEmpiece a ordenar con una letra minúscula
  • A comienza a ordenar con una letra mayúscula
  • i/I Empezar a ordenar con letras romanas

Demostración de código:

<!-- 默认是阿拉伯数字123排序 -->
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="a">
        <!-- 指定用小写字母a开始排序 -->
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="A">
        <!-- 指定用大写字母A开始排序 -->
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="i">
        <!-- 指定用小写罗马字母i开始排序 -->
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="I">
        <!-- 指定用大写罗马字母I开始排序 -->
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>

Visualización de efectos:
Insertar descripción de la imagen aquí
3. Mostrar símbolos sin símbolo delante de la lista ordenada
. Tenga en cuenta que la lista ordenada, como su nombre lo indica, debe tener orden. Si la lista ordenada no debe tener orden, no admite que el valor del atributo de tipo sea none . Entonces, si insiste en no mostrar símbolos delante de la lista ordenada, puede agregarle un estilo de lista con el valor del atributo noe. Agregar estilos implica el conocimiento de los estilos CSS que se analizan en la siguiente sección.

Método uno: agregue directamente estilo de lista: ninguno al estilo interno.
Método dos: al introducir el estilo externo, se borra de forma predeterminada.
Estos dos métodos se analizarán en el próximo capítulo.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除有序列表前面的符号</title>
    <!-- 方法二：通过引入外部样式里，有默认清除 -->
    <!-- <link rel="stylesheet" href="rest.css"> -->

    <!-- 方法一：直接给ol加一个样式就可以清除前面的符号 -->
    <style>
        /* 直接给ol加一个样式就可以清除前面的符号了，也可以通过引入外部样式里，有默认清除 */
        ol {
      
      
            list-style: none;
        }
    </style>
</head>

<body>
    <!-- 注意，有序列表顾名思义就是要有顺序，如果非要有序列表没有顺序的话，它是不支持type属性的值为none的。那么如果硬要有序列表前面不显示符号，方法是：给它加一个list-style:none的样式（可以直接添加在内部样式里或是引入外部样式默认清除样式）
 -->
    <ol type="I">
       <p>这是有序列表但是我可以通过设置list-style: none属性值去掉符号</p>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
</body>

</html>

Representación:
Insertar descripción de la imagen aquí

3.3 Describir etiquetas de lista (también llamadas etiquetas de lista personalizadas)<dl>

1. La etiqueta de la lista de descripción <dl>está marcada con dos subelementos: <dt>y <dd>el elemento de la lista de etiquetas
2. La lista de descripción se usa generalmente para una lista de elementos y una combinación de elementos. El formato es:

<dl>
        <dt>名词一</dt><dd>解释一</dd>
        <dt>名词二</dt><dd>解释二</dd>
        <dt>名词三</dt><dd>解释三</dd>
        
    </dl>

Mostrar resultados:
Insertar descripción de la imagen aquí

Resumir

Lo anterior es el uso y la visualización del código de algunas etiquetas comunes en HTML que el editor ha compilado para usted. Por supuesto, hay muchas etiquetas que aún no se han compilado y el editor agregará algunas en el futuro. Fue compilado con referencia a varias fuentes y a mi propio entendimiento. Si puede haber inexactitudes u omisiones, espero que puedan iluminarme y hacer correcciones. Me gustaría agradecerles de antemano.

Supongo que te gusta

Origin blog.csdn.net/xu_yuxuyu/article/details/121013177
Recomendado
Clasificación
Diario
Más
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(33)
2024-04-29(5)
2024-04-28(9)
2024-04-27(28)

Code World

© 2018 codetd.com