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:
Build the DOM (Document Object Model) from the received HTML
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).
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
其中（2）的()沒有意義， （3）The call works as if it were split into two lines:
f = obj.go;// calculate the expressionf();// 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
require.context
the example below is easy to understand, and it seems like if the modules you want to import are not very much, then writing in "require.context" way is more complicated.
Fortunately, if you’re using Webpack (or Vue CLI 3+, which uses Webpack internally), you can use require.context to globally register only these very common base components. Here’s an example of the code you might use to globally import base components in your app’s entry file (e.g. src/main.js):
import Vue from'vue'import upperFirst from'lodash/upperFirst'import camelCase from'lodash/camelCase'const requireComponent = require.context(
// The relative path of the components folder'./components',
// Whether or not to look in subfoldersfalse,
// The regular expression used to match base component filenames
/Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
// Get component configconst componentConfig = requireComponent(fileName)
// Get PascalCase name of componentconst componentName = upperFirst(
camelCase(
// Gets the file name regardless of folder depth
fileName
.split('/')
.pop()
.replace(/\.\w+$/, '')
)
)
// Register component globally
Vue.component(
componentName,
// Look for the component options on `.default`, which will// exist if the component was exported with `export default`,// otherwise fall back to module's root.
componentConfig.default || componentConfig
)
})
request.set_form_data({"image" => image_url})
response = http.request(request)
json = JSON.parse(response.read_body)
begin
json['data']['link'].gsub("http:","https:")
rescue
nil
end
end
照著填就可以。