fronteras, sombras
borde redondeado
Nombre del atributo: radio de borde
Valores comunes: número + px, porcentaje (comenzando desde la esquina superior izquierda, en el sentido de las agujas del reloj)
circulo perfecto
La caja debe ser cuadrada.
radio de borde: 50%
botón de cápsula
la caja es rectangular
radio de borde: la mitad de la altura de la caja
Desbordamiento
valor predeterminado visible, la parte de desbordamiento es visible
oculto La parte de desbordamiento está oculta
scroll muestra barras de desplazamiento independientemente de si se desborda o no
Auto muestra u oculta automáticamente según si se desborda o no
El elemento en sí está oculto.
visibilidad: oculta (marcador de posición oculto)
display:none (oculto sin ocupar espacio)
Visualización y ocultación de códigos QR
Agregue display:none; al código QR;
Luego agregue el estado de movimiento del mouse al botón
cuadro a: desplazar img{
bloqueo de pantalla;
}
La transparencia general del elemento.
La opacidad hará que todo el elemento sea transparente, incluido el contenido interno (texto, subelementos, etc.)
duendes
introducir:
Escenario: en el proyecto, se combinan varias imágenes pequeñas en una imagen grande, y esta imagen se convierte en un objeto.
Ventajas: reduzca la cantidad de envíos del servidor, reduzca la presión del servidor y mejore la velocidad de carga de la página
usar:
Cree un cuadro y establezca el tamaño del cuadro para que sea el mismo que el tamaño de la miniatura
Establecer el sprite como imagen de fondo del cuadro.
Modificar la posición de la imagen de fondo
Utilice PxCook para medir las coordenadas de la esquina superior izquierda de la imagen pequeña y establezca el valor negativo en la posición de fondo del cuadro: xy
Todas las etiquetas de los diagramas de sprites usan etiquetas en línea (span, b, i...)
Necesita convertirse en elementos en línea.
Estilo de imagen de fondo
tamaño de fondo: ancho y alto; valor:
Número+px: simple, conveniente y de uso común
Porcentaje: porcentaje de ancho y alto en relación con el cuadro actual.
contener: Contiene, escala la imagen de fondo proporcionalmente hasta que no exceda el tamaño máximo del cuadro
portada: Cubra, escale la imagen de fondo en proporciones iguales hasta que llene todo el cuadro sin ningún espacio en blanco.
fondo: posición/tamaño de repetición de la imagen en color;
sombra de la caja
Nombre de propiedad: sombra de caja
Valor:
parámetro |
efecto |
h-sombra |
Desplazamiento horizontal requerido. Valores negativos permitidos |
v-sombra |
Desplazamiento vertical requerido. Valores negativos permitidos |
difuminar |
opcional, borrosidad |
desparramar |
opcional, ampliación de sombra |
color |
Opcional, color de sombra. |
recuadro |
Opcionalmente, cambie la sombra a sombra interior. |
transición
Función: permite que el estilo de los elementos cambie lentamente. A menudo se utiliza al pasar el mouse para mejorar la experiencia interactiva de las páginas web.
Nombre del atributo: transición
Valores comunes:
parámetro |
valor |
Propiedades de transición |
all: todas las propiedades que se pueden transferir se transfieren |
Duración de la transición |
Número + es (segundos), el nombre del atributo específico es como: ancho: solo se puede realizar la transición al ancho |
punto importante:
Requisitos de transición: solo el estado predeterminado y el estado de desplazamiento son diferentes
El atributo de transición se agrega al propio elemento que necesita realizar la transición.
El atributo de transición se establece en diferentes estados con diferentes efectos.
Establezca el estado predeterminado y tendrá un efecto cuando se mueva o retire el mouse.
Establezca el estado de desplazamiento. Habrá un efecto de transición cuando el mouse se mueva hacia adentro y no habrá efecto de transición cuando el mouse se mueva hacia afuera.
Etiqueta de estructura esquelética
Declaración de tipo de documento, que le indica al navegador la versión HTML de la página web.
Idioma de la página web
<html lang="es">Identifica el idioma utilizado por la página web
Función: clasificación del motor de búsqueda + traducción del navegador
Idiomas comunes: zh-CN chino simplificado/en inglés
Codificación de caracteres
<meta charset="UTF-8">Identifica la codificación de caracteres utilizada por la página web</meta>
UTF-8: Unicódigo
GB2312: más de 6000 caracteres chinos
GBK:: 20000+ caracteres chinos
SEO tres etiquetas principales
SEO (optimización de motores de búsqueda): optimización de motores de búsqueda
Introducción a JavaScript
Desarrollo del lenguaje:
-Máquina de cinta: lenguaje de máquina
-Lenguaje ensamblador: lenguaje simbólico
-Lenguajes Modernos: Idiomas de Alto Nivel
origen:
JavaScript nació en 1995. Su aparición se utiliza principalmente para manejar la validación frontal en páginas web.
Verificación frontal: verifique si el contenido ingresado por el usuario cumple con ciertas reglas (longitud del nombre de usuario, longitud de la contraseña, formato de la dirección de correo electrónico)
JScript introducido por Microsoft, tiene la misma funcionalidad que JavaScript
ECMAScript es un estándar de JavaScript, por lo que generalmente se considera que tiene el mismo significado.
De hecho, el significado de JavaScript es más amplio.
Una implementación completa de JavaScript debe constar de las siguientes tres partes:
ECMAScript
DOM (operación de páginas web a través de js)
BOM (operando el navegador a través de js)
Características de JS
-lenguaje interpretado
-Estructura sintáctica similar a C y Java.
-Lenguaje dinámico
-Orientado a objetos basado en prototipos
HBuilder vuelve al paso anterior Ctrl+Z
Deshacer Regresar Ctrl+Y
<!DOCTYPE html>
<html>
<cabeza>
<meta juego de caracteres="utf-8" />
<título></título>
<!-- El código JS debe escribirse en la etiqueta del script -->
<tipo de script="texto/javascript">
// Controla el navegador para que aparezca un cuadro de alerta
// alert("Este es un cuadro de advertencia, preste atención a Gu Wenjing");
// Deja que la computadora genere un contenido en la página (cuerpo)
// document.write("Mírame mostrar mis poderes mágicos");
// console.log() envía un contenido a la consola
// console.log("¿De dónde crees que salí?");
alert("Este es un cuadro de advertencia, preste atención a Gu Wenjing");
document.write("Mírame mostrar mis poderes mágicos");
console.log("¿De dónde crees que vengo?");
// orden de compilación JS de arriba a abajo
</script>
</cabeza>
<cuerpo>
</cuerpo>
</html>
Estrictamente entre mayúsculas y minúsculas en JS
Cada declaración en JS termina con un punto y coma (si no escribe un punto y coma, el navegador lo agregará automáticamente, pero consumirá algunos recursos del sistema y, a veces, el sistema agregará un punto y coma incorrecto)
JS ignora múltiples espacios y nuevas líneas
Literales y variables
Literales: todos son valores inmutables (los literales se pueden usar directamente)
Variables: las variables se pueden utilizar para almacenar literales.
Declarar variables: use la palabra clave var para declarar una variable en JS
identificador
-En JS, cualquier cosa que podamos nombrar se puede llamar identificador.
-Por ejemplo: los nombres de funciones, los nombres de variables y los nombres de atributos son todos identificadores
-Las reglas de nomenclatura son las mismas que en C/java.
Cuando la capa subyacente JS guarda el identificador, en realidad se utiliza la codificación Unicode.
Entonces, en teoría, todo el contenido contenido en utf-8 se puede usar como identificador.
El chino también se puede utilizar como nombres de variables.
tipo de datos
cadena de cuerda
Valor numérico
Valor booleano
valor nulo nulo
Indefinido indefinido
Objeto objeto (tipo de datos de referencia)
Cadena
-- Las cadenas deben estar entre comillas en JS
-- Se pueden utilizar comillas simples y dobles.
var str = “Hola”；
str = "Dije: \"¡Hoy hace muy buen tiempo! \"";
Al expresar algunos símbolos especiales, puede usar \ para escapar
\" |
" |
\' |
' |
\norte |
Indica salto de línea |
\ t |
Pestañas |
\\ |
\ |
Número
Incluye números enteros y de coma flotante.
var a =123；
varb = “123”；
Puede utilizar un operador typeof para comprobar el tipo de una variable
Sintaxis: tipo de variable
Al verificar una cadena, se devuelve una cadena
Al verificar el valor, devolverá el número.
console.log(tipo de b);
Number.MAX_VALUE se puede usar en JS para representar el valor máximo de un número
1.7976931348623157e+308
Si se excede el valor máximo, se devolverá Infinity (literal, infinito positivo)
NaN es un número especial que significa No es un número
Usar typeof para verificar si hay un NaN también devuelve un número
Number.MIN_VALUE representa el valor mínimo por encima de 0 5e-324
Booleano
verdadero Falso
Nulo
El valor de retorno de verificación nula es objeto
indefinido
Cuando declara una variable pero no le asigna un valor, su valor no está definido.
conversión de tipo forzada
Convertir otros tipos de datos a String
método uno:
--Llamar al método toString() del tipo de datos convertido
--Este método no afectará la variable original, devolverá el resultado de la conversión
--Pero tenga en cuenta: los dos valores nulos e indefinidos no tienen toString, y se informará un error si se llama a sus métodos.
a.toString();
Método 2:
--Llame a la función String() y pase los datos convertidos como parámetro a la función a=String(a);
--Para Número y Booleano, en realidad se llama al método toString(); pero para nulo e indefinido, no se llamará a toString() y seguirá siendo el tipo correspondiente.
将其它数据类型转换为Number
调用Number函数将a转换为Number类型
字符串-->数字
如果是纯数字的字符串，则直接将其转化为数字
如果字符串有非数字的话，则转化为NaN
如果字符串是一个空串或者是一个全是空格的字符串则转化成0
布尔-->数字
true 转成1
false 转成0
null-->数字 0
undefined->数字 NaN
如果对非String使用parseInt（）或parseFloat（）会先将器转化成String然后再操作
a="123.456.789px";
a=parseInt(a);
a=parseFloat(a);
其他进制的数字
在JS中，如果需要表示16进制的数字，则需要以0x开头
如果需要表示8进制的数字，则需要以0开头
如果需要表示2进制的数字，则需要以0b开头
有时浏览器无法判定进制，可以用a=parseInt(a,10)
a是要被转化的数，数字是要转换的进制
JAVA 与 JS
|
JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。 Java（由 Sun 发明）是更复杂的编程语言。 ECMA-262 是 JavaScript 标准的官方名称。 JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。 |
基础语法
非布尔值进行与或运算
---对于非布尔值进行与或运算时，会先将其转化为布尔值，然后再运算，并且返回原值
&&
如果第一个值为true，则必然返回第二个值。
如果第一个值为false，则必然返回第一个值。
||
如果第一个值是true，则直接返回第一个值。
如果第一个值是false，则直接返回第二个值。
赋值运算符
=、+=、-=、*+、/=、%=
关系运算符
如果关系成立则返回true，如果关系不成立则返回false
非数值会先转化为数值，再进行运算
任何值和NaN做任何比较都是false
如果符合两侧的值都是字符串，不会将其转化为数字进行比较。而会分别比较Unicode编码。比较字符编码时，是一位一位进行比较的。如果两位一样，则比较下一位，所以借用他来对英文进行排序。
Unicode编码表
在字符串中使用转义字符输入Unicode编码
\u（四位编码）
console.log("\u1C00");
在网页中使用Unicode编码
&#编码；这里的编码需要的是十进制
☠
相等运算符
用来比较两个值是否相等==
undefined衍生自null，所以两值判断是为true
NaN不和任何值相等，包括他本身。
可以通过isNaN（）函数来判断是不是NaN
===全等，不会自动做类型转换
条件运算符（三元运算符）
条件表达式？语句1：语句2；
如果条件表达式的求值结果是非bool类型，会先将其转化为bool值，true返回第二个，false返回第一个。
运算符的优先级
&&的优先级高
代码块
在JS中使用{ }来为语句进行分组
对象
对象只是带有属性和方法的特殊数据类型。
对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。
对象的分类
内建对象
由ES标准中定义的对象，在任何的ES中都可以实现
比如：Math String Number Boolean Function Object...
宿主对象
由JS的运行环境提供的对象，目前来讲主要由浏览器提供的对象。
比如BOM DOM
自定义对象
由开发人员自己创建的对象
对象的基本操作
创建对象
使用new关键字调用的函数，是构造函数constructor
构造函数是专门用来创建对象的函数
使用typeoof检查一个对象时，会返回object
var obj=new Object ( );
属性
在对象中保存的值称为属性
向对象添加属性
对象.属性名 = 属性值 ；
obj.name="孙悟空";
obj.gender="男"；
obj.age = 18 ;
读取对象中的属性
对象.属性名
如果读取对象中没有该对象，不会报错，而是会返回undefined
修改对象的属性
对象.属性名=新值；
删除对象的属性
delete 对象名.属性值；
对象的属性名不强制要求遵守标识符的规范
如果需要使用特殊的属性名，不能采用.的方式来操作
需要另一种方式： 对象 ["属性名"] = "属性值"
读取时也需要采用这种方式
使用[ ]这种形式去操作属性，更加的灵活
在[ ]中可以直接传递一个变量，这样变量值是多少都会读取那个属性
obj["123"]=789;
obj["nihao "]="你好";
var n= "123";
console.log(obj[n]);
属性值
JS对象的属性值，可以是任意的数据类型
in运算符
通过该运算符可以检查一个对象中是否含有指定的属性
如果有则返回true，没有则返回false
"属性名" in 对象
例：console.log("name".obj);
基本数据类型
字符串（String）
数字(Number)
布尔(Boolean)
空（Null）
未定义（Undefined）
Symbol
注：*Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。*
引用数据类型
对象(Object)
数组(Array)
函数(Function)
正则（RegExp）
日期（Date）
JS中的变量值都保存到栈中
基本数据类型的值直接在栈内存中存储；
值与值之间是独立存在的，修改一个变量不会影响其他的变量
对象是保存堆内存中的，每创建一个新的对象，就会在对内存中开辟一个新的空间。而变量保存的是变量的内存地址（对象的引用）。
当比较两个基本数据类型的值时，比较的是值的大小。
当比较两个引用数据类型时，比较的是对象的内存地址。
对象字面量
var obj={name:"猪八戒"，
age：28，
gender：男}；
属性名和属性值是一组一组的名值对结构，名和值之间使用 :连接，多个名值对之间使用，隔开如果一个属性之后没有其他的属性了，就不要写，
函数
函数也是一个对象
函数中可以封装一些功能（代码），在需要时可以执行这些功能。
创建一个函数对象
可以将要封装的代码一字符串的形式传递给构造函数
var fun = new Function（）；
函数对象（）；
调用函数时，按照顺序执行。
使用函数声明来创建一个函数
function 函数名（[形参1，形参2，...形参n]）{ }
如果return语句后不跟任何值就相当于返回一个undefined
如果不写return，则也返回undefined
实参可以是一个对象，也可以是一个函数
返回值可以是任意的数据类型
立即执行函数
（function (){
alert("我是一个匿名函数~~~");
})();
调用函数后立即被执行，往往只会执行一次。
方法
加. 是 调方法
不加.是 调函数
For/In 循环
JavaScript for/in 语句循环遍历对象的属性：
实例
var person={fname:"Bill", lname:"Gates", age:56};
for (x in person)
{ txt=txt + person[x];
console.log(txt)
}
作用域
作用域是可访问变量的集合（一个变量的作用范围）。
全局作用域
a.全局变量在页面打开时创建，页面关闭后销毁。
b.在 HTML 中, 全局变量是 window 对象，所以window 对 象可以调用函数内的局部变量。
c.直接编写在script标签中的JS代码，都在全局作用域。
d.在全局作用域中，
创建的变量都会作为window对象的属性保存
创建的函数都会作为window对象的方法保存
注意：所有数据变量都属于 window 对象(创建)。
变量的声明提前
使用var关键字声明的变量，会在所有的代码执行之前被声明（但不会被赋值），但是如果声明变量是不使用var关键字，则变量不会被声明提前。
函数的声明提前
使用函数声明形式创建的函数function 函数（）{ }
它会在所有代码执行之前就被创建
函数作用域
a.调用函数时，创建函数作用域，函数执行完毕后销毁
每调用一次就会创建一个新的函数作用域，他们之间相互独立
b.在函数作用域中可以访问到全局变量的作用域
在全局作用域中无法访问到函数作用域的变量
c.变量使用：就近原则。如果找不到，则会报错。
在函数作用域中也有 声明提前的特性
使用var关键字声明的变量，会在函数中所有的代码执行之前被声明。
你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。局部变量，包括 window 对象可以覆盖全局变量和函数。
this关键字
解析器在调用函数时，每次都会向函数内部传递一个隐含的参数
这个隐藏的参数就是this（请忽略我）