Conceptos básicos de HTML: etiquetas comunes

Mobile 2023-08-16 01:51:19 views: null
1. Etiquetas de encabezado y párrafo

etiqueta de título, solo hay 6 etiquetas de título h1 ~ h6, y el tamaño de fuente disminuye a su vez.

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

etiqueta de párrafo：p标签

<p>
  段落内容
</p>
2. Etiquetas de imagen

Admite formatos de imagen: gif, jpg, jpeg, png, bmp, webp.

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度logo">

Atributos:
src: la dirección de recurso de la imagen, que admite imágenes locales e imágenes de red;
alt: descripción de la imagen, que se mostrará cuando la imagen no se cargue
title: se utiliza para mostrar texto cuando se coloca el mouse sobre la imagen;

3. Hipervínculos

salto de página

Etiqueta:<a>

<!-- 超链接 -->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_blank">新标签打开百度</a>
<a href="http://www.baidu.com" target="_parent">parent方式打开百度</a>
<a href="http://www.baidu.com" target="_top">top方式打开百度</a>

Atributos:

href: Dirección de salto de hipervínculo, que puede ser una ruta local/ruta relativa, o dirección URL. Si es una dirección URL, asegúrese de agregar httpo https, de lo contrario, la página no se puede redirigir normalmente;
target: Define el método de apertura de la página de hipervínculo, con los siguientes valores:

  • _self: contenido enla página actualespectáculo
  • _blank: contenido ennueva paginaespectáculo;
  • _parent: abre el enlace en el formulario principal, que es equivalente a _self en la ventana y el marco de nivel superior
  • _arriba: Abra el enlace en el formulario actual, reemplace todo el formulario actual (página de marco) y borre todos los marcos incluidos

salto de ancla

Es decir, el salto de posición interna de la página y el salto del punto de anclaje dentro de la página se realizan hrefconfigurando el atributo del hipervínculo .#{id值}

Los ejemplos son los siguientes:

<p id="p0">
   <a href="#p1">锚点跳转1</a>
   <a href="#p2">锚点跳转2</a>
</p>
<p>
    ...
    <p id="p1">
        ...
    </p>
    <p id="p2">
        ...
    </p>
</p>
<p>
    <a href="#p0">回到顶部</a>
</p>

El código anterior define varias etiquetas p, establece el valor de id para ellas y luego establece el ancla de salto para el atributo href del hipervínculo a etiqueta.

4. Etiquetas de decoración de texto
Etiqueta Descripción de la función de etiqueta
<b > Abreviatura de negrita, texto en negrita
<strong > El texto está en negrita, y la pronunciación se enfatizará al leer, se recomienda usar
<i > Abreviatura de cursiva, fuente inclinada
<em > La fuente está inclinada y tiene un tono fuerte.
<u > Abreviatura de subrayado, el texto está subrayado
<s> Abreviatura de strike, texto tachado
<del> Abreviatura de borrar, texto tachado
<sup > Etiqueta en el texto, como: 2 2
<sub > Etiqueta debajo del texto, como: O 2

Los ejemplos son los siguientes:

<p><b>b标签 文字加粗</b></p>
<p><strong>strong标签 文字加粗，阅读时会被加重读音</strong></p>
<p><i>我会倾斜</i></p>
<p><em>我会倾斜，有强调作用</em></p>
<p><u>我是下划线标签</u></p>
<p><s>删除线标签</s></p>
<p><del>del删除线标签</del></p>
<p>π * 3<sup>2</sup></p>
<p>CO<sub>2</sub></p>
5. Etiqueta de lista

Las listas en HTML se dividen en: lista ordenada, lista desordenada y lista personalizada.

tipo Etiqueta ilustrar
lista ordenada <ol >、<li > en orden
lista desordenada <ul >、<li > fuera de servicio
lista personalizada <dl >、<dt >、<dd > ——

lista ordenada：

Sintaxis: <ol><li></li></ol>,

Está estipulado que no debe haber otro contenido en la etiqueta ol. Si desea agregar otro contenido, debe ponerlo en la etiqueta li.

El número de serie de la lista está predeterminado en números arábigos, a partir de 1.

type属性El tipo de número de serie se puede configurar a través de la etiqueta ol .

  • 1. Orden de los números arábigos
  • A, orden alfabético en mayúsculas
  • a, orden alfabético en minúsculas
  • I, secuencia de números romanos en mayúsculas, I, II, III, IV, V, VI, VII, VIII, IX, X ······
  • i, orden de números romanos en minúsculas, i ii iii iv v vi vii viii ······

start属性El número de secuencia inicial de la lista se puede establecer a través de la etiqueta ol , en forma numérica.

Por ejemplo:

<ol type="i" start="2">
    <li>小米</li>
    <li>华为</li>
    <li>OPPO</li>
</ol>

lista desordenada：

<p>无序列表</p>
<ul type="disc">
    <li>小米</li>
    <li>华为</li>
    <li>OPPO</li>
</ul>

El atributo de tipo tiene los siguientes valores:

  • disco: círculo sólido
  • círculo: círculo hueco
  • ninguno: sin estilo
  • cuadrado: cuadrado

lista personalizada: <dl>, <dt>, <dd>
dl: la abreviatura de lista de definición, lista de definición;
dt: la abreviatura de término de definición, puede entenderse como título, término de definición;
dd: la abreviatura de descripción de definición, descripción de definición

Por ejemplo:

<p>自定义列表</p>
<dl>
    <dt>自定义列表的标题</dt>
    <dd>小米</dd>
    <dd>华为</dd>
    <dd>OPPO</dd>
</dl>
6. etiqueta de la mesa

implica etiquetas

Etiqueta describir
<table > hoja
<caption> encabezado de tabla, título
<tr > DE ACUERDO
<td > Celúla
<th > celda, texto en negrita
<thead > encabezado de la tabla, que contiene
<tbody > El contenido del cuerpo del formulario, que contiene
<tfoot > pie de tabla, que contiene
<colgroup > agrupación de columnas

tableAtributos

  • borde: grosor del borde de la tabla;
  • espacio entre celdas: espacio entre celdas;
  • cellpadding: el margen interior de la celda;
  • ancho: ancho de la mesa
  • altura: altura de la mesa
  • alinear: la tabla está centrada en el diseño principal
  • bgcolor: color de fondo de la tabla
  • bordercolor: color del borde de la tabla

tdAtributos

  • rango de filas: el número de celdas en las filas
  • colspan: el número de celdas en las columnas
  • bgcolor: color de fondo de la celda
  • alinear: el texto de la celda está centrado

Ejemplo:

<table border="1" align="center" width="600" cellspacing="0" cellpadding="0" bordercolor="#fff" bgcolor="#d8eaef" >
        <caption>阿里职级与薪资</caption>
        <colgroup span="1" bgcolor="#92c5d5"></colgroup>
        <thead bgcolor="#66a9be">
            <tr >
                <th rowspan="2">序号</th>
                <th colspan="6">技术岗与管理岗的职级薪资</th>
            </tr>
            <tr>
                <th>P序列</th>
                <th>P级名称</th>
                <th>M序列</th>
                <th>M级名称</th>
                <th>薪资</th>
                <th>股票</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <th>1</th>
                <td>P6</td>
                <td>资深工程师</td>
                <td>M1</td>
                <td>主管</td>
                <td>20W-35W</td>
                <td>几乎不授予</td>
            </tr>
            <tr>
                <th>2</th>
                <td>P7</td>
                <td>技术专家</td>
                <td>M2</td>
                <td>经理</td>
                <td>30W-50W</td>
                <td>2400股</td>
            </tr>
            <tr>
                <th>3</th>
                <td>P8</td>
                <td>高级专家</td>
                <td>M3</td>
                <td>高级经理</td>
                <td>45W-80W</td>
                <td>6400股</td>
            </tr>
            <tr>
                <th>4</th>
                <td>P9</td>
                <td>资深专家</td>
                <td>M4</td>
                <td>总监</td>
                <td>80W-100W</td>
                <td>16000股</td>
            </tr>
            <tr>
                <th bgcolor="#92c5d5">5</th>
                <td>P10</td>
                <td>研究员</td>
                <td>M5</td>
                <td>高级总监</td>
                <td>150W+</td>
                <td>20000股</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th bgcolor="#acc47a">说明</th>
                <td colspan="6" bgcolor="#d8e1c6">P-Profession M-Manager,马云在阿里的级别是M10</td>
            </tr>
        </tfoot>
    </table>
7. Elementos a nivel de bloque y elementos en línea

elemento de nivel de bloque: línea exclusiva, elemento de bloque

Elementos comunes a nivel de bloque:

  • Elemento de encabezado: h1~h6
  • Elemento de párrafo:p
  • Elementos de la lista: ol, ul, li, dl, dt,dd
  • Elementos de la tabla: table, tr, td, th, thead, tbody, tfoot,caption
  • Bloquear elementos:div

inline Elementos en línea: no ocupan una sola línea, solo ocupan el ancho necesario.

Elementos en línea comunes:

  • Elementos modificadores de texto: b, strong, i, em, sub, sup, u, del,s
  • Elemento de enlace:a
  • Elemento de nueva línea:br
  • Elemento de imagen:img
  • Elemento de rango:span

**Nota: los elementos en línea no pueden anidar elementos a nivel de bloque

8. Formulario

Etiqueta:<form>

atributo de formulario

  • acción, utilizada para especificar el formato para procesar el formulario de envío, generalmente una dirección URL o una dirección de correo electrónico
  • método, el valor predeterminado es obtener, el valor es publicar/obtener, el método de envío de datos
  • nombre, marque el formulario
  • enctype, el formulario cuando los datos se envían al servidor, por defecto: application/x-www-form-
    urlencoded
  • objetivo, especifique la posición de visualización del documento después del envío, valor: _blank, _self, _parent,_top
  • accept-charset="gbk", establece el formato de codificación, para navegadores que no son IE
  • _charset="gbk", establece el formato de codificación, para el navegador IE

Las etiquetas de formulario deben usarse <form>dentro de la etiqueta, las etiquetas de uso común son las siguientes

Etiqueta describir Atributos
<input > cuadro de texto de una sola línea tipo (contenido después de la referencia de valor), nombre, id, solo lectura (solo lectura), deshabilitar deshabilitado
<textarea > cuadro de entrada de texto multilínea nombre, id, cols (número de columnas), filas (número de filas)
<input type="radio" > Caja individual nombre (grupo de control), id, marcado (seleccionado)
<input type="checkbox" > casilla de verificación
<input type="file" > control de selección de archivos
<select > Menú desplegable Implementación de la etiqueta del paquete,
múltiple (seleccione varias líneas), tamaño (número de líneas mostradas)
<label > Etiqueta para
<fieldset > Agrupación de control de formulario título
<button > botón de doble etiqueta

type属性, se puede dividir en cuadro de entrada de texto, cuadro de entrada de contraseña, botón, cuadro de radio, casilla de verificación, etc., y sus valores son los siguientes:

  • texto, cuadro de entrada de texto normal, valor predeterminado
  • contraseña, el cuadro de entrada de contraseña, para ·reemplazar el valor de entrada real
  • correo electrónico, cuadro de entrada de texto de dirección de correo electrónico
  • tel, se usa para proporcionar un cuadro de texto para ingresar un número de teléfono, el tipo tel generalmente se usa junto con el atributo de patrón
  • url, un cuadro de texto para ingresar una dirección URL
  • número: cuadro de entrada de número, valuevalor inicial, maxvalor máximo, minvalor mínimo, sepintervalo de número
  • botón, botón normal
  • enviar, el botón enviar, valueel atributo cambia el texto del botón
  • restablecer, botón de reinicio, valueel atributo cambia el texto del botón
  • radio: botón de radio, namecontrole si está en el mismo grupo a través del valor del atributo, checkedconjunto seleccionado
  • casilla de verificación, casilla de verificación, checkedespecifique el elemento seleccionado predeterminado a través de atributos
  • imagen, el botón de enviar en forma de imagen, lo mismo que el botón, srcespecifique la imagen a través del atributo
  • oculto, el campo oculto es invisible para el usuario, generalmente se usa para programas en segundo plano
  • archivo, el selector de archivos
  • búsqueda, un cuadro de texto para ingresar palabras clave de búsqueda
  • color, cuadro de configuración de color, seleccionar valor de color
  • rango, que proporciona un rango de entrada de valores dentro de un cierto rango, que se muestra en la página web como 滑动条una propiedad similar a número
  • datetime, los siguientes atributos son selectores relacionados con la fecha y la hora
  • datetime-local
  • fecha
  • mes
  • semana
  • tiempo

Ejemplo:

<form action="">
        <!-- 输入框 -->
        输入文字：<input type="text">
        <br>
        敏感信息：<input type="password">

        <br>
        <!-- 多行文本框 -->
        多行文本框：<textarea name="" id="" cols="30" rows="3"></textarea>
        <br>
        <!-- 单选 -->
        选择性别：<input type="radio" name="sex" checked>男
        <input type="radio" name="sex">女

        <br>
        <!-- 多选框 -->
        选择科目：<input type="checkbox" name="subjects" id="1" checked>语文
        <input type="checkbox" name="subjects" id="2">数学
        <br>
        <!-- 下拉单选择框 -->
        下拉单选择框：
        <select name="" id="">
            <option value="1">语文</option>
            <option value="2" selected>数学</option>
        </select>
        <br>
        <!-- 下拉多选选择框 -->
        下拉多选选择框：
        <select name="" id="" multiple>
            <option value="1">语文</option>
            <option value="2" selected>
9. Otras etiquetas

  • Línea divisoria:<hr>

    • ancho/tamaño: Controla el ancho y alto de la línea horizontal respectivamente

    • noshade: se usa para eliminar la sombra de la línea horizontal

    • color: se utiliza para definir el color de la línea horizontal

    • align：用来调整水平线水平对齐方式，默认水平居中

  • 预格式化的文本：<pre>，将完全安装HTML源代码的内容显示。

  • <map>，定义一个图像的映射，在不同区域实现点击不同位置的跳转

    • name，与img标签的属性usemap相关联，在图像和地图间创建关系。

    • 子标签，单标签，定义图片上的热点区域，实现热点区域的位置、大小及形状

      • herf：用来定义热点区域链接的目标地址

      • shape：用来定义区域的形状，取值：default(所有区域)、rect、circle、poly(多边形)

      • coords：用来定义可点击区域的坐标。与shape属性搭配使用

10.iframe

碎片化处理的，类似Android的fragment。

语法：<iframe ></iframe>

属性有：

  • src：定义页面路径

  • width：定义宽度

  • height：定义高度

  • frameborder：定义边框，默认有边框，通过设置0取消边框

  • scrolling：控制是否显示框架的滚动条，值有：

    • yes，始终显示滚动条

    • auto，在需要的情况下显示滚动条

    • no，从不显示滚动条

  • name：通常与<a>的target属性关联

Supongo que te gusta

Origin blog.csdn.net/seevc/article/details/131331697
Recomendado
Clasificación
Diario
Más
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)

Code World

© 2018 codetd.com