html and CSS Flashcards
how to make the block of text to the middle by CSS
shorter method:
in {
margin: 10px auto;
longer method
margin-left: auto;
margin-right: auto
display : flex, What is the difference of:
jusify-content: center;
align-items: center;
jusify-content: center; is 橫向中間,
usually justify-content is about horizontal
align-items: center; is 直向中間
usually justify-content is about vertical
(REMEMBER, it is NOT align-content
flex: 1
或者
flex: 2
有什麼用途
代表所占份額
height: auto 有什麼用途
會根據裡面的內容放大放小
margin: 10px 20px 30px 40px ;
margin: 10px 20px;
margin: 20px;
margin: 10px 20px 30px
方向是什麼
順時針, 上右下左
第1個是上下, 這個是左右
4個方向都是
上 左右 下
比較margin and padding 的異同
padding: 10px
Margin是box 外面, padding 是 box 裡面的東西跟box邊緣的距離
運作的方向跟margin一模一樣
border: solid 1px #000000
什麼意思
加一條黑線
have display: flex; and without it, what’s the difference?
打橫直下?
have display: flex; 打橫嚮右
without it,直下
flex-wrap: wrap;
box 如果空間不足放裡面的item, 又不想item變形, 用這個item 會往下一行下一行的排列
what is the default of justify-content: ????
justify-content:flex-start;
justify-content: space-betwenn;
II
@media screen and (max-width: 480px){
}
一般手機的size 不會超過 480px.
如果不超過的話就會執行花括號
Can we just the flex direction?
yes, just :
flex-direction: column;
relationship of flex direction?, justify-content, align-items?
flex-direction; will determine it,
如果我要把margin 變成0, 但在於itemi寫了零又變不到, 通常怎麼做
在於style , 裡面設置mirgin: 0;
為什麼標題最好使用h1
因為這是給搜索引擎看的
in display: flex; , what can I just use taxt-align: center; in other text?
No, because after display flex, the text is forever in justified contented designated by display: flex;, the range of h1 become very small
並非universal (btw idk why?)
one of the usage of flex : 1?
If I want two items in one box, One item in the middle and one item on the right side,
如何弄一個hyper link
<a>資料來源醫管局</a>
如何令hyper link消失
a {
text-decoration: none;
}
whats da use of <br></br>
next line
how to type < and > in form of text in CSS?
you just <p>< 1 小時</p> (less than)
> = greater than
what does it mean by an item having
width: 50%?
the item 佔用某個方向一半的頁面
do CSS accepts decimal?
sometimes YES
how to make 圓角 box
border-radius: 20px;
box-sizing: border-box;
有什麼用
The box-sizing CSS property sets how the total width and height of an element is calculated.
主要是有時候因為使用了padding, 導致邊界過大
position: relative;
top: 50px;
left: 50px;
有什麼用
不影響其他item, 直接移動item
position: absolute;
top: 50px;
left: 510px;
有什麼用
沒有了自己在flex的位置, 死死的鎖著
相對於上一個element’s position 的位置`
如果上一個element’s position , positon: static;
則代表 item 離上方邊緣50px
如果上一個element’s position , positon: relative;
則代表 item 離上一個element上方邊緣50px
position: fixed;
有什麼用
position: sticky;
top: 0px;
完全fix在 頁面某個位置, 最簡單, 沒有relative
position: sticky; 一般用來可以動, 那就黏住上方
How to tune two objects at the same time in style?
.itemA, .itemB{
}
how to insert image?
<img></img>
What is *
- is wild card, which means apply to all
if I say
div * (HAVE SPACE)
, which means apply to all in element div
how to insert Javascript?
inside , just open .
Then you can start to write JS code.
is web Javascript and Node.JS the same?
No, some functions cannot be run in Node.JS
let count = document.querySelector('span')
是什麼抽span 這個element
const clock = document.querySelector('div')
clock.innerHTML = "fuck you"
有什麼用
指向一個 element 或者 class
e. g.
document. querySelector(‘.fa-arrow-up’)
innerHTML 應該是改掉element
we are accessing the innerHTML which is the html code inside the element being selected.
What to do if you want to get image online
First step, you go to CDNJS, then use the latest default version, then choose “styling”, then “copy link tag”
Paste it to under , preferably before .
Second, You go to font-awesome to search image, then use the latest version, then paste it
How to make querySelectoreAll to assign multiple class?
let arrows = document.querySelectorAll('.buttons .fa-solid')
for (const arrow of arrows) {
arrow.addEventListener('click', function () {
if (rand == 0 && arrow.classList.contains("fa-arrow-up")) {
console.log('correct')How to make a clickable function?
let arrows = document.querySelectorAll(‘.buttons .fa-solid’)
for (const arrow of arrows) {
arrow.addEventListener(‘click’, function () {
if (rand == 0 && arrow.classList.contains(“fa-arrow-up”)) {
console.log(‘correct’)
}
else if (rand == 1 && arrow.classList.contains(“fa-arrow-down”)) {
console.log(‘correct’)
}
else if (rand == 2 && arrow.classList.contains(“fa-arrow-left”)) {
console.log(‘correct’)
能不能把標誌當成字形
go to font-awesome
addEventListener可不可以幾個人同時聽著
可以
<h1>Dance Time: (Score: <span>0</span>)</h1>
為什麼使用span 而不用div
因為div 會去的下一行
<h1>Dance Time: (Score: <span>0</span>)</h1>
所以使用score = document.querySelector
後面的 Parameter要使用什麼?
let score = document.querySelector(‘#score’)
<h1>
Hello World
</h1>
Will it really have the color? Since style is inside
Yes, no problem. So I can want can be inside
Explain the difference of block element and inline element
Block Elements
The following tags organize the website into multiple sections of content:
<div> : The basic block level element which can be easily styled.
<ul> or </ul><ol> and <li> : ul is unordered list while ol is ordered list with number.
<p> : A tag specific for holding paragraph content
</p><hr></hr> : A horizontal separator.
: the header part for a webpage. Please don't mix this one with the tag.
: the footer part for a webpage.
: the navigation part for a webpage.
<h1>,<h2>,<h3>,<h4>,<h5> and <h6>: Headings with different level of weights. <h1> is the biggest and <h6> is the smallest.
Inline elements
Within the text, there are a lot of inline tags that allows developers to decorate the text for different features.
<span>: The most generic inline element that is usually used for styling purpose.
<a> : Link to external web page.
<b> : Bold text
<i> : italic text
<br></br> : Line breaker.</i></b></a></span></h6></h1></h6></h5></h4></h3></h2></h1></li></ol></div>
What is the purpose of ?
AJAX is the shorthand of Asynchronous Javascript and XML. The name is misleading because it has nothing to do with XML nowadays mostly even though it did in the beginning. The Asynchronous is crucial since it distinguishes the difference between the a synchronous HTTP Request and a asynchronous HTTP request.
What is the longhand of DOM
Document Object Model
In order to make our website interactive , we need to manipulate the Document Object Model as a result.
How to describe <span>?</span>
<span>: The most generic inline element that is usually used for styling purpose.</span>
How to describe <a>? </a>
<a> : Link to external web page.</a>
What is the purpose of ?
is for showing explanation text when javascript is disabled.
Without CSS styling, what are the bad things about html styling?
Inaccessible : Disabled people would find it difficult because the screen reader does not handle HTML based styling correctly.
Search engine unfriendly: Search engines like Google relies on syntactic and semantic meaning of our website . Extra, unnecessary attributes only hinders web crawlers’ ability to extract information from your webpage.
Not mobile responsive : HTML-based styling does not take mobile responsiveness in account.
What are the three ways to use CSS?
- Add linkage to a CSS file
- Using tag in the HTML tag
- [NOT RECOMMENDED] Using style attribute
You may put style=”color: #fff000” to any elements in the webpage. However, this is much more difficult to debug and maintain compared to the previous two solutions.
e.g.
<h1>
Chapter 1.
</h1>
in CSS, what is the difference of usage of ID and class
ID is for unique element, One ID should only be linked to one element. While class should be linked to multiple element.
In JS, using DOM selector for ID, will only get the first ID if there is two same ID. But in class, JS can get all the class.
<span> and , which is ususally box and which is usually text ? </span>
obvious la
border vs outline, which is better for debug and why
outline is better because it don’t change the actual size of item
How many px does 1 in have?
1in == 96px
According to Tacky Academy, what are the three principles to use CSS?
Principles
You have learned on a lot on the CSS rules and the behaviours of CSS, Here are some general principles that you need to adhere to when you are working with CSS.
No inline styling: You shouldn’t use inline-styling since it is usually preferable to put the CSS rule in separate CSS files.
HTML is for content only: Sometimes it is possible to use some HTML hacks to get the elements rendered in a certain manner. But it is generally recommended to avoid using HTML for styling.
CSS is for styling only: CSS is not a programming language nor a markup language. So it is not preferable to use CSS to try to display content or to embed any business logic within.
In below DOM selectors, we have two sets of methods. Which one should we use?
First one is: document.getElementById(id), document.getElementsByTagName(tagName).
document.getElementsByClassName(className)
Second is
document. querySelector(cssSelector)
document. querySelectorAll(cssSelector)
document. querySelector(cssSelector)
document. querySelectorAll(cssSelector)
Because of their flexibility and readability.
What the examples of DOM Events?
DOM Events are sent when something happens in the DOM elements. There are lots of different events existing. Some useful events are
Examples are ‘click’, ‘keydown’, ‘load’, ‘resize’, ‘submit’
Explain what is Global Event Handlers?
In DOM Events, there are predefined Global Event Handlers. For example, for the event click for an element, the method onclick will be called. As a result , we can add a customized event handler when the event click is sent.
<div>
</div>
// Using onclick
document.querySelector('#test').onclick = function(event){
// The event object contains the information about the event
console.log("Test is clicked!");
}
//-- OR --
document.querySelector('#test').addEventListener('click',function(event){
// The event object contains the information about the event
console.log("Test is clicked");
});
Tell me the two types of Global Events Handlers, using DOM Event ‘click’
- First example
document.querySelector('#test').onclick = function(event){
// The event object contains the information about the event
console.log("Test is clicked!");
- Second example
document.querySelector('#test').addEventListener('click',function(event){
// The event object contains the information about the event
console.log("Test is clicked");
InnerHTML is the properties of an element, please give other example ?
element.children
Returns a collection of an element’s child element (excluding text and comment nodes)
element.id
Sets or returns the value of the id attribute of an element
In methods of element such as element.addEventListener(),
element.removeEventListener()
Removes an event handler that has been attached with the addEventListener() method
element.querySelector()
Returns the first child element that matches a specified CSS selector(s) of an element
element.getAttribute()
Returns the specified attribute value of an element node
How can we set Event Listeners for multiple DOM elements,
You need to set a FOR loop, because in below example, listitems is an ARRAY
let listItems = document.querySelectorAll('#my-list .list-item');
for(let listItem of listItems){
listItem.addEventListener('click',function(event){
console.log(`${event.target} has been clicked!`);
})
}
How can we set Event Listeners for multiple DOM elements, there are two ways.
First way is not so good. is You need to set a FOR loop, because in below example, listitems is an ARRAY
let listItems = document.querySelectorAll('#my-list .list-item');
for(let listItem of listItems){
listItem.addEventListener('click',function(event){
console.log(`${event.target} has been clicked!`);
})
}
Second way is We can actually utilize the concept of Event Delegation which means that DOM events actually propagate from the child elements to parent elements.
document.querySelector(‘#my-list’).addEventListener(‘click’,function(event){
if(event.target && event.target.matches(‘.list-item’)){
console.log(${event.target} has been clicked!);
}
});
As you can see, we are setting the event listener, on the parent component only. It is also more efficient by comparison because we don’t have to set a separate event handler for each element.
What is onload?
Onload is a special event that runs in the very beginning when the page is finished loading. One page can only have one onload function.
window.onload = function(){
console.log(“This is message is going to be run when the page is first loaded.”)
}
Is AJAX supported by all browers? Why?
Basically all browsers nowadays support AJAX since it is necessary to run most of the web applications in the web.
What is the most fundamental way of using AJAX in browser?
is to use XMLHTTPRequest
What are the four steps of AJAX
- const req = new XMLHttpRequest() creates a request object which contains the information of the HTTP Request.
- req.addEventListener(‘load’,…) adds a handler for the load event which means the content is finished loading.
- req.open(“GET”,”https://www.tecky.io”) opens the connection to the website.
- req.send() sends the actual request.
when is prompt() used?
It is used only in brower JavaScript but not Node.js
what is npm in JavaScript?
Node Package Manager
How to prompt a question in Javascript?
step 0: install the module “prompt-sync” in Window Terminal.
First step: set a variable to require("prompt-sync")
const ps = require("prompt-sync")
then set another variable to const prompt = ps()
let name = prompt(“whatever sentence you like”)
how to make a string to upper case?
string.toUpperCase
