2020-07-30 Semanticization of html + maximum and minimum z-index of css + MutationObserver of JS + full-width half-width difference of soft skills

2020-07-30 Source of topic: http://www.h-camel.com/index.html

[html] Semanticization of HTML

HTML semantics, similar to the alt attribute of the img tag, or the label tag that matches the input tag, etc.

The advantages of semantics are:

1. When you remove or lose the style, the page can show a clear structure.

2. Conducive to SEO and help crawlers to obtain more effective information.

3. Facilitate analysis by other devices, such as screen readers, mobile devices, etc.

4. Facilitate the development and maintenance of the team, increase the readability of the code, and reduce the differentiation caused by development.

[css] What is the maximum and minimum z-index settings?

Z-index is used to specify the stacking order of elements, and elements need to be positioned (position: absolute, position: relative, or position: fixed).

The minimum value of z-index can be -1

The maximum value of z-index is 2147483647, the maximum value of int for 32-bit operating systems, which is different from browsers.

[js] What are the application scenarios of MutationObserver?

MutationObserver is an interface that can monitor changes in the DOM structure.

//选择一个需要观察的节点
var targetNode = document.getElementById('some-id');

// 设置observer的配置选项
var config = { attributes: true, childList: true, subtree: true };

// 当节点发生变化时的需要执行的函数
var callback = function(mutationsList, observer) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// 创建一个observer示例与回调函数相关联
var observer = new MutationObserver(callback);

//使用配置文件对目标节点进行观测
observer.observe(targetNode, config);

// 停止观测
observer.disconnect();

Look here: Short book https://www.jianshu.com/p/90f042c9e42f

[Soft skills] What is the difference between full-width characters and half-width characters?

1. Full-width: One character occupies 2 standard character positions. Chinese characters, graphic symbols, and special characters are all full-width, and are generally only used for word processing.

2. Half-width: One character occupies one standard character position. English letters, numbers, and symbol keys are all half-width. Half-width characters are ASCII characters.