README

自己补充想法

LA VERSION 0.0.1 Y 0.0.2 NO TIENEN SOPORTE
SON LA IMPLEMENTACION INICIAL ASI QUE SI 
TE DECIDES POR UTILIZAR ALGUNA DE ESTAS
DOS VERSIONES TENDRA QUE REPARAR LOS BUGS
QUE LE SURJAN POR SU CUENTA


La Version 0.0.3
es la que tendra soporte y actualizaciones continuas


la documentacion oficial estara disponible muy pronto =)

以下为逐步解释

首先，doctype() 函数；这个函数只接受一个参数，即字母 H，用于定义文档。在完成此 README 后，很可能不再需要传递参数 H。

eso es todo no hay mas que explicar sobre esta funcion solo la llamas y listo.

html() 函数；这个函数接收一个字符串和一个数组作为参数

html("string",[

]);

el string se compone de dos partes atributo/valor
en este caso el unico atributo disponible se representa con 
la letra L por lang y el valor puede ser : es, en , etc. dependiendo
del idioma del contenido de la pagina entonces quedaria asi :

html("Les",[]);

en este caso Les para indicar que el contenido sera en spanish

在开始一个项目时，我们将调用的前两个函数将是 doctype 和 html，如下所示

doctype("H");
html("Les",[]);

head() 函数；这是定义 CSS 样式、meta 标签（如 viewport、charset 等）的标签，是 HTML 文档中定义的第一个标签。我们只需以这种方式调用该函数即可

head(null,[]);

el primer parametro tiene que ser null porque esta estiqueta por lo regular no 
se le suele agregar atributos , esta implementacion es temporal y puede cambiar
sin previo aviso porque este projecto esta en desarrollo, y sometido a pruebas
todos los dias por lo tanto aun no es un proyecto estable , lo que si es seguro
es que en un momento a otro la implementacion no necesitara el paramentro null
pero por el momento la funcion se agrega al documento de la siguiente forma :

doctype("H");
html("Les",[
    head(null,[])
]);

body() 函数；这个函数是进入 html 的下一个标签，这个函数与 html 函数类似，也接受一个字符串和一个数组作为参数，这个字符串代表一对属性/值，对于这个标签，我们有可用的属性 C（class）和 I（id）。

alternativamente se le puede pasar null en caso de no 
necesitar de estos atributos, entonces si queremos 
simplemente el tag body sin atributos llamamos a la 
funcion body asi : body(null,[]);

la etiqueta body con una clase se define asi : body("CmyClass",[]);

la etiqueta body con un id se define asi : body("ImyId",[]);

tambien podemos agregarle ambos atributos asi : body("CmyClass ImyId",[]);

el orden no importa asi que tambien seria valido esto body("ImyId CmyClass",[]);

finalmente agregamos el body del documento asi:

doctype("H");
html("Les",[
    head(null,[]),
    body("",[])
]);

las funciones div() address() title() hdr()
    main() section() footer() style() p()
    h1() h2() h3() h4() h5() h6() span() table()
    tr() td() th() thead() tbody() tfoot() b() article()
    ul() ol() li() form()

tienen los mismo atributos que body
tambien reciben un arreglo por segundo
parametro y se agregan al documento de la misma forma

a() 函数；这个标签与前面的类似，但这个标签有一个特殊功能，允许你链接文档

esta etiqueta tiene por atributos C por class
I por id y H por href , el atributo href
es en donde se le coloca el nombre o direccion
del documento al que queremos acceder por ejemplo :

supongamos que tenemos un archivo llamado index.php
y tenemos otro archivo llamado info.php

entonces como le hacemos para pasar de index.php
a info.php con un click ?

es sencillo , para hacer eso podemos llamar ala funcion a() dentro de index.php de esta manera :

a("Hinfo.php","ir a informacion"); 

como puedes notar en este caso le pasamos
como argumento otro string en vez de un arreglo
tambien puedes pasarle un arreglo ala etiqueta a()
pero como solo necesite un texto no es necesario
solo con pasarle el string con el texto que 
queremos visualizar es suficiente

las etiquetas mencionadas anteriormente a la funcion 
a() tambien pueden recibir como argumento un string

button() 函数；这个函数就像它的名字所暗示的那样，用于创建按钮，具有与前面相同的功能和调用方式，但这个标签与前面的标签不同的是它有一对属性，这些属性允许它执行特定的按钮功能

para los botones tenemos los aributos :

C para class , I para id , T para type y 
O para onclick

existen mas atributos para todas las etiquetas
html sin embargo yo te muestro las que utilizaras
con mas frecuencia, el atributo type por ejemplo
nos ayuda a definir el tipo de boton 

(button|submit|reset)

en cambio el atributo onclick hace referencia a un 
evento, es decir cuando ocurra algo por ejemplo 
que se le de click a un boton el atributo onclick
sera igual al nombre de una funcion por lo regular
escrita en javascript la cual ejecutara una serie de
pasos cuando el evento click ocurra

ejemplo de un boton :

button("OhiFunction()","click me");

script() 标签；这个标签有两个主要功能，允许我们在其中写入 JavaScript 代码或包含一个扩展名为 .js 的文件并将其包含到我们的 HTML 文档中

para llamar a un archivo externo se utiliza
el atributo src de esta forma script("Sfile.js");

o bien podemos omitir el atributo src y escribir
codigo javascript dentro de la funcion script asi :

script(null,"your js code here");

现在我们来谈谈 jfm() 对象；这个类专门用来通过 AJAX 替换 HTML 标签的内容

entonces para hacer lo anterior la implementacion
quedaria de esta forma :

$object = jfm();
$object->httpObject("xhttp");
$object->ors("xhttp",$object->si(
    "this.readyState == 4 && this.status == 200",
    $object->ihr("demo")
));
$object->abrir("xhttp","GET","file.txt","true");
$object->enviar();

## 自闭合标签

目前我实现了以下标签

img() meta() lk() input() hr()

pero usted puede implementar las etiquetas que le hagan
falta creando la clase correspondiente y heredando los 
metodos de la clase Base , tome alguna de estas clases
como referencia

para ver los atributos de las etiquetas anteriores 
entre ala carpeta src y seleccione la clase que 
quiera estudiar

## CSS 选择器和变量

tenemos dos funciones mas
la funcion vars() y la funcion sltr()

para la funcion sltr() y sltr2() colocamos como primer
arguento el selector css y como segundo parametro
le pasamos las propiedades css mediante un arreglo

para ver la lista de propiedades disponibles vaya a 
la clase Selector y observe ahi la lista

la funcion vars() recibe un arreglo del tipo key => value
donde el key es el nombre de la variable y el value
sera el valor que tomara esa variable.

## 媒体查询

para crear media queries es muy sencillo con la funcion 
mq() , primero le pasamos como primer argumento el tamaño
minimo de la pantalla en la cual queremos aplicar los estilos 

el segundo parametro le pasamos un arreglo con los selectores 
y sus propiedades css

*NOTA esta funcion solo aplica para min-width , en caso de querer
utilizar max-width le recomiendo utilizar la funcion lk() para
agregar un archivo css externo con las reglas que usted necesite

example :

mq("930",[
    sltr(//selector),
    unirStyles([
        sltr(//selector),
        sltr2(//selector)
    ])
]);

## 可用的 CSS 属性。#CLASS 选择器

    "0" => "box-sizing: ",
    "1" => "margin: ",
    "2" => "padding: ",
    "3" => "font-size: ",
    "4" => "font-family: ",
    "5" => "font-weight: ",
    "6" => "line-height: ",
    "7" => "color: ",
    "8" => "position: ",
    "9" => "display: ",
    "A" => "flex-direction: ",
    "B" => "justify-content: ",
    "C" => "width: ",
    "D" => "min-width: ",
    "E" => "height: ",
    "F" => "text-align: ",
    "G" => "margin-top: ",
    "H" => "align-self: ",
    "I" => "max-width: ",
    "J" => "background: ",
    "K" => "top: ",
    "L" => "background-color: ",
    "M" => "box-shadow: ",
    "N" => "border: ",
    "O" => "border-radius: ",
    "P" => "text-decoration: ",
    "Q" => "left: ",
    "R" => "margin-left: ",
    "S" => "background-image: ",
    "T" => "padding-top: ",
    "U" => "padding-bottom: ",
    "V" => "margin-bottom: ",
    "X" => "background-size: ",
    "Y" => "background-position: ",
    "Z" => "background-repeat: "

#CLASS Sp2

    "0" => "scroll-snap-align: ",
    "1" => "vertical-align: ",
    "2" => "overflow-x: ",
    "3" => "overflow-y: ",
    "4" => "overflow: ",
    "5" => "overscroll-behavior-x: ",
    "6" => "scroll-snap-type: ",
    "7" => "scroll-snap-align: ",
    "8" => "align-items: ",
    "9" => "list-style: ",
    "A" => "flex-wrap: ",
    "B" => "transition: ",
    "C" => "available spot: ",
    "D" => "available spot: ",
    "E" => "available spot: ",
    "F" => "available spot: ",
    "G" => "available spot: ",
    "H" => "available spot: ",
    "I" => "available spot: ",
    "J" => "available spot: ",
    "K" => "available spot: ",
    "L" => "available spot: ",
    "M" => "available spot: ",
    "N" => "available spot: ",
    "O" => "available spot: ",
    "P" => "available spot: ",
    "Q" => "available spot: ",
    "R" => "available spot: ",
    "S" => "available spot: ",
    "T" => "available spot: ",
    "U" => "available spot: ",
    "V" => "available spot: ",
    "X" => "available spot: ",
    "Y" => "available spot: ",
    "Z" => "available spot: "

## 连接到数据库

hoy 4/14/2021 , tenemos dos funciones para conectarnos a una base de datos
la primera es mysqli() y la segunda es pdo()

estas funciones retornan el objeto de la conexion para despues de conectarnos
poder trabajar con las consultas o lo que necesitemos hacer con la base de datos.

mysqli() recibe como argumentos : nombre del servidor, nombre de usuario y contraseña

pdo() recibe como argumentos : nombre del servidor, nombre de la base de datos, nombre de usuario y contraseña 

## 创建数据库

Para crear una base de datos tenemos los metodos 

createDbM() y createDbP(), el primero para crear una data base
utilizando mysqli() y el segundo utilizando pdo()

al igual que los metodos anteriores le pasamos por argumento los datos de 
conexion y el nombre de la base de datos que queremos crear, el orden es el 
siguiente : "server","username","password","dataBaseName"

## 注意事项

1- Aun no tiene todas las propiedades css implementadas

##################################

la razon de esto es que en la clase selector tenemos una 
lista limitada la cual puede ir aumentando segun tus necesidades.

pero existe otro detalle en el metodo walkArray()
en este metodo seleccionamos la primer letra de una cadena
en base a esa letra es como se define la propiedad css,

pero conforme vayas agregando mas propiedades notaras que 
los digitos del 0-9 mas las letras del alfabeto en mayusculas
no es suficiente para representar todas las propiedades con una 
sola letra por propiedad sin repetir.

###################################

las posibles soluciones que se me ocurren son las siguientes:
1- puedes agregar letras en minuscula la cual te da un tamaño
del doble del alfabeto para seguir agregando mas propiedades.

incluso puedes cambiar la distibucion de tu teclado pero eso 
seria no muy productivo.

2- puedes crear otro metodo que recorra la cadena y tome 
mas de una letra segun la propiedad pero eso seria otra implementacion
y tendrias que modificar el metodo walkArray por completo

3- la opcion que estoy considerando y creo que seria la mas ideal
implementar seria que cuando llegues al limite del alfabeto crear una 
nueva clase que herede los metodos de la clase anterior y sobre escribir 
la lista para nuevas propiedades.

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

2- Los espacios 

en algunas etiquetas espesificamente hablando de la etiqueta img() ,
hasta este punto es la unica etiqueta que recuerdo con la que he
tenido este inconveniente y es que en su atributo alt 
se le coloca una cadena de caracteres la cual puede contener espacios 

el problema es que el metodo createOpenTag() utiliza la funcion implode() 
para tomar al espacio como separador , entonces cuando usted 
le pase una cadena con espacios la funcion tomara todos y cada uno 
de esos espacios como una propiedad diferente lo cual se traducira a una 
descripcion imcompleta y probablemente le resulte en un error faltal.

por lo anterior al utilizar la etiqueta img le recomiendo reemplazar
los espacios de la cadena del atributo alt por guiones bajos u otro 
caracter que usted prefiera o bien implementar la descripcion con camelCase.

######### 补丁 #########

4/11/2021 :

si quiere mantener los espacios en alguna descripcion o es muy necesario
tener espacios en alguna propiedad como puede darse el caso en el atributo rel="shortcut icon"

puede utilizar el parche , con la funcion cls()
primeramente tendra que reemplazar el espacio con un _ asi :
lk("Rshortcut_icon");
y la funcion lk tendra que encerrarla dentro de la funcion cls()
de esta forma : cls(lk("Rshortcut_icon")); asi al imprimirse
los _ se reemplazaran de nuevo con espacios.

@@@@@@@@@@ 版本 0.0.2 @@@@@@@@

这个版本将专注于处理请求、优化 HTML 标签的读取和创建细节以及 CSS 实现的改进。

目前这个 seh-v0.0.2 分支将开始使用 TagAjax 类

以及 helpers doctype() 和 dt()，实际上它们是相同的，用于打印页面的 <!DOCTYPE html>，我实现两个 helper 的原因是为了有一种简短和详细的方式来描述正在执行的操作

参数顺序的改变，这个版本将把属性作为第二个参数，这样就可以避免在调用标签 x 时出现空值的情况，如果这个标签不需要参数

在这个版本中，我们将为 html 标签提供 html() 和 emptyHtml() 两个 helpers，两者的区别可以通过以下例子来理解

1- <html></html>
2- <html lang="en"></html>

例如。

对于第一个案例，使用 html() 函数的做法如下

html ();

对于第二种情况，使用html()函数，做法如下

html (null,'len');

对于第一种情况，使用emptyHtml()函数，做法如下

emptyHtml ();

对于第二种情况，使用emptyHtml()函数，做法如下

emptyHtml ('en');

如果关注两者的优势，这取决于具体情况，因此可以得出结论，实际上没有哪个函数比另一个更好，只是存在不同的使用场景。

回顾上述内容，html标签现在可以由lmh()函数来表示，字母来源于Hypertext Markup Language（html）的翻译，即超文本标记语言（lmh）。

这是目前创建html标签功能最强大的函数。

之所以说这是SEH（某种假设的库或框架）中最强大的函数，是因为它被划分为模块，这些模块组合在一起可以创建任何html标签的变体，甚至会在遇到不满足构建条件的参数时友好地通知用户错误。

接下来，我将展示关于head标签的进展，0.0.2版本的基本结构如下

dt();
lmh([
    head([
        metaGroup("Free html system","html, php, css, javascript","Ramiro G"),
        title("Http Requests & JavaScript")
    ]),
    body()
],'en');

如你所见，标签的函数名相同，只是现在不需要在开头添加null参数，因为默认情况下它是null。

metaGroup()函数是本版本新增的，其功能是让我们自己声明项目必须包含的meta标签。

参数是可选的，但强烈建议将页面描述作为第一个参数传递，将关键词或关键词字符串作为第二个参数传递（以逗号分隔），最后是作者名称。这有助于网页SEO和编程实践。

现在，要增加SEH的功能，只需关注三个文件。

IWantA文件中包含了每个标签的定义，只需修改表示它们的数组值即可。

ListaMatches文件中只需添加字母和其值，即可获得更多属性。

helpers文件是SEH所有力量的汇聚点，用于创建所有标签。

为了添加多个属性，现在我引入了|字符，这样就可以避免与前一版本相同的空格问题，并且不再需要使用cls()函数。

以下是一个示例，说明了上述内容：lnk()函数，它是前一个版本lk()函数的等效函数。

但现在它将添加rel和href属性，如下所示

lnk("rstylesheet|h#");