Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

CS50 flashcard > html and CSS > Flashcards

html and CSS Flashcards

1
Q

how to make the block of text to the middle by CSS

A

shorter method:
in {
margin: 10px auto;

longer method
margin-left: auto;
margin-right: auto

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

display : flex, What is the difference of:

jusify-content: center;
align-items: center;

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

flex: 1
或者
flex: 2
有什麼用途

A

代表所占份額

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

height: auto 有什麼用途

A

會根據裡面的內容放大放小

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

margin: 10px 20px 30px 40px ;
margin: 10px 20px;
margin: 20px;
margin: 10px 20px 30px

方向是什麼

A

順時針, 上右下左

第1個是上下, 這個是左右

4個方向都是

上 左右 下

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

比較margin and padding 的異同

padding: 10px

A

Margin是box 外面, padding 是 box 裡面的東西跟box邊緣的距離

運作的方向跟margin一模一樣

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

border: solid 1px #000000

什麼意思

A

加一條黑線

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

have display: flex; and without it, what’s the difference?

打橫直下?

A

have display: flex; 打橫嚮右

without it,直下

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

flex-wrap: wrap;

A

box 如果空間不足放裡面的item, 又不想item變形, 用這個item 會往下一行下一行的排列

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

what is the default of justify-content: ????

A

justify-content:flex-start;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

justify-content: space-betwenn;

A

II

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

@media screen and (max-width: 480px){

}

A

一般手機的size 不會超過 480px.

如果不超過的話就會執行花括號

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Can we just the flex direction?

A

yes, just :

flex-direction: column;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

relationship of flex direction?, justify-content, align-items?

A

flex-direction; will determine it,

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

如果我要把margin 變成0, 但在於itemi寫了零又變不到, 通常怎麼做

A

在於style , 裡面設置mirgin: 0;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

為什麼標題最好使用h1

A

因為這是給搜索引擎看的

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

in display: flex; , what can I just use taxt-align: center; in other text?

A

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?)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

one of the usage of flex : 1?

A

If I want two items in one box, One item in the middle and one item on the right side,

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

如何弄一個hyper link

A

<a>資料來源醫管局</a>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

如何令hyper link消失

A

a {
text-decoration: none;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

whats da use of <br></br>

A

next line

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

how to type < and > in form of text in CSS?

A

you just <p>< 1 小時</p> (less than)

&gt = greater than

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

what does it mean by an item having

width: 50%?

A

the item 佔用某個方向一半的頁面

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

do CSS accepts decimal?

A

sometimes YES

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

how to make 圓角 box

A

border-radius: 20px;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

box-sizing: border-box;

有什麼用

A

The box-sizing CSS property sets how the total width and height of an element is calculated.

主要是有時候因為使用了padding, 導致邊界過大

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

position: relative;
top: 50px;
left: 50px;

有什麼用

A

不影響其他item, 直接移動item

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

position: absolute;
top: 50px;
left: 510px;

有什麼用

A

沒有了自己在flex的位置, 死死的鎖著

相對於上一個element’s position 的位置`

如果上一個element’s position , positon: static;
則代表 item 離上方邊緣50px

如果上一個element’s position , positon: relative;
則代表 item 離上一個element上方邊緣50px

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

position: fixed;
有什麼用

position: sticky;
top: 0px;

A

完全fix在 頁面某個位置, 最簡單, 沒有relative

position: sticky; 一般用來可以動, 那就黏住上方

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

How to tune two objects at the same time in style?

A

.itemA, .itemB{

}

31
Q

how to insert image?

A

<img></img>

32
Q

What is *

A
  • is wild card, which means apply to all

if I say

div * (HAVE SPACE)
, which means apply to all in element div

33
Q

how to insert Javascript?

A

inside , just open .

Then you can start to write JS code.

34
Q

is web Javascript and Node.JS the same?

A

No, some functions cannot be run in Node.JS

35
Q 
let count = document.querySelector('span')
是什麼
A

抽span 這個element

36
Q 
const clock = document.querySelector('div')
clock.innerHTML = "fuck you"

有什麼用

A

指向一個 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.

37
Q

What to do if you want to get image online

A

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

38
Q

How to make querySelectoreAll to assign multiple class?

A 
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')
39
Q

How to make a clickable function?

A

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’)

40
Q

能不能把標誌當成字形

A

go to font-awesome

41
Q

addEventListener可不可以幾個人同時聽著

A

可以

42
Q

<h1>Dance Time: (Score: <span>0</span>)</h1>

為什麼使用span 而不用div

A

因為div 會去的下一行

43
Q

<h1>Dance Time: (Score: <span>0</span>)</h1>

所以使用score = document.querySelector

後面的 Parameter要使用什麼?

A

let score = document.querySelector(‘#score’)

44
Q

<h1>
Hello World
</h1>

Will it really have the color? Since style is inside

A

Yes, no problem. So I can want can be inside

45
Q

Explain the difference of block element and inline element

A

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>

46
Q

What is the purpose of ?

A

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.

47
Q

What is the longhand of DOM

A

Document Object Model

In order to make our website interactive , we need to manipulate the Document Object Model as a result.

48
Q

How to describe <span>?</span>

A

<span>: The most generic inline element that is usually used for styling purpose.</span>

49
Q

How to describe <a>? </a>

A

<a> : Link to external web page.</a>

50
Q

What is the purpose of ?

A

is for showing explanation text when javascript is disabled.

51
Q

Without CSS styling, what are the bad things about html styling?

A

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.

52
Q

What are the three ways to use CSS?

A
  1. Add linkage to a CSS file
  2. Using tag in the HTML tag
  3. [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>

53
Q

in CSS, what is the difference of usage of ID and class

A

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.

54
Q

<span> and , which is ususally box and which is usually text ? </span>

A

obvious la

55
Q

border vs outline, which is better for debug and why

A

outline is better because it don’t change the actual size of item

56
Q

How many px does 1 in have?

A

1in == 96px

57
Q

According to Tacky Academy, what are the three principles to use CSS?

A

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.

58
Q

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)

A

document. querySelector(cssSelector)
document. querySelectorAll(cssSelector)

Because of their flexibility and readability.

59
Q

What the examples of DOM Events?

A

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’

60
Q

Explain what is Global Event Handlers?

A

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");
});
61
Q

Tell me the two types of Global Events Handlers, using DOM Event ‘click’

A
  1. First example
document.querySelector('#test').onclick = function(event){ 
    // The event object contains the information about the event
    console.log("Test is clicked!");
  1. Second example
document.querySelector('#test').addEventListener('click',function(event){
    // The event object contains the information about the event
    console.log("Test is clicked");
62
Q

InnerHTML is the properties of an element, please give other example ?

A

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

63
Q

In methods of element such as element.addEventListener(),

A

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

64
Q

How can we set Event Listeners for multiple DOM elements,

A

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!`);
    })
}
65
Q

How can we set Event Listeners for multiple DOM elements, there are two ways.

A

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.

66
Q

What is onload?

A

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.”)
}

67
Q

Is AJAX supported by all browers? Why?

A

Basically all browsers nowadays support AJAX since it is necessary to run most of the web applications in the web.

68
Q

What is the most fundamental way of using AJAX in browser?

A

is to use XMLHTTPRequest

69
Q

What are the four steps of AJAX

A
  1. const req = new XMLHttpRequest() creates a request object which contains the information of the HTTP Request.
  2. req.addEventListener(‘load’,…) adds a handler for the load event which means the content is finished loading.
  3. req.open(“GET”,”https://www.tecky.io”) opens the connection to the website.
  4. req.send() sends the actual request.
70
Q

when is prompt() used?

A

It is used only in brower JavaScript but not Node.js

71
Q

what is npm in JavaScript?

A

Node Package Manager

72
Q

How to prompt a question in Javascript?

A

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”)

73
Q

how to make a string to upper case?

A

string.toUpperCase

CS50 flashcard (11 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions