Tabla de contenido
5. Saltar arriba y abajo, saltar página.
7. Lista ordenada, lista desordenada
10.Botón de opción del cuadro de selección múltiple
1.HTML
Concepto: HTML (Lenguaje de marcado de hipertexto) Lenguaje de marcado de hipertexto.
HTML no es un lenguaje de programación, sino un lenguaje de marcado.
HTML se utiliza principalmente para describir los componentes necesarios en las páginas web, como cuadros de texto, tablas, imágenes, videos, etc., y también para componer páginas web.
El archivo fuente de HTML se denomina "página web" y normalmente termina en .html o .htm.
Se puede editar con cualquier editor de texto y debe ejecutarse mediante un navegador.
Visita: https://www.w3school.com.cn/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- write your code -->
</body>
</html>2. Etiqueta
1. etiqueta de cabeza
<cabeza>
Etiqueta de encabezado...
</cabeza>
1.Icono
<link rel="icon" href="icon.png" type="image/x-icon"> <!-- 图标 -->
Por ejemplo
2. Centrar el estilo
<link href="style01.css" rel="stylesheet"> requiere que se escriba código .css adicional
o
<body style="text-align: center"> <!-- Además el estilo está centrado--> escribir código... </body>
2. etiqueta del cuerpo
<cuerpo>
etiqueta del cuerpo...
</cuerpo>
1. Notas :
<!-- Contenido del comentario· -->
2. Cargar imágenes
<img width="303" src="image.png" alt="Mostrar este párrafo cuando no se pueda cargar"> <!-- Cargar imagen-->
3. Carga el vídeo
<iframe src=""> </iframe>Ejemplo <iframe src="//player.bilibili.com/player.html?aid=873301164&bvid=BV1YN4y1Q7L7&cid=1261762527&p=1" scrolling="no" border="0" frameborder="no" framepacing="0" enablefullscreen= "verdadero"> </iframe>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML</title>
<link rel="icon" href="icon.png" type="image/x-icon">
</head>
<body>
<!-- 注释 -->
<img width="303" src="image.png" alt="asddd"> <!-- 加载图片 -->
<!-- 加载视频 -->
<iframe src="//player.bilibili.com/player.html?aid=873301164&bvid=BV1YN4y1Q7L7&cid=1261762527&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>
</html>Efecto
4.Región
partición <div></div>
<span></span> ¿Cuántas partes hay en cada área?
<p></p> Segmentación de artículos
<br> Salto de línea
<hr> línea divisoria
<h1>Soy un título de primer nivel</h1>
<h2>Soy un título secundario</h2>
<h3>Soy un título de tercer nivel<h3>
...
<p>Yo soy el texto</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- write your code -->
<div>
我是第一个区域
</div>
<div>
<span>我是第二个区域的第一部分</span>
<span>我是第二个区域的第二部分</span>
</div>
<p>
我是第一段文字
</p>
<p>
我是第二段文字
</p>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>我是正文</p>
</body>
</html>Efecto
5. Saltar arriba y abajo, saltar página.
<a href="https://www.bilibili.com/">Haga clic en la estación Xiaopo</a>
<a href="#test">Haga clic para llegar al final</a>
<div id="test">底部</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- write your code -->
<a href="#test">点击到达底部</a>
<br>
<a href="https://www.bilibili.com/">点击小破站</a>
<br>
<img width="800" src="image.png" alt="加载中">
<img width="800" src="image.png" alt="加载中">
<img width="800" src="image.png" alt="加载中">
<img width="800" src="image.png" alt="加载中">
<img width="800" src="image.png" alt="加载中">
<img width="800" src="image.png" alt="加载中">
<img width="800" src="image.png" alt="加载中">
<img width="800" src="image.png" alt="加载中">
<img width="800" src="image.png" alt="加载中">
<div id="test">底部</div>
</body>
</html>Efecto
6.Tabla
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- write your code -->
<!-- 表格 -->
<table border>
<thead> <!-- 表头 -->
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody> <!-- 表体 -->
<tr>
<td>0001</td>
<td>张伟</td>
<td>男</td>
</tr>
<tr>
<td>0001</td>
<td>张伟</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>Efecto
7. Lista ordenada, lista desordenada
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- ul无序列表 -->
<ul>
<li>一号</li>
<li>二号</li>
<li>三号</li>
<li>四号</li>
<li>五号</li>
</ul>
<!-- ol有序列表 -->
<ol>
<li>一号</li>
<li>二号</li>
<li>三号</li>
<li>四号</li>
<li>五号</li>
</ol>
</body>
</html>Efecto
8.Iniciar sesión
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="text-align: center"> <!-- 居中 -->
<h2>登录网站</h2> <!-- 二号标题 -->
<div>
<label>
账号：
<input type="text" placeholder="Username...">
</label>
</div>
<div>
<label>
密码：
<input type="password" placeholder="password...">
</label>
</div>
<div>
<label>
<input type="checkbox">
我同意...
</label>
</div>
<div>
<br> <!-- 换行-->
<button> 取消 </button>
<button> 登录 </button>
</div>
<div>
<a href="https://www.bilibili.com/">忘记密码</a> <!-- 跳转到改密码页面 -->
</div>
<div>
<label>
日期：
<input type="date" placeholder="Username...">
</label>
</div>
<div>
<label>
日期：
<input type="datetime-local">
</label>
</div>
<div>
<label>
文件:
<input type="file">
</label>
</div>
</body>
</html>Efecto
9.Botón
<div>
<br>
<botón> 取消 </botón>
<botón> 登录 </botón>
</div>
10.Botón de opción del cuadro de selección múltiple
<label>
<!-- Botón de opción-->
<input type="checkbox">
Acepto la política de privacidad de este sitio web
</label>
<label>
<br> <br>
<!-- Casilla de verificación múltiple- - >
<input type="radio" name="role">
Estudiante
</label>
<label>
<input type="radio" name="role">
Profesor
</label>
Efecto
11.Cuadro de texto
<div>
<label>
<h2>Cuadro de texto</h2>
<textarea placeholder="Di algo..." cols="60"
filas="10"></textarea>
</label>
</div>
Efecto
12. Lista desplegable
<!-- Crear una lista desplegable-->
<label>
Identidad de inicio de sesión:
<select>
<option>Profesor</option>
<option>Estudiante</option>
<option>Administrador</option>
</select>
< /etiqueta>
Efecto
