Los principiantes de HTML pueden entender -1

Introducción a HTML

¿Qué es HTML?

HTML se refiere al lenguaje de marcado de hipertexto, que no es un lenguaje de programación sino un lenguaje de marcado.

Hipertexto: un texto web que utiliza hipervínculos para organizar la información del texto en varios espacios.

Lenguaje de marcado: use etiquetas para marcar el contenido de la página web, y el navegador puede mostrar el formato correspondiente de acuerdo con el marcado al ejecutar la página web.

¿Qué puede hacer HTML?

Crea páginas web.

conceptos básicos de html

Etiquetas HTML básicas: cuatro ejemplos

Título HTML

El título HTML está <h1> - <h6>definido por etiquetas

Ejemplo

<h1>这是1级标题</h1>
<h2>这是2级标题</h2>
<h6>这是6级标题</h6>

resultado de la operación

Inserte la descripción de la imagen aquí

Párrafo HTML

Los párrafos HTML se <p>definen mediante <p>etiquetas. El contenido del mismo conjunto de etiquetas se puede llamar párrafo y habrá un interlineado más grande con el siguiente párrafo.

Ejemplo

<p>这是一个段落</p>
<p>这是另一段</p>

resultado de la operación

Inserte la descripción de la imagen aquí

Enlace HTML

Los enlaces HTML se <a>definen mediante etiquetas y puede saltar directamente a la página web correspondiente haciendo clic en el nombre del hipervínculo.

Ejemplo

<a href="http://www.baidu.com">百度</a>

resultado de la operación

Inserte la descripción de la imagen aquí

Imagen HTML

Las imágenes HTML se definen mediante etiquetas.

Ejemplo

<img src="img/Female.gif" />
<img src="img/Female.gif" width="75" height="75" />

resultado de la operación:

Inserte la descripción de la imagen aquí

Nota: La imagen insertada debe estar en el mismo proyecto que el archivo creado para que se ejecute correctamente.

El nombre y el tamaño de la imagen se proporcionan como atributos.

Elemento HTML

Los documentos HTML se definen mediante elementos HTML.

Los elementos HTML se refieren a todos los códigos desde la etiqueta inicial hasta la etiqueta final.

Atributos HTML

Los atributos proporcionan información adicional para los elementos HTML.

Ejemplo 1:

<a href="http://www.baidu.com">百度</a>

Los enlaces HTML se <a>definen mediante etiquetas. La dirección del enlace se especifica en el atributo href.

Ejemplo 2:

<h1 align="center">一级标题居中对齐</h1>
<!-- 拥有对齐方式的附加信息 -->

resultado de la operación:

Inserte la descripción de la imagen aquí

Ejemplo 3:

<body bgcolor="bisque">
<!-- 拥有背景颜色的附加信息 -->
</body>

resultado de la operación:

Inserte la descripción de la imagen aquí

Ejemplo 4:

<table border="1">
    
</table>
<!-- 用有表格表框的附加信息 -->

Título HTML

La etiqueta de título no es solo para usar el título para producir texto grande o en negrita.

Los motores de búsqueda utilizan títulos para indexar la estructura y el contenido de las páginas web.

Dado que los usuarios pueden navegar rápidamente por las páginas web a través de etiquetas de título, es importante utilizar títulos para presentar la estructura del documento.

Ejemplo de programa:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <h1>到<h6>代表标题标签,一共六级 -->
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<!-- 
		标题标签可直接占一行
		align="center" 文本居中对齐 
		align="right" 文本向右对齐
        align="left"文本向左对齐（默认）
		-->
		<h1 align="center">一级标题居中对齐</h1>
        <!-- 注释用"Ctrl+/"表示，插入注释可提高代码的可读性，使人更容易理解-->
	</body>
</html>

resultado de la operación:

Inserte la descripción de la imagen aquí

Párrafo HTML

Ejemplo de programa:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 段落标签,在<p>标签内的话即可称为一个段落,下一段落会有较大行间距 -->
		<p>这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符
		这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符</p>
	    <p>这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符
		这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符</p>
	 <!-- 换行标签<br/> -->
	 <p>这是一段话这是一行字符这是一段话<br/>这是一行字符这是一段话这是一行字符</p>
	 <!-- 空格标签&nbsp -->
	 这是一段话这是一行字符&nbsp;&nbsp;&nbsp;这是一段话这是一行字符
	 <!-- 大于号&gt,小于号&lt -->
	 &lt;b &gt;是一个加粗符号
	 <!-- 注册商标 -->
	 &reg;
	 <!-- 版权 -->
	 &copy;
	 <!-- 空格 -->
	 &nbsp;
	</body>
</html>

resultado de la operación:

Inserte la descripción de la imagen aquí

Lista HTML:

Las listas se pueden dividir en dos categorías: listas ordenadas y listas desordenadas.

Ejemplo de programa:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--有序列表前的标注默认类型是阿拉伯数字--> 
		<ol>
			<li>这是一个有序列表</li>
			<li>这是一个有序列表</li>
		</ol>
        <!--有序列表前的标注默认类型也可使用大小写英文字母或者是大小写罗马数字，如下以大写字母为例。
        --> 
		<ol type="A">
			<li>这是一个有序列表</li>
			<li>这是一个有序列表</li>
		</ol>
		<!--无序列表前的标注默认类型是实心原点-->
		<ul>
			<li>这是一个无序列表</li>
			<li>这是一个无序列表</li>
		</ul>
        <!--无序列表前的标注也可使用空心原点或者是方形，如下以空心原点为例。-->
		<ul type="circle">
			<li>这是一个无序列表</li>
			<li>这是一个无序列表</li>
		</ul>
	</body>
</html>

resultado de la operación:

Inserte la descripción de la imagen aquí

Hipervínculo HTML

El código HTML del enlace es muy simple, se ve así:

<a href="ur1">Link text</a>

El atributo href especifica el destino del enlace.

El texto entre la etiqueta de inicio y la etiqueta de finalización se muestra como un hipervínculo.

Ejemplos:

<a href="http://www.baidu.com">百度</a>

La línea de código anterior se muestra como: Baidu

Atributo de destino de enlace HTML

Usando el atributo de destino podemos definir dónde mostrar el documento vinculado.

La siguiente línea de código abrirá el documento en una nueva ventana. Si no hay una instrucción especial, el valor predeterminado será target = _self para abrir en esta página.

<a href="http://www.baidu.com" target="blank">百度</a>

Nota: "Texto del enlace" no tiene que ser texto. Las imágenes u otros elementos HTML pueden convertirse en hipervínculos.

Ejemplo de programa:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        
		<!-- target=""默认为从当前网页打开即和target="_self"效果一
		样,若想新建网页打开可用target="_blank" -->
		<a href="http://www.baidu.com" target="_blank">百度</a>
		<a href="baidu.html" target="_blank">自建百度</a>
	    <a href="http://www.qq.com">
		<!-- 若网络不好或者编写中出现错误使得图片加载不出从而使得
		alt中设置的属性值 ,当鼠标停留在本图片上时候会显示出title的属性值-->
			<img src="img/qq.ico" width="100" height="100"
			 alt="正在努力加载"
			 title="本产品由腾讯公司开发"
			 />
		</a>
	</body><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 当没有互联网时可以在本项目中新建一个html文件也可练习超链接操作，
		如下方的自建百度 -->
		<!-- target=""默认为从当前网页打开即和target="_self"效果一
		样,若想新建网页打开可用target="_blank" -->
		<a href="http://www.baidu.com" target="_blank">百度</a>
		<a href="baidu.html" target="_blank">自建百度</a>
	    <a href="http://www.qq.com">
		<!-- 若网络不好或者编写中出现错误使得图片加载不出从而使得
		alt中设置的属性值 ,当鼠标停留在本图片上时候会显示出title的属性值-->
			<img src="img/qq.ico" width="100" height="100"
			 alt="正在努力加载"
			 title="本产品由腾讯公司开发"
			 />
		</a>
	</body>
</html>

</html>

resultado de la operación:

Inserte la descripción de la imagen aquí

El hipervínculo define el ancla

Ejemplo de programa:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 
	超链接定义锚点
	超链接找锚点
	 <a href="#锚点名称">链接名称</a>
	 
	 定义锚点
	 <a name="名称">aaa</a>
	 -->
	<body>
		<h3> <a name="top"></a></h3>
		<a href="#p1">产品1</a>
		<a href="#p2">产品2</a>
		<a href="#p3">产品3</a>
		<a href="#p4">产品4</a>
		<a href="#p5">产品5</a>
		<hr >
		<h3> <a name="p1">产品1</a></h3>
		<img src="img/nike/1.png" />
		<h3> <a name="p2">产品2</a></h3>
		<img src="img/nike/2.png" />
		<h3> <a name="p3">产品3</a></h3>
		<img src="img/nike/3.png" />
		<h3> <a name="p4">产品4</a></h3>
		<img src="img/nike/4.png" />
		<h3> <a name="p1">产品5</a></h3>
		<img src="img/nike/5.png" />
		<!-- 设置“返回顶部”的锚点点击可以迅速返回最顶部 -->
		<h3 align="right"><a href="#top">返回顶部</a></h3>
		
	</body>
</html>