css flex , and test CSS, HTML, JS

https://yakimhsu.com/project/project_w6_CSS_flex.html CSS - 跟著 🐸🐸 學 Flex 排版

https://www.oxxostudio.tw/articles/201501/css-flexbox.html

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://davidshariff.com/quiz/
If you have a <p> element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?   F （這英文是說user縮放視窗會跟著響應式變動，不是說放大縮小ctrl+, ctrl-）

css 中
:root 和 html 一樣，指示:root優先級更高
---
The pseudo class :checked will select inputs with type radio or checkbox, but not <option> elements.   F  (這英文是說會塞選出radio和checkbox, blabla～就不對)
---
Given the HTML below:
<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>


What is the color of the text Sausage ?
#awesome .favorite:not(#awesome) .highlight {
    color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
    color: blue;
}

ANS:red  //因為在.favorate的偽類裡有用id，瞬間把它優先級提升
---
HTML:
<div id="test1">
    <span id="test2"></span>
</div>
CSS:
#i-am-useless {
    background-image: url('mypic.jpg');
}
Are unused style resources still downloaded by the browser? no  // 圖片不會被下載
---
HTML:

<div id="test1">
    <span id="test2"></span>
</div>
CSS:

#test1 {
    display: none;
}
#test2 {
    background-image: url('mypic.jpg');
    visibility: hidden;
}
On page load, will mypic.jpg get downloaded by the browser? No  // 跟上題相似的觀念
---
@media only screen and (max-width: 1024px) {
    margin: 0;
}
What is the use of the only selector?
ANS: Stops older browsers from parsing the remainder of the selector.
https://muki.tw/tech/css-media-queries-introduce-basic/
---
HTML:

<div>
    <p>I am floated</p>
    <p>So am I</p>
</div>
CSS:

div {
    overflow: hidden;
}
p {
    float: left;
}
Does overflow: hidden create a new block formatting context? YES （這句的意思是overflow:hidden還會有block存在嗎？不是多再生一個block）


HTML

Is <keygen> a valid HTML5 tag? YES   //此支援度還不足以成為標準
---
If a web page contains organic, multiple <h1> tags, will it affect the SEO negativley? No

It depends which HTML version you are using. If it's HTML4 or XHTML, only use one h1 per page, but if you are using HTML5 you can have one per section. So you could have one in your <nav>, on in your <article>, one in each of the <aside>s on your page and one in your <footer>.

The reason for this is that for HTML4 search engines look at headings to give the page hierachy - remember they only had <div>s to separate content areas - but HTML5 uses the new semantic elements like <header> and <fotter> to work out hierarchy, with headings only affecting hierachy within one of those tags.
---
If you have a page of search results and want to highlight the search term, what HTML tag would you use? <mark>

<mark> usage notes

Typical use cases for <mark> include:

• When used in a quotation (<q>) or block quote (<blockquote>), it generally indicates text which is of special interest but is not marked in the original source material, or material which needs special scrutiny even though the original author didn't think it was of particular importance. Think of this like using a highlighter pen in a book to mark passages that you find of interest.
• Otherwise, <mark> indicates a portion of the document's content which is likely to be relevant to the user's current activity. This might be used, for example, to indicate the words that matched a search operation.
• Don't use <mark> for syntax highlighting purposes; instead, use the <span> element with appropriate CSS applied to it.

Don't confuse <mark> with the <strong> element; <mark> is used to denote content which has a degree of relevance, while <strong> indicates spans of text of importance.

<q>111</q>  //"111", as inline type
<blockquote>333</blockquote>  // "333", as block type
https://www.lifewire.com/whats-new-in-html5-3467974
---
<div style="display: none;">
    <img src="mypic.jpg" alt="My photo">
</div>

Does the HTML above trigger a http request when the page first loads?YES  //這個不同於寫在css裡的background-image會受display:none影響，是因為這個resource是寫在HTML，程式HTML和CSS是分開的體系
---
<head>
    <link href="main1.css" rel="stylesheet">
    <link href="main2.css" rel="stylesheet">
</head>
Does main1.css have to be downloaded and parsed before main2.css can be fetched?No

Render order is:

1. Build the DOM (Document Object Model) from the received HTML
2. If we encounter a CSS style sheet (embedded or linked), start building the CSSOM (CSS Object Model — we’ll get into what this is in a bit).
3. If we encounter a JS block (not designated as async) while building the DOM, wait for CSSOM construction, stop DOM construction and parse/execute the code. The reason for this is because JS execution can modify the DOM and access/modify the CSSOM.

It’s easy to take utmost care to tree-shake(???), route-split, and lazy-load our JavaScript, but sometimes CSS can be forgotten.

First, the browser removes all non-visible elements. This includes elements such as <head>, <script>, and <meta>, as well as HTML elements that have the hidden attribute. These elements, although used by other parts of the app, won’t be rendered to the page, so the browser can safely proceed with rendering knowing that all elements in the render tree are in fact visible HTML elements.

Next, we go through the CSSOM and find out which elements in our current render tree match the CSS selectors. The CSS rules for any selector that does match will be applied to that node of the render tree.

There’s one CSS rule that’s an exception, though. Applying display: none; in a CSS rule will remove an element from the render tree entirely. This goes back to only including visible elements in the render tree. Other methods of hiding an element, such as opacity: 0; will not remove an element from the render tree but rather render it without showing it.

---

var x = 3;

var foo = {
    x: 2,
    baz: {
        x: 1,
        bar: function() {
            return this.x;
        }
    }
}

var go = foo.baz.bar;

alert(go());
alert(foo.baz.bar());
What is the order of values alerted?3,1
---
var x   = 4,
    obj = {
        x: 3,
        bar: function() {
            var x = 2;
            setTimeout(function() {  // 由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致，这些代码中包含的 this 关键字在非严格模式会指向 window (或全局)对象，严格模式下为 undefined，这和所期望的this的值是不一样的。  
                //https://www.cnblogs.com/zsqos/p/6188835.html
               //https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout
                var x = 1;
                alert(this.x);
            }, 1000);
        }
    };
obj.bar();
What value is alerted?4
---
x = 1;
function bar() {
    this.x = 2;
    return x;
}
var foo = new bar();
alert(foo.x);
What value is alerted?2

let obj, method;

obj = {
  go: function() { alert(this); }
};

obj.go();               // (1) [object Object]

(obj.go)();             // (2) [object Object]

(method = obj.go)();    // (3) [object Window]

(obj.go || obj.stop)(); // (4) [object Window]

其中（2）的()沒有意義，
（3）The call works as if it were split into two lines:

f = obj.go; // calculate the expression
f();        // call what we have

（4）???
---
function foo(a) {
    alert(arguments.length);
}
foo(1, 2, 3);
---
function foo(a) {
    arguments[0] = 2;
    alert(a);
}
foo(1);
What value is alerted?2
---
function foo(){}
delete foo.length;
alert(typeof foo.length);
What value is alerted?number