resumen de conocimientos básicos de html
1. Resumen de conocimientos básicos sobre html
1.html introducción y función
HTML significa HyperText Mark-up Language, que se refiere al HyperText Mark-up Language. Las marcas son etiquetas, como :, <a></a> <html></html>generalmente las etiquetas aparecen en pares, pero también hay ocurrencias únicas. Tales <br> <img>como:.
El significado del hipertexto:
1. Hay imágenes, videos, música, etc. más allá del límite de texto en las páginas web.
2. Texto de hipervínculo: puede saltar de una página web a otra.
Función: se
utiliza para desarrollar páginas web.
2. Utilice vscode para la programación html
- vscode es un software de código abierto y gratuito (el uso personal se siente bien)
- Enlace de descarga: https://code.visualstudio.com/Download
- vscode puede instalar dos complementos. Uno es el complemento chino y el otro es el complemento que ejecuta el navegador. Los nombres de los complementos son 1. Paquete de idioma chino (simplificado) para VS Code 2. abrir en el navegador.
- Puede hacer clic en la siguiente imagen para mostrar el icono y luego buscar en el cuadro de búsqueda en la parte posterior (ignore la pantalla sucia de la computadora)
- El uso de vscode no se repetirá demasiado, los estudiantes que no sepan cómo usarlo pueden consultar el artículo de CSDN.
3.html algunas etiquetas de uso común (incluidas etiquetas individuales y etiquetas que aparecen en pares)
- Apareciendo en parejas
<h1>标题标签</h1>
<li>li标签定义列表项目</li>
<p>段落标签</p>
<div>div标签</div>
<a href='https://www.baidu.com'>百度</a>
- Individualmente
<br>
<img src="图片路径" alt="图片描述信息">
Nota: La escritura de la etiqueta no distingue entre mayúsculas y minúsculas, pero generalmente es en minúsculas.
- Establecer la ruta de recursos de la imagen se
divide en ruta absoluta y ruta relativa. Ruta absoluta significa escribir desde el directorio raíz y ruta relativa para escribir desde el directorio actual.
4. Tipos de etiquetas
Hay tres tipos de etiquetas: etiquetas de tabla, etiquetas de lista y etiquetas de formulario.
- Etiqueta de lista
<ul>无序列表</ul>
<ol>有序列表</ol>
- Etiqueta de formulario
<table>
<tr>
<th>table表示表格标签，tr表示表格中的一行，th表示表格中的表头</th>
</tr>
<tr>
<td>表示表格中的一列</td>
</tr>
</table>
- Etiqueta de formulario
<form>标签 定义完整的表单标签
<label>标签 表示表单元素的文字标注标签，定义文字标注
<input>标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
type:
type="text"定义单行文本输入框
type="password"定义密码输入框
type="radio"定义单选输入框
type="chackbox"定义复选输入框
type="file"定义上传文件
type="submit"定义提交按钮
type="reset"定义重置按钮
type="button"定义普通按钮
<textarea>标签 定义多行文本输入框
<select>标签 定义下拉列表
<option>和<select>标签配合，定义下拉列表中的选项
- Los atributos del formulario se pueden establecer cuando se envía el formulario, la acción significa establecer la dirección de envío del formulario y el método significa el método de envío del formulario, que se puede dividir en obtener y publicar. Configuración de atributos del elemento de formulario, dos parámetros, nombre y valor, nombre representa el nombre del elemento de formulario y valor representa el valor del elemento de formulario.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 把数据提交给web服务器需要使用的表单标签：<form> -->
<form action="https://www.baidu.com" method="POST">
<!-- get方式提交数据到web服务器以地址栏的方式提交给web服务器，不安全，能看到提交的数据 -->
<!-- 严谨的说是以查询参数的方式提交给web服务器 -->
<!-- Post 方式提交表单数据会放到请求体里面 -->
<p>
<!-- for 根据id名给指定id的标签设置光标 -->
<label>用户名：</label>
<input type="text" name="username" >
</p>
<p>
<label>密码：</label>
<input type="password" name="password">
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0">男
<input type="radio" name="gender" value="1">女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="学习">学习
<input type="checkbox" name="like" value="打游戏">打游戏
<input type="checkbox" name="like" value="羽毛球">羽毛球
</p>
<p>
<label>照片：</label>
<input type="file" name="pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="desc"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="position">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">深圳</option>
<option value="3">西安</option>
</select>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
</p>
<!--get 和 Post 方式提交表单数据时都以HTTP协议的方式提交数据给web服务器 -->
</form>
</body>
</html>