2020-08-10 Subject source: http://www.h-camel.com/index.html
[html] How to write an elegant HTML structure?
1. Different types of files are classified into folders, css js img, etc.
2. Avoid duplication of code. Write js code and css code into separate files, and then import them in htm. Pay attention to the order of introduction. It is the separation of structure layer, presentation layer, and behavior layer.
3. The code structure is close to the visual order, and the block-level elements start on a new line
The basic code structure format adjustment, the editor has helped us realize it.
[css] Under what circumstances will css block?
1. CSS blocking: When css is followed by embedded js, the css will not block the download of the following resources, but will block the execution. Need to put embedded js in front of css to not block.
The root cause: the browser will maintain the order of css and js in the html, the style sheet must be loaded and parsed before the embedded js is executed, and the embedded js will block the subsequent resource loading, which shows that it is css blocking.
2. JS blocking: Embedded js will block the presentation of all content, while external js will block the display of the following content.
So, put the script at the bottom. <link>还是放在head中，用以保证在js加载前，能加载出正常显示的页面。<script>标签放在</body>前.
Reference article: https://www.cnblogs.com/bibiafa/p/9364986.html
[js] Can the cookie value be set to Chinese? why? If it can be set up?
Cookie settings in Chinese will report an error, UnicodeEncodeError:'latin-1' codec can't encode character'\u90d1' in position 288: ordinal not in range(256), Chinese cannot pass Latin-1 encoding;
Solution: Use utf-8 encoding
设置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')
}
[Soft skills] Please explain dpr and dpi
1. dpi pixel value per inch, 1 inch = 25.41mm. The size of A4 paper is 210×297mm, and the resolution under the 96dpi standard is 794×1123
2. dpr device pixel ratio, device pixel ratio (dpr) = device pixel (resolution) / device independent pixel (screen size)
Layout window: screen size
Visual window: In order to solve the problem of poor display of the PC-side website on the mobile terminal, the layout window is wider than the device screen width, generally 980
<meta name="viewport" content="width:device-width, initial-scale=1.0, maximum=1.0, minimum=1.0, user-scalable=no">
This line of code sets the size of the visual window to be equal to the size of the layout window, so that when we set the CSS pixels in the code, the setting is the same as the rendering effect.