Fundamentos de HTML (Parte 2)

Tabla de contenido

prefacio

una etiqueta de mesa

1.1 Etiqueta básica

1.2 Propiedades del formulario

1.3 Combinar celdas

Etiquetas de dos formularios

2.1 etiqueta de formulario

2.2 etiqueta de entrada

2.3 etiqueta etiqueta

2.4 seleccionar etiqueta

2.5 etiqueta de área de texto

Tres etiquetas no semánticas

3.1 etiqueta div

3.2 etiqueta de intervalo

Cinco ejercicios completos

5.1 Interfaz de destino

5.2 Código fuente de la interfaz

Resumir

---

prefacio

Para Xiaobai con base cero en html, se recomienda leer primero los conceptos básicos de HTML del blog anterior (Parte 1) y luego leer este blog después de leerlo. Este blog es para continuar con el contenido del blog anterior, continuar introduciendo algunas etiquetas básicas. , y Finalmente, se proporciona un ejercicio integral para practicar juntos las siguientes etiquetas básicas.

una etiqueta de mesa

1.1 Etiqueta básica

• etiqueta de tabla: representa toda la tabla
• etiqueta tr: representa una fila de la tabla
• etiqueta td: representa una celda en la tabla
• ª etiqueta: indica la celda del encabezado, que estará centrada y en negrita
• thead tag: el área de encabezado de la tabla, (aquí, tenga en cuenta que se distingue de la etiqueta th, la etiqueta th es la celda de encabezado, y esta etiqueta es el área de encabezado, con un rango más grande)
• etiqueta tbody: la parte del cuerpo de la tabla

1.2 Propiedades del formulario

Recordatorio: estas propiedades de la tabla pueden establecer las propiedades de tamaño y borde, etc., pero en el proceso de desarrollo front-end, generalmente usamos CSS para lograr el embellecimiento de la interfaz, por lo que no se recomienda utilizar el método de configuración de la siguiente propiedades para embellecer la interfaz.

• alinear: la alineación de la tabla en relación con los elementos circundantes, tiene principalmente tres valores de atributo: izquierda, derecha y centro.
• borde: atributo de borde, el valor del atributo es 1 significa que hay un borde (cuanto mayor es el número, más grueso es el borde), el valor del atributo es "" significa que no hay borde
• cellpadding: la distancia entre el contenido y el borde, el valor predeterminado es 1px.
• espacio entre celdas: la distancia entre celdas, el valor predeterminado es 2px.
• ancho / alto: establece el tamaño de la celda

ejemplo de código 

<table align="center" border="1" cellpadding="20" 
cellspacing="0" width="500" height="200">
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>        
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>18</td>
        </tr>
    </tbody>
</table>

 El efecto es el siguiente

1.3 Combinar celdas

• Fusionar entre filas: rowspan="n"
• Fusionar entre columnas: colspan="n"

Para combinar celdas

1. Primero determine si fusionar filas o columnas
2. Encuentre la celda de destino para la fusión (fusionando entre columnas, la celda más a la izquierda es la celda de destino; fusionando entre filas, la celda superior es la celda de destino)
3. eliminar celdas redundantes

ejemplo de código 

<table align="center" border="1" cellpadding="20" cellspacing="0" 
width="500" height="200">
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>        
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">跨列合并</td>
            <td rowspan="2">跨行合并</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

El efecto es el siguiente: 

Etiquetas de dos formularios

Los formularios son una forma importante para que los usuarios ingresen información y se dividen principalmente en las siguientes dos partes:

• Campo de formulario: el área que contiene los elementos del formulario, con énfasis en la etiqueta del formulario.
• Controles de formulario: varios controles en el campo de formulario, como botones, cuadros de entrada, etc., el foco está en la etiqueta de entrada.

2.1 etiqueta de formulario

El uso básico es el siguiente

<from action="表单提交给的url"> 
    <-- from中的各种控件和内容 -->
</from>

La etiqueta from describe principalmente cómo se deben enviar los datos a qué página, es decir, la etiqueta de formulario se usa principalmente en la programación de servidores y redes, por lo que no explicaré demasiado aquí. 

2.2 etiqueta de entrada

La etiqueta de entrada puede implementar muchos controles de entrada, como cuadros de texto de una sola línea, cuadros de radio, casillas de verificación, botones, etc.

Los principales atributos de la etiqueta de entrada son los siguientes:

• atributo de tipo (obligatorio): indica el control representado por la etiqueta de entrada actual, y los valores incluyen botón, checkbos, texto, archivo, imagen, contraseña, radio, etc.
• Atributo de nombre: asigne un nombre a la etiqueta actual, lo cual es muy útil para el cuadro de radio, porque el cuadro de radio tiene el mismo nombre para lograr múltiples selecciones.
• atributo de valor: el valor predeterminado en la entrada
• atributo marcado: seleccionado de forma predeterminada, se utiliza principalmente para botones de radio y botones de opción múltiple
• atributo maxlength: establece la longitud máxima del texto 

1) cuadro de texto

ejemplo de código

<input type="text" value="这是一个文本框">

 El efecto es el siguiente

 

2) Cuadro de contraseña 

ejemplo de código

<input type="password" value="123456">

El efecto es el siguiente 

3) botón de opción

ejemplo de código

性别: 
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女

El efecto es el siguiente 

4) casilla de verificación 

ejemplo de código 

以下人物你喜欢谁: <br>
<input type="checkbox">唐僧
<input type="checkbox">孙悟空
<input type="checkbox">猪八戒
<input type="checkbox">沙悟净

El efecto es el siguiente 

  

5) Botón normal 

Aquí hay solo una implementación simple de un botón en la página. Si desea obtener una respuesta después de presionar el botón, debe implementarse con javascript.

ejemplo de código

<input type="button" value="按钮">

El efecto es el siguiente 

 

6) Botón Enviar 

ejemplo de código 

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

El efecto es el siguiente 

Nota:  El botón Enviar debe colocarse en la etiqueta del formulario. Cuando hagamos clic en el botón Enviar, intentaremos enviar los datos del formulario a la URL especificada por la acción desde.

7) Botón Borrar

ejemplo de código 

<form action="test.html">
    <input type="text" name="username">
    <input type="reset" value="清空">
</form>

El efecto es el siguiente 

 

 Nota:  El botón borrar debe colocarse en la etiqueta del formulario. Después de hacer clic, se restablecerán todas las entradas del usuario en el formulario desde donde se encuentra el botón borrar.

8) Selección de archivos

 ejemplo de código

<input type="file">

El efecto es el siguiente 

  

2.3 etiqueta etiqueta

La etiqueta de la etiqueta se utiliza principalmente con la etiqueta de entrada, que se puede realizar haciendo clic en la etiqueta y seleccionando la casilla de verificación/radio correspondiente para mejorar la experiencia del usuario.

• para el atributo: especifique la etiqueta en el poder y qué etiqueta de entrada con la misma identificación corresponde 

ejemplo de código 

性别: 
<input type="radio" name="sex" id="male" checked="checked">
<label for="male">男</label>
<input type="radio" name="sex" id="famale">
<label for="famale">女</label>

Mostrar resultados 

Después de este diseño, no necesitamos hacer clic en ⭕, podemos hacer clic en hombre o mujer para seleccionar.

2.4 seleccionar etiqueta

La etiqueta de selección se usa principalmente junto con la etiqueta de opción

ejemplo de código

<select>
    <option selected="selected">年份</option>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    <option>2003</option>
    <option>2004</option>
</select>

 El efecto es el siguiente

 

2.5 etiqueta de área de texto

ejemplo de código

<textarea cols="30" rows="10">
    这是一个文本域
</textarea>

 El efecto es el siguiente

 

Recordatorio: el contenido de la etiqueta de textaera es el contenido predeterminado. 

Tres etiquetas no semánticas

3.1 etiqueta div

etiqueta div, donde div es la abreviatura de división, lo que significa división. Al mismo tiempo, div ocupa una sola línea y es un cuadro grande. Al escribir código front-end en la vida diaria, div se usa a menudo para dividir áreas, por lo que que CSS puede seleccionar bien el área y ajustar el estilo del área.

ejemplo de código

<div>
    这是第一个区域
</div>
<div>
    这是第二个区域
</div>

 El efecto es el siguiente

 

3.2 etiqueta de intervalo

 La etiqueta span significa span. La diferencia entre la etiqueta span y la etiqueta div es que la etiqueta span no ocupa una sola línea. Es un cuadro pequeño. El uso de la etiqueta span puede controlar el estilo local.

ejemplo de código

<div>
    <!-- 这里使用到一点CSS的知识,不会的可以去查一下 -->
    我是一个<span style="color: blue;">程序员</span>
</div>

El efecto es el siguiente

 

 En resumen, tendremos una comprensión profunda de las etiquetas div y las etiquetas span en el estudio de CSS, por lo que no explicaré demasiado aquí.

Cinco ejercicios completos

Hemos aprendido tantas etiquetas antes, usemos estas etiquetas juntas para implementar algunas páginas simples. Recordatorio: esta página es fea y estática. Lo que necesitamos para que se mueva es código javascript, y queremos que sea dinámica. Lo que necesita ser más bella es código CSS. 

5.1 Interfaz de destino

5.2 Código fuente de la interfaz

<!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>
</head>
<body>
    <table width="500px" cellspacing="0">
        <thead>
            <h2>请填写简历信息</h2>
        </thead>
        <tr>
            <td>
                姓名
            </td>
            <td>
                <input type="text" id="name">
            </td>
        </tr>
        <tr>
            <td>
                性别
            </td>
            <td>
                <!-- 这里的label的for属性需要和其对应单选框的id相对应,否则无法实现点击文字就选中对应选项 -->
                <input type="radio" name="sex" id="male" checked="checked">
                <label for="male">男</label>
                <input type="radio" name="sex" id="female">
                <label for="female">女</label>
            </td>
        </tr>
        <tr>
            <td>
                出生日期
            </td>
            <td>
                <select id="year">
                    <option>--请选择年份--</option>
                    <option>2005</option>
                    <option>2004</option>
                    <option>2003</option>
                    <option>2002</option>
                    <option>2001</option>
                    <option>2000</option>
                    <option>1999</option>
                    <option>1998</option>
                    <option>1997</option>
                    <option>1996</option>
                </select>
                <select id="month">
                    <option>--请输入月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select id="day">
                    <option>--请选择日期--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                    <option>27</option>
                    <option>28</option>
                    <option>29</option>
                    <option>30</option>
                    <option>31</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                就读学校
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>
                应聘岗位
            </td>
            <td>
                <!-- 这里的 label 中的for属性需要和其匹配的多选框的id相对应, 否则无法实现点击对应文本选中对应选项-->
                <input type="checkbox" id="1">
                <label for="1">前端开发</label>
                <input type="checkbox" id="2">
                <label for="2">后端开发</label>
                <input type="checkbox" id="3">
                <label for="3">测试开发</label>
                <input type="checkbox" id="4">
                <label for="4">运维开发</label>
            </td>
        </tr>
        <tr>
            <td>
                掌握的技能
            </td>
            <td>
                <textarea name="skill" cols="30" rows="10"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                项目经历
            </td>
            <td>
                <textarea name="experience" cols="30" rows="10"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <!-- 这里不可以使用单选框 radio, 虽然界面基本相同,但是若是单选框,选中后无法取消-->
                <input type="checkbox" id="lisence">
                <label for="lisence">我已经仔细阅读过公司的招聘要求</label>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <!-- 这里使用#占位,表示空链接,这个只是为了实现界面,因此不需要真的超链接 -->
                <a href="#">查看我的状态</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h3>请应聘者确认:</h3>
                <ul>
                    <li>以上信息真实有效</li>
                    <li>能够尽早去公司实习</li>
                    <li>能接收公司的加班文化</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

Resumir

Lo anterior es todo el contenido de este blog, si este blog es útil para usted, espero que le guste, siga, comente y apoye al siguiente editor, ¡gracias!