2020-08-10 html elegante estructura html + css bloqueo de css + valor chino de cookie JS + habilidades blandas dpr y dpi

2020-08-10 Fuente del tema: http://www.h-camel.com/index.html

[html] ¿Cómo escribir una elegante estructura HTML?

1. Los diferentes tipos de archivos se clasifican en carpetas, css js img, etc.

2. Evite la duplicación de código. Escriba el código js y el código css en archivos separados y luego impórtelos en htm. Preste atención al orden de introducción. Es la separación de la capa de estructura, la capa de presentación y la capa de comportamiento.

3. La estructura del código está cerca del orden visual y los elementos a nivel de bloque comienzan una nueva línea

El ajuste básico del formato de la estructura del código, el editor nos ha ayudado a realizarlo.

[css] ¿En qué circunstancias se bloqueará css?

1. Bloqueo de CSS: cuando css va seguido de js incrustado, css no bloqueará la descarga de los siguientes recursos, pero bloqueará la ejecución. Necesita poner js incrustados delante de css para no bloquear.

La causa raíz: el navegador mantendrá el orden de css y js en el html, la hoja de estilo debe cargarse y analizarse antes de que se ejecute el js incrustado, y el js incrustado bloqueará la carga de recursos subsiguiente, lo que muestra que está bloqueando css.

2. Bloqueo de JS: los js integrados bloquearán la presentación de todo el contenido, mientras que los js externos bloquearán la visualización del siguiente contenido.

Entonces, ponga el guión al final. <link>还是放在head中,用以保证在js加载前,能加载出正常显示的页面。<script>标签放在</body>前.

Artículo de referencia: https://www.cnblogs.com/bibiafa/p/9364986.html

[js] ¿Se puede establecer el valor de la cookie en chino? ¿por qué? ¿Si se puede configurar?

La configuración de cookies en chino informará un error, UnicodeEncodeError: el códec 'latin-1' no puede codificar el carácter '\ u90d1' en la posición 288: el ordinal no está en el rango (256), el chino no puede pasar la codificación Latin-1;

Solución: use la codificación utf-8

设置cookie:
newuser = username.encode('utf-8').decode('latin-1')
response.set_cookie('uname',newuser)

获取cookie:
if request.COOKIES.get('uname'){
    context['uname'] = request.COOKIES['uname'].encode('latin-1').decode('utf-8')
}

[Habilidades blandas] Por favor, explique dpr y dpi

1. Valor de píxeles de ppp por pulgada, 1 pulgada = 25,41 mm. El tamaño del papel A4 es 210 × 297 mm y la resolución según el estándar de 96 ppp es 794 × 1123

2. proporción de píxeles del dispositivo dpr, proporción de píxeles del dispositivo (dpr) = píxel del dispositivo (resolución) / píxel independiente del dispositivo (tamaño de la pantalla)

Ventana de diseño: tamaño de la pantalla

Ventana visual: para resolver el problema de la visualización deficiente del sitio web del lado de la PC en el terminal móvil, la ventana de diseño es más ancha que el ancho de la pantalla del dispositivo, generalmente 980

<meta name="viewport" content="width:device-width, initial-scale=1.0, maximum=1.0, minimum=1.0, user-scalable=no">

Esta línea de código establece el tamaño de la ventana visual para que sea igual al tamaño de la ventana de diseño, de modo que cuando establecemos los píxeles CSS en el código, la configuración es la misma que el efecto de representación.

Supongo que te gusta

Origin blog.csdn.net/vampire10086/article/details/108449494
Recomendado
Clasificación